diff options
author | muhamedsalih-tw <104364298+muhamedsalih-tw@users.noreply.github.com> | 2022-11-02 06:31:36 +0530 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-11-02 01:01:36 +0000 |
commit | 302d595f7c289387e53a0ef7df4d574ed4e25d70 (patch) | |
tree | 2385e59eaca9c78921d9b0b3681cfba1b3eef168 /src/components/ui/ColorPickerInput.tsx | |
parent | Re-enable editing of the address bar to manually access a different url withi... (diff) | |
download | ferdium-app-302d595f7c289387e53a0ef7df4d574ed4e25d70.tar.gz ferdium-app-302d595f7c289387e53a0ef7df4d574ed4e25d70.tar.zst ferdium-app-302d595f7c289387e53a0ef7df4d574ed4e25d70.zip |
Transform to TS and refactored components w.r.t deletion if duplicated Input component (#729)
Diffstat (limited to 'src/components/ui/ColorPickerInput.tsx')
-rw-r--r-- | src/components/ui/ColorPickerInput.tsx | 18 |
1 files changed, 15 insertions, 3 deletions
diff --git a/src/components/ui/ColorPickerInput.tsx b/src/components/ui/ColorPickerInput.tsx index 7e3965331..da1fffb71 100644 --- a/src/components/ui/ColorPickerInput.tsx +++ b/src/components/ui/ColorPickerInput.tsx | |||
@@ -1,15 +1,25 @@ | |||
1 | import { ChangeEvent, Component, createRef, RefObject } from 'react'; | 1 | import { |
2 | ChangeEvent, | ||
3 | ChangeEventHandler, | ||
4 | Component, | ||
5 | createRef, | ||
6 | RefObject, | ||
7 | } from 'react'; | ||
2 | import { observer } from 'mobx-react'; | 8 | import { observer } from 'mobx-react'; |
3 | import classnames from 'classnames'; | 9 | import classnames from 'classnames'; |
4 | import { SliderPicker } from 'react-color'; | 10 | import { SliderPicker } from 'react-color'; |
11 | import { noop } from 'lodash'; | ||
5 | import { Field } from '../../@types/mobx-form.types'; | 12 | import { Field } from '../../@types/mobx-form.types'; |
6 | 13 | ||
7 | interface IProps { | 14 | interface IProps { |
8 | field: Field; | 15 | field: Field; |
9 | className?: string; | 16 | className?: string; |
10 | focus?: boolean; | 17 | focus?: boolean; |
18 | onChange: ChangeEventHandler<HTMLInputElement>; | ||
11 | } | 19 | } |
12 | 20 | ||
21 | // TODO - [TS DEBT] check if field can be spread instead of having it single field attribute in interface | ||
22 | @observer | ||
13 | class ColorPickerInput extends Component<IProps> { | 23 | class ColorPickerInput extends Component<IProps> { |
14 | private inputElement: RefObject<HTMLInputElement> = | 24 | private inputElement: RefObject<HTMLInputElement> = |
15 | createRef<HTMLInputElement>(); | 25 | createRef<HTMLInputElement>(); |
@@ -22,7 +32,9 @@ class ColorPickerInput extends Component<IProps> { | |||
22 | } | 32 | } |
23 | 33 | ||
24 | onChange(e: ChangeEvent<HTMLInputElement>) { | 34 | onChange(e: ChangeEvent<HTMLInputElement>) { |
25 | const { field } = this.props; | 35 | const { field, onChange = noop } = this.props; |
36 | |||
37 | onChange(e); | ||
26 | if (field.onChange) { | 38 | if (field.onChange) { |
27 | field.onChange(e); | 39 | field.onChange(e); |
28 | } | 40 | } |
@@ -87,4 +99,4 @@ class ColorPickerInput extends Component<IProps> { | |||
87 | } | 99 | } |
88 | } | 100 | } |
89 | 101 | ||
90 | export default observer(ColorPickerInput); | 102 | export default ColorPickerInput; |