diff options
author | 2017-10-13 12:29:40 +0200 | |
---|---|---|
committer | 2017-10-13 12:29:40 +0200 | |
commit | 58cda9cc7fb79ca9df6746de7f9662bc08dc156a (patch) | |
tree | 1211600c2a5d3b5f81c435c6896618111a611720 /src/components/settings/SettingsLayout.js | |
download | ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.tar.gz ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.tar.zst ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.zip |
initial commit
Diffstat (limited to 'src/components/settings/SettingsLayout.js')
-rw-r--r-- | src/components/settings/SettingsLayout.js | 56 |
1 files changed, 56 insertions, 0 deletions
diff --git a/src/components/settings/SettingsLayout.js b/src/components/settings/SettingsLayout.js new file mode 100644 index 000000000..d5392ddba --- /dev/null +++ b/src/components/settings/SettingsLayout.js | |||
@@ -0,0 +1,56 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | |||
5 | import { oneOrManyChildElements } from '../../prop-types'; | ||
6 | import Appear from '../ui/effects/Appear'; | ||
7 | |||
8 | @observer | ||
9 | export default class SettingsLayout extends Component { | ||
10 | static propTypes = { | ||
11 | navigation: PropTypes.element.isRequired, | ||
12 | children: oneOrManyChildElements.isRequired, | ||
13 | closeSettings: PropTypes.func.isRequired, | ||
14 | }; | ||
15 | |||
16 | componentWillMount() { | ||
17 | document.addEventListener('keydown', this.handleKeyDown.bind(this), false); | ||
18 | } | ||
19 | |||
20 | componentWillUnmount() { | ||
21 | document.removeEventListener('keydown', this.handleKeyDown.bind(this), false); | ||
22 | } | ||
23 | |||
24 | handleKeyDown(e) { | ||
25 | if (e.keyCode === 27) { // escape key | ||
26 | this.props.closeSettings(); | ||
27 | } | ||
28 | } | ||
29 | |||
30 | render() { | ||
31 | const { | ||
32 | navigation, | ||
33 | children, | ||
34 | closeSettings, | ||
35 | } = this.props; | ||
36 | |||
37 | return ( | ||
38 | <Appear transitionName="fadeIn-fast"> | ||
39 | <div className="settings-wrapper"> | ||
40 | <button | ||
41 | className="settings-wrapper__action" | ||
42 | onClick={closeSettings} | ||
43 | /> | ||
44 | <div className="settings franz-form"> | ||
45 | {navigation} | ||
46 | {children} | ||
47 | <button | ||
48 | className="settings__close mdi mdi-close" | ||
49 | onClick={closeSettings} | ||
50 | /> | ||
51 | </div> | ||
52 | </div> | ||
53 | </Appear> | ||
54 | ); | ||
55 | } | ||
56 | } | ||