diff options
author | 2020-06-21 09:19:59 +0200 | |
---|---|---|
committer | 2020-06-21 12:49:59 +0530 | |
commit | 0d6d623d1e34cdbff2d46229165b49289a9a0619 (patch) | |
tree | 83f6a22a08e354da58adf3ed0393f4d39bca6124 /src/components/ui/FAB.js | |
parent | Prepare and Release/5.6.0 beta.1 (#820) (diff) | |
download | ferdium-app-0d6d623d1e34cdbff2d46229165b49289a9a0619.tar.gz ferdium-app-0d6d623d1e34cdbff2d46229165b49289a9a0619.tar.zst ferdium-app-0d6d623d1e34cdbff2d46229165b49289a9a0619.zip |
Add FAB to service dashboard (#824)
* Implement #387
* Fix lint
* Upgrade to Electron 9
* Remove dependency on electron-spellchecker
* Allow multiple languages to be selected
* Fix lint
* Don't show spellchecker language chooser for macOS
* Fix _requireAuthenticatedUser throwing error on startup
* Add FAB
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 | } | ||