diff options
author | Stefan Malzner <stefan@adlk.io> | 2017-10-13 12:29:40 +0200 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2017-10-13 12:29:40 +0200 |
commit | 58cda9cc7fb79ca9df6746de7f9662bc08dc156a (patch) | |
tree | 1211600c2a5d3b5f81c435c6896618111a611720 /src/components/ui/Button.js | |
download | ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.tar.gz ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.tar.zst ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.zip |
initial commit
Diffstat (limited to 'src/components/ui/Button.js')
-rw-r--r-- | src/components/ui/Button.js | 78 |
1 files changed, 78 insertions, 0 deletions
diff --git a/src/components/ui/Button.js b/src/components/ui/Button.js new file mode 100644 index 000000000..07e94192f --- /dev/null +++ b/src/components/ui/Button.js | |||
@@ -0,0 +1,78 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import Loader from 'react-loader'; | ||
5 | import classnames from 'classnames'; | ||
6 | |||
7 | @observer | ||
8 | export default 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 | }; | ||
19 | |||
20 | static defaultProps = { | ||
21 | className: null, | ||
22 | disabled: false, | ||
23 | onClick: () => {}, | ||
24 | type: 'button', | ||
25 | buttonType: '', | ||
26 | loaded: true, | ||
27 | htmlForm: '', | ||
28 | }; | ||
29 | |||
30 | element = null; | ||
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 | const buttonProps = { | ||
45 | className: classnames({ | ||
46 | 'franz-form__button': true, | ||
47 | [`franz-form__button--${buttonType}`]: buttonType, | ||
48 | [`${className}`]: className, | ||
49 | }), | ||
50 | type, | ||
51 | }; | ||
52 | |||
53 | if (disabled) { | ||
54 | buttonProps.disabled = true; | ||
55 | } | ||
56 | |||
57 | if (onClick) { | ||
58 | buttonProps.onClick = onClick; | ||
59 | } | ||
60 | |||
61 | if (htmlForm) { | ||
62 | buttonProps.form = htmlForm; | ||
63 | } | ||
64 | |||
65 | return ( | ||
66 | <button {...buttonProps}> | ||
67 | <Loader | ||
68 | loaded={loaded} | ||
69 | lines={10} | ||
70 | scale={0.4} | ||
71 | color={buttonType === '' ? '#FFF' : '#373a3c'} | ||
72 | component="span" | ||
73 | /> | ||
74 | {label} | ||
75 | </button> | ||
76 | ); | ||
77 | } | ||
78 | } | ||