1 | 'use strict';
|
2 |
|
3 | exports.__esModule = true;
|
4 |
|
5 | var _extends2 = require('babel-runtime/helpers/extends');
|
6 |
|
7 | var _extends3 = _interopRequireDefault(_extends2);
|
8 |
|
9 | var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
|
10 |
|
11 | var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
|
12 |
|
13 | var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
|
14 |
|
15 | var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
|
16 |
|
17 | var _inherits2 = require('babel-runtime/helpers/inherits');
|
18 |
|
19 | var _inherits3 = _interopRequireDefault(_inherits2);
|
20 |
|
21 | var _class, _temp;
|
22 |
|
23 | var _react = require('react');
|
24 |
|
25 | var _react2 = _interopRequireDefault(_react);
|
26 |
|
27 | var _reactDom = require('react-dom');
|
28 |
|
29 | var _propTypes = require('prop-types');
|
30 |
|
31 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
32 |
|
33 | var _classnames3 = require('classnames');
|
34 |
|
35 | var _classnames4 = _interopRequireDefault(_classnames3);
|
36 |
|
37 | var _reactLifecyclesCompat = require('react-lifecycles-compat');
|
38 |
|
39 | var _util = require('../util');
|
40 |
|
41 | var _manager = require('./manager');
|
42 |
|
43 | var _manager2 = _interopRequireDefault(_manager);
|
44 |
|
45 | var _gateway = require('./gateway');
|
46 |
|
47 | var _gateway2 = _interopRequireDefault(_gateway);
|
48 |
|
49 | var _position = require('./position');
|
50 |
|
51 | var _position2 = _interopRequireDefault(_position);
|
52 |
|
53 | var _findNode = require('./utils/find-node');
|
54 |
|
55 | var _findNode2 = _interopRequireDefault(_findNode);
|
56 |
|
57 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
58 |
|
59 | var saveLastFocusNode = _util.focus.saveLastFocusNode,
|
60 | getFocusNodeList = _util.focus.getFocusNodeList,
|
61 | backLastFocusNode = _util.focus.backLastFocusNode;
|
62 | var makeChain = _util.func.makeChain,
|
63 | noop = _util.func.noop,
|
64 | bindCtx = _util.func.bindCtx;
|
65 |
|
66 |
|
67 | var getContainerNode = function getContainerNode(props) {
|
68 | var targetNode = (0, _findNode2.default)(props.target);
|
69 | return (0, _findNode2.default)(props.container, targetNode);
|
70 | };
|
71 |
|
72 | var prefixes = ['-webkit-', '-moz-', '-o-', 'ms-', ''];
|
73 | var getStyleProperty = function getStyleProperty(node, name) {
|
74 | var style = window.getComputedStyle(node);
|
75 | var ret = '';
|
76 | for (var i = 0; i < prefixes.length; i++) {
|
77 | ret = style.getPropertyValue(prefixes[i] + name);
|
78 | if (ret) {
|
79 | break;
|
80 | }
|
81 | }
|
82 | return ret;
|
83 | };
|
84 |
|
85 |
|
86 | var containerNodeList = [];
|
87 |
|
88 |
|
89 |
|
90 |
|
91 | var Overlay = (_temp = _class = function (_Component) {
|
92 | (0, _inherits3.default)(Overlay, _Component);
|
93 |
|
94 | function Overlay(props) {
|
95 | (0, _classCallCheck3.default)(this, Overlay);
|
96 |
|
97 | var _this = (0, _possibleConstructorReturn3.default)(this, _Component.call(this, props));
|
98 |
|
99 | _this.saveContentRef = function (ref) {
|
100 | _this.contentRef = ref;
|
101 | };
|
102 |
|
103 | _this.saveGatewayRef = function (ref) {
|
104 | _this.gatewayRef = ref;
|
105 | };
|
106 |
|
107 | _this.lastAlign = props.align;
|
108 |
|
109 | bindCtx(_this, ['handlePosition', 'handleAnimateEnd', 'handleDocumentKeyDown', 'handleDocumentClick', 'handleMaskClick', 'beforeOpen', 'beforeClose']);
|
110 |
|
111 | _this.state = {
|
112 | visible: false,
|
113 | status: 'none',
|
114 | animation: _this.getAnimation(props),
|
115 | willOpen: false,
|
116 | willClose: false
|
117 | };
|
118 |
|
119 | _this.timeoutMap = {};
|
120 | return _this;
|
121 | }
|
122 |
|
123 | Overlay.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
|
124 | var willOpen = !prevState.visible && nextProps.visible;
|
125 | var willClose = prevState.visible && !nextProps.visible;
|
126 |
|
127 | var nextState = {
|
128 | willOpen: willOpen,
|
129 | willClose: willClose
|
130 | };
|
131 |
|
132 | if (willOpen) {
|
133 | nextProps.beforeOpen && nextProps.beforeOpen();
|
134 | } else if (willClose) {
|
135 | nextProps.beforeClose && nextProps.beforeClose();
|
136 | }
|
137 |
|
138 | if (nextProps.animation || nextProps.animation === false) {
|
139 | nextState.animation = nextProps.animation;
|
140 | }
|
141 |
|
142 | if (nextProps.animation !== false && _util.support.animation) {
|
143 | if (willOpen) {
|
144 | nextState.visible = true;
|
145 | nextState.status = 'mounting';
|
146 | } else if (willClose) {
|
147 |
|
148 |
|
149 | nextState.status = 'leaving';
|
150 | }
|
151 | } else if ('visible' in nextProps && nextProps.visible !== prevState.visible) {
|
152 | nextState.visible = nextProps.visible;
|
153 | }
|
154 |
|
155 | return nextState;
|
156 | };
|
157 |
|
158 | Overlay.prototype.componentDidMount = function componentDidMount() {
|
159 | if (this.state.willOpen) {
|
160 | this.beforeOpen();
|
161 | } else if (this.state.willClose) {
|
162 | this.beforeClose();
|
163 | }
|
164 |
|
165 | if (this.state.visible) {
|
166 | this.doAnimation(true, false);
|
167 | this._isMounted = true;
|
168 | }
|
169 |
|
170 | this.addDocumentEvents();
|
171 |
|
172 | _manager2.default.addOverlay(this);
|
173 | };
|
174 |
|
175 | Overlay.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
|
176 | if (this.state.willOpen) {
|
177 | this.beforeOpen();
|
178 | } else if (this.state.willClose) {
|
179 | this.beforeClose();
|
180 | }
|
181 |
|
182 | if (!this._isMounted && this.props.visible) {
|
183 | this._isMounted = true;
|
184 | }
|
185 |
|
186 | if (this.props.align !== prevProps.align) {
|
187 | this.lastAlign = prevProps.align;
|
188 | }
|
189 |
|
190 | var willOpen = !prevProps.visible && this.props.visible;
|
191 | var willClose = prevProps.visible && !this.props.visible;
|
192 |
|
193 | (willOpen || willClose) && this.doAnimation(willOpen, willClose);
|
194 | };
|
195 |
|
196 | Overlay.prototype.componentWillUnmount = function componentWillUnmount() {
|
197 | this._isDestroyed = true;
|
198 | this._isMounted = false;
|
199 | _manager2.default.removeOverlay(this);
|
200 | this.removeDocumentEvents();
|
201 | if (this.focusTimeout) {
|
202 | clearTimeout(this.focusTimeout);
|
203 | }
|
204 | if (this._animation) {
|
205 | this._animation.off();
|
206 | this._animation = null;
|
207 | }
|
208 | this.beforeClose();
|
209 | };
|
210 |
|
211 | Overlay.prototype.doAnimation = function doAnimation(open, close) {
|
212 | var _this2 = this;
|
213 |
|
214 | if (this.state.animation && _util.support.animation) {
|
215 | if (open) {
|
216 | this.onEntering();
|
217 | } else if (close) {
|
218 | this.onLeaving();
|
219 | }
|
220 | this.addAnimationEvents();
|
221 | } else {
|
222 | if (open) {
|
223 |
|
224 | setTimeout(function () {
|
225 | _this2.props.onOpen();
|
226 | _util.dom.addClass(_this2.getWrapperNode(), 'opened');
|
227 | _manager2.default.addOverlay(_this2);
|
228 | _this2.props.afterOpen();
|
229 | });
|
230 | } else if (close) {
|
231 | this.props.onClose();
|
232 | _util.dom.removeClass(this.getWrapperNode(), 'opened');
|
233 | _manager2.default.removeOverlay(this);
|
234 | this.props.afterClose();
|
235 | }
|
236 | this.setFocusNode();
|
237 | }
|
238 | };
|
239 |
|
240 | Overlay.prototype.getAnimation = function getAnimation(props) {
|
241 | if (props.animation === false) {
|
242 | return false;
|
243 | }
|
244 |
|
245 | if (props.animation) {
|
246 | return props.animation;
|
247 | }
|
248 |
|
249 | return this.getAnimationByAlign(props.align);
|
250 | };
|
251 |
|
252 | Overlay.prototype.getAnimationByAlign = function getAnimationByAlign(align) {
|
253 | switch (align[0]) {
|
254 | case 't':
|
255 | return {
|
256 |
|
257 |
|
258 |
|
259 | in: 'expandInDown fadeInDownSmall',
|
260 | out: 'expandOutUp fadeOutUpSmall'
|
261 | };
|
262 | case 'b':
|
263 | return {
|
264 | in: 'fadeInUp',
|
265 | out: 'fadeOutDown'
|
266 | };
|
267 | default:
|
268 | return {
|
269 | in: 'expandInDown fadeInDownSmall',
|
270 | out: 'expandOutUp fadeOutUpSmall'
|
271 | };
|
272 | }
|
273 | };
|
274 |
|
275 | Overlay.prototype.addAnimationEvents = function addAnimationEvents() {
|
276 | var _this3 = this;
|
277 |
|
278 | setTimeout(function () {
|
279 | var node = _this3.getContentNode();
|
280 | if (node) {
|
281 | var id = (0, _util.guid)();
|
282 |
|
283 | _this3._animation = _util.events.on(node, _util.support.animation.end, _this3.handleAnimateEnd.bind(_this3, id));
|
284 |
|
285 | var animationDelay = parseFloat(getStyleProperty(node, 'animation-delay')) || 0;
|
286 | var animationDuration = parseFloat(getStyleProperty(node, 'animation-duration')) || 0;
|
287 | var time = animationDelay + animationDuration;
|
288 | if (time) {
|
289 | _this3.timeoutMap[id] = setTimeout(function () {
|
290 | _this3.handleAnimateEnd(id);
|
291 | }, time * 1000 + 200);
|
292 | }
|
293 | }
|
294 | });
|
295 | };
|
296 |
|
297 | Overlay.prototype.handlePosition = function handlePosition(config) {
|
298 | var align = config.align.join(' ');
|
299 |
|
300 | if (!('animation' in this.props) && this.props.needAdjust && this.lastAlign !== align) {
|
301 | this.setState({
|
302 | animation: this.getAnimationByAlign(align)
|
303 | });
|
304 | }
|
305 |
|
306 | var status = this.state.status;
|
307 |
|
308 | if (status === 'mounting') {
|
309 | this.setState({
|
310 | status: 'entering'
|
311 | });
|
312 | }
|
313 |
|
314 | this.lastAlign = align;
|
315 | };
|
316 |
|
317 | Overlay.prototype.handleAnimateEnd = function handleAnimateEnd(id) {
|
318 | if (this.timeoutMap[id]) {
|
319 | clearTimeout(this.timeoutMap[id]);
|
320 | }
|
321 | delete this.timeoutMap[id];
|
322 |
|
323 | if (this._animation) {
|
324 | this._animation.off();
|
325 | this._animation = null;
|
326 | }
|
327 |
|
328 | if (!this._isMounted) {
|
329 | return;
|
330 | }
|
331 |
|
332 | if (this.state.status === 'leaving') {
|
333 | this.setState({
|
334 | visible: false,
|
335 | status: 'none'
|
336 | });
|
337 |
|
338 | this.onLeaved();
|
339 |
|
340 |
|
341 | } else if (this.state.status === 'entering' || this.state.status === 'mounting') {
|
342 | this.setState({
|
343 | status: 'none'
|
344 | });
|
345 |
|
346 | this.onEntered();
|
347 | }
|
348 | };
|
349 |
|
350 | Overlay.prototype.onEntering = function onEntering() {
|
351 | var _this4 = this;
|
352 |
|
353 | if (this._isDestroyed) {
|
354 | return;
|
355 | }
|
356 |
|
357 |
|
358 | setTimeout(function () {
|
359 | var wrapperNode = _this4.getWrapperNode();
|
360 | _util.dom.addClass(wrapperNode, 'opened');
|
361 | _this4.props.onOpen();
|
362 | });
|
363 | };
|
364 |
|
365 | Overlay.prototype.onLeaving = function onLeaving() {
|
366 | var wrapperNode = this.getWrapperNode();
|
367 | _util.dom.removeClass(wrapperNode, 'opened');
|
368 | this.props.onClose();
|
369 | };
|
370 |
|
371 | Overlay.prototype.onEntered = function onEntered() {
|
372 | _manager2.default.addOverlay(this);
|
373 | this.setFocusNode();
|
374 | this.props.afterOpen();
|
375 | };
|
376 |
|
377 | Overlay.prototype.onLeaved = function onLeaved() {
|
378 | _manager2.default.removeOverlay(this);
|
379 | this.setFocusNode();
|
380 | this.props.afterClose();
|
381 | };
|
382 |
|
383 | Overlay.prototype.beforeOpen = function beforeOpen() {
|
384 | if (this.props.disableScroll) {
|
385 | var containerNode = getContainerNode(this.props) || document.body;
|
386 | var _containerNode$style = containerNode.style,
|
387 | overflow = _containerNode$style.overflow,
|
388 | paddingRight = _containerNode$style.paddingRight;
|
389 |
|
390 |
|
391 | var cnInfo = containerNodeList.find(function (m) {
|
392 | return m.containerNode === containerNode;
|
393 | }) || {
|
394 | containerNode: containerNode,
|
395 | count: 0
|
396 | };
|
397 |
|
398 | |
399 |
|
400 |
|
401 |
|
402 | if (cnInfo.count === 0 && overflow !== 'hidden') {
|
403 | var style = {
|
404 | overflow: 'hidden'
|
405 | };
|
406 |
|
407 | cnInfo.overflow = overflow;
|
408 |
|
409 | if (_util.dom.hasScroll(containerNode)) {
|
410 | cnInfo.paddingRight = paddingRight;
|
411 | style.paddingRight = _util.dom.getStyle(containerNode, 'paddingRight') + _util.dom.scrollbar().width + 'px';
|
412 | }
|
413 |
|
414 | _util.dom.setStyle(containerNode, style);
|
415 | containerNodeList.push(cnInfo);
|
416 | cnInfo.count++;
|
417 | } else if (cnInfo.count) {
|
418 | cnInfo.count++;
|
419 | }
|
420 |
|
421 | this._containerNode = containerNode;
|
422 | }
|
423 | };
|
424 |
|
425 | Overlay.prototype.beforeClose = function beforeClose() {
|
426 | var _this5 = this;
|
427 |
|
428 | if (this.props.disableScroll) {
|
429 | var idx = containerNodeList.findIndex(function (cn) {
|
430 | return cn.containerNode === _this5._containerNode;
|
431 | });
|
432 |
|
433 | if (idx !== -1) {
|
434 | var cnInfo = containerNodeList[idx];
|
435 | var overflow = cnInfo.overflow,
|
436 | paddingRight = cnInfo.paddingRight;
|
437 |
|
438 |
|
439 |
|
440 |
|
441 | if (cnInfo.count === 1 && this._containerNode && this._containerNode.style.overflow === 'hidden') {
|
442 | var style = {
|
443 | overflow: overflow
|
444 | };
|
445 |
|
446 | if (paddingRight !== undefined) {
|
447 | style.paddingRight = paddingRight;
|
448 | }
|
449 |
|
450 | _util.dom.setStyle(this._containerNode, style);
|
451 | }
|
452 |
|
453 | cnInfo.count--;
|
454 |
|
455 | if (cnInfo.count === 0) {
|
456 | containerNodeList.splice(idx, 1);
|
457 | }
|
458 | }
|
459 | this._containerNode = undefined;
|
460 | }
|
461 | };
|
462 |
|
463 | Overlay.prototype.setFocusNode = function setFocusNode() {
|
464 | var _this6 = this;
|
465 |
|
466 | if (!this.props.autoFocus) {
|
467 | return;
|
468 | }
|
469 |
|
470 | if (this.state.visible && !this._hasFocused) {
|
471 | saveLastFocusNode();
|
472 |
|
473 |
|
474 | this.focusTimeout = setTimeout(function () {
|
475 | var node = _this6.getContentNode();
|
476 | if (node) {
|
477 | var focusNodeList = getFocusNodeList(node);
|
478 | if (focusNodeList.length) {
|
479 | focusNodeList[0].focus();
|
480 | }
|
481 | _this6._hasFocused = true;
|
482 | }
|
483 | }, 100);
|
484 | } else if (!this.state.visible && this._hasFocused) {
|
485 | backLastFocusNode();
|
486 | this._hasFocused = false;
|
487 | }
|
488 | };
|
489 |
|
490 | Overlay.prototype.getContent = function getContent() {
|
491 | return this.contentRef;
|
492 | };
|
493 |
|
494 | Overlay.prototype.getContentNode = function getContentNode() {
|
495 | try {
|
496 | return (0, _reactDom.findDOMNode)(this.contentRef);
|
497 | } catch (err) {
|
498 | return null;
|
499 | }
|
500 | };
|
501 |
|
502 | Overlay.prototype.getWrapperNode = function getWrapperNode() {
|
503 | return this.gatewayRef ? this.gatewayRef.getChildNode() : null;
|
504 | };
|
505 |
|
506 | |
507 |
|
508 |
|
509 |
|
510 |
|
511 | Overlay.prototype.addDocumentEvents = function addDocumentEvents() {
|
512 | var useCapture = this.props.useCapture;
|
513 |
|
514 |
|
515 |
|
516 | if (this.props.canCloseByEsc) {
|
517 | this._keydownEvents = _util.events.on(document, 'keydown', this.handleDocumentKeyDown, useCapture);
|
518 | }
|
519 |
|
520 | if (this.props.canCloseByOutSideClick) {
|
521 | this._clickEvents = _util.events.on(document, 'click', this.handleDocumentClick, useCapture);
|
522 | this._touchEvents = _util.events.on(document, 'touchend', this.handleDocumentClick, useCapture);
|
523 | }
|
524 | };
|
525 |
|
526 | Overlay.prototype.removeDocumentEvents = function removeDocumentEvents() {
|
527 | var _this7 = this;
|
528 |
|
529 | ['_keydownEvents', '_clickEvents', '_touchEvents'].forEach(function (event) {
|
530 | if (_this7[event]) {
|
531 | _this7[event].off();
|
532 | _this7[event] = null;
|
533 | }
|
534 | });
|
535 | };
|
536 |
|
537 | Overlay.prototype.handleDocumentKeyDown = function handleDocumentKeyDown(e) {
|
538 | if (this.state.visible && e.keyCode === _util.KEYCODE.ESC && _manager2.default.isCurrentOverlay(this)) {
|
539 | this.props.onRequestClose('keyboard', e);
|
540 | }
|
541 | };
|
542 |
|
543 | Overlay.prototype.isInShadowDOM = function isInShadowDOM(node) {
|
544 | return node.getRootNode ? node.getRootNode().nodeType === 11 : false;
|
545 | };
|
546 |
|
547 | Overlay.prototype.getEventPath = function getEventPath(event) {
|
548 |
|
549 | return event.path || event.composedPath && event.composedPath() || this.composedPath(event.target);
|
550 | };
|
551 |
|
552 | Overlay.prototype.composedPath = function composedPath(el) {
|
553 | var path = [];
|
554 | while (el) {
|
555 | path.push(el);
|
556 | if (el.tagName === 'HTML') {
|
557 | path.push(document);
|
558 | path.push(window);
|
559 | return path;
|
560 | }
|
561 | el = el.parentElement;
|
562 | }
|
563 | };
|
564 |
|
565 | Overlay.prototype.matchInShadowDOM = function matchInShadowDOM(node, e) {
|
566 | if (this.isInShadowDOM(node)) {
|
567 |
|
568 |
|
569 |
|
570 |
|
571 | var eventPath = this.getEventPath(e);
|
572 | return node === eventPath[0] || node.contains(eventPath[0]);
|
573 | }
|
574 |
|
575 | return false;
|
576 | };
|
577 |
|
578 | Overlay.prototype.handleDocumentClick = function handleDocumentClick(e) {
|
579 | var _this8 = this;
|
580 |
|
581 | if (this.state.visible) {
|
582 | var safeNode = this.props.safeNode;
|
583 |
|
584 | var safeNodes = Array.isArray(safeNode) ? [].concat(safeNode) : [safeNode];
|
585 | safeNodes.unshift(function () {
|
586 | return _this8.getWrapperNode();
|
587 | });
|
588 |
|
589 | for (var i = 0; i < safeNodes.length; i++) {
|
590 | var node = (0, _findNode2.default)(safeNodes[i], this.props);
|
591 |
|
592 |
|
593 | if (node && (node === e.target || node.contains(e.target) || this.matchInShadowDOM(node, e) || e.target !== document && !document.documentElement.contains(e.target))) {
|
594 | return;
|
595 | }
|
596 | }
|
597 |
|
598 | this.props.onRequestClose('docClick', e);
|
599 | }
|
600 | };
|
601 |
|
602 | Overlay.prototype.handleMaskClick = function handleMaskClick(e) {
|
603 | if (e.currentTarget === e.target && this.props.canCloseByMask) {
|
604 | this.props.onRequestClose('maskClick', e);
|
605 | }
|
606 | };
|
607 |
|
608 |
|
609 | Overlay.prototype.getInstance = function getInstance() {
|
610 | return this;
|
611 | };
|
612 |
|
613 | Overlay.prototype.render = function render() {
|
614 | var _props = this.props,
|
615 | prefix = _props.prefix,
|
616 | className = _props.className,
|
617 | style = _props.style,
|
618 | propChildren = _props.children,
|
619 | target = _props.target,
|
620 | align = _props.align,
|
621 | offset = _props.offset,
|
622 | container = _props.container,
|
623 | hasMask = _props.hasMask,
|
624 | needAdjust = _props.needAdjust,
|
625 | autoFit = _props.autoFit,
|
626 | beforePosition = _props.beforePosition,
|
627 | onPosition = _props.onPosition,
|
628 | wrapperStyle = _props.wrapperStyle,
|
629 | rtl = _props.rtl,
|
630 | propShouldUpdatePosition = _props.shouldUpdatePosition,
|
631 | cache = _props.cache,
|
632 | wrapperClassName = _props.wrapperClassName,
|
633 | onMaskMouseEnter = _props.onMaskMouseEnter,
|
634 | onMaskMouseLeave = _props.onMaskMouseLeave,
|
635 | maskClass = _props.maskClass,
|
636 | isChildrenInMask = _props.isChildrenInMask,
|
637 | pinFollowBaseElementWhenFixed = _props.pinFollowBaseElementWhenFixed;
|
638 | var _state = this.state,
|
639 | stateVisible = _state.visible,
|
640 | status = _state.status,
|
641 | animation = _state.animation;
|
642 |
|
643 |
|
644 | var children = stateVisible || cache && this._isMounted ? propChildren : null;
|
645 | if (children) {
|
646 | var _classnames, _classnames2;
|
647 |
|
648 | var child = _react.Children.only(children);
|
649 |
|
650 | if (typeof child.type === 'function' && !(child.type.prototype instanceof _react.Component)) {
|
651 | child = _react2.default.createElement(
|
652 | 'div',
|
653 | { role: 'none' },
|
654 | child
|
655 | );
|
656 | }
|
657 | var childClazz = (0, _classnames4.default)((_classnames = {}, _classnames[prefix + 'overlay-inner'] = true, _classnames[animation.in] = status === 'entering' || status === 'mounting', _classnames[animation.out] = status === 'leaving', _classnames[child.props.className] = !!child.props.className, _classnames[className] = !!className, _classnames));
|
658 | if (typeof child.ref === 'string') {
|
659 | throw new Error('Can not set ref by string in Overlay, use function instead.');
|
660 | }
|
661 |
|
662 | children = _react2.default.cloneElement(child, {
|
663 | className: childClazz,
|
664 | style: (0, _extends3.default)({}, child.props.style, style),
|
665 | ref: makeChain(this.saveContentRef, child.ref),
|
666 | 'aria-hidden': !stateVisible && cache && this._isMounted,
|
667 | onClick: makeChain(this.props.onClick, child.props.onClick),
|
668 | onTouchEnd: makeChain(this.props.onTouchEnd, child.props.onTouchEnd)
|
669 | });
|
670 |
|
671 | if (align) {
|
672 | var shouldUpdatePosition = status === 'leaving' ? false : propShouldUpdatePosition;
|
673 | children = _react2.default.createElement(_position2.default, {
|
674 | children: children,
|
675 | target: target,
|
676 | align: align,
|
677 | offset: offset,
|
678 | autoFit: autoFit,
|
679 | container: container,
|
680 | needAdjust: needAdjust,
|
681 | pinFollowBaseElementWhenFixed: pinFollowBaseElementWhenFixed,
|
682 | beforePosition: beforePosition,
|
683 | onPosition: makeChain(this.handlePosition, onPosition),
|
684 | shouldUpdatePosition: shouldUpdatePosition,
|
685 | rtl: rtl
|
686 | });
|
687 | }
|
688 |
|
689 | var wrapperClazz = (0, _classnames4.default)([prefix + 'overlay-wrapper', wrapperClassName]);
|
690 | var newWrapperStyle = (0, _extends3.default)({}, {
|
691 | display: stateVisible ? '' : 'none'
|
692 | }, wrapperStyle);
|
693 |
|
694 | var maskClazz = (0, _classnames4.default)((_classnames2 = {}, _classnames2[prefix + 'overlay-backdrop'] = true, _classnames2[maskClass] = !!maskClass, _classnames2));
|
695 |
|
696 | children = _react2.default.createElement(
|
697 | 'div',
|
698 | { className: wrapperClazz, style: newWrapperStyle, dir: rtl ? 'rtl' : undefined },
|
699 | hasMask ? _react2.default.createElement(
|
700 | 'div',
|
701 | {
|
702 | className: maskClazz,
|
703 | onClick: this.handleMaskClick,
|
704 | onMouseEnter: onMaskMouseEnter,
|
705 | onMouseLeave: onMaskMouseLeave,
|
706 | dir: rtl ? 'rtl' : undefined
|
707 | },
|
708 | isChildrenInMask && children
|
709 | ) : null,
|
710 | !isChildrenInMask && children
|
711 | );
|
712 | }
|
713 |
|
714 | return _react2.default.createElement(_gateway2.default, (0, _extends3.default)({ container: container, target: target, children: children }, { ref: this.saveGatewayRef }));
|
715 | };
|
716 |
|
717 | return Overlay;
|
718 | }(_react.Component), _class.propTypes = {
|
719 | prefix: _propTypes2.default.string,
|
720 | pure: _propTypes2.default.bool,
|
721 | rtl: _propTypes2.default.bool,
|
722 | className: _propTypes2.default.string,
|
723 | style: _propTypes2.default.object,
|
724 | |
725 |
|
726 |
|
727 | children: _propTypes2.default.any,
|
728 | |
729 |
|
730 |
|
731 | visible: _propTypes2.default.bool,
|
732 | |
733 |
|
734 |
|
735 |
|
736 |
|
737 | onRequestClose: _propTypes2.default.func,
|
738 | |
739 |
|
740 |
|
741 | target: _propTypes2.default.any,
|
742 | |
743 |
|
744 |
|
745 | align: _propTypes2.default.string,
|
746 | |
747 |
|
748 |
|
749 |
|
750 | offset: _propTypes2.default.array,
|
751 | |
752 |
|
753 |
|
754 | container: _propTypes2.default.any,
|
755 | |
756 |
|
757 |
|
758 | hasMask: _propTypes2.default.bool,
|
759 | |
760 |
|
761 |
|
762 | canCloseByEsc: _propTypes2.default.bool,
|
763 | |
764 |
|
765 |
|
766 | canCloseByOutSideClick: _propTypes2.default.bool,
|
767 | |
768 |
|
769 |
|
770 | canCloseByMask: _propTypes2.default.bool,
|
771 | |
772 |
|
773 |
|
774 | beforeOpen: _propTypes2.default.func,
|
775 | |
776 |
|
777 |
|
778 | onOpen: _propTypes2.default.func,
|
779 | |
780 |
|
781 |
|
782 | afterOpen: _propTypes2.default.func,
|
783 | |
784 |
|
785 |
|
786 | beforeClose: _propTypes2.default.func,
|
787 | |
788 |
|
789 |
|
790 | onClose: _propTypes2.default.func,
|
791 | |
792 |
|
793 |
|
794 | afterClose: _propTypes2.default.func,
|
795 | |
796 |
|
797 |
|
798 | beforePosition: _propTypes2.default.func,
|
799 | |
800 |
|
801 |
|
802 |
|
803 |
|
804 |
|
805 |
|
806 |
|
807 | onPosition: _propTypes2.default.func,
|
808 | shouldUpdatePosition: _propTypes2.default.bool,
|
809 | |
810 |
|
811 |
|
812 | autoFocus: _propTypes2.default.bool,
|
813 | needAdjust: _propTypes2.default.bool,
|
814 | |
815 |
|
816 |
|
817 | disableScroll: _propTypes2.default.bool,
|
818 | |
819 |
|
820 |
|
821 |
|
822 | useCapture: _propTypes2.default.bool,
|
823 | |
824 |
|
825 |
|
826 | cache: _propTypes2.default.bool,
|
827 | |
828 |
|
829 |
|
830 | safeNode: _propTypes2.default.any,
|
831 | |
832 |
|
833 |
|
834 | wrapperClassName: _propTypes2.default.string,
|
835 | |
836 |
|
837 |
|
838 | wrapperStyle: _propTypes2.default.object,
|
839 | |
840 |
|
841 |
|
842 |
|
843 | animation: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.bool]),
|
844 | onMaskMouseEnter: _propTypes2.default.func,
|
845 | onMaskMouseLeave: _propTypes2.default.func,
|
846 | onClick: _propTypes2.default.func,
|
847 | maskClass: _propTypes2.default.string,
|
848 | isChildrenInMask: _propTypes2.default.bool,
|
849 |
|
850 |
|
851 | pinFollowBaseElementWhenFixed: _propTypes2.default.bool,
|
852 | |
853 |
|
854 |
|
855 |
|
856 | v2: _propTypes2.default.bool,
|
857 | |
858 |
|
859 |
|
860 |
|
861 | points: _propTypes2.default.array
|
862 | }, _class.defaultProps = {
|
863 | prefix: 'next-',
|
864 | pure: false,
|
865 | visible: false,
|
866 | onRequestClose: noop,
|
867 | target: _position2.default.VIEWPORT,
|
868 | align: 'tl bl',
|
869 | offset: [0, 0],
|
870 | hasMask: false,
|
871 | canCloseByEsc: true,
|
872 | canCloseByOutSideClick: true,
|
873 | canCloseByMask: true,
|
874 | beforeOpen: noop,
|
875 | onOpen: noop,
|
876 | afterOpen: noop,
|
877 | beforeClose: noop,
|
878 | onClose: noop,
|
879 | afterClose: noop,
|
880 | beforePosition: noop,
|
881 | onPosition: noop,
|
882 | onMaskMouseEnter: noop,
|
883 | onMaskMouseLeave: noop,
|
884 | shouldUpdatePosition: false,
|
885 | autoFocus: false,
|
886 | needAdjust: true,
|
887 | disableScroll: false,
|
888 | cache: false,
|
889 | isChildrenInMask: false,
|
890 | onTouchEnd: function onTouchEnd(event) {
|
891 | event.stopPropagation();
|
892 | },
|
893 | onClick: function onClick(event) {
|
894 | return event.stopPropagation();
|
895 | },
|
896 | maskClass: '',
|
897 | useCapture: true
|
898 | }, _temp);
|
899 | Overlay.displayName = 'Overlay';
|
900 | exports.default = (0, _reactLifecyclesCompat.polyfill)(Overlay);
|
901 | module.exports = exports['default']; |
\ | No newline at end of file |