diff options
author | 2022-06-12 03:20:22 +0530 | |
---|---|---|
committer | 2022-06-12 03:20:22 +0530 | |
commit | c518024d9ca33b6d59818c263b2a755313036618 (patch) | |
tree | 574291874cecc9910aca0de4bc929cd128e26872 /src/components/ui | |
parent | Fix hero image (was referring to ferdi repo) (diff) | |
download | ferdium-app-c518024d9ca33b6d59818c263b2a755313036618.tar.gz ferdium-app-c518024d9ca33b6d59818c263b2a755313036618.tar.zst ferdium-app-c518024d9ca33b6d59818c263b2a755313036618.zip |
Feature: Add color picker component for accent color setting (#228)
Co-authored-by: Vijay A <vraravam@users.noreply.github.com>
Diffstat (limited to 'src/components/ui')
-rw-r--r-- | src/components/ui/ColorPickerInput.tsx | 107 |
1 files changed, 107 insertions, 0 deletions
diff --git a/src/components/ui/ColorPickerInput.tsx b/src/components/ui/ColorPickerInput.tsx new file mode 100644 index 000000000..7cbdb295b --- /dev/null +++ b/src/components/ui/ColorPickerInput.tsx | |||
@@ -0,0 +1,107 @@ | |||
1 | import { ChangeEvent, Component } from 'react'; | ||
2 | import { observer } from 'mobx-react'; | ||
3 | import { Field } from 'mobx-react-form'; | ||
4 | import classnames from 'classnames'; | ||
5 | import { SliderPicker } from 'react-color'; | ||
6 | import { DEFAULT_APP_SETTINGS } from '../../config'; | ||
7 | |||
8 | interface IProps { | ||
9 | field: Field; | ||
10 | className?: string; | ||
11 | focus?: boolean; | ||
12 | }; | ||
13 | |||
14 | interface IState { | ||
15 | background: string; | ||
16 | } | ||
17 | |||
18 | class ColorPickerInput extends Component<IProps, IState> { | ||
19 | static defaultProps = { | ||
20 | className: null, | ||
21 | focus: false, | ||
22 | }; | ||
23 | |||
24 | state = { | ||
25 | background: DEFAULT_APP_SETTINGS.accentColor, | ||
26 | }; | ||
27 | |||
28 | inputElement: HTMLInputElement | null | undefined; | ||
29 | |||
30 | componentDidMount() { | ||
31 | if (this.props.focus) { | ||
32 | this.focus(); | ||
33 | } | ||
34 | } | ||
35 | |||
36 | onChange(e: ChangeEvent<HTMLInputElement>) { | ||
37 | const { field } = this.props; | ||
38 | |||
39 | field.onChange(e); | ||
40 | } | ||
41 | |||
42 | focus() { | ||
43 | this.inputElement?.focus(); | ||
44 | } | ||
45 | |||
46 | handleChangeComplete = (color: { hex: string; }) => { | ||
47 | const { field } = this.props; | ||
48 | this.setState({ background: color.hex }); | ||
49 | field.value = color.hex | ||
50 | }; | ||
51 | |||
52 | render() { | ||
53 | const { | ||
54 | field, | ||
55 | className, | ||
56 | } = this.props; | ||
57 | |||
58 | let { type } = field; | ||
59 | type = 'text'; | ||
60 | |||
61 | return ( | ||
62 | <div | ||
63 | className={classnames({ | ||
64 | 'franz-form__field': true, | ||
65 | 'has-error': field.error, | ||
66 | [`${className}`]: className, | ||
67 | })} | ||
68 | > | ||
69 | <SliderPicker | ||
70 | color={ this.state.background } | ||
71 | onChangeComplete={ this.handleChangeComplete } | ||
72 | id={field.id} | ||
73 | type={type} | ||
74 | className="franz-form__input" | ||
75 | name={field.name} | ||
76 | value={field.value} | ||
77 | placeholder={field.placeholder} | ||
78 | onBlur={field.onBlur} | ||
79 | onFocus={field.onFocus} | ||
80 | ref={(element: HTMLInputElement | null | undefined) => { | ||
81 | this.inputElement = element; | ||
82 | }} | ||
83 | disabled={field.disabled} | ||
84 | /> | ||
85 | <div className="franz-form__input-wrapper franz-form__input-wrapper__color-picker"> | ||
86 | <input | ||
87 | id={field.id} | ||
88 | type={type} | ||
89 | className="franz-form__input" | ||
90 | name={field.name} | ||
91 | value={field.value} | ||
92 | placeholder={field.placeholder} | ||
93 | onChange={e => this.onChange(e)} | ||
94 | onBlur={field.onBlur} | ||
95 | onFocus={field.onFocus} | ||
96 | ref={element => { | ||
97 | this.inputElement = element; | ||
98 | }} | ||
99 | disabled={field.disabled} | ||
100 | /> | ||
101 | </div> | ||
102 | </div> | ||
103 | ); | ||
104 | } | ||
105 | } | ||
106 | |||
107 | export default observer(ColorPickerInput); | ||