aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/ui/ToggleRaw.js
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/ui/ToggleRaw.js')
-rw-r--r--src/components/ui/ToggleRaw.js76
1 files changed, 0 insertions, 76 deletions
diff --git a/src/components/ui/ToggleRaw.js b/src/components/ui/ToggleRaw.js
deleted file mode 100644
index e482b97b4..000000000
--- a/src/components/ui/ToggleRaw.js
+++ /dev/null
@@ -1,76 +0,0 @@
1/**
2 * "Raw" Toggle - for usage without a MobX Form element
3 */
4import { Component } from 'react';
5import PropTypes from 'prop-types';
6import { observer } from 'mobx-react';
7import classnames from 'classnames';
8
9class ToggleRaw extends Component {
10 static propTypes = {
11 onChange: PropTypes.func.isRequired,
12 field: PropTypes.shape({
13 value: PropTypes.bool.isRequired,
14 id: PropTypes.string,
15 name: PropTypes.string,
16 label: PropTypes.string,
17 error: PropTypes.string,
18 }).isRequired,
19 className: PropTypes.string,
20 showLabel: PropTypes.bool,
21 disabled: PropTypes.bool,
22 };
23
24 static defaultProps = {
25 className: '',
26 showLabel: true,
27 disabled: false,
28 };
29
30 onChange(e) {
31 const { onChange } = this.props;
32
33 onChange(e);
34 }
35
36 render() {
37 const { field, className, showLabel, disabled } = this.props;
38
39 return (
40 <div
41 className={classnames([
42 'franz-form__field',
43 'franz-form__toggle-wrapper',
44 'franz-form__toggle-disabled',
45 className,
46 ])}
47 >
48 <label
49 htmlFor={field.id}
50 className={classnames({
51 'franz-form__toggle': true,
52 'is-active': field.value,
53 })}
54 >
55 <div className="franz-form__toggle-button" />
56 <input
57 type="checkbox"
58 id={field.id}
59 name={field.name}
60 value={field.name}
61 checked={field.value}
62 onChange={e => (!disabled ? this.onChange(e) : null)}
63 />
64 </label>
65 {field.error && <div className={field.error}>{field.error}</div>}
66 {field.label && showLabel && (
67 <label className="franz-form__label" htmlFor={field.id}>
68 {field.label}
69 </label>
70 )}
71 </div>
72 );
73 }
74}
75
76export default observer(ToggleRaw);