diff options
Diffstat (limited to 'src/components/ui/toggle/index.tsx')
-rw-r--r-- | src/components/ui/toggle/index.tsx | 17 |
1 files changed, 8 insertions, 9 deletions
diff --git a/src/components/ui/toggle/index.tsx b/src/components/ui/toggle/index.tsx index fee8adbc7..828941886 100644 --- a/src/components/ui/toggle/index.tsx +++ b/src/components/ui/toggle/index.tsx | |||
@@ -1,7 +1,7 @@ | |||
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 { noop } from 'lodash'; |
4 | import { Component, InputHTMLAttributes } from 'react'; | 4 | import { Component, InputHTMLAttributes, ReactElement } from 'react'; |
5 | import withStyles, { WithStylesProps } from 'react-jss'; | 5 | import withStyles, { WithStylesProps } from 'react-jss'; |
6 | import { Theme } from '../../../themes'; | 6 | import { Theme } from '../../../themes'; |
7 | import Error from '../error'; | 7 | import Error from '../error'; |
@@ -10,11 +10,10 @@ import { IFormField } from '../typings/generic'; | |||
10 | import Wrapper from '../wrapper'; | 10 | import Wrapper from '../wrapper'; |
11 | 11 | ||
12 | interface IProps | 12 | interface IProps |
13 | extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value'>, | 13 | extends InputHTMLAttributes<HTMLInputElement>, |
14 | IFormField, | 14 | IFormField, |
15 | WithStylesProps<typeof styles> { | 15 | WithStylesProps<typeof styles> { |
16 | className?: string; | 16 | className?: string; |
17 | value: boolean | undefined; // due to type capability between InputHTMLAttributes and mobx-react-form | ||
18 | } | 17 | } |
19 | 18 | ||
20 | const buttonTransition: string = | 19 | const buttonTransition: string = |
@@ -62,8 +61,8 @@ const styles = (theme: Theme) => ({ | |||
62 | }, | 61 | }, |
63 | }); | 62 | }); |
64 | 63 | ||
65 | class ToggleComponent extends Component<IProps> { | 64 | class Toggle extends Component<IProps> { |
66 | render() { | 65 | render(): ReactElement { |
67 | const { | 66 | const { |
68 | classes, | 67 | classes, |
69 | className, | 68 | className, |
@@ -71,7 +70,7 @@ class ToggleComponent extends Component<IProps> { | |||
71 | name = '', | 70 | name = '', |
72 | label = '', | 71 | label = '', |
73 | error = '', | 72 | error = '', |
74 | value = false, | 73 | checked = false, |
75 | showLabel = true, | 74 | showLabel = true, |
76 | disabled = false, | 75 | disabled = false, |
77 | onChange = noop, | 76 | onChange = noop, |
@@ -94,14 +93,14 @@ class ToggleComponent extends Component<IProps> { | |||
94 | <div | 93 | <div |
95 | className={classnames({ | 94 | className={classnames({ |
96 | [`${classes.button}`]: true, | 95 | [`${classes.button}`]: true, |
97 | [`${classes.buttonActive}`]: value, | 96 | [`${classes.buttonActive}`]: checked, |
98 | })} | 97 | })} |
99 | /> | 98 | /> |
100 | <input | 99 | <input |
101 | type="checkbox" | 100 | type="checkbox" |
102 | id={id} | 101 | id={id} |
103 | name={name} | 102 | name={name} |
104 | checked={value as boolean | undefined} | 103 | checked={checked} |
105 | className={classes.input} | 104 | className={classes.input} |
106 | onChange={onChange} | 105 | onChange={onChange} |
107 | disabled={disabled} | 106 | disabled={disabled} |
@@ -114,4 +113,4 @@ class ToggleComponent extends Component<IProps> { | |||
114 | } | 113 | } |
115 | } | 114 | } |
116 | 115 | ||
117 | export default withStyles(styles, { injectTheme: true })(ToggleComponent); | 116 | export default withStyles(styles, { injectTheme: true })(Toggle); |