diff options
Diffstat (limited to 'src/components/ui/ColorPickerInput.tsx')
-rw-r--r-- | src/components/ui/ColorPickerInput.tsx | 102 |
1 files changed, 0 insertions, 102 deletions
diff --git a/src/components/ui/ColorPickerInput.tsx b/src/components/ui/ColorPickerInput.tsx deleted file mode 100644 index da1fffb71..000000000 --- a/src/components/ui/ColorPickerInput.tsx +++ /dev/null | |||
@@ -1,102 +0,0 @@ | |||
1 | import { | ||
2 | ChangeEvent, | ||
3 | ChangeEventHandler, | ||
4 | Component, | ||
5 | createRef, | ||
6 | RefObject, | ||
7 | } from 'react'; | ||
8 | import { observer } from 'mobx-react'; | ||
9 | import classnames from 'classnames'; | ||
10 | import { SliderPicker } from 'react-color'; | ||
11 | import { noop } from 'lodash'; | ||
12 | import { Field } from '../../@types/mobx-form.types'; | ||
13 | |||
14 | interface IProps { | ||
15 | field: Field; | ||
16 | className?: string; | ||
17 | focus?: boolean; | ||
18 | onChange: ChangeEventHandler<HTMLInputElement>; | ||
19 | } | ||
20 | |||
21 | // TODO - [TS DEBT] check if field can be spread instead of having it single field attribute in interface | ||
22 | @observer | ||
23 | class ColorPickerInput extends Component<IProps> { | ||
24 | private inputElement: RefObject<HTMLInputElement> = | ||
25 | createRef<HTMLInputElement>(); | ||
26 | |||
27 | componentDidMount() { | ||
28 | const { focus = false } = this.props; | ||
29 | if (focus) { | ||
30 | this.focus(); | ||
31 | } | ||
32 | } | ||
33 | |||
34 | onChange(e: ChangeEvent<HTMLInputElement>) { | ||
35 | const { field, onChange = noop } = this.props; | ||
36 | |||
37 | onChange(e); | ||
38 | if (field.onChange) { | ||
39 | field.onChange(e); | ||
40 | } | ||
41 | } | ||
42 | |||
43 | focus() { | ||
44 | if (this.inputElement && this.inputElement.current) { | ||
45 | this.inputElement.current.focus(); | ||
46 | } | ||
47 | } | ||
48 | |||
49 | handleChangeComplete = (color: { hex: string }) => { | ||
50 | const { field } = this.props; | ||
51 | field.value = color.hex; | ||
52 | }; | ||
53 | |||
54 | render() { | ||
55 | const { field, className = null } = this.props; | ||
56 | |||
57 | let { type } = field; | ||
58 | type = 'text'; | ||
59 | |||
60 | return ( | ||
61 | <div | ||
62 | className={classnames({ | ||
63 | 'franz-form__field': true, | ||
64 | 'has-error': field.error, | ||
65 | [`${className}`]: className, | ||
66 | })} | ||
67 | > | ||
68 | <SliderPicker | ||
69 | color={field.value} | ||
70 | onChangeComplete={this.handleChangeComplete} | ||
71 | id={field.id} | ||
72 | type={type} | ||
73 | className="franz-form__input" | ||
74 | name={field.name} | ||
75 | value={field.value} | ||
76 | placeholder={field.placeholder} | ||
77 | onBlur={field.onBlur} | ||
78 | onFocus={field.onFocus} | ||
79 | ref={this.inputElement} | ||
80 | disabled={field.disabled} | ||
81 | /> | ||
82 | <div className="franz-form__input-wrapper franz-form__input-wrapper__color-picker"> | ||
83 | <input | ||
84 | id={field.id} | ||
85 | type={type} | ||
86 | className="franz-form__input" | ||
87 | name={field.name} | ||
88 | value={field.value} | ||
89 | placeholder={field.placeholder} | ||
90 | onChange={e => this.onChange(e)} | ||
91 | onBlur={field.onBlur} | ||
92 | onFocus={field.onFocus} | ||
93 | ref={this.inputElement} | ||
94 | disabled={field.disabled} | ||
95 | /> | ||
96 | </div> | ||
97 | </div> | ||
98 | ); | ||
99 | } | ||
100 | } | ||
101 | |||
102 | export default ColorPickerInput; | ||