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