diff options
author | 2022-05-17 08:42:04 +0100 | |
---|---|---|
committer | 2022-05-17 06:09:18 -0500 | |
commit | 6eb5937039b4d416d2c0558d3f4b29783cc6d533 (patch) | |
tree | 887f3b76e08594df5daabc7c61306b61db896d22 /src/components/ui/Button.js | |
parent | 6.0.0-nightly.38 [skip ci] (diff) | |
download | ferdium-app-6eb5937039b4d416d2c0558d3f4b29783cc6d533.tar.gz ferdium-app-6eb5937039b4d416d2c0558d3f4b29783cc6d533.tar.zst ferdium-app-6eb5937039b4d416d2c0558d3f4b29783cc6d533.zip |
Revert "remove duplicate Button component"
This reverts commit bbde4a9d54d9c7dc03f34ca4113061a605dd5040.
Diffstat (limited to 'src/components/ui/Button.js')
-rw-r--r-- | src/components/ui/Button.js | 92 |
1 files changed, 92 insertions, 0 deletions
diff --git a/src/components/ui/Button.js b/src/components/ui/Button.js new file mode 100644 index 000000000..882b39e69 --- /dev/null +++ b/src/components/ui/Button.js | |||
@@ -0,0 +1,92 @@ | |||
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 | // Can this file be merged into the './/button/index.tsx' file? | ||
8 | class Button extends Component { | ||
9 | static propTypes = { | ||
10 | className: PropTypes.string, | ||
11 | label: PropTypes.string.isRequired, | ||
12 | disabled: PropTypes.bool, | ||
13 | onClick: PropTypes.func, | ||
14 | type: PropTypes.string, | ||
15 | buttonType: PropTypes.string, | ||
16 | loaded: PropTypes.bool, | ||
17 | htmlForm: PropTypes.string, | ||
18 | stores: PropTypes.shape({ | ||
19 | settings: PropTypes.shape({ | ||
20 | app: PropTypes.shape({ | ||
21 | accentColor: PropTypes.string.isRequired, | ||
22 | }).isRequired, | ||
23 | }).isRequired, | ||
24 | }).isRequired, | ||
25 | }; | ||
26 | |||
27 | static defaultProps = { | ||
28 | className: null, | ||
29 | disabled: false, | ||
30 | onClick: () => {}, | ||
31 | type: 'button', | ||
32 | buttonType: '', | ||
33 | loaded: true, | ||
34 | htmlForm: '', | ||
35 | }; | ||
36 | |||
37 | render() { | ||
38 | const { | ||
39 | label, | ||
40 | className, | ||
41 | disabled, | ||
42 | onClick, | ||
43 | type, | ||
44 | buttonType, | ||
45 | loaded, | ||
46 | htmlForm, | ||
47 | } = this.props; | ||
48 | |||
49 | const buttonProps = { | ||
50 | className: classnames({ | ||
51 | 'franz-form__button': true, | ||
52 | [`franz-form__button--${buttonType}`]: buttonType, | ||
53 | [`${className}`]: className, | ||
54 | }), | ||
55 | type, | ||
56 | }; | ||
57 | |||
58 | if (disabled) { | ||
59 | buttonProps.disabled = true; | ||
60 | } | ||
61 | |||
62 | if (onClick) { | ||
63 | buttonProps.onClick = onClick; | ||
64 | } | ||
65 | |||
66 | if (htmlForm) { | ||
67 | buttonProps.form = htmlForm; | ||
68 | } | ||
69 | |||
70 | return ( | ||
71 | // disabling rule as button has type defined in `buttonProps` | ||
72 | /* eslint-disable react/button-has-type */ | ||
73 | <button {...buttonProps}> | ||
74 | <Loader | ||
75 | loaded={loaded} | ||
76 | lines={10} | ||
77 | scale={0.4} | ||
78 | color={ | ||
79 | buttonType !== 'secondary' | ||
80 | ? '#FFF' | ||
81 | : this.props.stores.settings.app.accentColor | ||
82 | } | ||
83 | component="span" | ||
84 | /> | ||
85 | {label} | ||
86 | </button> | ||
87 | /* eslint-enable react/button-has-type */ | ||
88 | ); | ||
89 | } | ||
90 | } | ||
91 | |||
92 | export default inject('stores')(observer(Button)); | ||