1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 |
|
7 | var _react = require('react');
|
8 |
|
9 | var _react2 = _interopRequireDefault(_react);
|
10 |
|
11 | var _propTypes = require('prop-types');
|
12 |
|
13 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
14 |
|
15 | var _reactPortal = require('react-portal');
|
16 |
|
17 | var _reactModal = require('react-modal2');
|
18 |
|
19 | var _reactModal2 = _interopRequireDefault(_reactModal);
|
20 |
|
21 | var _cfStyleContainer = require('cf-style-container');
|
22 |
|
23 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
24 |
|
25 |
|
26 | if (window) {
|
27 | (function (constructor) {
|
28 | if (constructor && constructor.prototype && constructor.prototype.lastElementChild === null) {
|
29 | Object.defineProperty(constructor.prototype, 'lastElementChild', {
|
30 | get: function () {
|
31 | var node,
|
32 | nodes = this.childNodes,
|
33 | i = nodes.length - 1;
|
34 | while (node = nodes[i--]) {
|
35 | if (node.nodeType === 1) {
|
36 | return node;
|
37 | }
|
38 | }
|
39 | return null;
|
40 | }
|
41 | });
|
42 | }
|
43 | })(window.Node || window.Element);
|
44 | }
|
45 |
|
46 | const BackdropScroller = (0, _cfStyleContainer.createComponent)(({ theme }) => ({
|
47 | position: 'fixed',
|
48 | top: 0,
|
49 | bottom: 0,
|
50 | left: 0,
|
51 | right: 0,
|
52 | zIndex: theme.zIndexModal,
|
53 | overflow: 'auto',
|
54 | overflowX: 'hidden',
|
55 | overflowY: 'auto',
|
56 | '-webkit-overflow-scrolling': 'touch'
|
57 | }));
|
58 | BackdropScroller.setDisplayName('BackdropScroller');
|
59 |
|
60 | const BackdropOuter = (0, _cfStyleContainer.createComponent)(() => ({
|
61 | position: 'relative',
|
62 | width: '100%',
|
63 | height: '100%',
|
64 | display: 'table'
|
65 | }));
|
66 | BackdropOuter.setDisplayName('BackdropOuter');
|
67 |
|
68 | const modalStyles = ({ theme, width }) => ({
|
69 | position: 'relative',
|
70 | width: '100%',
|
71 | maxWidth: width ? getWidth(width) : '30rem',
|
72 | margin: '0 auto',
|
73 | background: theme.colors.white,
|
74 | transformOrigin: 'center',
|
75 | backfaceVisibility: 'hidden',
|
76 | borderRadius: '2px',
|
77 | boxShadow: '0 1px 15px rgba(0,0,0,.75)',
|
78 | '&:focus': {
|
79 | outline: 'none'
|
80 | }
|
81 | });
|
82 |
|
83 | const backdropStyles = () => ({
|
84 | display: 'table-cell',
|
85 | verticalAlign: 'middle',
|
86 | padding: '1.5rem',
|
87 | '-webkit-transform-origin': 'center',
|
88 | transformOrigin: 'center',
|
89 | background: 'rgba(0,0,0,.7)'
|
90 | });
|
91 |
|
92 | const getWidth = width => {
|
93 | switch (width) {
|
94 | case 'wide':
|
95 | return '40rem';
|
96 | case 'extra-wide':
|
97 | return '53.33rem';
|
98 | case 'super-extra-wide':
|
99 | return '80rem';
|
100 | default:
|
101 | return '30rem';
|
102 | }
|
103 | };
|
104 |
|
105 | class Modal extends _react2.default.Component {
|
106 | render() {
|
107 | const {
|
108 | styles,
|
109 | isOpen,
|
110 | closeOnEsc,
|
111 | closeOnBackdropClick,
|
112 | onRequestClose,
|
113 | children
|
114 | } = this.props;
|
115 |
|
116 | return isOpen ? _react2.default.createElement(
|
117 | _reactPortal.Portal,
|
118 | null,
|
119 | _react2.default.createElement(
|
120 | BackdropScroller,
|
121 | null,
|
122 | _react2.default.createElement(
|
123 | BackdropOuter,
|
124 | null,
|
125 | _react2.default.createElement(
|
126 | _reactModal2.default,
|
127 | {
|
128 | key: 'modal',
|
129 | backdropClassName: styles.backdropStyles,
|
130 | modalClassName: styles.modalStyles,
|
131 | closeOnEsc: closeOnEsc,
|
132 | closeOnBackdropClick: closeOnBackdropClick,
|
133 | onClose: onRequestClose
|
134 | },
|
135 | children
|
136 | )
|
137 | )
|
138 | )
|
139 | ) : null;
|
140 | }
|
141 | }
|
142 |
|
143 | Modal.propTypes = {
|
144 | styles: _propTypes2.default.object,
|
145 | isOpen: _propTypes2.default.bool.isRequired,
|
146 | onRequestClose: _propTypes2.default.func.isRequired,
|
147 | closeOnEsc: _propTypes2.default.bool,
|
148 | closeOnBackdropClick: _propTypes2.default.bool,
|
149 | children: _propTypes2.default.node,
|
150 | width: _propTypes2.default.string
|
151 | };
|
152 |
|
153 | Modal.defaultProps = {
|
154 | closeOnEsc: true,
|
155 | closeOnBackdropClick: true
|
156 | };
|
157 | Modal.displayName = 'Modal';
|
158 |
|
159 | _reactModal2.default.getApplicationElement = function () {
|
160 | return document.body.lastElementChild;
|
161 | };
|
162 |
|
163 | exports.default = (0, _cfStyleContainer.createComponentStyles)({ modalStyles, backdropStyles }, Modal); |
\ | No newline at end of file |