diff options
Diffstat (limited to 'src/components/ui/FAB.js')
-rw-r--r-- | src/components/ui/FAB.js | 72 |
1 files changed, 72 insertions, 0 deletions
diff --git a/src/components/ui/FAB.js b/src/components/ui/FAB.js new file mode 100644 index 000000000..9359a3c6c --- /dev/null +++ b/src/components/ui/FAB.js | |||
@@ -0,0 +1,72 @@ | |||
1 | /** | ||
2 | * Floating Action Button (FAB) | ||
3 | */ | ||
4 | import React, { Component } from 'react'; | ||
5 | import PropTypes from 'prop-types'; | ||
6 | import { observer, inject } from 'mobx-react'; | ||
7 | import classnames from 'classnames'; | ||
8 | |||
9 | export default @inject('stores') @observer class Button extends Component { | ||
10 | static propTypes = { | ||
11 | className: PropTypes.string, | ||
12 | disabled: PropTypes.bool, | ||
13 | onClick: PropTypes.func, | ||
14 | type: PropTypes.string, | ||
15 | htmlForm: PropTypes.string, | ||
16 | stores: PropTypes.shape({ | ||
17 | settings: PropTypes.shape({ | ||
18 | app: PropTypes.shape({ | ||
19 | accentColor: PropTypes.string.isRequired, | ||
20 | }).isRequired, | ||
21 | }).isRequired, | ||
22 | }).isRequired, | ||
23 | }; | ||
24 | |||
25 | static defaultProps = { | ||
26 | className: null, | ||
27 | disabled: false, | ||
28 | onClick: () => { }, | ||
29 | type: 'button', | ||
30 | htmlForm: '', | ||
31 | }; | ||
32 | |||
33 | element = null; | ||
34 | |||
35 | render() { | ||
36 | const { | ||
37 | className, | ||
38 | disabled, | ||
39 | onClick, | ||
40 | type, | ||
41 | children, | ||
42 | htmlForm, | ||
43 | } = this.props; | ||
44 | |||
45 | const buttonProps = { | ||
46 | className: classnames({ | ||
47 | ferdi__fab: true, | ||
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 | // disabling rule as button has type defined in `buttonProps` | ||
67 | <button {...buttonProps} type="button"> | ||
68 | {children} | ||
69 | </button> | ||
70 | ); | ||
71 | } | ||
72 | } | ||