diff options
-rw-r--r-- | src/components/ui/Button.js | 95 | ||||
-rw-r--r-- | src/components/ui/Button.tsx | 73 |
2 files changed, 95 insertions, 73 deletions
diff --git a/src/components/ui/Button.js b/src/components/ui/Button.js new file mode 100644 index 000000000..67c801d98 --- /dev/null +++ b/src/components/ui/Button.js | |||
@@ -0,0 +1,95 @@ | |||
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 deleted file mode 100644 index aac080fda..000000000 --- a/src/components/ui/Button.tsx +++ /dev/null | |||
@@ -1,73 +0,0 @@ | |||
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; | ||