diff options
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 |