diff options
author | Bennett <hello@vantezzen.io> | 2020-06-21 09:19:59 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-06-21 12:49:59 +0530 |
commit | 0d6d623d1e34cdbff2d46229165b49289a9a0619 (patch) | |
tree | 83f6a22a08e354da58adf3ed0393f4d39bca6124 /src/components/ui | |
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')
-rw-r--r-- | src/components/ui/FAB.js | 72 | ||||
-rw-r--r-- | src/components/ui/Select.js | 44 |
2 files changed, 114 insertions, 2 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 | } | ||
diff --git a/src/components/ui/Select.js b/src/components/ui/Select.js index da52243ca..b4511433c 100644 --- a/src/components/ui/Select.js +++ b/src/components/ui/Select.js | |||
@@ -10,22 +10,60 @@ export default @observer class Select extends Component { | |||
10 | className: PropTypes.string, | 10 | className: PropTypes.string, |
11 | showLabel: PropTypes.bool, | 11 | showLabel: PropTypes.bool, |
12 | disabled: PropTypes.bool, | 12 | disabled: PropTypes.bool, |
13 | multiple: PropTypes.bool, | ||
13 | }; | 14 | }; |
14 | 15 | ||
15 | static defaultProps = { | 16 | static defaultProps = { |
16 | className: null, | 17 | className: null, |
17 | showLabel: true, | 18 | showLabel: true, |
18 | disabled: false, | 19 | disabled: false, |
20 | multiple: false, | ||
19 | }; | 21 | }; |
20 | 22 | ||
23 | constructor(props) { | ||
24 | super(props); | ||
25 | |||
26 | this.element = React.createRef(); | ||
27 | } | ||
28 | |||
29 | multipleChange() { | ||
30 | const element = this.element.current; | ||
31 | |||
32 | const result = []; | ||
33 | const options = element && element.options; | ||
34 | |||
35 | for (const option of options) { | ||
36 | if (option.selected) { | ||
37 | result.push(option.value || option.text); | ||
38 | } | ||
39 | } | ||
40 | |||
41 | const { field } = this.props; | ||
42 | field.value = result; | ||
43 | } | ||
44 | |||
21 | render() { | 45 | render() { |
22 | const { | 46 | const { |
23 | field, | 47 | field, |
24 | className, | 48 | className, |
25 | showLabel, | 49 | showLabel, |
26 | disabled, | 50 | disabled, |
51 | multiple, | ||
27 | } = this.props; | 52 | } = this.props; |
28 | 53 | ||
54 | let selected = field.value; | ||
55 | |||
56 | if (multiple) { | ||
57 | if (typeof field.value === 'string' && field.value.substr(0, 1) === '[') { | ||
58 | // Value is JSON encoded | ||
59 | selected = JSON.parse(field.value); | ||
60 | } else if (typeof field.value === 'object') { | ||
61 | selected = field.value; | ||
62 | } else { | ||
63 | selected = [field.value]; | ||
64 | } | ||
65 | } | ||
66 | |||
29 | return ( | 67 | return ( |
30 | <div | 68 | <div |
31 | className={classnames({ | 69 | className={classnames({ |
@@ -44,11 +82,13 @@ export default @observer class Select extends Component { | |||
44 | </label> | 82 | </label> |
45 | )} | 83 | )} |
46 | <select | 84 | <select |
47 | onChange={field.onChange} | 85 | onChange={multiple ? e => this.multipleChange(e) : field.onChange} |
48 | id={field.id} | 86 | id={field.id} |
49 | defaultValue={field.value} | 87 | defaultValue={selected} |
50 | className="franz-form__select" | 88 | className="franz-form__select" |
51 | disabled={field.disabled || disabled} | 89 | disabled={field.disabled || disabled} |
90 | multiple={multiple} | ||
91 | ref={this.element} | ||
52 | > | 92 | > |
53 | {field.options.map(type => ( | 93 | {field.options.map(type => ( |
54 | <option | 94 | <option |