diff options
author | muhamedsalih-tw <104364298+muhamedsalih-tw@users.noreply.github.com> | 2022-11-16 23:30:39 +0530 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-11-16 18:00:39 +0000 |
commit | eb7b2481f631cec5953265eef4ebc3f2fa7e496a (patch) | |
tree | 419d4413f90ece77c0a2204b40948f1a158793d5 /src/components/ui/colorPickerInput | |
parent | 6.2.1-nightly.44 [skip ci] (diff) | |
download | ferdium-app-eb7b2481f631cec5953265eef4ebc3f2fa7e496a.tar.gz ferdium-app-eb7b2481f631cec5953265eef4ebc3f2fa7e496a.tar.zst ferdium-app-eb7b2481f631cec5953265eef4ebc3f2fa7e496a.zip |
Transform JSX components to TSX (#755)
* color picker types
* Import
* SetupAssistant
* Services & appear
* ServiceWebView
* SettingsLayout
* ImportantScreen
* WorkspaceDrawer
* SetupAssistant
* chore: update vscode settings
* chore: removed stale Import screen component & its tree
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; | ||