diff options
Diffstat (limited to 'src/components/ui/ColorPickerInput.tsx')
-rw-r--r-- | src/components/ui/ColorPickerInput.tsx | 34 |
1 files changed, 15 insertions, 19 deletions
diff --git a/src/components/ui/ColorPickerInput.tsx b/src/components/ui/ColorPickerInput.tsx index 710d05586..7e3965331 100644 --- a/src/components/ui/ColorPickerInput.tsx +++ b/src/components/ui/ColorPickerInput.tsx | |||
@@ -1,8 +1,8 @@ | |||
1 | import { ChangeEvent, Component } from 'react'; | 1 | import { ChangeEvent, Component, createRef, RefObject } from 'react'; |
2 | import { observer } from 'mobx-react'; | 2 | import { observer } from 'mobx-react'; |
3 | import { Field } from 'mobx-react-form'; | ||
4 | import classnames from 'classnames'; | 3 | import classnames from 'classnames'; |
5 | import { SliderPicker } from 'react-color'; | 4 | import { SliderPicker } from 'react-color'; |
5 | import { Field } from '../../@types/mobx-form.types'; | ||
6 | 6 | ||
7 | interface IProps { | 7 | interface IProps { |
8 | field: Field; | 8 | field: Field; |
@@ -11,27 +11,27 @@ interface IProps { | |||
11 | } | 11 | } |
12 | 12 | ||
13 | class ColorPickerInput extends Component<IProps> { | 13 | class ColorPickerInput extends Component<IProps> { |
14 | static defaultProps = { | 14 | private inputElement: RefObject<HTMLInputElement> = |
15 | className: null, | 15 | createRef<HTMLInputElement>(); |
16 | focus: false, | ||
17 | }; | ||
18 | |||
19 | inputElement: HTMLInputElement | null | undefined; | ||
20 | 16 | ||
21 | componentDidMount() { | 17 | componentDidMount() { |
22 | if (this.props.focus) { | 18 | const { focus = false } = this.props; |
19 | if (focus) { | ||
23 | this.focus(); | 20 | this.focus(); |
24 | } | 21 | } |
25 | } | 22 | } |
26 | 23 | ||
27 | onChange(e: ChangeEvent<HTMLInputElement>) { | 24 | onChange(e: ChangeEvent<HTMLInputElement>) { |
28 | const { field } = this.props; | 25 | const { field } = this.props; |
29 | 26 | if (field.onChange) { | |
30 | field.onChange(e); | 27 | field.onChange(e); |
28 | } | ||
31 | } | 29 | } |
32 | 30 | ||
33 | focus() { | 31 | focus() { |
34 | this.inputElement?.focus(); | 32 | if (this.inputElement && this.inputElement.current) { |
33 | this.inputElement.current.focus(); | ||
34 | } | ||
35 | } | 35 | } |
36 | 36 | ||
37 | handleChangeComplete = (color: { hex: string }) => { | 37 | handleChangeComplete = (color: { hex: string }) => { |
@@ -40,7 +40,7 @@ class ColorPickerInput extends Component<IProps> { | |||
40 | }; | 40 | }; |
41 | 41 | ||
42 | render() { | 42 | render() { |
43 | const { field, className } = this.props; | 43 | const { field, className = null } = this.props; |
44 | 44 | ||
45 | let { type } = field; | 45 | let { type } = field; |
46 | type = 'text'; | 46 | type = 'text'; |
@@ -64,9 +64,7 @@ class ColorPickerInput extends Component<IProps> { | |||
64 | placeholder={field.placeholder} | 64 | placeholder={field.placeholder} |
65 | onBlur={field.onBlur} | 65 | onBlur={field.onBlur} |
66 | onFocus={field.onFocus} | 66 | onFocus={field.onFocus} |
67 | ref={(element: HTMLInputElement | null | undefined) => { | 67 | ref={this.inputElement} |
68 | this.inputElement = element; | ||
69 | }} | ||
70 | disabled={field.disabled} | 68 | disabled={field.disabled} |
71 | /> | 69 | /> |
72 | <div className="franz-form__input-wrapper franz-form__input-wrapper__color-picker"> | 70 | <div className="franz-form__input-wrapper franz-form__input-wrapper__color-picker"> |
@@ -80,9 +78,7 @@ class ColorPickerInput extends Component<IProps> { | |||
80 | onChange={e => this.onChange(e)} | 78 | onChange={e => this.onChange(e)} |
81 | onBlur={field.onBlur} | 79 | onBlur={field.onBlur} |
82 | onFocus={field.onFocus} | 80 | onFocus={field.onFocus} |
83 | ref={element => { | 81 | ref={this.inputElement} |
84 | this.inputElement = element; | ||
85 | }} | ||
86 | disabled={field.disabled} | 82 | disabled={field.disabled} |
87 | /> | 83 | /> |
88 | </div> | 84 | </div> |