UNPKG

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