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/settings/SettingsLayout.tsx | |
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/settings/SettingsLayout.tsx')
-rw-r--r-- | src/components/settings/SettingsLayout.tsx | 77 |
1 files changed, 77 insertions, 0 deletions
diff --git a/src/components/settings/SettingsLayout.tsx b/src/components/settings/SettingsLayout.tsx new file mode 100644 index 000000000..3b706571e --- /dev/null +++ b/src/components/settings/SettingsLayout.tsx | |||
@@ -0,0 +1,77 @@ | |||
1 | import { Component, ReactElement } from 'react'; | ||
2 | import { observer } from 'mobx-react'; | ||
3 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; | ||
4 | import { mdiClose } from '@mdi/js'; | ||
5 | import { Outlet } from 'react-router-dom'; | ||
6 | import ErrorBoundary from '../util/ErrorBoundary'; | ||
7 | import Appear from '../ui/effects/Appear'; | ||
8 | import Icon from '../ui/icon'; | ||
9 | import { isEscKeyPress } from '../../jsUtils'; | ||
10 | |||
11 | const messages = defineMessages({ | ||
12 | closeSettings: { | ||
13 | id: 'settings.app.closeSettings', | ||
14 | defaultMessage: 'Close settings', | ||
15 | }, | ||
16 | }); | ||
17 | |||
18 | interface IProps extends WrappedComponentProps { | ||
19 | navigation: ReactElement; | ||
20 | closeSettings: () => void; | ||
21 | } | ||
22 | |||
23 | @observer | ||
24 | class SettingsLayout extends Component<IProps> { | ||
25 | constructor(props: IProps) { | ||
26 | super(props); | ||
27 | |||
28 | this.handleKeyDown = this.handleKeyDown.bind(this); | ||
29 | } | ||
30 | |||
31 | componentDidMount(): void { | ||
32 | document.addEventListener('keydown', this.handleKeyDown, false); | ||
33 | } | ||
34 | |||
35 | componentWillUnmount(): void { | ||
36 | document.removeEventListener('keydown', this.handleKeyDown, false); | ||
37 | } | ||
38 | |||
39 | handleKeyDown(e: KeyboardEvent): void { | ||
40 | if (isEscKeyPress(e.keyCode)) { | ||
41 | this.props.closeSettings(); | ||
42 | } | ||
43 | } | ||
44 | |||
45 | render(): ReactElement { | ||
46 | const { navigation, closeSettings, intl } = this.props; | ||
47 | |||
48 | return ( | ||
49 | <Appear transitionName="fadeIn-fast"> | ||
50 | <div className="settings-wrapper"> | ||
51 | <ErrorBoundary> | ||
52 | <button | ||
53 | type="button" | ||
54 | className="settings-wrapper__action" | ||
55 | onClick={closeSettings} | ||
56 | aria-label={intl.formatMessage(messages.closeSettings)} | ||
57 | /> | ||
58 | <div className="settings franz-form"> | ||
59 | {navigation} | ||
60 | <Outlet /> | ||
61 | <button | ||
62 | type="button" | ||
63 | className="settings__close" | ||
64 | onClick={closeSettings} | ||
65 | aria-label={intl.formatMessage(messages.closeSettings)} | ||
66 | > | ||
67 | <Icon icon={mdiClose} size={1.35} /> | ||
68 | </button> | ||
69 | </div> | ||
70 | </ErrorBoundary> | ||
71 | </div> | ||
72 | </Appear> | ||
73 | ); | ||
74 | } | ||
75 | } | ||
76 | |||
77 | export default injectIntl(SettingsLayout); | ||