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 | |
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')
-rw-r--r-- | src/components/ui/ColorPickerInput.tsx | 102 | ||||
-rw-r--r-- | src/components/ui/colorPickerInput/index.tsx | 88 | ||||
-rw-r--r-- | src/components/ui/effects/Appear.tsx | 21 |
3 files changed, 104 insertions, 107 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; | ||
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; | ||
diff --git a/src/components/ui/effects/Appear.tsx b/src/components/ui/effects/Appear.tsx index bf097b6a6..2076f6ba6 100644 --- a/src/components/ui/effects/Appear.tsx +++ b/src/components/ui/effects/Appear.tsx | |||
@@ -5,11 +5,22 @@ interface IProps { | |||
5 | children: ReactNode; | 5 | children: ReactNode; |
6 | transitionName?: string; | 6 | transitionName?: string; |
7 | className?: string; | 7 | className?: string; |
8 | transitionAppear?: boolean; | ||
9 | transitionLeave?: boolean; | ||
10 | transitionAppearTimeout?: number; | ||
11 | transitionEnterTimeout?: number; | ||
12 | transitionLeaveTimeout?: number; | ||
8 | } | 13 | } |
14 | |||
9 | const Appear = ({ | 15 | const Appear = ({ |
10 | children, | 16 | children, |
11 | transitionName = 'fadeIn', | 17 | transitionName = 'fadeIn', |
12 | className = '', | 18 | className = '', |
19 | transitionAppear = true, | ||
20 | transitionLeave = true, | ||
21 | transitionAppearTimeout = 1500, | ||
22 | transitionEnterTimeout = 1500, | ||
23 | transitionLeaveTimeout = 1500, | ||
13 | }: IProps): ReactElement | null => { | 24 | }: IProps): ReactElement | null => { |
14 | const [mounted, setMounted] = useState(false); | 25 | const [mounted, setMounted] = useState(false); |
15 | 26 | ||
@@ -24,11 +35,11 @@ const Appear = ({ | |||
24 | return ( | 35 | return ( |
25 | <CSSTransitionGroup | 36 | <CSSTransitionGroup |
26 | transitionName={transitionName} | 37 | transitionName={transitionName} |
27 | transitionAppear | 38 | transitionAppear={transitionAppear} |
28 | transitionLeave | 39 | transitionLeave={transitionLeave} |
29 | transitionAppearTimeout={1500} | 40 | transitionAppearTimeout={transitionAppearTimeout} |
30 | transitionEnterTimeout={1500} | 41 | transitionEnterTimeout={transitionEnterTimeout} |
31 | transitionLeaveTimeout={1500} | 42 | transitionLeaveTimeout={transitionLeaveTimeout} |
32 | className={className} | 43 | className={className} |
33 | > | 44 | > |
34 | {children} | 45 | {children} |