diff options
author | 2021-10-14 13:24:58 +0200 | |
---|---|---|
committer | 2021-10-14 13:24:58 +0200 | |
commit | fe1ba2ad6affeb6c0e97c73171d8fa3f31dde73e (patch) | |
tree | 10caa332d957421e982c7ddd0c94623d5d62314d /src/components | |
parent | chore: convert various JS to TS (#2062) (diff) | |
download | ferdium-app-fe1ba2ad6affeb6c0e97c73171d8fa3f31dde73e.tar.gz ferdium-app-fe1ba2ad6affeb6c0e97c73171d8fa3f31dde73e.tar.zst ferdium-app-fe1ba2ad6affeb6c0e97c73171d8fa3f31dde73e.zip |
chore: convert files to TS (#2066)
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/ui/AppLoader/index.tsx (renamed from src/components/ui/AppLoader/index.js) | 23 | ||||
-rw-r--r-- | src/components/ui/Button.js | 95 | ||||
-rw-r--r-- | src/components/ui/Button.tsx | 73 | ||||
-rw-r--r-- | src/components/ui/FullscreenLoader/styles.ts (renamed from src/components/ui/FullscreenLoader/styles.js) | 0 | ||||
-rw-r--r-- | src/components/ui/Modal/index.tsx (renamed from src/components/ui/Modal/index.js) | 27 | ||||
-rw-r--r-- | src/components/ui/Modal/styles.ts (renamed from src/components/ui/Modal/styles.js) | 0 |
6 files changed, 97 insertions, 121 deletions
diff --git a/src/components/ui/AppLoader/index.js b/src/components/ui/AppLoader/index.tsx index e00960200..c7c290a57 100644 --- a/src/components/ui/AppLoader/index.js +++ b/src/components/ui/AppLoader/index.tsx | |||
@@ -1,5 +1,4 @@ | |||
1 | import { Component } from 'react'; | 1 | import { Component } from 'react'; |
2 | import PropTypes from 'prop-types'; | ||
3 | import injectSheet, { withTheme } from 'react-jss'; | 2 | import injectSheet, { withTheme } from 'react-jss'; |
4 | import classnames from 'classnames'; | 3 | import classnames from 'classnames'; |
5 | 4 | ||
@@ -19,15 +18,15 @@ const textList = shuffleArray([ | |||
19 | 'Fixing bugs', | 18 | 'Fixing bugs', |
20 | ]); | 19 | ]); |
21 | 20 | ||
21 | type Props = { | ||
22 | classes: typeof styles; | ||
23 | theme: any; | ||
24 | texts: string[]; | ||
25 | }; | ||
26 | |||
22 | @injectSheet(styles) | 27 | @injectSheet(styles) |
23 | @withTheme | 28 | @withTheme |
24 | class AppLoader extends Component { | 29 | class AppLoader extends Component<Props> { |
25 | static propTypes = { | ||
26 | classes: PropTypes.object.isRequired, | ||
27 | theme: PropTypes.object.isRequired, | ||
28 | texts: PropTypes.array, | ||
29 | }; | ||
30 | |||
31 | static defaultProps = { | 30 | static defaultProps = { |
32 | texts: textList, | 31 | texts: textList, |
33 | }; | 32 | }; |
@@ -36,18 +35,20 @@ class AppLoader extends Component { | |||
36 | step: 0, | 35 | step: 0, |
37 | }; | 36 | }; |
38 | 37 | ||
39 | interval = null; | 38 | interval: NodeJS.Timeout | null = null; |
40 | 39 | ||
41 | componentDidMount() { | 40 | componentDidMount() { |
42 | this.interval = setInterval(() => { | 41 | this.interval = setInterval(() => { |
43 | this.setState(prevState => ({ | 42 | this.setState((prevState: { step: number }) => ({ |
44 | step: prevState.step === textList.length - 1 ? 0 : prevState.step + 1, | 43 | step: prevState.step === textList.length - 1 ? 0 : prevState.step + 1, |
45 | })); | 44 | })); |
46 | }, 2500); | 45 | }, 2500); |
47 | } | 46 | } |
48 | 47 | ||
49 | componentWillUnmount() { | 48 | componentWillUnmount() { |
50 | clearInterval(this.interval); | 49 | if (this.interval) { |
50 | clearInterval(this.interval); | ||
51 | } | ||
51 | } | 52 | } |
52 | 53 | ||
53 | render() { | 54 | render() { |
diff --git a/src/components/ui/Button.js b/src/components/ui/Button.js deleted file mode 100644 index 67c801d98..000000000 --- a/src/components/ui/Button.js +++ /dev/null | |||
@@ -1,95 +0,0 @@ | |||
1 | import { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer, inject } from 'mobx-react'; | ||
4 | import Loader from 'react-loader'; | ||
5 | import classnames from 'classnames'; | ||
6 | |||
7 | @inject('stores') | ||
8 | @observer | ||
9 | class Button extends Component { | ||
10 | static propTypes = { | ||
11 | className: PropTypes.string, | ||
12 | label: PropTypes.string.isRequired, | ||
13 | disabled: PropTypes.bool, | ||
14 | onClick: PropTypes.func, | ||
15 | type: PropTypes.string, | ||
16 | buttonType: PropTypes.string, | ||
17 | loaded: PropTypes.bool, | ||
18 | htmlForm: PropTypes.string, | ||
19 | stores: PropTypes.shape({ | ||
20 | settings: PropTypes.shape({ | ||
21 | app: PropTypes.shape({ | ||
22 | accentColor: PropTypes.string.isRequired, | ||
23 | }).isRequired, | ||
24 | }).isRequired, | ||
25 | }).isRequired, | ||
26 | }; | ||
27 | |||
28 | static defaultProps = { | ||
29 | className: null, | ||
30 | disabled: false, | ||
31 | onClick: () => {}, | ||
32 | type: 'button', | ||
33 | buttonType: '', | ||
34 | loaded: true, | ||
35 | htmlForm: '', | ||
36 | }; | ||
37 | |||
38 | element = null; | ||
39 | |||
40 | render() { | ||
41 | const { | ||
42 | label, | ||
43 | className, | ||
44 | disabled, | ||
45 | onClick, | ||
46 | type, | ||
47 | buttonType, | ||
48 | loaded, | ||
49 | htmlForm, | ||
50 | } = this.props; | ||
51 | |||
52 | const buttonProps = { | ||
53 | className: classnames({ | ||
54 | 'franz-form__button': true, | ||
55 | [`franz-form__button--${buttonType}`]: buttonType, | ||
56 | [`${className}`]: className, | ||
57 | }), | ||
58 | type, | ||
59 | }; | ||
60 | |||
61 | if (disabled) { | ||
62 | buttonProps.disabled = true; | ||
63 | } | ||
64 | |||
65 | if (onClick) { | ||
66 | buttonProps.onClick = onClick; | ||
67 | } | ||
68 | |||
69 | if (htmlForm) { | ||
70 | buttonProps.form = htmlForm; | ||
71 | } | ||
72 | |||
73 | return ( | ||
74 | // disabling rule as button has type defined in `buttonProps` | ||
75 | /* eslint-disable react/button-has-type */ | ||
76 | <button {...buttonProps}> | ||
77 | <Loader | ||
78 | loaded={loaded} | ||
79 | lines={10} | ||
80 | scale={0.4} | ||
81 | color={ | ||
82 | buttonType !== 'secondary' | ||
83 | ? '#FFF' | ||
84 | : this.props.stores.settings.app.accentColor | ||
85 | } | ||
86 | component="span" | ||
87 | /> | ||
88 | {label} | ||
89 | </button> | ||
90 | /* eslint-enable react/button-has-type */ | ||
91 | ); | ||
92 | } | ||
93 | } | ||
94 | |||
95 | export default Button; | ||
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx new file mode 100644 index 000000000..aac080fda --- /dev/null +++ b/src/components/ui/Button.tsx | |||
@@ -0,0 +1,73 @@ | |||
1 | import { Component } from 'react'; | ||
2 | import { observer, inject } from 'mobx-react'; | ||
3 | import Loader from 'react-loader'; | ||
4 | import classnames from 'classnames'; | ||
5 | import { FerdiStores } from '../../stores.types'; | ||
6 | |||
7 | type Props = { | ||
8 | className: string; | ||
9 | label: string; | ||
10 | disabled: boolean; | ||
11 | onClick: () => void; | ||
12 | type: 'button' | 'submit' | 'reset'; | ||
13 | buttonType: string; | ||
14 | loaded: boolean; | ||
15 | htmlForm: string; | ||
16 | stores: FerdiStores; | ||
17 | }; | ||
18 | |||
19 | @inject('stores') | ||
20 | @observer | ||
21 | class Button extends Component<Props> { | ||
22 | static defaultProps = { | ||
23 | className: null, | ||
24 | disabled: false, | ||
25 | onClick: () => {}, | ||
26 | type: 'button', | ||
27 | buttonType: '', | ||
28 | loaded: true, | ||
29 | htmlForm: '', | ||
30 | }; | ||
31 | |||
32 | render() { | ||
33 | const { | ||
34 | label, | ||
35 | className, | ||
36 | disabled, | ||
37 | onClick, | ||
38 | type, | ||
39 | buttonType, | ||
40 | loaded, | ||
41 | htmlForm, | ||
42 | } = this.props; | ||
43 | |||
44 | return ( | ||
45 | <button | ||
46 | className={classnames({ | ||
47 | 'franz-form__button': true, | ||
48 | [`franz-form__button--${buttonType}`]: buttonType, | ||
49 | [`${className}`]: className, | ||
50 | })} | ||
51 | disabled={disabled} | ||
52 | type={type} | ||
53 | onClick={onClick} | ||
54 | form={htmlForm} | ||
55 | > | ||
56 | <Loader | ||
57 | loaded={loaded} | ||
58 | lines={10} | ||
59 | scale={0.4} | ||
60 | color={ | ||
61 | buttonType !== 'secondary' | ||
62 | ? '#FFF' | ||
63 | : this.props.stores.settings.app.accentColor | ||
64 | } | ||
65 | component="span" | ||
66 | /> | ||
67 | {label} | ||
68 | </button> | ||
69 | ); | ||
70 | } | ||
71 | } | ||
72 | |||
73 | export default Button; | ||
diff --git a/src/components/ui/FullscreenLoader/styles.js b/src/components/ui/FullscreenLoader/styles.ts index 64d24e4ce..64d24e4ce 100644 --- a/src/components/ui/FullscreenLoader/styles.js +++ b/src/components/ui/FullscreenLoader/styles.ts | |||
diff --git a/src/components/ui/Modal/index.js b/src/components/ui/Modal/index.tsx index c4e47748a..0bb0aaa61 100644 --- a/src/components/ui/Modal/index.js +++ b/src/components/ui/Modal/index.tsx | |||
@@ -1,6 +1,5 @@ | |||
1 | import { Component } from 'react'; | 1 | import { Component, ReactChildren } from 'react'; |
2 | import ReactModal from 'react-modal'; | 2 | import ReactModal from 'react-modal'; |
3 | import PropTypes from 'prop-types'; | ||
4 | import classnames from 'classnames'; | 3 | import classnames from 'classnames'; |
5 | import injectCSS from 'react-jss'; | 4 | import injectCSS from 'react-jss'; |
6 | import { Icon } from '@meetfranz/ui'; | 5 | import { Icon } from '@meetfranz/ui'; |
@@ -8,21 +7,19 @@ import { Icon } from '@meetfranz/ui'; | |||
8 | import { mdiClose } from '@mdi/js'; | 7 | import { mdiClose } from '@mdi/js'; |
9 | import styles from './styles'; | 8 | import styles from './styles'; |
10 | 9 | ||
11 | // ReactModal.setAppElement('#root'); | 10 | type Props = { |
11 | children: ReactChildren; | ||
12 | className: string; | ||
13 | classes: any; | ||
14 | isOpen: boolean; | ||
15 | portal: string; | ||
16 | close: () => void; | ||
17 | shouldCloseOnOverlayClick: boolean; | ||
18 | showClose: boolean; | ||
19 | }; | ||
12 | 20 | ||
13 | @injectCSS(styles) | 21 | @injectCSS(styles) |
14 | class Modal extends Component { | 22 | class Modal extends Component<Props> { |
15 | static propTypes = { | ||
16 | children: PropTypes.node.isRequired, | ||
17 | className: PropTypes.string, | ||
18 | classes: PropTypes.object.isRequired, | ||
19 | isOpen: PropTypes.bool.isRequired, | ||
20 | portal: PropTypes.string, | ||
21 | close: PropTypes.func.isRequired, | ||
22 | shouldCloseOnOverlayClick: PropTypes.bool, | ||
23 | showClose: PropTypes.bool, | ||
24 | }; | ||
25 | |||
26 | static defaultProps = { | 23 | static defaultProps = { |
27 | className: null, | 24 | className: null, |
28 | portal: 'modal-portal', | 25 | portal: 'modal-portal', |
diff --git a/src/components/ui/Modal/styles.js b/src/components/ui/Modal/styles.ts index f32c075ce..f32c075ce 100644 --- a/src/components/ui/Modal/styles.js +++ b/src/components/ui/Modal/styles.ts | |||