diff options
author | 2021-07-06 21:57:57 +0200 | |
---|---|---|
committer | 2021-07-07 07:19:02 +0530 | |
commit | 63b66d5df66f454e61b7a52b4fae338c3becfc98 (patch) | |
tree | 357fa32a31db1ab45b3ed2cdc229d59a629e38a6 /packages/forms/src/toggle/index.tsx | |
parent | New Crowdin updates (#1612) (diff) | |
download | ferdium-app-63b66d5df66f454e61b7a52b4fae338c3becfc98.tar.gz ferdium-app-63b66d5df66f454e61b7a52b4fae338c3becfc98.tar.zst ferdium-app-63b66d5df66f454e61b7a52b4fae338c3becfc98.zip |
fix: fix breaking tab component
- move active tab state from componentDidMount to constructor
- fix toggle.tsx breaking tsc
- add .prettierrc.js for consistent formatting
Diffstat (limited to 'packages/forms/src/toggle/index.tsx')
-rw-r--r-- | packages/forms/src/toggle/index.tsx | 38 |
1 files changed, 20 insertions, 18 deletions
diff --git a/packages/forms/src/toggle/index.tsx b/packages/forms/src/toggle/index.tsx index d84508a5f..ea335f281 100644 --- a/packages/forms/src/toggle/index.tsx +++ b/packages/forms/src/toggle/index.tsx | |||
@@ -10,7 +10,10 @@ import { Error } from '../error'; | |||
10 | import { Label } from '../label'; | 10 | import { Label } from '../label'; |
11 | import { Wrapper } from '../wrapper'; | 11 | import { Wrapper } from '../wrapper'; |
12 | 12 | ||
13 | interface IProps extends React.InputHTMLAttributes<HTMLInputElement>, IFormField, IWithStyle { | 13 | interface IProps |
14 | extends React.InputHTMLAttributes<HTMLInputElement>, | ||
15 | IFormField, | ||
16 | IWithStyle { | ||
14 | className?: string; | 17 | className?: string; |
15 | } | 18 | } |
16 | 19 | ||
@@ -35,7 +38,7 @@ const styles = (theme: Theme) => ({ | |||
35 | }, | 38 | }, |
36 | buttonActive: { | 39 | buttonActive: { |
37 | background: theme.toggleButtonActive, | 40 | background: theme.toggleButtonActive, |
38 | left: (theme.toggleWidth - theme.toggleHeight) + 1, | 41 | left: theme.toggleWidth - theme.toggleHeight + 1, |
39 | }, | 42 | }, |
40 | input: { | 43 | input: { |
41 | visibility: 'hidden' as any, | 44 | visibility: 'hidden' as any, |
@@ -77,27 +80,28 @@ class ToggleComponent extends Component<IProps> { | |||
77 | } = this.props; | 80 | } = this.props; |
78 | 81 | ||
79 | return ( | 82 | return ( |
80 | <Wrapper | 83 | <Wrapper className={className} identifier="franz-toggle"> |
81 | className={className} | ||
82 | identifier="franz-toggle" | ||
83 | > | ||
84 | <Label | 84 | <Label |
85 | title={label} | 85 | title={label} |
86 | showLabel={showLabel} | 86 | showLabel={showLabel} |
87 | htmlFor={id} | 87 | htmlFor={id} |
88 | className={classes.toggleLabel} | 88 | className={classes.toggleLabel} |
89 | > | 89 | > |
90 | <div className={classnames({ | 90 | <div |
91 | [`${classes.toggle}`]: true, | 91 | className={classnames({ |
92 | [`${classes.disabled}`]: disabled, | 92 | [`${classes.toggle}`]: true, |
93 | })}> | 93 | [`${classes.disabled}`]: disabled, |
94 | <div className={classnames({ | 94 | })} |
95 | [`${classes.button}`]: true, | 95 | > |
96 | [`${classes.buttonActive}`]: checked, | 96 | <div |
97 | })} /> | 97 | className={classnames({ |
98 | [`${classes.button}`]: true, | ||
99 | [`${classes.buttonActive}`]: checked, | ||
100 | })} | ||
101 | /> | ||
98 | <input | 102 | <input |
99 | className={classes.input} | 103 | className={classes.input} |
100 | id={id || name} | 104 | id={id} |
101 | type="checkbox" | 105 | type="checkbox" |
102 | checked={checked} | 106 | checked={checked} |
103 | value={value} | 107 | value={value} |
@@ -106,9 +110,7 @@ class ToggleComponent extends Component<IProps> { | |||
106 | /> | 110 | /> |
107 | </div> | 111 | </div> |
108 | </Label> | 112 | </Label> |
109 | {error && ( | 113 | {error && <Error message={error} />} |
110 | <Error message={error} /> | ||
111 | )} | ||
112 | </Wrapper> | 114 | </Wrapper> |
113 | ); | 115 | ); |
114 | } | 116 | } |