diff options
Diffstat (limited to 'src/components/ui/Modal/index.tsx')
-rw-r--r-- | src/components/ui/Modal/index.tsx | 67 |
1 files changed, 67 insertions, 0 deletions
diff --git a/src/components/ui/Modal/index.tsx b/src/components/ui/Modal/index.tsx new file mode 100644 index 000000000..0bb0aaa61 --- /dev/null +++ b/src/components/ui/Modal/index.tsx | |||
@@ -0,0 +1,67 @@ | |||
1 | import { Component, ReactChildren } from 'react'; | ||
2 | import ReactModal from 'react-modal'; | ||
3 | import classnames from 'classnames'; | ||
4 | import injectCSS from 'react-jss'; | ||
5 | import { Icon } from '@meetfranz/ui'; | ||
6 | |||
7 | import { mdiClose } from '@mdi/js'; | ||
8 | import styles from './styles'; | ||
9 | |||
10 | type Props = { | ||
11 | children: ReactChildren; | ||
12 | className: string; | ||
13 | classes: any; | ||
14 | isOpen: boolean; | ||
15 | portal: string; | ||
16 | close: () => void; | ||
17 | shouldCloseOnOverlayClick: boolean; | ||
18 | showClose: boolean; | ||
19 | }; | ||
20 | |||
21 | @injectCSS(styles) | ||
22 | class Modal extends Component<Props> { | ||
23 | static defaultProps = { | ||
24 | className: null, | ||
25 | portal: 'modal-portal', | ||
26 | shouldCloseOnOverlayClick: false, | ||
27 | showClose: true, | ||
28 | }; | ||
29 | |||
30 | render() { | ||
31 | const { | ||
32 | children, | ||
33 | className, | ||
34 | classes, | ||
35 | isOpen, | ||
36 | portal, | ||
37 | close, | ||
38 | shouldCloseOnOverlayClick, | ||
39 | showClose, | ||
40 | } = this.props; | ||
41 | |||
42 | return ( | ||
43 | <ReactModal | ||
44 | isOpen={isOpen} | ||
45 | className={classnames({ | ||
46 | [`${classes.modal}`]: true, | ||
47 | [`${className}`]: className, | ||
48 | })} | ||
49 | portalClassName={classes.component} | ||
50 | overlayClassName={classes.overlay} | ||
51 | portal={portal} | ||
52 | onRequestClose={close} | ||
53 | shouldCloseOnOverlayClick={shouldCloseOnOverlayClick} | ||
54 | appElement={document.querySelector('#root')} | ||
55 | > | ||
56 | {showClose && close && ( | ||
57 | <button type="button" className={classes.close} onClick={close}> | ||
58 | <Icon icon={mdiClose} size={1.5} /> | ||
59 | </button> | ||
60 | )} | ||
61 | <div className={classes.content}>{children}</div> | ||
62 | </ReactModal> | ||
63 | ); | ||
64 | } | ||
65 | } | ||
66 | |||
67 | export default Modal; | ||