1
+ "use strict" ;
2
+
3
+ Object . defineProperty ( exports , "__esModule" , {
4
+ value : true
5
+ } ) ;
6
+ exports . bodyOpenClassName = exports . portalClassName = undefined ;
7
+
8
+ var _extends = Object . assign || function ( target ) { for ( var i = 1 ; i < arguments . length ; i ++ ) { var source = arguments [ i ] ; for ( var key in source ) { if ( Object . prototype . hasOwnProperty . call ( source , key ) ) { target [ key ] = source [ key ] ; } } } return target ; } ;
9
+
10
+ var _createClass = function ( ) { function defineProperties ( target , props ) { for ( var i = 0 ; i < props . length ; i ++ ) { var descriptor = props [ i ] ; descriptor . enumerable = descriptor . enumerable || false ; descriptor . configurable = true ; if ( "value" in descriptor ) descriptor . writable = true ; Object . defineProperty ( target , descriptor . key , descriptor ) ; } } return function ( Constructor , protoProps , staticProps ) { if ( protoProps ) defineProperties ( Constructor . prototype , protoProps ) ; if ( staticProps ) defineProperties ( Constructor , staticProps ) ; return Constructor ; } ; } ( ) ;
11
+
12
+ var _react = require ( "react" ) ;
13
+
14
+ var _react2 = _interopRequireDefault ( _react ) ;
15
+
16
+ var _reactDom = require ( "react-dom" ) ;
17
+
18
+ var _reactDom2 = _interopRequireDefault ( _reactDom ) ;
19
+
20
+ var _propTypes = require ( "prop-types" ) ;
21
+
22
+ var _propTypes2 = _interopRequireDefault ( _propTypes ) ;
23
+
24
+ var _ModalPortal = require ( "./ModalPortal" ) ;
25
+
26
+ var _ModalPortal2 = _interopRequireDefault ( _ModalPortal ) ;
27
+
28
+ var _ariaAppHider = require ( "../helpers/ariaAppHider" ) ;
29
+
30
+ var ariaAppHider = _interopRequireWildcard ( _ariaAppHider ) ;
31
+
32
+ var _safeHTMLElement = require ( "../helpers/safeHTMLElement" ) ;
33
+
34
+ var _safeHTMLElement2 = _interopRequireDefault ( _safeHTMLElement ) ;
35
+
36
+ var _reactLifecyclesCompat = require ( "react-lifecycles-compat" ) ;
37
+
38
+ function _interopRequireWildcard ( obj ) { if ( obj && obj . __esModule ) { return obj ; } else { var newObj = { } ; if ( obj != null ) { for ( var key in obj ) { if ( Object . prototype . hasOwnProperty . call ( obj , key ) ) newObj [ key ] = obj [ key ] ; } } newObj . default = obj ; return newObj ; } }
39
+
40
+ function _interopRequireDefault ( obj ) { return obj && obj . __esModule ? obj : { default : obj } ; }
41
+
42
+ function _classCallCheck ( instance , Constructor ) { if ( ! ( instance instanceof Constructor ) ) { throw new TypeError ( "Cannot call a class as a function" ) ; } }
43
+
44
+ function _possibleConstructorReturn ( self , call ) { if ( ! self ) { throw new ReferenceError ( "this hasn't been initialised - super() hasn't been called" ) ; } return call && ( typeof call === "object" || typeof call === "function" ) ? call : self ; }
45
+
46
+ function _inherits ( subClass , superClass ) { if ( typeof superClass !== "function" && superClass !== null ) { throw new TypeError ( "Super expression must either be null or a function, not " + typeof superClass ) ; } subClass . prototype = Object . create ( superClass && superClass . prototype , { constructor : { value : subClass , enumerable : false , writable : true , configurable : true } } ) ; if ( superClass ) Object . setPrototypeOf ? Object . setPrototypeOf ( subClass , superClass ) : subClass . __proto__ = superClass ; }
47
+
48
+ var portalClassName = exports . portalClassName = "ReactModalPortal" ;
49
+ var bodyOpenClassName = exports . bodyOpenClassName = "ReactModal__Body--open" ;
50
+
51
+ var isReact16 = _safeHTMLElement . canUseDOM && _reactDom2 . default . createPortal !== undefined ;
52
+
53
+ var createHTMLElement = function createHTMLElement ( name ) {
54
+ return document . createElement ( name ) ;
55
+ } ;
56
+
57
+ var getCreatePortal = function getCreatePortal ( ) {
58
+ return isReact16 ? _reactDom2 . default . createPortal : _reactDom2 . default . unstable_renderSubtreeIntoContainer ;
59
+ } ;
60
+
61
+ function getParentElement ( parentSelector ) {
62
+ return parentSelector ( ) ;
63
+ }
64
+
65
+ var Modal = function ( _Component ) {
66
+ _inherits ( Modal , _Component ) ;
67
+
68
+ function Modal ( ) {
69
+ var _ref ;
70
+
71
+ var _temp , _this , _ret ;
72
+
73
+ _classCallCheck ( this , Modal ) ;
74
+
75
+ for ( var _len = arguments . length , args = Array ( _len ) , _key = 0 ; _key < _len ; _key ++ ) {
76
+ args [ _key ] = arguments [ _key ] ;
77
+ }
78
+
79
+ return _ret = ( _temp = ( _this = _possibleConstructorReturn ( this , ( _ref = Modal . __proto__ || Object . getPrototypeOf ( Modal ) ) . call . apply ( _ref , [ this ] . concat ( args ) ) ) , _this ) , _this . removePortal = function ( ) {
80
+ ! isReact16 && _reactDom2 . default . unmountComponentAtNode ( _this . node ) ;
81
+ var parent = getParentElement ( _this . props . parentSelector ) ;
82
+ if ( parent && parent . contains ( _this . node ) ) {
83
+ parent . removeChild ( _this . node ) ;
84
+ } else {
85
+ // eslint-disable-next-line no-console
86
+ console . warn ( 'React-Modal: "parentSelector" prop did not returned any DOM ' + "element. Make sure that the parent element is unmounted to " + "avoid any memory leaks." ) ;
87
+ }
88
+ } , _this . portalRef = function ( ref ) {
89
+ _this . portal = ref ;
90
+ } , _this . renderPortal = function ( props ) {
91
+ var createPortal = getCreatePortal ( ) ;
92
+ var portal = createPortal ( _this , _react2 . default . createElement ( _ModalPortal2 . default , _extends ( { defaultStyles : Modal . defaultStyles } , props ) ) , _this . node ) ;
93
+ _this . portalRef ( portal ) ;
94
+ } , _temp ) , _possibleConstructorReturn ( _this , _ret ) ;
95
+ }
96
+
97
+ _createClass ( Modal , [ {
98
+ key : "componentDidMount" ,
99
+ value : function componentDidMount ( ) {
100
+ if ( ! _safeHTMLElement . canUseDOM ) return ;
101
+
102
+ if ( ! isReact16 ) {
103
+ this . node = createHTMLElement ( "div" ) ;
104
+ }
105
+ this . node . className = this . props . portalClassName ;
106
+
107
+ var parent = getParentElement ( this . props . parentSelector ) ;
108
+ parent . appendChild ( this . node ) ;
109
+
110
+ ! isReact16 && this . renderPortal ( this . props ) ;
111
+ }
112
+ } , {
113
+ key : "getSnapshotBeforeUpdate" ,
114
+ value : function getSnapshotBeforeUpdate ( prevProps ) {
115
+ var prevParent = getParentElement ( prevProps . parentSelector ) ;
116
+ var nextParent = getParentElement ( this . props . parentSelector ) ;
117
+ return { prevParent : prevParent , nextParent : nextParent } ;
118
+ }
119
+ } , {
120
+ key : "componentDidUpdate" ,
121
+ value : function componentDidUpdate ( prevProps , _ , snapshot ) {
122
+ if ( ! _safeHTMLElement . canUseDOM ) return ;
123
+ var _props = this . props ,
124
+ isOpen = _props . isOpen ,
125
+ portalClassName = _props . portalClassName ;
126
+
127
+
128
+ if ( prevProps . portalClassName !== portalClassName ) {
129
+ this . node . className = portalClassName ;
130
+ }
131
+
132
+ var prevParent = snapshot . prevParent ,
133
+ nextParent = snapshot . nextParent ;
134
+
135
+ if ( nextParent !== prevParent ) {
136
+ prevParent . removeChild ( this . node ) ;
137
+ nextParent . appendChild ( this . node ) ;
138
+ }
139
+
140
+ // Stop unnecessary renders if modal is remaining closed
141
+ if ( ! prevProps . isOpen && ! isOpen ) return ;
142
+
143
+ ! isReact16 && this . renderPortal ( this . props ) ;
144
+ }
145
+ } , {
146
+ key : "componentWillUnmount" ,
147
+ value : function componentWillUnmount ( ) {
148
+ if ( ! _safeHTMLElement . canUseDOM || ! this . node || ! this . portal ) return ;
149
+
150
+ var state = this . portal . state ;
151
+ var now = Date . now ( ) ;
152
+ var closesAt = state . isOpen && this . props . closeTimeoutMS && ( state . closesAt || now + this . props . closeTimeoutMS ) ;
153
+
154
+ if ( closesAt ) {
155
+ if ( ! state . beforeClose ) {
156
+ this . portal . closeWithTimeout ( ) ;
157
+ }
158
+
159
+ setTimeout ( this . removePortal , closesAt - now ) ;
160
+ } else {
161
+ this . removePortal ( ) ;
162
+ }
163
+ }
164
+ } , {
165
+ key : "render" ,
166
+ value : function render ( ) {
167
+ if ( ! _safeHTMLElement . canUseDOM || ! isReact16 ) {
168
+ return null ;
169
+ }
170
+
171
+ if ( ! this . node && isReact16 ) {
172
+ this . node = createHTMLElement ( "div" ) ;
173
+ }
174
+
175
+ var createPortal = getCreatePortal ( ) ;
176
+ return createPortal ( _react2 . default . createElement ( _ModalPortal2 . default , _extends ( {
177
+ ref : this . portalRef ,
178
+ defaultStyles : Modal . defaultStyles
179
+ } , this . props ) ) , this . node ) ;
180
+ }
181
+ } ] , [ {
182
+ key : "setAppElement" ,
183
+ value : function setAppElement ( element ) {
184
+ ariaAppHider . setElement ( element ) ;
185
+ }
186
+
187
+ /* eslint-disable react/no-unused-prop-types */
188
+
189
+ /* eslint-enable react/no-unused-prop-types */
190
+
191
+ } ] ) ;
192
+
193
+ return Modal ;
194
+ } ( _react . Component ) ;
195
+
196
+ Modal . propTypes = {
197
+ isOpen : _propTypes2 . default . bool . isRequired ,
198
+ style : _propTypes2 . default . shape ( {
199
+ content : _propTypes2 . default . object ,
200
+ overlay : _propTypes2 . default . object
201
+ } ) ,
202
+ portalClassName : _propTypes2 . default . string ,
203
+ bodyOpenClassName : _propTypes2 . default . string ,
204
+ htmlOpenClassName : _propTypes2 . default . string ,
205
+ className : _propTypes2 . default . oneOfType ( [ _propTypes2 . default . string , _propTypes2 . default . shape ( {
206
+ base : _propTypes2 . default . string . isRequired ,
207
+ afterOpen : _propTypes2 . default . string . isRequired ,
208
+ beforeClose : _propTypes2 . default . string . isRequired
209
+ } ) ] ) ,
210
+ overlayClassName : _propTypes2 . default . oneOfType ( [ _propTypes2 . default . string , _propTypes2 . default . shape ( {
211
+ base : _propTypes2 . default . string . isRequired ,
212
+ afterOpen : _propTypes2 . default . string . isRequired ,
213
+ beforeClose : _propTypes2 . default . string . isRequired
214
+ } ) ] ) ,
215
+ appElement : _propTypes2 . default . oneOfType ( [ _safeHTMLElement2 . default , _propTypes2 . default . instanceOf ( _safeHTMLElement . SafeHTMLCollection ) , _propTypes2 . default . instanceOf ( _safeHTMLElement . SafeNodeList ) , _propTypes2 . default . arrayOf ( _propTypes2 . default . instanceOf ( _safeHTMLElement2 . default ) ) ] ) ,
216
+ onAfterOpen : _propTypes2 . default . func ,
217
+ onRequestClose : _propTypes2 . default . func ,
218
+ closeTimeoutMS : _propTypes2 . default . number ,
219
+ ariaHideApp : _propTypes2 . default . bool ,
220
+ shouldFocusAfterRender : _propTypes2 . default . bool ,
221
+ shouldCloseOnOverlayClick : _propTypes2 . default . bool ,
222
+ shouldReturnFocusAfterClose : _propTypes2 . default . bool ,
223
+ preventScroll : _propTypes2 . default . bool ,
224
+ parentSelector : _propTypes2 . default . func ,
225
+ aria : _propTypes2 . default . object ,
226
+ data : _propTypes2 . default . object ,
227
+ role : _propTypes2 . default . string ,
228
+ contentLabel : _propTypes2 . default . string ,
229
+ shouldCloseOnEsc : _propTypes2 . default . bool ,
230
+ overlayRef : _propTypes2 . default . func ,
231
+ contentRef : _propTypes2 . default . func ,
232
+ id : _propTypes2 . default . string ,
233
+ overlayElement : _propTypes2 . default . func ,
234
+ contentElement : _propTypes2 . default . func
235
+ } ;
236
+ Modal . defaultProps = {
237
+ isOpen : false ,
238
+ portalClassName : portalClassName ,
239
+ bodyOpenClassName : bodyOpenClassName ,
240
+ role : "dialog" ,
241
+ ariaHideApp : true ,
242
+ closeTimeoutMS : 0 ,
243
+ shouldFocusAfterRender : true ,
244
+ shouldCloseOnEsc : true ,
245
+ shouldCloseOnOverlayClick : true ,
246
+ shouldReturnFocusAfterClose : true ,
247
+ preventScroll : false ,
248
+ parentSelector : function parentSelector ( ) {
249
+ return document . body ;
250
+ } ,
251
+ overlayElement : function overlayElement ( props , contentEl ) {
252
+ return _react2 . default . createElement (
253
+ "div" ,
254
+ props ,
255
+ contentEl
256
+ ) ;
257
+ } ,
258
+ contentElement : function contentElement ( props , children ) {
259
+ return _react2 . default . createElement (
260
+ "div" ,
261
+ props ,
262
+ children
263
+ ) ;
264
+ }
265
+ } ;
266
+ Modal . defaultStyles = {
267
+ overlay : {
268
+ position : "fixed" ,
269
+ top : 0 ,
270
+ left : 0 ,
271
+ right : 0 ,
272
+ bottom : 0 ,
273
+ backgroundColor : "rgba(255, 255, 255, 0.75)"
274
+ } ,
275
+ content : {
276
+ position : "absolute" ,
277
+ top : "40px" ,
278
+ left : "40px" ,
279
+ right : "40px" ,
280
+ bottom : "40px" ,
281
+ border : "1px solid #ccc" ,
282
+ background : "#fff" ,
283
+ overflow : "auto" ,
284
+ WebkitOverflowScrolling : "touch" ,
285
+ borderRadius : "4px" ,
286
+ outline : "none" ,
287
+ padding : "20px"
288
+ }
289
+ } ;
290
+
291
+
292
+ ( 0 , _reactLifecyclesCompat . polyfill ) ( Modal ) ;
293
+
294
+ if ( process . env . NODE_ENV !== "production" ) {
295
+ Modal . setCreateHTMLElement = function ( fn ) {
296
+ return createHTMLElement = fn ;
297
+ } ;
298
+ }
299
+
300
+ exports . default = Modal ;
0 commit comments