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