diff options
author | 2023-07-29 21:12:16 -0600 | |
---|---|---|
committer | 2023-07-30 08:42:16 +0530 | |
commit | 32f76b74a69ad4d60a014bf075c39517888436bc (patch) | |
tree | 753378cc30f52d1e0e51be64b5a83d39f08f39c8 /src/components | |
parent | 6.4.1-nightly.15 [skip ci] (diff) | |
download | ferdium-app-32f76b74a69ad4d60a014bf075c39517888436bc.tar.gz ferdium-app-32f76b74a69ad4d60a014bf075c39517888436bc.tar.zst ferdium-app-32f76b74a69ad4d60a014bf075c39517888436bc.zip |
refactor: various improvements (#1296)
* refactor: various improvements
- enable no-use-before-define eslint rule
- shuffle code to conform to no-use-before-define eslint rule
- remove btoa dependency which is deprecated and replace with Buffer.from(string).toString('base64')
- convert some any types into useful ones
- add type annotations where possible
- remove unused @types/expect.js
- install @types/semver and ts-node which were missing
- repair and rewrite add-crowdin-contributors script
- remove export keyword from variables which are never consumed in another file
- remove unity indicator hack where linked issue was closed
- remove module declaration for kebab-case which is unused
- add missing state interface for certain components
- remove default exports for files which already have a named export
- export IRecipePreview so it can be used throughout codebase
- remove unused removeCacheForCallWith method from CachedRequest.ts
- cleanup unused colors and styles inside legacy theme
* - improve ColorPickerInput
- fix invalid DOM nesting with div inside p in EditSettingsForm
- fix progressbarAccentColor color picker not updating input when using slider
- install missing @types/react-color dependency
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/auth/Login.tsx | 2 | ||||
-rw-r--r-- | src/components/layout/Sidebar.tsx | 2 | ||||
-rw-r--r-- | src/components/settings/releaseNotes/ReleaseNotesDashboard.tsx | 12 | ||||
-rw-r--r-- | src/components/settings/releaseNotes/ReleaseNotesLayout.tsx | 1 | ||||
-rw-r--r-- | src/components/settings/settings/EditSettingsForm.tsx | 68 | ||||
-rw-r--r-- | src/components/ui/badge/ProBadge.tsx | 14 | ||||
-rw-r--r-- | src/components/ui/badge/index.tsx | 18 | ||||
-rw-r--r-- | src/components/ui/button/index.tsx | 3 | ||||
-rw-r--r-- | src/components/ui/colorPickerInput/index.tsx | 37 | ||||
-rw-r--r-- | src/components/ui/headline/index.tsx | 16 | ||||
-rw-r--r-- | src/components/ui/icon/index.tsx | 12 | ||||
-rw-r--r-- | src/components/ui/infobox/index.tsx | 1 | ||||
-rw-r--r-- | src/components/ui/loader/index.tsx | 13 | ||||
-rw-r--r-- | src/components/ui/toggle/index.tsx | 14 | ||||
-rw-r--r-- | src/components/ui/typings/generic.ts | 2 | ||||
-rw-r--r-- | src/components/ui/wrapper/index.tsx | 2 | ||||
-rw-r--r-- | src/components/util/ErrorBoundary/index.tsx | 16 |
17 files changed, 115 insertions, 118 deletions
diff --git a/src/components/auth/Login.tsx b/src/components/auth/Login.tsx index eaa04256c..cf7abe654 100644 --- a/src/components/auth/Login.tsx +++ b/src/components/auth/Login.tsx | |||
@@ -99,7 +99,7 @@ class Login extends Component<IProps> { | |||
99 | submit(e: FormEvent<HTMLFormElement>): void { | 99 | submit(e: FormEvent<HTMLFormElement>): void { |
100 | e.preventDefault(); | 100 | e.preventDefault(); |
101 | this.form.submit({ | 101 | this.form.submit({ |
102 | onSuccess: form => { | 102 | onSuccess: (form: Form) => { |
103 | this.props.onSubmit(form.values()); | 103 | this.props.onSubmit(form.values()); |
104 | }, | 104 | }, |
105 | onError: noop, | 105 | onError: noop, |
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx index ceb9cfff9..6fd911a24 100644 --- a/src/components/layout/Sidebar.tsx +++ b/src/components/layout/Sidebar.tsx | |||
@@ -80,6 +80,7 @@ interface IProps extends WrappedComponentProps { | |||
80 | showServiceNameSetting: boolean; | 80 | showServiceNameSetting: boolean; |
81 | showMessageBadgesEvenWhenMuted: boolean; | 81 | showMessageBadgesEvenWhenMuted: boolean; |
82 | isAppMuted: boolean; | 82 | isAppMuted: boolean; |
83 | // eslint-disable-next-line react/no-unused-prop-types | ||
83 | isMenuCollapsed: boolean; | 84 | isMenuCollapsed: boolean; |
84 | isWorkspaceDrawerOpen: boolean; | 85 | isWorkspaceDrawerOpen: boolean; |
85 | isTodosServiceActive: boolean; | 86 | isTodosServiceActive: boolean; |
@@ -90,6 +91,7 @@ interface IProps extends WrappedComponentProps { | |||
90 | toggleCollapseMenu: () => void; | 91 | toggleCollapseMenu: () => void; |
91 | toggleWorkspaceDrawer: () => void; | 92 | toggleWorkspaceDrawer: () => void; |
92 | openSettings: (args: { path: string }) => void; | 93 | openSettings: (args: { path: string }) => void; |
94 | // eslint-disable-next-line react/no-unused-prop-types | ||
93 | closeSettings: () => void; | 95 | closeSettings: () => void; |
94 | setActive: (args: { serviceId: string }) => void; | 96 | setActive: (args: { serviceId: string }) => void; |
95 | reorder: (args: { oldIndex: number; newIndex: number }) => void; | 97 | reorder: (args: { oldIndex: number; newIndex: number }) => void; |
diff --git a/src/components/settings/releaseNotes/ReleaseNotesDashboard.tsx b/src/components/settings/releaseNotes/ReleaseNotesDashboard.tsx index ff7c45bb1..9b17e551c 100644 --- a/src/components/settings/releaseNotes/ReleaseNotesDashboard.tsx +++ b/src/components/settings/releaseNotes/ReleaseNotesDashboard.tsx | |||
@@ -1,6 +1,6 @@ | |||
1 | import { Component } from 'react'; | 1 | import { Component } from 'react'; |
2 | import { observer } from 'mobx-react'; | 2 | import { observer } from 'mobx-react'; |
3 | import { defineMessages, injectIntl } from 'react-intl'; | 3 | import { IntlShape, defineMessages, injectIntl } from 'react-intl'; |
4 | import Markdown from 'markdown-to-jsx'; | 4 | import Markdown from 'markdown-to-jsx'; |
5 | import { ferdiumVersion } from '../../../environment-remote'; | 5 | import { ferdiumVersion } from '../../../environment-remote'; |
6 | import { | 6 | import { |
@@ -26,14 +26,14 @@ const messages = defineMessages({ | |||
26 | }); | 26 | }); |
27 | 27 | ||
28 | interface IProps { | 28 | interface IProps { |
29 | intl: any; | 29 | intl: IntlShape; |
30 | } | 30 | } |
31 | 31 | ||
32 | class ReleaseNotesDashboard extends Component<IProps> { | 32 | interface IState { |
33 | state = { | 33 | data: string; |
34 | data: '', | 34 | } |
35 | }; | ||
36 | 35 | ||
36 | class ReleaseNotesDashboard extends Component<IProps, IState> { | ||
37 | constructor(props) { | 37 | constructor(props) { |
38 | super(props); | 38 | super(props); |
39 | 39 | ||
diff --git a/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx b/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx index bc38aa603..4a6fe54f4 100644 --- a/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx +++ b/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx | |||
@@ -19,6 +19,7 @@ const messages = defineMessages({ | |||
19 | 19 | ||
20 | interface IProps extends WrappedComponentProps { | 20 | interface IProps extends WrappedComponentProps { |
21 | actions?: Actions; | 21 | actions?: Actions; |
22 | // eslint-disable-next-line react/no-unused-prop-types | ||
22 | children?: React.ReactNode; | 23 | children?: React.ReactNode; |
23 | } | 24 | } |
24 | 25 | ||
diff --git a/src/components/settings/settings/EditSettingsForm.tsx b/src/components/settings/settings/EditSettingsForm.tsx index 11ae63737..099a27ebe 100644 --- a/src/components/settings/settings/EditSettingsForm.tsx +++ b/src/components/settings/settings/EditSettingsForm.tsx | |||
@@ -333,7 +333,7 @@ class EditSettingsForm extends Component<IProps, IState> { | |||
333 | } | 333 | } |
334 | 334 | ||
335 | this.props.form.submit({ | 335 | this.props.form.submit({ |
336 | onSuccess: form => { | 336 | onSuccess: (form: Form) => { |
337 | const values = form.values(); | 337 | const values = form.values(); |
338 | const { accentColor } = values; | 338 | const { accentColor } = values; |
339 | if (accentColor.trim().length === 0) { | 339 | if (accentColor.trim().length === 0) { |
@@ -386,8 +386,9 @@ class EditSettingsForm extends Component<IProps, IState> { | |||
386 | const { lockingFeatureEnabled, scheduledDNDEnabled, reloadAfterResume } = | 386 | const { lockingFeatureEnabled, scheduledDNDEnabled, reloadAfterResume } = |
387 | window['ferdium'].stores.settings.all.app; | 387 | window['ferdium'].stores.settings.all.app; |
388 | 388 | ||
389 | let cacheSize; | 389 | let cacheSize: string; |
390 | let notCleared; | 390 | let notCleared: boolean; |
391 | |||
391 | if (this.state.activeSetttingsTab === 'advanced') { | 392 | if (this.state.activeSetttingsTab === 'advanced') { |
392 | const cacheSizeBytes = getCacheSize(); | 393 | const cacheSizeBytes = getCacheSize(); |
393 | debug('cacheSizeBytes:', cacheSizeBytes); | 394 | debug('cacheSizeBytes:', cacheSizeBytes); |
@@ -740,38 +741,35 @@ class EditSettingsForm extends Component<IProps, IState> { | |||
740 | defaultAccentColor: DEFAULT_APP_SETTINGS.accentColor, | 741 | defaultAccentColor: DEFAULT_APP_SETTINGS.accentColor, |
741 | })} | 742 | })} |
742 | </p> | 743 | </p> |
743 | <p> | 744 | <p>{intl.formatMessage(messages.overallTheme)}</p> |
744 | {intl.formatMessage(messages.overallTheme)} | 745 | <div className="settings__settings-group__apply-color"> |
745 | <div className="settings__settings-group__apply-color"> | 746 | <ColorPickerInput |
746 | <ColorPickerInput | 747 | {...form.$('accentColor').bind()} |
747 | {...form.$('accentColor').bind()} | 748 | name="accentColor" |
748 | onColorChange={this.submit.bind(this)} | 749 | onColorChange={e => this.submit(e)} |
749 | className="color-picker-input" | 750 | className="color-picker-input" |
750 | /> | 751 | /> |
751 | </div> | 752 | </div> |
752 | </p> | 753 | <p>{intl.formatMessage(messages.progressbarTheme)}</p> |
753 | <p> | 754 | <div className="settings__settings-group__apply-color"> |
754 | {intl.formatMessage(messages.progressbarTheme)} | 755 | <ColorPickerInput |
755 | <div className="settings__settings-group__apply-color"> | 756 | {...form.$('progressbarAccentColor').bind()} |
756 | <ColorPickerInput | 757 | name="progressbarAccentColor" |
757 | {...form.$('progressbarAccentColor').bind()} | 758 | onColorChange={e => this.submit(e)} |
758 | onColorChange={this.submit.bind(this)} | 759 | className="color-picker-input" |
759 | className="color-picker-input" | 760 | /> |
760 | /> | 761 | </div> |
761 | </div> | 762 | |
762 | </p> | 763 | <div className="settings__settings-group__apply-color"> |
763 | <p> | 764 | <Button |
764 | <div className="settings__settings-group__apply-color"> | 765 | buttonType="secondary" |
765 | <Button | 766 | className="settings__settings-group__apply-color__button" |
766 | buttonType="secondary" | 767 | label="Apply color" |
767 | className="settings__settings-group__apply-color__button" | 768 | onClick={e => { |
768 | label="Apply color" | 769 | this.submit(e); |
769 | onClick={e => { | 770 | }} |
770 | this.submit(e); | 771 | /> |
771 | }} | 772 | </div> |
772 | /> | ||
773 | </div> | ||
774 | </p> | ||
775 | <HrSections /> | 773 | <HrSections /> |
776 | 774 | ||
777 | <H2 className="settings__section_header"> | 775 | <H2 className="settings__section_header"> |
diff --git a/src/components/ui/badge/ProBadge.tsx b/src/components/ui/badge/ProBadge.tsx index 62c45b77c..a5947d3a8 100644 --- a/src/components/ui/badge/ProBadge.tsx +++ b/src/components/ui/badge/ProBadge.tsx | |||
@@ -7,13 +7,6 @@ import { Theme } from '../../../themes'; | |||
7 | import Icon from '../icon'; | 7 | import Icon from '../icon'; |
8 | import Badge from './index'; | 8 | import Badge from './index'; |
9 | 9 | ||
10 | interface IProps extends WithStylesProps<typeof styles> { | ||
11 | badgeClasses?: string; | ||
12 | iconClasses?: string; | ||
13 | inverted?: boolean; | ||
14 | className?: string; | ||
15 | } | ||
16 | |||
17 | const styles = (theme: Theme) => ({ | 10 | const styles = (theme: Theme) => ({ |
18 | badge: { | 11 | badge: { |
19 | height: 'auto', | 12 | height: 'auto', |
@@ -32,6 +25,13 @@ const styles = (theme: Theme) => ({ | |||
32 | }, | 25 | }, |
33 | }); | 26 | }); |
34 | 27 | ||
28 | interface IProps extends WithStylesProps<typeof styles> { | ||
29 | badgeClasses?: string; | ||
30 | iconClasses?: string; | ||
31 | inverted?: boolean; | ||
32 | className?: string; | ||
33 | } | ||
34 | |||
35 | class ProBadgeComponent extends Component<IProps> { | 35 | class ProBadgeComponent extends Component<IProps> { |
36 | render() { | 36 | render() { |
37 | const { classes, badgeClasses, iconClasses, inverted, className } = | 37 | const { classes, badgeClasses, iconClasses, inverted, className } = |
diff --git a/src/components/ui/badge/index.tsx b/src/components/ui/badge/index.tsx index 33e2f5d53..44fbf2d4a 100644 --- a/src/components/ui/badge/index.tsx +++ b/src/components/ui/badge/index.tsx | |||
@@ -4,23 +4,17 @@ import injectStyle, { WithStylesProps } from 'react-jss'; | |||
4 | 4 | ||
5 | import { Theme } from '../../../themes'; | 5 | import { Theme } from '../../../themes'; |
6 | 6 | ||
7 | interface IProps extends WithStylesProps<typeof styles> { | ||
8 | type: string; | ||
9 | className?: string; | ||
10 | children: ReactNode; | ||
11 | } | ||
12 | |||
13 | const badgeStyles = (theme: Theme) => { | 7 | const badgeStyles = (theme: Theme) => { |
14 | const styles = {}; | 8 | const styles = {}; |
15 | Object.keys(theme.styleTypes).map(style => { | 9 | Object.keys(theme.styleTypes).map(style => |
16 | Object.assign(styles, { | 10 | Object.assign(styles, { |
17 | [style]: { | 11 | [style]: { |
18 | background: theme.styleTypes[style].accent, | 12 | background: theme.styleTypes[style].accent, |
19 | color: theme.styleTypes[style].contrast, | 13 | color: theme.styleTypes[style].contrast, |
20 | border: theme.styleTypes[style].border, | 14 | border: theme.styleTypes[style].border, |
21 | }, | 15 | }, |
22 | }); | 16 | }), |
23 | }); | 17 | ); |
24 | 18 | ||
25 | return styles; | 19 | return styles; |
26 | }; | 20 | }; |
@@ -44,6 +38,12 @@ const styles = (theme: Theme) => ({ | |||
44 | ...badgeStyles(theme), | 38 | ...badgeStyles(theme), |
45 | }); | 39 | }); |
46 | 40 | ||
41 | interface IProps extends WithStylesProps<typeof styles> { | ||
42 | type: string; | ||
43 | className?: string; | ||
44 | children: ReactNode; | ||
45 | } | ||
46 | |||
47 | class BadgeComponent extends Component<IProps> { | 47 | class BadgeComponent extends Component<IProps> { |
48 | public static defaultProps = { | 48 | public static defaultProps = { |
49 | type: 'primary', | 49 | type: 'primary', |
diff --git a/src/components/ui/button/index.tsx b/src/components/ui/button/index.tsx index 1b648b1d5..3c31ca952 100644 --- a/src/components/ui/button/index.tsx +++ b/src/components/ui/button/index.tsx | |||
@@ -1,3 +1,4 @@ | |||
1 | /* eslint-disable no-use-before-define */ | ||
1 | import Icon from '@mdi/react'; | 2 | import Icon from '@mdi/react'; |
2 | import classnames from 'classnames'; | 3 | import classnames from 'classnames'; |
3 | import { Property } from 'csstype'; | 4 | import { Property } from 'csstype'; |
@@ -135,7 +136,7 @@ interface IProps extends IFormField, WithStylesProps<typeof styles> { | |||
135 | label?: string; | 136 | label?: string; |
136 | disabled?: boolean; | 137 | disabled?: boolean; |
137 | id?: string; | 138 | id?: string; |
138 | type?: 'button' | 'reset' | 'submit' | undefined; | 139 | type?: 'button' | 'reset' | 'submit'; |
139 | onClick?: MouseEventHandler<HTMLInputElement>; | 140 | onClick?: MouseEventHandler<HTMLInputElement>; |
140 | buttonType?: ButtonType; | 141 | buttonType?: ButtonType; |
141 | loaded?: boolean; | 142 | loaded?: boolean; |
diff --git a/src/components/ui/colorPickerInput/index.tsx b/src/components/ui/colorPickerInput/index.tsx index 2367175bd..39fd0220a 100644 --- a/src/components/ui/colorPickerInput/index.tsx +++ b/src/components/ui/colorPickerInput/index.tsx | |||
@@ -1,21 +1,18 @@ | |||
1 | import { | 1 | import { |
2 | ChangeEvent, | ||
2 | Component, | 3 | Component, |
3 | createRef, | 4 | createRef, |
4 | InputHTMLAttributes, | 5 | InputHTMLAttributes, |
5 | ReactElement, | ||
6 | RefObject, | 6 | RefObject, |
7 | } from 'react'; | 7 | } from 'react'; |
8 | import { observer } from 'mobx-react'; | 8 | import { observer } from 'mobx-react'; |
9 | import classnames from 'classnames'; | 9 | import classnames from 'classnames'; |
10 | import { SliderPicker } from 'react-color'; | 10 | import { Color, ColorResult, SliderPicker } from 'react-color'; |
11 | import { noop } from 'lodash'; | 11 | import { noop } from 'lodash'; |
12 | import { FormFields } from '../../../@types/mobx-form.types'; | 12 | import { FormFields } from '../../../@types/mobx-form.types'; |
13 | 13 | ||
14 | interface IProps extends InputHTMLAttributes<HTMLInputElement>, FormFields { | 14 | interface IProps extends InputHTMLAttributes<HTMLInputElement>, FormFields { |
15 | className?: string; | 15 | onColorChange: (event: ChangeEvent<HTMLInputElement>) => void; |
16 | focus?: boolean; | ||
17 | onColorChange?: () => void; | ||
18 | error: string; | ||
19 | } | 16 | } |
20 | 17 | ||
21 | @observer | 18 | @observer |
@@ -23,20 +20,13 @@ class ColorPickerInput extends Component<IProps> { | |||
23 | private inputElement: RefObject<HTMLInputElement> = | 20 | private inputElement: RefObject<HTMLInputElement> = |
24 | createRef<HTMLInputElement>(); | 21 | createRef<HTMLInputElement>(); |
25 | 22 | ||
26 | componentDidMount(): void { | 23 | onChange(color: ColorResult, event: ChangeEvent<HTMLInputElement>): void { |
27 | const { focus = false } = this.props; | 24 | const { onColorChange, onChange = noop } = this.props; |
28 | if (focus && this.inputElement?.current) { | 25 | onColorChange(event); |
29 | this.inputElement.current.focus(); | 26 | onChange(color.hex); |
30 | } | ||
31 | } | 27 | } |
32 | 28 | ||
33 | onChange({ hex }: { hex: string }): void { | 29 | render() { |
34 | const { onColorChange = noop, onChange = noop } = this.props; | ||
35 | onColorChange(); | ||
36 | onChange(hex); | ||
37 | } | ||
38 | |||
39 | render(): ReactElement { | ||
40 | const { | 30 | const { |
41 | id, | 31 | id, |
42 | name, | 32 | name, |
@@ -45,7 +35,6 @@ class ColorPickerInput extends Component<IProps> { | |||
45 | disabled = false, | 35 | disabled = false, |
46 | className = null, | 36 | className = null, |
47 | type = 'text', | 37 | type = 'text', |
48 | error = '', | ||
49 | onChange = noop, | 38 | onChange = noop, |
50 | } = this.props; | 39 | } = this.props; |
51 | 40 | ||
@@ -53,20 +42,14 @@ class ColorPickerInput extends Component<IProps> { | |||
53 | <div | 42 | <div |
54 | className={classnames({ | 43 | className={classnames({ |
55 | 'franz-form__field': true, | 44 | 'franz-form__field': true, |
56 | 'has-error': error, | ||
57 | [`${className}`]: className, | 45 | [`${className}`]: className, |
58 | })} | 46 | })} |
59 | ref={this.inputElement} | 47 | ref={this.inputElement} |
60 | > | 48 | > |
61 | <SliderPicker | 49 | <SliderPicker |
62 | color={value} | 50 | color={value as Color} |
63 | onChange={this.onChange.bind(this)} | 51 | onChange={(color, event) => this.onChange(color, event)} |
64 | id={`${id}-SliderPicker`} | ||
65 | type={type} | ||
66 | className="franz-form__input" | 52 | className="franz-form__input" |
67 | name={name} | ||
68 | placeholder={placeholder} | ||
69 | disabled={disabled} | ||
70 | /> | 53 | /> |
71 | <div className="franz-form__input-wrapper franz-form__input-wrapper__color-picker"> | 54 | <div className="franz-form__input-wrapper franz-form__input-wrapper__color-picker"> |
72 | <input | 55 | <input |
diff --git a/src/components/ui/headline/index.tsx b/src/components/ui/headline/index.tsx index 424190a6a..8e40fa896 100644 --- a/src/components/ui/headline/index.tsx +++ b/src/components/ui/headline/index.tsx | |||
@@ -11,14 +11,6 @@ import injectStyle, { WithStylesProps } from 'react-jss'; | |||
11 | import { Theme } from '../../../themes'; | 11 | import { Theme } from '../../../themes'; |
12 | import { Omit } from '../typings/generic'; | 12 | import { Omit } from '../typings/generic'; |
13 | 13 | ||
14 | interface IProps extends WithStylesProps<typeof styles> { | ||
15 | children: ReactNode; | ||
16 | level?: number; | ||
17 | className?: string; | ||
18 | id?: string; | ||
19 | onClick?: MouseEventHandler<HTMLButtonElement>; | ||
20 | } | ||
21 | |||
22 | const styles = (theme: Theme) => ({ | 14 | const styles = (theme: Theme) => ({ |
23 | headline: { | 15 | headline: { |
24 | fontWeight: 'lighter', | 16 | fontWeight: 'lighter', |
@@ -45,6 +37,14 @@ const styles = (theme: Theme) => ({ | |||
45 | }, | 37 | }, |
46 | }); | 38 | }); |
47 | 39 | ||
40 | interface IProps extends WithStylesProps<typeof styles> { | ||
41 | children: ReactNode; | ||
42 | level?: number; | ||
43 | className?: string; | ||
44 | id?: string; | ||
45 | onClick?: MouseEventHandler<HTMLButtonElement>; | ||
46 | } | ||
47 | |||
48 | class HeadlineComponent extends Component<IProps> { | 48 | class HeadlineComponent extends Component<IProps> { |
49 | render(): ReactElement { | 49 | render(): ReactElement { |
50 | const { classes, level, className, children, id, onClick } = this.props; | 50 | const { classes, level, className, children, id, onClick } = this.props; |
diff --git a/src/components/ui/icon/index.tsx b/src/components/ui/icon/index.tsx index 5b432a194..04a00d0e0 100644 --- a/src/components/ui/icon/index.tsx +++ b/src/components/ui/icon/index.tsx | |||
@@ -5,18 +5,18 @@ import injectStyle, { WithStylesProps } from 'react-jss'; | |||
5 | 5 | ||
6 | import { Theme } from '../../../themes'; | 6 | import { Theme } from '../../../themes'; |
7 | 7 | ||
8 | interface IProps extends WithStylesProps<typeof styles> { | ||
9 | icon: string; | ||
10 | size?: number; | ||
11 | className?: string; | ||
12 | } | ||
13 | |||
14 | const styles = (theme: Theme) => ({ | 8 | const styles = (theme: Theme) => ({ |
15 | icon: { | 9 | icon: { |
16 | fill: theme.colorText, | 10 | fill: theme.colorText, |
17 | }, | 11 | }, |
18 | }); | 12 | }); |
19 | 13 | ||
14 | interface IProps extends WithStylesProps<typeof styles> { | ||
15 | icon: string; | ||
16 | size?: number; | ||
17 | className?: string; | ||
18 | } | ||
19 | |||
20 | class IconComponent extends Component<IProps> { | 20 | class IconComponent extends Component<IProps> { |
21 | render(): ReactElement { | 21 | render(): ReactElement { |
22 | const { classes, icon, size = 1, className } = this.props; | 22 | const { classes, icon, size = 1, className } = this.props; |
diff --git a/src/components/ui/infobox/index.tsx b/src/components/ui/infobox/index.tsx index 28ec2ff90..a1c4f9d21 100644 --- a/src/components/ui/infobox/index.tsx +++ b/src/components/ui/infobox/index.tsx | |||
@@ -1,3 +1,4 @@ | |||
1 | /* eslint-disable no-use-before-define */ | ||
1 | import { mdiClose } from '@mdi/js'; | 2 | import { mdiClose } from '@mdi/js'; |
2 | import classnames from 'classnames'; | 3 | import classnames from 'classnames'; |
3 | import { noop } from 'lodash'; | 4 | import { noop } from 'lodash'; |
diff --git a/src/components/ui/loader/index.tsx b/src/components/ui/loader/index.tsx index 361fc477b..957899bdc 100644 --- a/src/components/ui/loader/index.tsx +++ b/src/components/ui/loader/index.tsx | |||
@@ -2,13 +2,9 @@ import classnames from 'classnames'; | |||
2 | import { Component } from 'react'; | 2 | import { Component } from 'react'; |
3 | import injectStyle, { WithStylesProps } from 'react-jss'; | 3 | import injectStyle, { WithStylesProps } from 'react-jss'; |
4 | import ReactLoader from 'react-loader'; | 4 | import ReactLoader from 'react-loader'; |
5 | import { Theme } from '../../../themes'; | ||
5 | 6 | ||
6 | interface IProps extends WithStylesProps<typeof styles> { | 7 | const styles = (theme: Theme) => ({ |
7 | className?: string; | ||
8 | color?: string; | ||
9 | } | ||
10 | |||
11 | const styles = theme => ({ | ||
12 | container: { | 8 | container: { |
13 | position: 'relative', | 9 | position: 'relative', |
14 | height: 60, | 10 | height: 60, |
@@ -17,6 +13,11 @@ const styles = theme => ({ | |||
17 | color: theme.colorText, | 13 | color: theme.colorText, |
18 | }); | 14 | }); |
19 | 15 | ||
16 | interface IProps extends WithStylesProps<typeof styles> { | ||
17 | className?: string; | ||
18 | color?: string; | ||
19 | } | ||
20 | |||
20 | class LoaderComponent extends Component<IProps> { | 21 | class LoaderComponent extends Component<IProps> { |
21 | render() { | 22 | render() { |
22 | const { classes, className, color } = this.props; | 23 | const { classes, className, color } = this.props; |
diff --git a/src/components/ui/toggle/index.tsx b/src/components/ui/toggle/index.tsx index 48f68943b..275d28bf6 100644 --- a/src/components/ui/toggle/index.tsx +++ b/src/components/ui/toggle/index.tsx | |||
@@ -9,13 +9,6 @@ import Label from '../label'; | |||
9 | import { IFormField } from '../typings/generic'; | 9 | import { IFormField } from '../typings/generic'; |
10 | import Wrapper from '../wrapper'; | 10 | import Wrapper from '../wrapper'; |
11 | 11 | ||
12 | interface IProps | ||
13 | extends InputHTMLAttributes<HTMLInputElement>, | ||
14 | IFormField, | ||
15 | WithStylesProps<typeof styles> { | ||
16 | className?: string; | ||
17 | } | ||
18 | |||
19 | const buttonTransition: string = window?.matchMedia( | 12 | const buttonTransition: string = window?.matchMedia( |
20 | '(prefers-reduced-motion: no-preference)', | 13 | '(prefers-reduced-motion: no-preference)', |
21 | ) | 14 | ) |
@@ -62,6 +55,13 @@ const styles = (theme: Theme) => ({ | |||
62 | }, | 55 | }, |
63 | }); | 56 | }); |
64 | 57 | ||
58 | interface IProps | ||
59 | extends InputHTMLAttributes<HTMLInputElement>, | ||
60 | IFormField, | ||
61 | WithStylesProps<typeof styles> { | ||
62 | className?: string; | ||
63 | } | ||
64 | |||
65 | class Toggle extends Component<IProps> { | 65 | class Toggle extends Component<IProps> { |
66 | render(): ReactElement { | 66 | render(): ReactElement { |
67 | const { | 67 | const { |
diff --git a/src/components/ui/typings/generic.ts b/src/components/ui/typings/generic.ts index 3aec0bc40..bf45e4ce0 100644 --- a/src/components/ui/typings/generic.ts +++ b/src/components/ui/typings/generic.ts | |||
@@ -6,5 +6,5 @@ export interface IFormField { | |||
6 | noMargin?: boolean; | 6 | noMargin?: boolean; |
7 | } | 7 | } |
8 | 8 | ||
9 | export type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N; | ||
10 | export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>; | 9 | export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>; |
10 | export type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N; | ||
diff --git a/src/components/ui/wrapper/index.tsx b/src/components/ui/wrapper/index.tsx index d733d050e..450d09fd1 100644 --- a/src/components/ui/wrapper/index.tsx +++ b/src/components/ui/wrapper/index.tsx | |||
@@ -2,10 +2,12 @@ import classnames from 'classnames'; | |||
2 | import { Component, ReactNode } from 'react'; | 2 | import { Component, ReactNode } from 'react'; |
3 | import injectStyle, { WithStylesProps } from 'react-jss'; | 3 | import injectStyle, { WithStylesProps } from 'react-jss'; |
4 | 4 | ||
5 | // eslint-disable-next-line no-use-before-define | ||
5 | interface IProps extends WithStylesProps<typeof styles> { | 6 | interface IProps extends WithStylesProps<typeof styles> { |
6 | children: ReactNode; | 7 | children: ReactNode; |
7 | className?: string; | 8 | className?: string; |
8 | identifier: string; | 9 | identifier: string; |
10 | // eslint-disable-next-line react/no-unused-prop-types | ||
9 | noMargin?: boolean; | 11 | noMargin?: boolean; |
10 | } | 12 | } |
11 | 13 | ||
diff --git a/src/components/util/ErrorBoundary/index.tsx b/src/components/util/ErrorBoundary/index.tsx index bef211ef9..66f860835 100644 --- a/src/components/util/ErrorBoundary/index.tsx +++ b/src/components/util/ErrorBoundary/index.tsx | |||
@@ -23,10 +23,18 @@ interface ErrorBoundaryProps extends WithStylesProps<typeof styles> { | |||
23 | children?: React.ReactNode; | 23 | children?: React.ReactNode; |
24 | } | 24 | } |
25 | 25 | ||
26 | class ErrorBoundary extends Component<ErrorBoundaryProps> { | 26 | interface ErrorBoundaryState { |
27 | state = { | 27 | hasError: boolean; |
28 | hasError: false, | 28 | } |
29 | }; | 29 | |
30 | class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> { | ||
31 | constructor(props) { | ||
32 | super(props); | ||
33 | |||
34 | this.state = { | ||
35 | hasError: false, | ||
36 | }; | ||
37 | } | ||
30 | 38 | ||
31 | componentDidCatch(): void { | 39 | componentDidCatch(): void { |
32 | this.setState({ hasError: true }); | 40 | this.setState({ hasError: true }); |