diff options
author | Stefan Malzner <stefan@adlk.io> | 2017-10-13 12:29:40 +0200 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2017-10-13 12:29:40 +0200 |
commit | 58cda9cc7fb79ca9df6746de7f9662bc08dc156a (patch) | |
tree | 1211600c2a5d3b5f81c435c6896618111a611720 /src/components/ui/Toggle.js | |
download | ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.tar.gz ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.tar.zst ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.zip |
initial commit
Diffstat (limited to 'src/components/ui/Toggle.js')
-rw-r--r-- | src/components/ui/Toggle.js | 67 |
1 files changed, 67 insertions, 0 deletions
diff --git a/src/components/ui/Toggle.js b/src/components/ui/Toggle.js new file mode 100644 index 000000000..62d46393e --- /dev/null +++ b/src/components/ui/Toggle.js | |||
@@ -0,0 +1,67 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import classnames from 'classnames'; | ||
5 | import { Field } from 'mobx-react-form'; | ||
6 | |||
7 | @observer | ||
8 | export default class Toggle extends Component { | ||
9 | static propTypes = { | ||
10 | field: PropTypes.instanceOf(Field).isRequired, | ||
11 | className: PropTypes.string, | ||
12 | showLabel: PropTypes.bool, | ||
13 | }; | ||
14 | |||
15 | static defaultProps = { | ||
16 | className: '', | ||
17 | showLabel: true, | ||
18 | }; | ||
19 | |||
20 | onChange(e) { | ||
21 | const { field } = this.props; | ||
22 | |||
23 | field.onChange(e); | ||
24 | } | ||
25 | |||
26 | render() { | ||
27 | const { | ||
28 | field, | ||
29 | className, | ||
30 | showLabel, | ||
31 | } = this.props; | ||
32 | |||
33 | if (field.value === '' && field.default !== '') { | ||
34 | field.value = field.default; | ||
35 | } | ||
36 | |||
37 | return ( | ||
38 | <div | ||
39 | className={classnames([ | ||
40 | 'franz-form__field', | ||
41 | 'franz-form__toggle-wrapper', | ||
42 | className, | ||
43 | ])} | ||
44 | > | ||
45 | <label | ||
46 | htmlFor={field.id} | ||
47 | className={classnames({ | ||
48 | 'franz-form__toggle': true, | ||
49 | 'is-active': field.value, | ||
50 | })} | ||
51 | > | ||
52 | <div className="franz-form__toggle-button" /> | ||
53 | <input | ||
54 | type="checkbox" | ||
55 | id={field.id} | ||
56 | name={field.name} | ||
57 | value={field.name} | ||
58 | checked={field.value} | ||
59 | onChange={e => this.onChange(e)} | ||
60 | /> | ||
61 | </label> | ||
62 | {field.error && <div className={field.error}>{field.error}</div>} | ||
63 | {field.label && showLabel && <label className="franz-form__label" htmlFor={field.id}>{field.label}</label>} | ||
64 | </div> | ||
65 | ); | ||
66 | } | ||
67 | } | ||