diff options
author | Markus Hatvan <markus_hatvan@aon.at> | 2021-10-14 23:32:05 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-10-15 03:02:05 +0530 |
commit | 137555821f172e4eadc7cf099d4270ae8fc1374e (patch) | |
tree | 693882bbf7a6b2a24b5a727091d09586d0371007 /src/components | |
parent | New translations en-US.json (Spanish) (#2072) (diff) | |
download | ferdium-app-137555821f172e4eadc7cf099d4270ae8fc1374e.tar.gz ferdium-app-137555821f172e4eadc7cf099d4270ae8fc1374e.tar.zst ferdium-app-137555821f172e4eadc7cf099d4270ae8fc1374e.zip |
chore: convert components to tsx (#2071)
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/ui/FAB.js | 65 | ||||
-rw-r--r-- | src/components/ui/FAB.tsx | 51 | ||||
-rw-r--r-- | src/components/ui/ImageUpload.tsx (renamed from src/components/ui/ImageUpload.js) | 26 | ||||
-rw-r--r-- | src/components/ui/Loader.tsx (renamed from src/components/ui/Loader.js) | 32 | ||||
-rw-r--r-- | src/components/ui/Radio.tsx (renamed from src/components/ui/Radio.js) | 19 | ||||
-rw-r--r-- | src/components/ui/SearchInput.tsx (renamed from src/components/ui/SearchInput.js) | 40 |
6 files changed, 105 insertions, 128 deletions
diff --git a/src/components/ui/FAB.js b/src/components/ui/FAB.js deleted file mode 100644 index 55fe97e82..000000000 --- a/src/components/ui/FAB.js +++ /dev/null | |||
@@ -1,65 +0,0 @@ | |||
1 | /** | ||
2 | * Floating Action Button (FAB) | ||
3 | */ | ||
4 | import { Component } from 'react'; | ||
5 | import PropTypes from 'prop-types'; | ||
6 | import { observer } from 'mobx-react'; | ||
7 | import classnames from 'classnames'; | ||
8 | |||
9 | import { oneOrManyChildElements } from '../../prop-types'; | ||
10 | |||
11 | @observer | ||
12 | class Button extends Component { | ||
13 | static propTypes = { | ||
14 | className: PropTypes.string, | ||
15 | disabled: PropTypes.bool, | ||
16 | onClick: PropTypes.func, | ||
17 | type: PropTypes.string, | ||
18 | children: oneOrManyChildElements.isRequired, | ||
19 | htmlForm: PropTypes.string, | ||
20 | }; | ||
21 | |||
22 | static defaultProps = { | ||
23 | className: null, | ||
24 | disabled: false, | ||
25 | onClick: () => {}, | ||
26 | type: 'button', | ||
27 | htmlForm: '', | ||
28 | }; | ||
29 | |||
30 | element = null; | ||
31 | |||
32 | render() { | ||
33 | const { className, disabled, onClick, type, children, htmlForm } = | ||
34 | this.props; | ||
35 | |||
36 | const buttonProps = { | ||
37 | className: classnames({ | ||
38 | ferdi__fab: true, | ||
39 | [`${className}`]: className, | ||
40 | }), | ||
41 | type, | ||
42 | }; | ||
43 | |||
44 | if (disabled) { | ||
45 | buttonProps.disabled = true; | ||
46 | } | ||
47 | |||
48 | if (onClick) { | ||
49 | buttonProps.onClick = onClick; | ||
50 | } | ||
51 | |||
52 | if (htmlForm) { | ||
53 | buttonProps.form = htmlForm; | ||
54 | } | ||
55 | |||
56 | return ( | ||
57 | // disabling rule as button has type defined in `buttonProps` | ||
58 | <button {...buttonProps} type="button"> | ||
59 | {children} | ||
60 | </button> | ||
61 | ); | ||
62 | } | ||
63 | } | ||
64 | |||
65 | export default Button; | ||
diff --git a/src/components/ui/FAB.tsx b/src/components/ui/FAB.tsx new file mode 100644 index 000000000..583c9d556 --- /dev/null +++ b/src/components/ui/FAB.tsx | |||
@@ -0,0 +1,51 @@ | |||
1 | /** | ||
2 | * Floating Action Button (FAB) | ||
3 | */ | ||
4 | import { Component, ReactChildren } from 'react'; | ||
5 | import { observer } from 'mobx-react'; | ||
6 | import classnames from 'classnames'; | ||
7 | |||
8 | type Props = { | ||
9 | className: string; | ||
10 | disabled: boolean; | ||
11 | onClick: () => void; | ||
12 | type: string; | ||
13 | children: ReactChildren; | ||
14 | htmlForm: string; | ||
15 | }; | ||
16 | |||
17 | @observer | ||
18 | class Button extends Component<Props> { | ||
19 | static defaultProps = { | ||
20 | disabled: false, | ||
21 | onClick: () => {}, | ||
22 | type: 'button', | ||
23 | htmlForm: '', | ||
24 | }; | ||
25 | |||
26 | element = null; | ||
27 | |||
28 | render() { | ||
29 | const { className, disabled, onClick, type, children, htmlForm } = | ||
30 | this.props; | ||
31 | |||
32 | const buttonProps = { | ||
33 | className: classnames({ | ||
34 | ferdi__fab: true, | ||
35 | [`${className}`]: className, | ||
36 | }), | ||
37 | type, | ||
38 | disabled, | ||
39 | onClick, | ||
40 | form: htmlForm, | ||
41 | }; | ||
42 | |||
43 | return ( | ||
44 | <button {...buttonProps} type="button"> | ||
45 | {children} | ||
46 | </button> | ||
47 | ); | ||
48 | } | ||
49 | } | ||
50 | |||
51 | export default Button; | ||
diff --git a/src/components/ui/ImageUpload.js b/src/components/ui/ImageUpload.tsx index c51d39a9b..4b25be502 100644 --- a/src/components/ui/ImageUpload.js +++ b/src/components/ui/ImageUpload.tsx | |||
@@ -1,23 +1,21 @@ | |||
1 | import { Component, Fragment } from 'react'; | 1 | import { Component } from 'react'; |
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | 2 | import { observer } from 'mobx-react'; |
4 | import { Field } from 'mobx-react-form'; | 3 | import { Field } from 'mobx-react-form'; |
5 | import classnames from 'classnames'; | 4 | import classnames from 'classnames'; |
6 | import Dropzone from 'react-dropzone'; | 5 | import Dropzone, { DropzoneRef } from 'react-dropzone'; |
7 | import { isWindows } from '../../environment'; | 6 | import { isWindows } from '../../environment'; |
8 | 7 | ||
9 | @observer | 8 | type Props = { |
10 | class ImageUpload extends Component { | 9 | field: typeof Field; |
11 | static propTypes = { | 10 | className: string; |
12 | field: PropTypes.instanceOf(Field).isRequired, | 11 | multiple: boolean; |
13 | className: PropTypes.string, | 12 | textDelete: string; |
14 | multiple: PropTypes.bool, | 13 | textUpload: string; |
15 | textDelete: PropTypes.string.isRequired, | 14 | }; |
16 | textUpload: PropTypes.string.isRequired, | ||
17 | }; | ||
18 | 15 | ||
16 | @observer | ||
17 | class ImageUpload extends Component<Props> { | ||
19 | static defaultProps = { | 18 | static defaultProps = { |
20 | className: null, | ||
21 | multiple: false, | 19 | multiple: false, |
22 | }; | 20 | }; |
23 | 21 | ||
@@ -25,7 +23,7 @@ class ImageUpload extends Component { | |||
25 | path: null, | 23 | path: null, |
26 | }; | 24 | }; |
27 | 25 | ||
28 | dropzoneRef = null; | 26 | dropzoneRef: DropzoneRef | null = null; |
29 | 27 | ||
30 | onDrop(acceptedFiles) { | 28 | onDrop(acceptedFiles) { |
31 | const { field } = this.props; | 29 | const { field } = this.props; |
diff --git a/src/components/ui/Loader.js b/src/components/ui/Loader.tsx index 71c6b9552..1173c11e7 100644 --- a/src/components/ui/Loader.js +++ b/src/components/ui/Loader.tsx | |||
@@ -1,31 +1,22 @@ | |||
1 | import { Component } from 'react'; | 1 | import { Component, ReactChildren } from 'react'; |
2 | import { observer, inject } from 'mobx-react'; | 2 | import { observer, inject } from 'mobx-react'; |
3 | import PropTypes from 'prop-types'; | ||
4 | import Loader from 'react-loader'; | 3 | import Loader from 'react-loader'; |
5 | 4 | ||
6 | import { oneOrManyChildElements } from '../../prop-types'; | 5 | import { FerdiStores } from '../../stores.types'; |
6 | |||
7 | type Props = { | ||
8 | children: ReactChildren; | ||
9 | loaded: boolean; | ||
10 | className: string; | ||
11 | color: string; | ||
12 | stores: FerdiStores; | ||
13 | }; | ||
7 | 14 | ||
8 | @inject('stores') | 15 | @inject('stores') |
9 | @observer | 16 | @observer |
10 | class LoaderComponent extends Component { | 17 | class LoaderComponent extends Component<Props> { |
11 | static propTypes = { | ||
12 | children: oneOrManyChildElements, | ||
13 | loaded: PropTypes.bool, | ||
14 | className: PropTypes.string, | ||
15 | color: PropTypes.string, | ||
16 | stores: PropTypes.shape({ | ||
17 | settings: PropTypes.shape({ | ||
18 | app: PropTypes.shape({ | ||
19 | accentColor: PropTypes.string.isRequired, | ||
20 | }).isRequired, | ||
21 | }).isRequired, | ||
22 | }).isRequired, | ||
23 | }; | ||
24 | |||
25 | static defaultProps = { | 18 | static defaultProps = { |
26 | children: null, | ||
27 | loaded: false, | 19 | loaded: false, |
28 | className: '', | ||
29 | color: 'ACCENT', | 20 | color: 'ACCENT', |
30 | }; | 21 | }; |
31 | 22 | ||
@@ -40,7 +31,6 @@ class LoaderComponent extends Component { | |||
40 | return ( | 31 | return ( |
41 | <Loader | 32 | <Loader |
42 | loaded={loaded} | 33 | loaded={loaded} |
43 | // lines={10} | ||
44 | width={4} | 34 | width={4} |
45 | scale={0.6} | 35 | scale={0.6} |
46 | color={color} | 36 | color={color} |
diff --git a/src/components/ui/Radio.js b/src/components/ui/Radio.tsx index 5354dbfe1..594ea70e4 100644 --- a/src/components/ui/Radio.js +++ b/src/components/ui/Radio.tsx | |||
@@ -1,20 +1,18 @@ | |||
1 | import { Component } from 'react'; | 1 | import { Component } from 'react'; |
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | 2 | import { observer } from 'mobx-react'; |
4 | import { Field } from 'mobx-react-form'; | 3 | import { Field } from 'mobx-react-form'; |
5 | import classnames from 'classnames'; | 4 | import classnames from 'classnames'; |
6 | 5 | ||
7 | @observer | 6 | type Props = { |
8 | class Radio extends Component { | 7 | field: typeof Field; |
9 | static propTypes = { | 8 | className: string; |
10 | field: PropTypes.instanceOf(Field).isRequired, | 9 | focus: boolean; |
11 | className: PropTypes.string, | 10 | showLabel: boolean; |
12 | focus: PropTypes.bool, | 11 | }; |
13 | showLabel: PropTypes.bool, | ||
14 | }; | ||
15 | 12 | ||
13 | @observer | ||
14 | class Radio extends Component<Props> { | ||
16 | static defaultProps = { | 15 | static defaultProps = { |
17 | className: null, | ||
18 | focus: false, | 16 | focus: false, |
19 | showLabel: true, | 17 | showLabel: true, |
20 | }; | 18 | }; |
@@ -28,6 +26,7 @@ class Radio extends Component { | |||
28 | } | 26 | } |
29 | 27 | ||
30 | focus() { | 28 | focus() { |
29 | // @ts-expect-error Object is possibly 'null'. | ||
31 | this.inputElement.focus(); | 30 | this.inputElement.focus(); |
32 | } | 31 | } |
33 | 32 | ||
diff --git a/src/components/ui/SearchInput.js b/src/components/ui/SearchInput.tsx index 2e8793a2b..af55b0e11 100644 --- a/src/components/ui/SearchInput.js +++ b/src/components/ui/SearchInput.tsx | |||
@@ -1,23 +1,22 @@ | |||
1 | import { Component } from 'react'; | 1 | import { ChangeEvent, Component } from 'react'; |
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | 2 | import { observer } from 'mobx-react'; |
4 | import classnames from 'classnames'; | 3 | import classnames from 'classnames'; |
5 | import { debounce } from 'lodash'; | 4 | import { debounce } from 'lodash'; |
6 | 5 | ||
7 | @observer | 6 | type Props = { |
8 | class SearchInput extends Component { | 7 | value: string; |
9 | static propTypes = { | 8 | placeholder: string; |
10 | value: PropTypes.string, | 9 | className: string; |
11 | placeholder: PropTypes.string, | 10 | onChange: (e: ChangeEvent<HTMLInputElement>) => void; |
12 | className: PropTypes.string, | 11 | onReset: () => void; |
13 | onChange: PropTypes.func, | 12 | name: string; |
14 | onReset: PropTypes.func, | 13 | throttle: boolean; |
15 | name: PropTypes.string, | 14 | throttleDelay: number; |
16 | throttle: PropTypes.bool, | 15 | autoFocus: boolean; |
17 | throttleDelay: PropTypes.number, | 16 | }; |
18 | autoFocus: PropTypes.bool, | ||
19 | }; | ||
20 | 17 | ||
18 | @observer | ||
19 | class SearchInput extends Component<Props> { | ||
21 | static defaultProps = { | 20 | static defaultProps = { |
22 | value: '', | 21 | value: '', |
23 | placeholder: '', | 22 | placeholder: '', |
@@ -32,7 +31,7 @@ class SearchInput extends Component { | |||
32 | 31 | ||
33 | input = null; | 32 | input = null; |
34 | 33 | ||
35 | constructor(props) { | 34 | constructor(props: Props) { |
36 | super(props); | 35 | super(props); |
37 | 36 | ||
38 | this.state = { | 37 | this.state = { |
@@ -49,24 +48,27 @@ class SearchInput extends Component { | |||
49 | const { autoFocus } = this.props; | 48 | const { autoFocus } = this.props; |
50 | 49 | ||
51 | if (autoFocus) { | 50 | if (autoFocus) { |
51 | // @ts-expect-error Object is possibly 'null'. | ||
52 | this.input.focus(); | 52 | this.input.focus(); |
53 | } | 53 | } |
54 | } | 54 | } |
55 | 55 | ||
56 | onChange(e) { | 56 | onChange(e: ChangeEvent<HTMLInputElement>) { |
57 | const { throttle, onChange } = this.props; | 57 | const { throttle, onChange } = this.props; |
58 | const { value } = e.target; | 58 | const { value } = e.target; |
59 | this.setState({ value }); | 59 | this.setState({ value }); |
60 | 60 | ||
61 | if (throttle) { | 61 | if (throttle) { |
62 | e.persist(); | 62 | e.persist(); |
63 | // @ts-expect-error Argument of type 'string' is not assignable to parameter of type 'ChangeEvent<HTMLInputElement>'. | ||
63 | this.throttledOnChange(value); | 64 | this.throttledOnChange(value); |
64 | } else { | 65 | } else { |
66 | // @ts-expect-error Argument of type 'string' is not assignable to parameter of type 'ChangeEvent<HTMLInputElement>'. | ||
65 | onChange(value); | 67 | onChange(value); |
66 | } | 68 | } |
67 | } | 69 | } |
68 | 70 | ||
69 | throttledOnChange(e) { | 71 | throttledOnChange(e: ChangeEvent<HTMLInputElement>) { |
70 | const { onChange } = this.props; | 72 | const { onChange } = this.props; |
71 | 73 | ||
72 | onChange(e); | 74 | onChange(e); |
@@ -81,6 +83,7 @@ class SearchInput extends Component { | |||
81 | 83 | ||
82 | render() { | 84 | render() { |
83 | const { className, name, placeholder } = this.props; | 85 | const { className, name, placeholder } = this.props; |
86 | // @ts-expect-error Property 'value' does not exist on type 'Readonly<{}>'. | ||
84 | const { value } = this.state; | 87 | const { value } = this.state; |
85 | 88 | ||
86 | return ( | 89 | return ( |
@@ -94,6 +97,7 @@ class SearchInput extends Component { | |||
94 | value={value} | 97 | value={value} |
95 | onChange={e => this.onChange(e)} | 98 | onChange={e => this.onChange(e)} |
96 | ref={ref => { | 99 | ref={ref => { |
100 | // @ts-expect-error Type 'HTMLInputElement | null' is not assignable to type 'null'. | ||
97 | this.input = ref; | 101 | this.input = ref; |
98 | }} | 102 | }} |
99 | /> | 103 | /> |