diff options
author | 2021-07-06 21:57:57 +0200 | |
---|---|---|
committer | 2021-07-07 07:19:02 +0530 | |
commit | 63b66d5df66f454e61b7a52b4fae338c3becfc98 (patch) | |
tree | 357fa32a31db1ab45b3ed2cdc229d59a629e38a6 | |
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
-rw-r--r-- | .prettierrc.js | 4 | ||||
-rw-r--r-- | packages/forms/src/toggle/index.tsx | 38 | ||||
-rw-r--r-- | src/components/ui/Tabs/Tabs.js | 11 |
3 files changed, 30 insertions, 23 deletions
diff --git a/.prettierrc.js b/.prettierrc.js new file mode 100644 index 000000000..6db0775a3 --- /dev/null +++ b/.prettierrc.js | |||
@@ -0,0 +1,4 @@ | |||
1 | module.exports = { | ||
2 | singleQuote: true, | ||
3 | arrowParens: 'avoid' | ||
4 | }; | ||
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 | } |
diff --git a/src/components/ui/Tabs/Tabs.js b/src/components/ui/Tabs/Tabs.js index 7ece29fbe..e68dc3a1d 100644 --- a/src/components/ui/Tabs/Tabs.js +++ b/src/components/ui/Tabs/Tabs.js | |||
@@ -8,6 +8,11 @@ import { oneOrManyChildElements } from '../../../prop-types'; | |||
8 | export default | 8 | export default |
9 | @observer | 9 | @observer |
10 | class Tab extends Component { | 10 | class Tab extends Component { |
11 | constructor(props) { | ||
12 | super(props); | ||
13 | this.state = { active: this.props.active }; | ||
14 | } | ||
15 | |||
11 | static propTypes = { | 16 | static propTypes = { |
12 | children: oneOrManyChildElements.isRequired, | 17 | children: oneOrManyChildElements.isRequired, |
13 | active: PropTypes.number, | 18 | active: PropTypes.number, |
@@ -17,17 +22,13 @@ class Tab extends Component { | |||
17 | active: 0, | 22 | active: 0, |
18 | }; | 23 | }; |
19 | 24 | ||
20 | componentDidMount() { | ||
21 | this.setState({ active: this.props.active }); | ||
22 | } | ||
23 | |||
24 | switchTab(index) { | 25 | switchTab(index) { |
25 | this.setState({ active: index }); | 26 | this.setState({ active: index }); |
26 | } | 27 | } |
27 | 28 | ||
28 | render() { | 29 | render() { |
29 | const { children: childElements } = this.props; | 30 | const { children: childElements } = this.props; |
30 | const children = childElements.filter((c) => !!c); | 31 | const children = childElements.filter(c => !!c); |
31 | 32 | ||
32 | if (children.length === 1) { | 33 | if (children.length === 1) { |
33 | return <div>{children}</div>; | 34 | return <div>{children}</div>; |