diff options
Diffstat (limited to 'src/components/ui/FAB.tsx')
-rw-r--r-- | src/components/ui/FAB.tsx | 51 |
1 files changed, 51 insertions, 0 deletions
diff --git a/src/components/ui/FAB.tsx b/src/components/ui/FAB.tsx new file mode 100644 index 000000000..583c9d556 --- /dev/null +++ b/src/components/ui/FAB.tsx | |||
@@ -0,0 +1,51 @@ | |||
1 | /** | ||
2 | * Floating Action Button (FAB) | ||
3 | */ | ||
4 | import { Component, ReactChildren } from 'react'; | ||
5 | import { observer } from 'mobx-react'; | ||
6 | import classnames from 'classnames'; | ||
7 | |||
8 | type Props = { | ||
9 | className: string; | ||
10 | disabled: boolean; | ||
11 | onClick: () => void; | ||
12 | type: string; | ||
13 | children: ReactChildren; | ||
14 | htmlForm: string; | ||
15 | }; | ||
16 | |||
17 | @observer | ||
18 | class Button extends Component<Props> { | ||
19 | static defaultProps = { | ||
20 | disabled: false, | ||
21 | onClick: () => {}, | ||
22 | type: 'button', | ||
23 | htmlForm: '', | ||
24 | }; | ||
25 | |||
26 | element = null; | ||
27 | |||
28 | render() { | ||
29 | const { className, disabled, onClick, type, children, htmlForm } = | ||
30 | this.props; | ||
31 | |||
32 | const buttonProps = { | ||
33 | className: classnames({ | ||
34 | ferdi__fab: true, | ||
35 | [`${className}`]: className, | ||
36 | }), | ||
37 | type, | ||
38 | disabled, | ||
39 | onClick, | ||
40 | form: htmlForm, | ||
41 | }; | ||
42 | |||
43 | return ( | ||
44 | <button {...buttonProps} type="button"> | ||
45 | {children} | ||
46 | </button> | ||
47 | ); | ||
48 | } | ||
49 | } | ||
50 | |||
51 | export default Button; | ||