diff options
Diffstat (limited to 'src/components/ui/Button.tsx')
-rw-r--r-- | src/components/ui/Button.tsx | 73 |
1 files changed, 73 insertions, 0 deletions
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; | ||