diff options
Diffstat (limited to 'src/components/ui/Toggle.js')
-rw-r--r-- | src/components/ui/Toggle.js | 9 |
1 files changed, 6 insertions, 3 deletions
diff --git a/src/components/ui/Toggle.js b/src/components/ui/Toggle.js index 62d46393e..78fb77cbe 100644 --- a/src/components/ui/Toggle.js +++ b/src/components/ui/Toggle.js | |||
@@ -4,17 +4,18 @@ import { observer } from 'mobx-react'; | |||
4 | import classnames from 'classnames'; | 4 | import classnames from 'classnames'; |
5 | import { Field } from 'mobx-react-form'; | 5 | import { Field } from 'mobx-react-form'; |
6 | 6 | ||
7 | @observer | 7 | export default @observer class Toggle extends Component { |
8 | export default class Toggle extends Component { | ||
9 | static propTypes = { | 8 | static propTypes = { |
10 | field: PropTypes.instanceOf(Field).isRequired, | 9 | field: PropTypes.instanceOf(Field).isRequired, |
11 | className: PropTypes.string, | 10 | className: PropTypes.string, |
12 | showLabel: PropTypes.bool, | 11 | showLabel: PropTypes.bool, |
12 | disabled: PropTypes.bool, | ||
13 | }; | 13 | }; |
14 | 14 | ||
15 | static defaultProps = { | 15 | static defaultProps = { |
16 | className: '', | 16 | className: '', |
17 | showLabel: true, | 17 | showLabel: true, |
18 | disabled: false, | ||
18 | }; | 19 | }; |
19 | 20 | ||
20 | onChange(e) { | 21 | onChange(e) { |
@@ -28,6 +29,7 @@ export default class Toggle extends Component { | |||
28 | field, | 29 | field, |
29 | className, | 30 | className, |
30 | showLabel, | 31 | showLabel, |
32 | disabled, | ||
31 | } = this.props; | 33 | } = this.props; |
32 | 34 | ||
33 | if (field.value === '' && field.default !== '') { | 35 | if (field.value === '' && field.default !== '') { |
@@ -39,6 +41,7 @@ export default class Toggle extends Component { | |||
39 | className={classnames([ | 41 | className={classnames([ |
40 | 'franz-form__field', | 42 | 'franz-form__field', |
41 | 'franz-form__toggle-wrapper', | 43 | 'franz-form__toggle-wrapper', |
44 | 'franz-form__toggle-disabled', | ||
42 | className, | 45 | className, |
43 | ])} | 46 | ])} |
44 | > | 47 | > |
@@ -56,7 +59,7 @@ export default class Toggle extends Component { | |||
56 | name={field.name} | 59 | name={field.name} |
57 | value={field.name} | 60 | value={field.name} |
58 | checked={field.value} | 61 | checked={field.value} |
59 | onChange={e => this.onChange(e)} | 62 | onChange={e => (!disabled ? this.onChange(e) : null)} |
60 | /> | 63 | /> |
61 | </label> | 64 | </label> |
62 | {field.error && <div className={field.error}>{field.error}</div>} | 65 | {field.error && <div className={field.error}>{field.error}</div>} |