UNPKG

27.3 kBJavaScriptView Raw
1import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
2import _extends from "@babel/runtime/helpers/esm/extends";
3import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
4import _createClass from "@babel/runtime/helpers/esm/createClass";
5import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
6import _inherits from "@babel/runtime/helpers/esm/inherits";
7import _createSuper from "@babel/runtime/helpers/esm/createSuper";
8import * as React from 'react';
9import ReactDOM from 'react-dom';
10import raf from "rc-util/es/raf";
11import contains from "rc-util/es/Dom/contains";
12import findDOMNode from "rc-util/es/Dom/findDOMNode";
13import { composeRef, supportRef } from "rc-util/es/ref";
14import addEventListener from "rc-util/es/Dom/addEventListener";
15import Portal from "rc-util/es/Portal";
16import classNames from 'classnames';
17import { getAlignFromPlacement, getAlignPopupClassName } from './utils/alignUtil';
18import Popup from './Popup';
19import TriggerContext from './context';
20
21function noop() {}
22
23function returnEmptyString() {
24 return '';
25}
26
27function returnDocument(element) {
28 if (element) {
29 return element.ownerDocument;
30 }
31
32 return window.document;
33}
34
35var ALL_HANDLERS = ['onClick', 'onMouseDown', 'onTouchStart', 'onMouseEnter', 'onMouseLeave', 'onFocus', 'onBlur', 'onContextMenu'];
36/**
37 * Internal usage. Do not use in your code since this will be removed.
38 */
39
40export function generateTrigger(PortalComponent) {
41 var Trigger = /*#__PURE__*/function (_React$Component) {
42 _inherits(Trigger, _React$Component);
43
44 var _super = _createSuper(Trigger);
45
46 // ensure `getContainer` will be called only once
47 function Trigger(props) {
48 var _this;
49
50 _classCallCheck(this, Trigger);
51
52 _this = _super.call(this, props);
53 _this.popupRef = /*#__PURE__*/React.createRef();
54 _this.triggerRef = /*#__PURE__*/React.createRef();
55 _this.portalContainer = void 0;
56 _this.attachId = void 0;
57 _this.clickOutsideHandler = void 0;
58 _this.touchOutsideHandler = void 0;
59 _this.contextMenuOutsideHandler1 = void 0;
60 _this.contextMenuOutsideHandler2 = void 0;
61 _this.mouseDownTimeout = void 0;
62 _this.focusTime = void 0;
63 _this.preClickTime = void 0;
64 _this.preTouchTime = void 0;
65 _this.delayTimer = void 0;
66 _this.hasPopupMouseDown = void 0;
67
68 _this.onMouseEnter = function (e) {
69 var mouseEnterDelay = _this.props.mouseEnterDelay;
70
71 _this.fireEvents('onMouseEnter', e);
72
73 _this.delaySetPopupVisible(true, mouseEnterDelay, mouseEnterDelay ? null : e);
74 };
75
76 _this.onMouseMove = function (e) {
77 _this.fireEvents('onMouseMove', e);
78
79 _this.setPoint(e);
80 };
81
82 _this.onMouseLeave = function (e) {
83 _this.fireEvents('onMouseLeave', e);
84
85 _this.delaySetPopupVisible(false, _this.props.mouseLeaveDelay);
86 };
87
88 _this.onPopupMouseEnter = function () {
89 _this.clearDelayTimer();
90 };
91
92 _this.onPopupMouseLeave = function (e) {
93 var _this$popupRef$curren;
94
95 // https://github.com/react-component/trigger/pull/13
96 // react bug?
97 if (e.relatedTarget && !e.relatedTarget.setTimeout && contains((_this$popupRef$curren = _this.popupRef.current) === null || _this$popupRef$curren === void 0 ? void 0 : _this$popupRef$curren.getElement(), e.relatedTarget)) {
98 return;
99 }
100
101 _this.delaySetPopupVisible(false, _this.props.mouseLeaveDelay);
102 };
103
104 _this.onFocus = function (e) {
105 _this.fireEvents('onFocus', e); // incase focusin and focusout
106
107
108 _this.clearDelayTimer();
109
110 if (_this.isFocusToShow()) {
111 _this.focusTime = Date.now();
112
113 _this.delaySetPopupVisible(true, _this.props.focusDelay);
114 }
115 };
116
117 _this.onMouseDown = function (e) {
118 _this.fireEvents('onMouseDown', e);
119
120 _this.preClickTime = Date.now();
121 };
122
123 _this.onTouchStart = function (e) {
124 _this.fireEvents('onTouchStart', e);
125
126 _this.preTouchTime = Date.now();
127 };
128
129 _this.onBlur = function (e) {
130 _this.fireEvents('onBlur', e);
131
132 _this.clearDelayTimer();
133
134 if (_this.isBlurToHide()) {
135 _this.delaySetPopupVisible(false, _this.props.blurDelay);
136 }
137 };
138
139 _this.onContextMenu = function (e) {
140 e.preventDefault();
141
142 _this.fireEvents('onContextMenu', e);
143
144 _this.setPopupVisible(true, e);
145 };
146
147 _this.onContextMenuClose = function () {
148 if (_this.isContextMenuToShow()) {
149 _this.close();
150 }
151 };
152
153 _this.onClick = function (event) {
154 _this.fireEvents('onClick', event); // focus will trigger click
155
156
157 if (_this.focusTime) {
158 var preTime;
159
160 if (_this.preClickTime && _this.preTouchTime) {
161 preTime = Math.min(_this.preClickTime, _this.preTouchTime);
162 } else if (_this.preClickTime) {
163 preTime = _this.preClickTime;
164 } else if (_this.preTouchTime) {
165 preTime = _this.preTouchTime;
166 }
167
168 if (Math.abs(preTime - _this.focusTime) < 20) {
169 return;
170 }
171
172 _this.focusTime = 0;
173 }
174
175 _this.preClickTime = 0;
176 _this.preTouchTime = 0; // Only prevent default when all the action is click.
177 // https://github.com/ant-design/ant-design/issues/17043
178 // https://github.com/ant-design/ant-design/issues/17291
179
180 if (_this.isClickToShow() && (_this.isClickToHide() || _this.isBlurToHide()) && event && event.preventDefault) {
181 event.preventDefault();
182 }
183
184 var nextVisible = !_this.state.popupVisible;
185
186 if (_this.isClickToHide() && !nextVisible || nextVisible && _this.isClickToShow()) {
187 _this.setPopupVisible(!_this.state.popupVisible, event);
188 }
189 };
190
191 _this.onPopupMouseDown = function () {
192 _this.hasPopupMouseDown = true;
193 clearTimeout(_this.mouseDownTimeout);
194 _this.mouseDownTimeout = window.setTimeout(function () {
195 _this.hasPopupMouseDown = false;
196 }, 0);
197
198 if (_this.context) {
199 var _this$context;
200
201 (_this$context = _this.context).onPopupMouseDown.apply(_this$context, arguments);
202 }
203 };
204
205 _this.onDocumentClick = function (event) {
206 if (_this.props.mask && !_this.props.maskClosable) {
207 return;
208 }
209
210 var target = event.target;
211
212 var root = _this.getRootDomNode();
213
214 var popupNode = _this.getPopupDomNode();
215
216 if ( // mousedown on the target should also close popup when action is contextMenu.
217 // https://github.com/ant-design/ant-design/issues/29853
218 (!contains(root, target) || _this.isContextMenuOnly()) && !contains(popupNode, target) && !_this.hasPopupMouseDown) {
219 _this.close();
220 }
221 };
222
223 _this.getRootDomNode = function () {
224 var getTriggerDOMNode = _this.props.getTriggerDOMNode;
225
226 if (getTriggerDOMNode) {
227 return getTriggerDOMNode(_this.triggerRef.current);
228 }
229
230 try {
231 var domNode = findDOMNode(_this.triggerRef.current);
232
233 if (domNode) {
234 return domNode;
235 }
236 } catch (err) {// Do nothing
237 }
238
239 return ReactDOM.findDOMNode(_assertThisInitialized(_this));
240 };
241
242 _this.getPopupClassNameFromAlign = function (align) {
243 var className = [];
244 var _this$props = _this.props,
245 popupPlacement = _this$props.popupPlacement,
246 builtinPlacements = _this$props.builtinPlacements,
247 prefixCls = _this$props.prefixCls,
248 alignPoint = _this$props.alignPoint,
249 getPopupClassNameFromAlign = _this$props.getPopupClassNameFromAlign;
250
251 if (popupPlacement && builtinPlacements) {
252 className.push(getAlignPopupClassName(builtinPlacements, prefixCls, align, alignPoint));
253 }
254
255 if (getPopupClassNameFromAlign) {
256 className.push(getPopupClassNameFromAlign(align));
257 }
258
259 return className.join(' ');
260 };
261
262 _this.getComponent = function () {
263 var _this$props2 = _this.props,
264 prefixCls = _this$props2.prefixCls,
265 destroyPopupOnHide = _this$props2.destroyPopupOnHide,
266 popupClassName = _this$props2.popupClassName,
267 onPopupAlign = _this$props2.onPopupAlign,
268 popupMotion = _this$props2.popupMotion,
269 popupAnimation = _this$props2.popupAnimation,
270 popupTransitionName = _this$props2.popupTransitionName,
271 popupStyle = _this$props2.popupStyle,
272 mask = _this$props2.mask,
273 maskAnimation = _this$props2.maskAnimation,
274 maskTransitionName = _this$props2.maskTransitionName,
275 maskMotion = _this$props2.maskMotion,
276 zIndex = _this$props2.zIndex,
277 popup = _this$props2.popup,
278 stretch = _this$props2.stretch,
279 alignPoint = _this$props2.alignPoint,
280 mobile = _this$props2.mobile,
281 forceRender = _this$props2.forceRender;
282 var _this$state = _this.state,
283 popupVisible = _this$state.popupVisible,
284 point = _this$state.point;
285
286 var align = _this.getPopupAlign();
287
288 var mouseProps = {};
289
290 if (_this.isMouseEnterToShow()) {
291 mouseProps.onMouseEnter = _this.onPopupMouseEnter;
292 }
293
294 if (_this.isMouseLeaveToHide()) {
295 mouseProps.onMouseLeave = _this.onPopupMouseLeave;
296 }
297
298 mouseProps.onMouseDown = _this.onPopupMouseDown;
299 mouseProps.onTouchStart = _this.onPopupMouseDown;
300 return /*#__PURE__*/React.createElement(Popup, _extends({
301 prefixCls: prefixCls,
302 destroyPopupOnHide: destroyPopupOnHide,
303 visible: popupVisible,
304 point: alignPoint && point,
305 className: popupClassName,
306 align: align,
307 onAlign: onPopupAlign,
308 animation: popupAnimation,
309 getClassNameFromAlign: _this.getPopupClassNameFromAlign
310 }, mouseProps, {
311 stretch: stretch,
312 getRootDomNode: _this.getRootDomNode,
313 style: popupStyle,
314 mask: mask,
315 zIndex: zIndex,
316 transitionName: popupTransitionName,
317 maskAnimation: maskAnimation,
318 maskTransitionName: maskTransitionName,
319 maskMotion: maskMotion,
320 ref: _this.popupRef,
321 motion: popupMotion,
322 mobile: mobile,
323 forceRender: forceRender
324 }), typeof popup === 'function' ? popup() : popup);
325 };
326
327 _this.attachParent = function (popupContainer) {
328 raf.cancel(_this.attachId);
329 var _this$props3 = _this.props,
330 getPopupContainer = _this$props3.getPopupContainer,
331 getDocument = _this$props3.getDocument;
332
333 var domNode = _this.getRootDomNode();
334
335 var mountNode;
336
337 if (!getPopupContainer) {
338 mountNode = getDocument(_this.getRootDomNode()).body;
339 } else if (domNode || getPopupContainer.length === 0) {
340 // Compatible for legacy getPopupContainer with domNode argument.
341 // If no need `domNode` argument, will call directly.
342 // https://codesandbox.io/s/eloquent-mclean-ss93m?file=/src/App.js
343 mountNode = getPopupContainer(domNode);
344 }
345
346 if (mountNode) {
347 mountNode.appendChild(popupContainer);
348 } else {
349 // Retry after frame render in case parent not ready
350 _this.attachId = raf(function () {
351 _this.attachParent(popupContainer);
352 });
353 }
354 };
355
356 _this.getContainer = function () {
357 if (!_this.portalContainer) {
358 // In React.StrictMode component will call render multiple time in first mount.
359 // When you want to refactor with FC, useRef will also init multiple time and
360 // point to different useRef instance which will create multiple element
361 // (This multiple render will not trigger effect so you can not clean up this
362 // in effect). But this is safe with class component since it always point to same class instance.
363 var getDocument = _this.props.getDocument;
364 var popupContainer = getDocument(_this.getRootDomNode()).createElement('div'); // Make sure default popup container will never cause scrollbar appearing
365 // https://github.com/react-component/trigger/issues/41
366
367 popupContainer.style.position = 'absolute';
368 popupContainer.style.top = '0';
369 popupContainer.style.left = '0';
370 popupContainer.style.width = '100%';
371 _this.portalContainer = popupContainer;
372 }
373
374 _this.attachParent(_this.portalContainer);
375
376 return _this.portalContainer;
377 };
378
379 _this.setPoint = function (point) {
380 var alignPoint = _this.props.alignPoint;
381 if (!alignPoint || !point) return;
382
383 _this.setState({
384 point: {
385 pageX: point.pageX,
386 pageY: point.pageY
387 }
388 });
389 };
390
391 _this.handlePortalUpdate = function () {
392 if (_this.state.prevPopupVisible !== _this.state.popupVisible) {
393 _this.props.afterPopupVisibleChange(_this.state.popupVisible);
394 }
395 };
396
397 _this.triggerContextValue = {
398 onPopupMouseDown: _this.onPopupMouseDown
399 };
400
401 var _popupVisible;
402
403 if ('popupVisible' in props) {
404 _popupVisible = !!props.popupVisible;
405 } else {
406 _popupVisible = !!props.defaultPopupVisible;
407 }
408
409 _this.state = {
410 prevPopupVisible: _popupVisible,
411 popupVisible: _popupVisible
412 };
413 ALL_HANDLERS.forEach(function (h) {
414 _this["fire".concat(h)] = function (e) {
415 _this.fireEvents(h, e);
416 };
417 });
418 return _this;
419 }
420
421 _createClass(Trigger, [{
422 key: "componentDidMount",
423 value: function componentDidMount() {
424 this.componentDidUpdate();
425 }
426 }, {
427 key: "componentDidUpdate",
428 value: function componentDidUpdate() {
429 var props = this.props;
430 var state = this.state; // We must listen to `mousedown` or `touchstart`, edge case:
431 // https://github.com/ant-design/ant-design/issues/5804
432 // https://github.com/react-component/calendar/issues/250
433 // https://github.com/react-component/trigger/issues/50
434
435 if (state.popupVisible) {
436 var currentDocument;
437
438 if (!this.clickOutsideHandler && (this.isClickToHide() || this.isContextMenuToShow())) {
439 currentDocument = props.getDocument(this.getRootDomNode());
440 this.clickOutsideHandler = addEventListener(currentDocument, 'mousedown', this.onDocumentClick);
441 } // always hide on mobile
442
443
444 if (!this.touchOutsideHandler) {
445 currentDocument = currentDocument || props.getDocument(this.getRootDomNode());
446 this.touchOutsideHandler = addEventListener(currentDocument, 'touchstart', this.onDocumentClick);
447 } // close popup when trigger type contains 'onContextMenu' and document is scrolling.
448
449
450 if (!this.contextMenuOutsideHandler1 && this.isContextMenuToShow()) {
451 currentDocument = currentDocument || props.getDocument(this.getRootDomNode());
452 this.contextMenuOutsideHandler1 = addEventListener(currentDocument, 'scroll', this.onContextMenuClose);
453 } // close popup when trigger type contains 'onContextMenu' and window is blur.
454
455
456 if (!this.contextMenuOutsideHandler2 && this.isContextMenuToShow()) {
457 this.contextMenuOutsideHandler2 = addEventListener(window, 'blur', this.onContextMenuClose);
458 }
459
460 return;
461 }
462
463 this.clearOutsideHandler();
464 }
465 }, {
466 key: "componentWillUnmount",
467 value: function componentWillUnmount() {
468 this.clearDelayTimer();
469 this.clearOutsideHandler();
470 clearTimeout(this.mouseDownTimeout);
471 raf.cancel(this.attachId);
472 }
473 }, {
474 key: "getPopupDomNode",
475 value: function getPopupDomNode() {
476 var _this$popupRef$curren2;
477
478 // for test
479 return ((_this$popupRef$curren2 = this.popupRef.current) === null || _this$popupRef$curren2 === void 0 ? void 0 : _this$popupRef$curren2.getElement()) || null;
480 }
481 }, {
482 key: "getPopupAlign",
483 value: function getPopupAlign() {
484 var props = this.props;
485 var popupPlacement = props.popupPlacement,
486 popupAlign = props.popupAlign,
487 builtinPlacements = props.builtinPlacements;
488
489 if (popupPlacement && builtinPlacements) {
490 return getAlignFromPlacement(builtinPlacements, popupPlacement, popupAlign);
491 }
492
493 return popupAlign;
494 }
495 }, {
496 key: "setPopupVisible",
497 value:
498 /**
499 * @param popupVisible Show or not the popup element
500 * @param event SyntheticEvent, used for `pointAlign`
501 */
502 function setPopupVisible(popupVisible, event) {
503 var alignPoint = this.props.alignPoint;
504 var prevPopupVisible = this.state.popupVisible;
505 this.clearDelayTimer();
506
507 if (prevPopupVisible !== popupVisible) {
508 if (!('popupVisible' in this.props)) {
509 this.setState({
510 popupVisible: popupVisible,
511 prevPopupVisible: prevPopupVisible
512 });
513 }
514
515 this.props.onPopupVisibleChange(popupVisible);
516 } // Always record the point position since mouseEnterDelay will delay the show
517
518
519 if (alignPoint && event && popupVisible) {
520 this.setPoint(event);
521 }
522 }
523 }, {
524 key: "delaySetPopupVisible",
525 value: function delaySetPopupVisible(visible, delayS, event) {
526 var _this2 = this;
527
528 var delay = delayS * 1000;
529 this.clearDelayTimer();
530
531 if (delay) {
532 var point = event ? {
533 pageX: event.pageX,
534 pageY: event.pageY
535 } : null;
536 this.delayTimer = window.setTimeout(function () {
537 _this2.setPopupVisible(visible, point);
538
539 _this2.clearDelayTimer();
540 }, delay);
541 } else {
542 this.setPopupVisible(visible, event);
543 }
544 }
545 }, {
546 key: "clearDelayTimer",
547 value: function clearDelayTimer() {
548 if (this.delayTimer) {
549 clearTimeout(this.delayTimer);
550 this.delayTimer = null;
551 }
552 }
553 }, {
554 key: "clearOutsideHandler",
555 value: function clearOutsideHandler() {
556 if (this.clickOutsideHandler) {
557 this.clickOutsideHandler.remove();
558 this.clickOutsideHandler = null;
559 }
560
561 if (this.contextMenuOutsideHandler1) {
562 this.contextMenuOutsideHandler1.remove();
563 this.contextMenuOutsideHandler1 = null;
564 }
565
566 if (this.contextMenuOutsideHandler2) {
567 this.contextMenuOutsideHandler2.remove();
568 this.contextMenuOutsideHandler2 = null;
569 }
570
571 if (this.touchOutsideHandler) {
572 this.touchOutsideHandler.remove();
573 this.touchOutsideHandler = null;
574 }
575 }
576 }, {
577 key: "createTwoChains",
578 value: function createTwoChains(event) {
579 var childPros = this.props.children.props;
580 var props = this.props;
581
582 if (childPros[event] && props[event]) {
583 return this["fire".concat(event)];
584 }
585
586 return childPros[event] || props[event];
587 }
588 }, {
589 key: "isClickToShow",
590 value: function isClickToShow() {
591 var _this$props4 = this.props,
592 action = _this$props4.action,
593 showAction = _this$props4.showAction;
594 return action.indexOf('click') !== -1 || showAction.indexOf('click') !== -1;
595 }
596 }, {
597 key: "isContextMenuOnly",
598 value: function isContextMenuOnly() {
599 var action = this.props.action;
600 return action === 'contextMenu' || action.length === 1 && action[0] === 'contextMenu';
601 }
602 }, {
603 key: "isContextMenuToShow",
604 value: function isContextMenuToShow() {
605 var _this$props5 = this.props,
606 action = _this$props5.action,
607 showAction = _this$props5.showAction;
608 return action.indexOf('contextMenu') !== -1 || showAction.indexOf('contextMenu') !== -1;
609 }
610 }, {
611 key: "isClickToHide",
612 value: function isClickToHide() {
613 var _this$props6 = this.props,
614 action = _this$props6.action,
615 hideAction = _this$props6.hideAction;
616 return action.indexOf('click') !== -1 || hideAction.indexOf('click') !== -1;
617 }
618 }, {
619 key: "isMouseEnterToShow",
620 value: function isMouseEnterToShow() {
621 var _this$props7 = this.props,
622 action = _this$props7.action,
623 showAction = _this$props7.showAction;
624 return action.indexOf('hover') !== -1 || showAction.indexOf('mouseEnter') !== -1;
625 }
626 }, {
627 key: "isMouseLeaveToHide",
628 value: function isMouseLeaveToHide() {
629 var _this$props8 = this.props,
630 action = _this$props8.action,
631 hideAction = _this$props8.hideAction;
632 return action.indexOf('hover') !== -1 || hideAction.indexOf('mouseLeave') !== -1;
633 }
634 }, {
635 key: "isFocusToShow",
636 value: function isFocusToShow() {
637 var _this$props9 = this.props,
638 action = _this$props9.action,
639 showAction = _this$props9.showAction;
640 return action.indexOf('focus') !== -1 || showAction.indexOf('focus') !== -1;
641 }
642 }, {
643 key: "isBlurToHide",
644 value: function isBlurToHide() {
645 var _this$props10 = this.props,
646 action = _this$props10.action,
647 hideAction = _this$props10.hideAction;
648 return action.indexOf('focus') !== -1 || hideAction.indexOf('blur') !== -1;
649 }
650 }, {
651 key: "forcePopupAlign",
652 value: function forcePopupAlign() {
653 if (this.state.popupVisible) {
654 var _this$popupRef$curren3;
655
656 (_this$popupRef$curren3 = this.popupRef.current) === null || _this$popupRef$curren3 === void 0 ? void 0 : _this$popupRef$curren3.forceAlign();
657 }
658 }
659 }, {
660 key: "fireEvents",
661 value: function fireEvents(type, e) {
662 var childCallback = this.props.children.props[type];
663
664 if (childCallback) {
665 childCallback(e);
666 }
667
668 var callback = this.props[type];
669
670 if (callback) {
671 callback(e);
672 }
673 }
674 }, {
675 key: "close",
676 value: function close() {
677 this.setPopupVisible(false);
678 }
679 }, {
680 key: "render",
681 value: function render() {
682 var popupVisible = this.state.popupVisible;
683 var _this$props11 = this.props,
684 children = _this$props11.children,
685 forceRender = _this$props11.forceRender,
686 alignPoint = _this$props11.alignPoint,
687 className = _this$props11.className,
688 autoDestroy = _this$props11.autoDestroy;
689 var child = React.Children.only(children);
690 var newChildProps = {
691 key: 'trigger'
692 }; // ============================== Visible Handlers ==============================
693 // >>> ContextMenu
694
695 if (this.isContextMenuToShow()) {
696 newChildProps.onContextMenu = this.onContextMenu;
697 } else {
698 newChildProps.onContextMenu = this.createTwoChains('onContextMenu');
699 } // >>> Click
700
701
702 if (this.isClickToHide() || this.isClickToShow()) {
703 newChildProps.onClick = this.onClick;
704 newChildProps.onMouseDown = this.onMouseDown;
705 newChildProps.onTouchStart = this.onTouchStart;
706 } else {
707 newChildProps.onClick = this.createTwoChains('onClick');
708 newChildProps.onMouseDown = this.createTwoChains('onMouseDown');
709 newChildProps.onTouchStart = this.createTwoChains('onTouchStart');
710 } // >>> Hover(enter)
711
712
713 if (this.isMouseEnterToShow()) {
714 newChildProps.onMouseEnter = this.onMouseEnter; // Point align
715
716 if (alignPoint) {
717 newChildProps.onMouseMove = this.onMouseMove;
718 }
719 } else {
720 newChildProps.onMouseEnter = this.createTwoChains('onMouseEnter');
721 } // >>> Hover(leave)
722
723
724 if (this.isMouseLeaveToHide()) {
725 newChildProps.onMouseLeave = this.onMouseLeave;
726 } else {
727 newChildProps.onMouseLeave = this.createTwoChains('onMouseLeave');
728 } // >>> Focus
729
730
731 if (this.isFocusToShow() || this.isBlurToHide()) {
732 newChildProps.onFocus = this.onFocus;
733 newChildProps.onBlur = this.onBlur;
734 } else {
735 newChildProps.onFocus = this.createTwoChains('onFocus');
736 newChildProps.onBlur = this.createTwoChains('onBlur');
737 } // =================================== Render ===================================
738
739
740 var childrenClassName = classNames(child && child.props && child.props.className, className);
741
742 if (childrenClassName) {
743 newChildProps.className = childrenClassName;
744 }
745
746 var cloneProps = _objectSpread({}, newChildProps);
747
748 if (supportRef(child)) {
749 cloneProps.ref = composeRef(this.triggerRef, child.ref);
750 }
751
752 var trigger = /*#__PURE__*/React.cloneElement(child, cloneProps);
753 var portal; // prevent unmounting after it's rendered
754
755 if (popupVisible || this.popupRef.current || forceRender) {
756 portal = /*#__PURE__*/React.createElement(PortalComponent, {
757 key: "portal",
758 getContainer: this.getContainer,
759 didUpdate: this.handlePortalUpdate
760 }, this.getComponent());
761 }
762
763 if (!popupVisible && autoDestroy) {
764 portal = null;
765 }
766
767 return /*#__PURE__*/React.createElement(TriggerContext.Provider, {
768 value: this.triggerContextValue
769 }, trigger, portal);
770 }
771 }], [{
772 key: "getDerivedStateFromProps",
773 value: function getDerivedStateFromProps(_ref, prevState) {
774 var popupVisible = _ref.popupVisible;
775 var newState = {};
776
777 if (popupVisible !== undefined && prevState.popupVisible !== popupVisible) {
778 newState.popupVisible = popupVisible;
779 newState.prevPopupVisible = prevState.popupVisible;
780 }
781
782 return newState;
783 }
784 }]);
785
786 return Trigger;
787 }(React.Component);
788
789 Trigger.contextType = TriggerContext;
790 Trigger.defaultProps = {
791 prefixCls: 'rc-trigger-popup',
792 getPopupClassNameFromAlign: returnEmptyString,
793 getDocument: returnDocument,
794 onPopupVisibleChange: noop,
795 afterPopupVisibleChange: noop,
796 onPopupAlign: noop,
797 popupClassName: '',
798 mouseEnterDelay: 0,
799 mouseLeaveDelay: 0.1,
800 focusDelay: 0,
801 blurDelay: 0.15,
802 popupStyle: {},
803 destroyPopupOnHide: false,
804 popupAlign: {},
805 defaultPopupVisible: false,
806 mask: false,
807 maskClosable: true,
808 action: [],
809 showAction: [],
810 hideAction: [],
811 autoDestroy: false
812 };
813 return Trigger;
814}
815export default generateTrigger(Portal);
\No newline at end of file