diff options
Diffstat (limited to 'src/components/settings')
-rw-r--r-- | src/components/settings/SettingsLayout.tsx (renamed from src/components/settings/SettingsLayout.jsx) | 47 | ||||
-rw-r--r-- | src/components/settings/settings/EditSettingsForm.tsx | 25 |
2 files changed, 36 insertions, 36 deletions
diff --git a/src/components/settings/SettingsLayout.jsx b/src/components/settings/SettingsLayout.tsx index 989c428f2..3b706571e 100644 --- a/src/components/settings/SettingsLayout.jsx +++ b/src/components/settings/SettingsLayout.tsx | |||
@@ -1,8 +1,6 @@ | |||
1 | import { Component } from 'react'; | 1 | import { Component, ReactElement } from 'react'; |
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | 2 | import { observer } from 'mobx-react'; |
4 | import { defineMessages, injectIntl } from 'react-intl'; | 3 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; |
5 | |||
6 | import { mdiClose } from '@mdi/js'; | 4 | import { mdiClose } from '@mdi/js'; |
7 | import { Outlet } from 'react-router-dom'; | 5 | import { Outlet } from 'react-router-dom'; |
8 | import ErrorBoundary from '../util/ErrorBoundary'; | 6 | import ErrorBoundary from '../util/ErrorBoundary'; |
@@ -17,35 +15,35 @@ const messages = defineMessages({ | |||
17 | }, | 15 | }, |
18 | }); | 16 | }); |
19 | 17 | ||
20 | class SettingsLayout extends Component { | 18 | interface IProps extends WrappedComponentProps { |
21 | static propTypes = { | 19 | navigation: ReactElement; |
22 | navigation: PropTypes.element.isRequired, | 20 | closeSettings: () => void; |
23 | closeSettings: PropTypes.func.isRequired, | 21 | } |
24 | }; | 22 | |
23 | @observer | ||
24 | class SettingsLayout extends Component<IProps> { | ||
25 | constructor(props: IProps) { | ||
26 | super(props); | ||
25 | 27 | ||
26 | componentDidMount() { | 28 | this.handleKeyDown = this.handleKeyDown.bind(this); |
27 | document.addEventListener('keydown', this.handleKeyDown.bind(this), false); | ||
28 | } | 29 | } |
29 | 30 | ||
30 | componentWillUnmount() { | 31 | componentDidMount(): void { |
31 | document.removeEventListener( | 32 | document.addEventListener('keydown', this.handleKeyDown, false); |
32 | 'keydown', | ||
33 | // eslint-disable-next-line unicorn/no-invalid-remove-event-listener | ||
34 | this.handleKeyDown.bind(this), | ||
35 | false, | ||
36 | ); | ||
37 | } | 33 | } |
38 | 34 | ||
39 | handleKeyDown(e) { | 35 | componentWillUnmount(): void { |
36 | document.removeEventListener('keydown', this.handleKeyDown, false); | ||
37 | } | ||
38 | |||
39 | handleKeyDown(e: KeyboardEvent): void { | ||
40 | if (isEscKeyPress(e.keyCode)) { | 40 | if (isEscKeyPress(e.keyCode)) { |
41 | this.props.closeSettings(); | 41 | this.props.closeSettings(); |
42 | } | 42 | } |
43 | } | 43 | } |
44 | 44 | ||
45 | render() { | 45 | render(): ReactElement { |
46 | const { navigation, closeSettings } = this.props; | 46 | const { navigation, closeSettings, intl } = this.props; |
47 | |||
48 | const { intl } = this.props; | ||
49 | 47 | ||
50 | return ( | 48 | return ( |
51 | <Appear transitionName="fadeIn-fast"> | 49 | <Appear transitionName="fadeIn-fast"> |
@@ -59,7 +57,6 @@ class SettingsLayout extends Component { | |||
59 | /> | 57 | /> |
60 | <div className="settings franz-form"> | 58 | <div className="settings franz-form"> |
61 | {navigation} | 59 | {navigation} |
62 | |||
63 | <Outlet /> | 60 | <Outlet /> |
64 | <button | 61 | <button |
65 | type="button" | 62 | type="button" |
@@ -77,4 +74,4 @@ class SettingsLayout extends Component { | |||
77 | } | 74 | } |
78 | } | 75 | } |
79 | 76 | ||
80 | export default injectIntl(observer(SettingsLayout)); | 77 | export default injectIntl(SettingsLayout); |
diff --git a/src/components/settings/settings/EditSettingsForm.tsx b/src/components/settings/settings/EditSettingsForm.tsx index e796a48ec..8ccad9e49 100644 --- a/src/components/settings/settings/EditSettingsForm.tsx +++ b/src/components/settings/settings/EditSettingsForm.tsx | |||
@@ -1,5 +1,5 @@ | |||
1 | import { systemPreferences } from '@electron/remote'; | 1 | import { systemPreferences } from '@electron/remote'; |
2 | import { Component } from 'react'; | 2 | import { Component, ReactElement } from 'react'; |
3 | import { observer } from 'mobx-react'; | 3 | import { observer } from 'mobx-react'; |
4 | import prettyBytes from 'pretty-bytes'; | 4 | import prettyBytes from 'pretty-bytes'; |
5 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; | 5 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; |
@@ -9,7 +9,7 @@ import Button from '../../ui/button'; | |||
9 | import Toggle from '../../ui/toggle'; | 9 | import Toggle from '../../ui/toggle'; |
10 | import Select from '../../ui/Select'; | 10 | import Select from '../../ui/Select'; |
11 | import Input from '../../ui/input/index'; | 11 | import Input from '../../ui/input/index'; |
12 | import ColorPickerInput from '../../ui/ColorPickerInput'; | 12 | import ColorPickerInput from '../../ui/colorPickerInput'; |
13 | import Infobox from '../../ui/Infobox'; | 13 | import Infobox from '../../ui/Infobox'; |
14 | import { H1, H2, H3, H5 } from '../../ui/headline'; | 14 | import { H1, H2, H3, H5 } from '../../ui/headline'; |
15 | import { | 15 | import { |
@@ -258,14 +258,14 @@ const messages = defineMessages({ | |||
258 | }, | 258 | }, |
259 | }); | 259 | }); |
260 | 260 | ||
261 | const Hr = () => ( | 261 | const Hr = (): ReactElement => ( |
262 | <hr | 262 | <hr |
263 | className="settings__hr" | 263 | className="settings__hr" |
264 | style={{ marginBottom: 20, borderStyle: 'dashed' }} | 264 | style={{ marginBottom: 20, borderStyle: 'dashed' }} |
265 | /> | 265 | /> |
266 | ); | 266 | ); |
267 | 267 | ||
268 | const HrSections = () => ( | 268 | const HrSections = (): ReactElement => ( |
269 | <hr | 269 | <hr |
270 | className="settings__hr-sections" | 270 | className="settings__hr-sections" |
271 | style={{ marginTop: 20, marginBottom: 40, borderStyle: 'solid' }} | 271 | style={{ marginTop: 20, marginBottom: 40, borderStyle: 'solid' }} |
@@ -325,8 +325,11 @@ class EditSettingsForm extends Component<IProps, IState> { | |||
325 | this.setState({ clearCacheButtonClicked: true }); | 325 | this.setState({ clearCacheButtonClicked: true }); |
326 | }; | 326 | }; |
327 | 327 | ||
328 | submit(e) { | 328 | submit(e): void { |
329 | e.preventDefault(); | 329 | if (e) { |
330 | e.preventDefault(); | ||
331 | } | ||
332 | |||
330 | this.props.form.submit({ | 333 | this.props.form.submit({ |
331 | onSuccess: form => { | 334 | onSuccess: form => { |
332 | const values = form.values(); | 335 | const values = form.values(); |
@@ -344,7 +347,7 @@ class EditSettingsForm extends Component<IProps, IState> { | |||
344 | }); | 347 | }); |
345 | } | 348 | } |
346 | 349 | ||
347 | render() { | 350 | render(): ReactElement { |
348 | const { | 351 | const { |
349 | checkForUpdates, | 352 | checkForUpdates, |
350 | installUpdate, | 353 | installUpdate, |
@@ -742,8 +745,8 @@ class EditSettingsForm extends Component<IProps, IState> { | |||
742 | {intl.formatMessage(messages.overallTheme)} | 745 | {intl.formatMessage(messages.overallTheme)} |
743 | <div className="settings__settings-group__apply-color"> | 746 | <div className="settings__settings-group__apply-color"> |
744 | <ColorPickerInput | 747 | <ColorPickerInput |
745 | onChange={e => this.submit(e)} | 748 | {...form.$('accentColor').bind()} |
746 | field={form.$('accentColor')} | 749 | onColorChange={this.submit.bind(this)} |
747 | className="color-picker-input" | 750 | className="color-picker-input" |
748 | /> | 751 | /> |
749 | </div> | 752 | </div> |
@@ -752,8 +755,8 @@ class EditSettingsForm extends Component<IProps, IState> { | |||
752 | {intl.formatMessage(messages.progressbarTheme)} | 755 | {intl.formatMessage(messages.progressbarTheme)} |
753 | <div className="settings__settings-group__apply-color"> | 756 | <div className="settings__settings-group__apply-color"> |
754 | <ColorPickerInput | 757 | <ColorPickerInput |
755 | onChange={e => this.submit(e)} | 758 | {...form.$('progressbarAccentColor').bind()} |
756 | field={form.$('progressbarAccentColor')} | 759 | onColorChange={this.submit.bind(this)} |
757 | className="color-picker-input" | 760 | className="color-picker-input" |
758 | /> | 761 | /> |
759 | </div> | 762 | </div> |