diff options
Diffstat (limited to 'src/components/settings/releaseNotes/ReleaseNotesLayout.tsx')
-rw-r--r-- | src/components/settings/releaseNotes/ReleaseNotesLayout.tsx | 79 |
1 files changed, 79 insertions, 0 deletions
diff --git a/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx b/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx new file mode 100644 index 000000000..ee0ba75a8 --- /dev/null +++ b/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx | |||
@@ -0,0 +1,79 @@ | |||
1 | import { Component } from 'react'; | ||
2 | import { inject, observer } from 'mobx-react'; | ||
3 | import { defineMessages, injectIntl } from 'react-intl'; | ||
4 | |||
5 | import { mdiClose } from '@mdi/js'; | ||
6 | import { Outlet } from 'react-router-dom'; | ||
7 | import { StoresProps } from '../../../@types/ferdium-components.types'; | ||
8 | import ErrorBoundary from '../../util/ErrorBoundary'; | ||
9 | import Appear from '../../ui/effects/Appear'; | ||
10 | import Icon from '../../ui/icon'; | ||
11 | import { isEscKeyPress } from '../../../jsUtils'; | ||
12 | |||
13 | const messages = defineMessages({ | ||
14 | closeSettings: { | ||
15 | id: 'settings.app.closeSettings', | ||
16 | defaultMessage: 'Close settings', | ||
17 | }, | ||
18 | }); | ||
19 | |||
20 | interface IProps extends StoresProps { | ||
21 | intl: any; | ||
22 | } | ||
23 | |||
24 | class ReleaseNotesLayout extends Component<IProps> { | ||
25 | componentDidMount() { | ||
26 | document.addEventListener('keydown', this.handleKeyDown.bind(this), false); | ||
27 | } | ||
28 | |||
29 | componentWillUnmount() { | ||
30 | document.removeEventListener( | ||
31 | 'keydown', | ||
32 | // eslint-disable-next-line unicorn/no-invalid-remove-event-listener | ||
33 | this.handleKeyDown.bind(this), | ||
34 | false, | ||
35 | ); | ||
36 | } | ||
37 | |||
38 | handleKeyDown(e) { | ||
39 | if (isEscKeyPress(e.keyCode)) { | ||
40 | this.props.actions.ui.closeSettings(); | ||
41 | } | ||
42 | } | ||
43 | |||
44 | render() { | ||
45 | const { closeSettings } = this.props.actions.ui; | ||
46 | |||
47 | const { intl } = this.props; | ||
48 | |||
49 | return ( | ||
50 | <Appear transitionName="fadeIn-fast"> | ||
51 | <div className="settings-wrapper"> | ||
52 | <ErrorBoundary> | ||
53 | <button | ||
54 | type="button" | ||
55 | className="settings-wrapper__action" | ||
56 | onClick={closeSettings} | ||
57 | aria-label={intl.formatMessage(messages.closeSettings)} | ||
58 | /> | ||
59 | <div className="settings franz-form"> | ||
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<'intl', IProps>( | ||
78 | inject('stores', 'actions')(observer(ReleaseNotesLayout)), | ||
79 | ); | ||