diff options
author | Markus Hatvan <markus_hatvan@aon.at> | 2021-07-30 10:54:54 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-07-30 14:24:54 +0530 |
commit | f4b4416ea52d564bc2dbe543a82084ed98843ccc (patch) | |
tree | 7ca6b23571c86458a6b799746c91a7191de02715 /packages/forms/src/input/index.tsx | |
parent | 5.6.1-nightly.8 [skip ci] (diff) | |
download | ferdium-app-f4b4416ea52d564bc2dbe543a82084ed98843ccc.tar.gz ferdium-app-f4b4416ea52d564bc2dbe543a82084ed98843ccc.tar.zst ferdium-app-f4b4416ea52d564bc2dbe543a82084ed98843ccc.zip |
chore: migrate from tslint to @typescript-eslint (#1706)
- update .eslintrc to work for .js and .ts
- update devDependencies
- lint properly both root /src and nested /packages
- update webhint recommended setting for tsconfig.json to shrink output
- Manage all eslint rules from the repo root
- escape single quotes in scripts to please windows build
Co-authored-by: Vijay A <avijayr@protonmail.com>
Diffstat (limited to 'packages/forms/src/input/index.tsx')
-rw-r--r-- | packages/forms/src/input/index.tsx | 63 |
1 files changed, 29 insertions, 34 deletions
diff --git a/packages/forms/src/input/index.tsx b/packages/forms/src/input/index.tsx index b96dbc12d..41751710a 100644 --- a/packages/forms/src/input/index.tsx +++ b/packages/forms/src/input/index.tsx | |||
@@ -17,7 +17,10 @@ interface IData { | |||
17 | [index: string]: string; | 17 | [index: string]: string; |
18 | } | 18 | } |
19 | 19 | ||
20 | interface IProps extends React.InputHTMLAttributes<HTMLInputElement>, IFormField, IWithStyle { | 20 | interface IProps |
21 | extends React.InputHTMLAttributes<HTMLInputElement>, | ||
22 | IFormField, | ||
23 | IWithStyle { | ||
21 | focus?: boolean; | 24 | focus?: boolean; |
22 | prefix?: string; | 25 | prefix?: string; |
23 | suffix?: string; | 26 | suffix?: string; |
@@ -62,23 +65,24 @@ class InputComponent extends Component<IProps, IState> { | |||
62 | } | 65 | } |
63 | 66 | ||
64 | if (data) { | 67 | if (data) { |
65 | Object.keys(data).map(key => this.inputRef.current!.dataset[key] = data[key]); | 68 | Object.keys(data).map( |
69 | key => (this.inputRef.current!.dataset[key] = data[key]), | ||
70 | ); | ||
66 | } | 71 | } |
67 | } | 72 | } |
68 | } | 73 | } |
69 | 74 | ||
70 | onChange(e: React.ChangeEvent<HTMLInputElement>) { | 75 | onChange(e: React.ChangeEvent<HTMLInputElement>) { |
71 | const { | 76 | const { scorePassword, onChange } = this.props; |
72 | scorePassword, | ||
73 | onChange, | ||
74 | } = this.props; | ||
75 | 77 | ||
76 | if (onChange) { | 78 | if (onChange) { |
77 | onChange(e); | 79 | onChange(e); |
78 | } | 80 | } |
79 | 81 | ||
80 | if (this.inputRef && this.inputRef.current && scorePassword) { | 82 | if (this.inputRef && this.inputRef.current && scorePassword) { |
81 | this.setState({ passwordScore: scorePasswordFunc(this.inputRef.current.value) }); | 83 | this.setState({ |
84 | passwordScore: scorePasswordFunc(this.inputRef.current.value), | ||
85 | }); | ||
82 | } | 86 | } |
83 | } | 87 | } |
84 | 88 | ||
@@ -117,10 +121,7 @@ class InputComponent extends Component<IProps, IState> { | |||
117 | noMargin, | 121 | noMargin, |
118 | } = this.props; | 122 | } = this.props; |
119 | 123 | ||
120 | const { | 124 | const { showPassword, passwordScore } = this.state; |
121 | showPassword, | ||
122 | passwordScore, | ||
123 | } = this.state; | ||
124 | 125 | ||
125 | const inputType = type === 'password' && showPassword ? 'text' : type; | 126 | const inputType = type === 'password' && showPassword ? 'text' : type; |
126 | 127 | ||
@@ -144,12 +145,9 @@ class InputComponent extends Component<IProps, IState> { | |||
144 | [`${classes.wrapper}`]: true, | 145 | [`${classes.wrapper}`]: true, |
145 | [`${classes.disabled}`]: disabled, | 146 | [`${classes.disabled}`]: disabled, |
146 | [`${classes.hasError}`]: error, | 147 | [`${classes.hasError}`]: error, |
147 | })}> | 148 | })} |
148 | {prefix && ( | 149 | > |
149 | <span className={classes.prefix}> | 150 | {prefix && <span className={classes.prefix}>{prefix}</span>} |
150 | {prefix} | ||
151 | </span> | ||
152 | )} | ||
153 | <input | 151 | <input |
154 | id={id} | 152 | id={id} |
155 | type={inputType} | 153 | type={inputType} |
@@ -168,30 +166,29 @@ class InputComponent extends Component<IProps, IState> { | |||
168 | max={max} | 166 | max={max} |
169 | step={step} | 167 | step={step} |
170 | /> | 168 | /> |
171 | {suffix && ( | 169 | {suffix && <span className={classes.suffix}>{suffix}</span>} |
172 | <span className={classes.suffix}> | ||
173 | {suffix} | ||
174 | </span> | ||
175 | )} | ||
176 | {showPasswordToggle && ( | 170 | {showPasswordToggle && ( |
177 | <button | 171 | <button |
178 | type="button" | 172 | type="button" |
179 | className={classes.formModifier} | 173 | className={classes.formModifier} |
180 | onClick={() => this.setState(prevState => ({ showPassword: !prevState.showPassword }))} | 174 | onClick={() => |
175 | this.setState(prevState => ({ | ||
176 | showPassword: !prevState.showPassword, | ||
177 | })) | ||
178 | } | ||
181 | tabIndex={-1} | 179 | tabIndex={-1} |
182 | > | 180 | > |
183 | <Icon | 181 | <Icon path={!showPassword ? mdiEye : mdiEyeOff} size={1} /> |
184 | path={!showPassword ? mdiEye : mdiEyeOff} | ||
185 | size={1} | ||
186 | /> | ||
187 | </button> | 182 | </button> |
188 | )} | 183 | )} |
189 | </div> | 184 | </div> |
190 | {scorePassword && ( | 185 | {scorePassword && ( |
191 | <div className={classnames({ | 186 | <div |
192 | [`${classes.passwordScore}`]: true, | 187 | className={classnames({ |
193 | [`${classes.hasError}`]: error, | 188 | [`${classes.passwordScore}`]: true, |
194 | })}> | 189 | [`${classes.hasError}`]: error, |
190 | })} | ||
191 | > | ||
195 | <meter | 192 | <meter |
196 | value={passwordScore < 5 ? 5 : passwordScore} | 193 | value={passwordScore < 5 ? 5 : passwordScore} |
197 | low={30} | 194 | low={30} |
@@ -202,9 +199,7 @@ class InputComponent extends Component<IProps, IState> { | |||
202 | </div> | 199 | </div> |
203 | )} | 200 | )} |
204 | </Label> | 201 | </Label> |
205 | {error && ( | 202 | {error && <Error message={error} />} |
206 | <Error message={error} /> | ||
207 | )} | ||
208 | </Wrapper> | 203 | </Wrapper> |
209 | ); | 204 | ); |
210 | } | 205 | } |