1 | import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
2 | import _extends from "@babel/runtime/helpers/esm/extends";
|
3 | import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
4 | import _createClass from "@babel/runtime/helpers/esm/createClass";
|
5 | import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
|
6 | import _inherits from "@babel/runtime/helpers/esm/inherits";
|
7 | import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
8 | import * as React from 'react';
|
9 | import ReactDOM from 'react-dom';
|
10 | import raf from "rc-util/es/raf";
|
11 | import contains from "rc-util/es/Dom/contains";
|
12 | import findDOMNode from "rc-util/es/Dom/findDOMNode";
|
13 | import { composeRef, supportRef } from "rc-util/es/ref";
|
14 | import addEventListener from "rc-util/es/Dom/addEventListener";
|
15 | import Portal from "rc-util/es/Portal";
|
16 | import classNames from 'classnames';
|
17 | import { getAlignFromPlacement, getAlignPopupClassName } from './utils/alignUtil';
|
18 | import Popup from './Popup';
|
19 | import TriggerContext from './context';
|
20 |
|
21 | function noop() {}
|
22 |
|
23 | function returnEmptyString() {
|
24 | return '';
|
25 | }
|
26 |
|
27 | function returnDocument(element) {
|
28 | if (element) {
|
29 | return element.ownerDocument;
|
30 | }
|
31 |
|
32 | return window.document;
|
33 | }
|
34 |
|
35 | var ALL_HANDLERS = ['onClick', 'onMouseDown', 'onTouchStart', 'onMouseEnter', 'onMouseLeave', 'onFocus', 'onBlur', 'onContextMenu'];
|
36 |
|
37 |
|
38 |
|
39 |
|
40 | export function generateTrigger(PortalComponent) {
|
41 | var Trigger = function (_React$Component) {
|
42 | _inherits(Trigger, _React$Component);
|
43 |
|
44 | var _super = _createSuper(Trigger);
|
45 |
|
46 |
|
47 | function Trigger(props) {
|
48 | var _this;
|
49 |
|
50 | _classCallCheck(this, Trigger);
|
51 |
|
52 | _this = _super.call(this, props);
|
53 | _this.popupRef = React.createRef();
|
54 | _this.triggerRef = 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 |
|
96 |
|
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);
|
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);
|
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;
|
177 |
|
178 |
|
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 (
|
217 |
|
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) {
|
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 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 |
|
341 |
|
342 |
|
343 | mountNode = getPopupContainer(domNode);
|
344 | }
|
345 |
|
346 | if (mountNode) {
|
347 | mountNode.appendChild(popupContainer);
|
348 | } else {
|
349 |
|
350 | _this.attachId = raf(function () {
|
351 | _this.attachParent(popupContainer);
|
352 | });
|
353 | }
|
354 | };
|
355 |
|
356 | _this.getContainer = function () {
|
357 | if (!_this.portalContainer) {
|
358 |
|
359 |
|
360 |
|
361 |
|
362 |
|
363 | var getDocument = _this.props.getDocument;
|
364 | var popupContainer = getDocument(_this.getRootDomNode()).createElement('div');
|
365 |
|
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;
|
431 |
|
432 |
|
433 |
|
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 | }
|
442 |
|
443 |
|
444 | if (!this.touchOutsideHandler) {
|
445 | currentDocument = currentDocument || props.getDocument(this.getRootDomNode());
|
446 | this.touchOutsideHandler = addEventListener(currentDocument, 'touchstart', this.onDocumentClick);
|
447 | }
|
448 |
|
449 |
|
450 | if (!this.contextMenuOutsideHandler1 && this.isContextMenuToShow()) {
|
451 | currentDocument = currentDocument || props.getDocument(this.getRootDomNode());
|
452 | this.contextMenuOutsideHandler1 = addEventListener(currentDocument, 'scroll', this.onContextMenuClose);
|
453 | }
|
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 |
|
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 |
|
500 |
|
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 | }
|
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 | };
|
693 |
|
694 |
|
695 | if (this.isContextMenuToShow()) {
|
696 | newChildProps.onContextMenu = this.onContextMenu;
|
697 | } else {
|
698 | newChildProps.onContextMenu = this.createTwoChains('onContextMenu');
|
699 | }
|
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 | }
|
711 |
|
712 |
|
713 | if (this.isMouseEnterToShow()) {
|
714 | newChildProps.onMouseEnter = this.onMouseEnter;
|
715 |
|
716 | if (alignPoint) {
|
717 | newChildProps.onMouseMove = this.onMouseMove;
|
718 | }
|
719 | } else {
|
720 | newChildProps.onMouseEnter = this.createTwoChains('onMouseEnter');
|
721 | }
|
722 |
|
723 |
|
724 | if (this.isMouseLeaveToHide()) {
|
725 | newChildProps.onMouseLeave = this.onMouseLeave;
|
726 | } else {
|
727 | newChildProps.onMouseLeave = this.createTwoChains('onMouseLeave');
|
728 | }
|
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 | }
|
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 = React.cloneElement(child, cloneProps);
|
753 | var portal;
|
754 |
|
755 | if (popupVisible || this.popupRef.current || forceRender) {
|
756 | portal = 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 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 | }
|
815 | export default generateTrigger(Portal); |
\ | No newline at end of file |