diff options
Diffstat (limited to 'src/components/ui/Modal/index.js')
-rw-r--r-- | src/components/ui/Modal/index.js | 59 |
1 files changed, 59 insertions, 0 deletions
diff --git a/src/components/ui/Modal/index.js b/src/components/ui/Modal/index.js new file mode 100644 index 000000000..d84e4c713 --- /dev/null +++ b/src/components/ui/Modal/index.js | |||
@@ -0,0 +1,59 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import ReactModal from 'react-modal'; | ||
3 | import PropTypes from 'prop-types'; | ||
4 | import classnames from 'classnames'; | ||
5 | import injectCSS from 'react-jss'; | ||
6 | |||
7 | import styles from './styles'; | ||
8 | |||
9 | export default @injectCSS(styles) class Modal extends Component { | ||
10 | static propTypes = { | ||
11 | children: PropTypes.node.isRequired, | ||
12 | className: PropTypes.string, | ||
13 | classes: PropTypes.object.isRequired, | ||
14 | isOpen: PropTypes.bool.isRequired, | ||
15 | portal: PropTypes.string, | ||
16 | close: PropTypes.func.isRequired, | ||
17 | } | ||
18 | |||
19 | static defaultProps = { | ||
20 | className: null, | ||
21 | portal: 'modal-portal', | ||
22 | } | ||
23 | |||
24 | render() { | ||
25 | const { | ||
26 | children, | ||
27 | className, | ||
28 | classes, | ||
29 | isOpen, | ||
30 | portal, | ||
31 | close, | ||
32 | } = this.props; | ||
33 | |||
34 | return ( | ||
35 | <ReactModal | ||
36 | isOpen={isOpen} | ||
37 | className={classnames({ | ||
38 | [`${classes.modal}`]: true, | ||
39 | [`${className}`]: className, | ||
40 | })} | ||
41 | portalClassName={classes.component} | ||
42 | overlayClassName={classes.overlay} | ||
43 | portal={portal} | ||
44 | onRequestClose={close} | ||
45 | > | ||
46 | {/* <button | ||
47 | type="button" | ||
48 | className={classnames({ | ||
49 | [`${classes.close}`]: true, | ||
50 | 'mdi mdi-close': true, | ||
51 | })} | ||
52 | /> */} | ||
53 | <div className={classes.content}> | ||
54 | {children} | ||
55 | </div> | ||
56 | </ReactModal> | ||
57 | ); | ||
58 | } | ||
59 | } | ||