diff options
Diffstat (limited to 'src/components/ui/colorPickerInput')
-rw-r--r-- | src/components/ui/colorPickerInput/index.tsx | 88 |
1 files changed, 88 insertions, 0 deletions
diff --git a/src/components/ui/colorPickerInput/index.tsx b/src/components/ui/colorPickerInput/index.tsx new file mode 100644 index 000000000..9bab6efec --- /dev/null +++ b/src/components/ui/colorPickerInput/index.tsx | |||
@@ -0,0 +1,88 @@ | |||
1 | import { | ||
2 | Component, | ||
3 | createRef, | ||
4 | InputHTMLAttributes, | ||
5 | ReactElement, | ||
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 { FormFields } from '../../../@types/mobx-form.types'; | ||
13 | |||
14 | interface IProps extends InputHTMLAttributes<HTMLInputElement>, FormFields { | ||
15 | className?: string; | ||
16 | focus?: boolean; | ||
17 | onColorChange?: () => void; | ||
18 | error: string; | ||
19 | } | ||
20 | |||
21 | @observer | ||
22 | class ColorPickerInput extends Component<IProps> { | ||
23 | private inputElement: RefObject<HTMLInputElement> = | ||
24 | createRef<HTMLInputElement>(); | ||
25 | |||
26 | componentDidMount(): void { | ||
27 | const { focus = false } = this.props; | ||
28 | if (focus && this.inputElement && this.inputElement.current) { | ||
29 | this.inputElement.current.focus(); | ||
30 | } | ||
31 | } | ||
32 | |||
33 | onChange({ hex }: { hex: string }): void { | ||
34 | const { onColorChange = noop, onChange = noop } = this.props; | ||
35 | onColorChange(); | ||
36 | onChange(hex); | ||
37 | } | ||
38 | |||
39 | render(): ReactElement { | ||
40 | const { | ||
41 | id, | ||
42 | name, | ||
43 | value = '', | ||
44 | placeholder = '', | ||
45 | disabled = false, | ||
46 | className = null, | ||
47 | type = 'text', | ||
48 | error = '', | ||
49 | onChange = noop, | ||
50 | } = this.props; | ||
51 | |||
52 | return ( | ||
53 | <div | ||
54 | className={classnames({ | ||
55 | 'franz-form__field': true, | ||
56 | 'has-error': error, | ||
57 | [`${className}`]: className, | ||
58 | })} | ||
59 | ref={this.inputElement} | ||
60 | > | ||
61 | <SliderPicker | ||
62 | color={value} | ||
63 | onChange={this.onChange.bind(this)} | ||
64 | id={`${id}-SliderPicker`} | ||
65 | type={type} | ||
66 | className="franz-form__input" | ||
67 | name={name} | ||
68 | placeholder={placeholder} | ||
69 | disabled={disabled} | ||
70 | /> | ||
71 | <div className="franz-form__input-wrapper franz-form__input-wrapper__color-picker"> | ||
72 | <input | ||
73 | id={`${id}-Input`} | ||
74 | type={type} | ||
75 | className="franz-form__input" | ||
76 | name={name} | ||
77 | value={value} | ||
78 | placeholder={placeholder} | ||
79 | onChange={onChange} | ||
80 | disabled={disabled} | ||
81 | /> | ||
82 | </div> | ||
83 | </div> | ||
84 | ); | ||
85 | } | ||
86 | } | ||
87 | |||
88 | export default ColorPickerInput; | ||