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