diff options
author | 2023-07-29 21:12:16 -0600 | |
---|---|---|
committer | 2023-07-30 08:42:16 +0530 | |
commit | 32f76b74a69ad4d60a014bf075c39517888436bc (patch) | |
tree | 753378cc30f52d1e0e51be64b5a83d39f08f39c8 /src/components/ui/colorPickerInput/index.tsx | |
parent | 6.4.1-nightly.15 [skip ci] (diff) | |
download | ferdium-app-32f76b74a69ad4d60a014bf075c39517888436bc.tar.gz ferdium-app-32f76b74a69ad4d60a014bf075c39517888436bc.tar.zst ferdium-app-32f76b74a69ad4d60a014bf075c39517888436bc.zip |
refactor: various improvements (#1296)
* refactor: various improvements
- enable no-use-before-define eslint rule
- shuffle code to conform to no-use-before-define eslint rule
- remove btoa dependency which is deprecated and replace with Buffer.from(string).toString('base64')
- convert some any types into useful ones
- add type annotations where possible
- remove unused @types/expect.js
- install @types/semver and ts-node which were missing
- repair and rewrite add-crowdin-contributors script
- remove export keyword from variables which are never consumed in another file
- remove unity indicator hack where linked issue was closed
- remove module declaration for kebab-case which is unused
- add missing state interface for certain components
- remove default exports for files which already have a named export
- export IRecipePreview so it can be used throughout codebase
- remove unused removeCacheForCallWith method from CachedRequest.ts
- cleanup unused colors and styles inside legacy theme
* - improve ColorPickerInput
- fix invalid DOM nesting with div inside p in EditSettingsForm
- fix progressbarAccentColor color picker not updating input when using slider
- install missing @types/react-color dependency
Diffstat (limited to 'src/components/ui/colorPickerInput/index.tsx')
-rw-r--r-- | src/components/ui/colorPickerInput/index.tsx | 37 |
1 files changed, 10 insertions, 27 deletions
diff --git a/src/components/ui/colorPickerInput/index.tsx b/src/components/ui/colorPickerInput/index.tsx index 2367175bd..39fd0220a 100644 --- a/src/components/ui/colorPickerInput/index.tsx +++ b/src/components/ui/colorPickerInput/index.tsx | |||
@@ -1,21 +1,18 @@ | |||
1 | import { | 1 | import { |
2 | ChangeEvent, | ||
2 | Component, | 3 | Component, |
3 | createRef, | 4 | createRef, |
4 | InputHTMLAttributes, | 5 | InputHTMLAttributes, |
5 | ReactElement, | ||
6 | RefObject, | 6 | RefObject, |
7 | } from 'react'; | 7 | } from 'react'; |
8 | import { observer } from 'mobx-react'; | 8 | import { observer } from 'mobx-react'; |
9 | import classnames from 'classnames'; | 9 | import classnames from 'classnames'; |
10 | import { SliderPicker } from 'react-color'; | 10 | import { Color, ColorResult, SliderPicker } from 'react-color'; |
11 | import { noop } from 'lodash'; | 11 | import { noop } from 'lodash'; |
12 | import { FormFields } from '../../../@types/mobx-form.types'; | 12 | import { FormFields } from '../../../@types/mobx-form.types'; |
13 | 13 | ||
14 | interface IProps extends InputHTMLAttributes<HTMLInputElement>, FormFields { | 14 | interface IProps extends InputHTMLAttributes<HTMLInputElement>, FormFields { |
15 | className?: string; | 15 | onColorChange: (event: ChangeEvent<HTMLInputElement>) => void; |
16 | focus?: boolean; | ||
17 | onColorChange?: () => void; | ||
18 | error: string; | ||
19 | } | 16 | } |
20 | 17 | ||
21 | @observer | 18 | @observer |
@@ -23,20 +20,13 @@ class ColorPickerInput extends Component<IProps> { | |||
23 | private inputElement: RefObject<HTMLInputElement> = | 20 | private inputElement: RefObject<HTMLInputElement> = |
24 | createRef<HTMLInputElement>(); | 21 | createRef<HTMLInputElement>(); |
25 | 22 | ||
26 | componentDidMount(): void { | 23 | onChange(color: ColorResult, event: ChangeEvent<HTMLInputElement>): void { |
27 | const { focus = false } = this.props; | 24 | const { onColorChange, onChange = noop } = this.props; |
28 | if (focus && this.inputElement?.current) { | 25 | onColorChange(event); |
29 | this.inputElement.current.focus(); | 26 | onChange(color.hex); |
30 | } | ||
31 | } | 27 | } |
32 | 28 | ||
33 | onChange({ hex }: { hex: string }): void { | 29 | render() { |
34 | const { onColorChange = noop, onChange = noop } = this.props; | ||
35 | onColorChange(); | ||
36 | onChange(hex); | ||
37 | } | ||
38 | |||
39 | render(): ReactElement { | ||
40 | const { | 30 | const { |
41 | id, | 31 | id, |
42 | name, | 32 | name, |
@@ -45,7 +35,6 @@ class ColorPickerInput extends Component<IProps> { | |||
45 | disabled = false, | 35 | disabled = false, |
46 | className = null, | 36 | className = null, |
47 | type = 'text', | 37 | type = 'text', |
48 | error = '', | ||
49 | onChange = noop, | 38 | onChange = noop, |
50 | } = this.props; | 39 | } = this.props; |
51 | 40 | ||
@@ -53,20 +42,14 @@ class ColorPickerInput extends Component<IProps> { | |||
53 | <div | 42 | <div |
54 | className={classnames({ | 43 | className={classnames({ |
55 | 'franz-form__field': true, | 44 | 'franz-form__field': true, |
56 | 'has-error': error, | ||
57 | [`${className}`]: className, | 45 | [`${className}`]: className, |
58 | })} | 46 | })} |
59 | ref={this.inputElement} | 47 | ref={this.inputElement} |
60 | > | 48 | > |
61 | <SliderPicker | 49 | <SliderPicker |
62 | color={value} | 50 | color={value as Color} |
63 | onChange={this.onChange.bind(this)} | 51 | onChange={(color, event) => this.onChange(color, event)} |
64 | id={`${id}-SliderPicker`} | ||
65 | type={type} | ||
66 | className="franz-form__input" | 52 | className="franz-form__input" |
67 | name={name} | ||
68 | placeholder={placeholder} | ||
69 | disabled={disabled} | ||
70 | /> | 53 | /> |
71 | <div className="franz-form__input-wrapper franz-form__input-wrapper__color-picker"> | 54 | <div className="franz-form__input-wrapper franz-form__input-wrapper__color-picker"> |
72 | <input | 55 | <input |