diff options
Diffstat (limited to 'src/components/ui/toggle/index.tsx')
-rw-r--r-- | src/components/ui/toggle/index.tsx | 56 |
1 files changed, 24 insertions, 32 deletions
diff --git a/src/components/ui/toggle/index.tsx b/src/components/ui/toggle/index.tsx index d478cbba5..fee8adbc7 100644 --- a/src/components/ui/toggle/index.tsx +++ b/src/components/ui/toggle/index.tsx | |||
@@ -1,27 +1,26 @@ | |||
1 | import classnames from 'classnames'; | 1 | import classnames from 'classnames'; |
2 | import { Property } from 'csstype'; | 2 | import { Property } from 'csstype'; |
3 | import { noop } from 'lodash'; | ||
3 | import { Component, InputHTMLAttributes } from 'react'; | 4 | import { Component, InputHTMLAttributes } from 'react'; |
4 | import injectStyle, { WithStylesProps } from 'react-jss'; | 5 | import withStyles, { WithStylesProps } from 'react-jss'; |
5 | |||
6 | import { Theme } from '../../../themes'; | 6 | import { Theme } from '../../../themes'; |
7 | import { IFormField } from '../typings/generic'; | ||
8 | |||
9 | import Error from '../error'; | 7 | import Error from '../error'; |
10 | import Label from '../label'; | 8 | import Label from '../label'; |
9 | import { IFormField } from '../typings/generic'; | ||
11 | import Wrapper from '../wrapper'; | 10 | import Wrapper from '../wrapper'; |
12 | 11 | ||
13 | interface IProps | 12 | interface IProps |
14 | extends InputHTMLAttributes<HTMLInputElement>, | 13 | extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value'>, |
15 | IFormField, | 14 | IFormField, |
16 | WithStylesProps<typeof styles> { | 15 | WithStylesProps<typeof styles> { |
17 | className?: string; | 16 | className?: string; |
17 | value: boolean | undefined; // due to type capability between InputHTMLAttributes and mobx-react-form | ||
18 | } | 18 | } |
19 | 19 | ||
20 | let buttonTransition: string = 'none'; | 20 | const buttonTransition: string = |
21 | 21 | window && window.matchMedia('(prefers-reduced-motion: no-preference)') | |
22 | if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) { | 22 | ? 'all .5s' |
23 | buttonTransition = 'all .5s'; | 23 | : 'none'; |
24 | } | ||
25 | 24 | ||
26 | const styles = (theme: Theme) => ({ | 25 | const styles = (theme: Theme) => ({ |
27 | toggle: { | 26 | toggle: { |
@@ -64,25 +63,18 @@ const styles = (theme: Theme) => ({ | |||
64 | }); | 63 | }); |
65 | 64 | ||
66 | class ToggleComponent extends Component<IProps> { | 65 | class ToggleComponent extends Component<IProps> { |
67 | public static defaultProps = { | ||
68 | onChange: () => {}, | ||
69 | showLabel: true, | ||
70 | disabled: false, | ||
71 | error: '', | ||
72 | }; | ||
73 | |||
74 | render() { | 66 | render() { |
75 | const { | 67 | const { |
76 | classes, | 68 | classes, |
77 | className, | 69 | className, |
78 | disabled, | 70 | id = '', |
79 | error, | 71 | name = '', |
80 | id, | 72 | label = '', |
81 | label, | 73 | error = '', |
82 | showLabel, | 74 | value = false, |
83 | checked, | 75 | showLabel = true, |
84 | value, | 76 | disabled = false, |
85 | onChange, | 77 | onChange = noop, |
86 | } = this.props; | 78 | } = this.props; |
87 | 79 | ||
88 | return ( | 80 | return ( |
@@ -102,24 +94,24 @@ class ToggleComponent extends Component<IProps> { | |||
102 | <div | 94 | <div |
103 | className={classnames({ | 95 | className={classnames({ |
104 | [`${classes.button}`]: true, | 96 | [`${classes.button}`]: true, |
105 | [`${classes.buttonActive}`]: checked, | 97 | [`${classes.buttonActive}`]: value, |
106 | })} | 98 | })} |
107 | /> | 99 | /> |
108 | <input | 100 | <input |
109 | className={classes.input} | ||
110 | id={id} | ||
111 | type="checkbox" | 101 | type="checkbox" |
112 | checked={checked} | 102 | id={id} |
113 | value={value} | 103 | name={name} |
104 | checked={value as boolean | undefined} | ||
105 | className={classes.input} | ||
114 | onChange={onChange} | 106 | onChange={onChange} |
115 | disabled={disabled} | 107 | disabled={disabled} |
116 | /> | 108 | /> |
117 | </div> | 109 | </div> |
118 | </Label> | 110 | </Label> |
119 | {error && <Error message={error} />} | 111 | {error ? <Error message={error as string} /> : null} |
120 | </Wrapper> | 112 | </Wrapper> |
121 | ); | 113 | ); |
122 | } | 114 | } |
123 | } | 115 | } |
124 | 116 | ||
125 | export default injectStyle(styles, { injectTheme: true })(ToggleComponent); | 117 | export default withStyles(styles, { injectTheme: true })(ToggleComponent); |