rc-trigger
Version:
base abstract trigger component for react
830 lines (688 loc) • 31.2 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
exports.generateTrigger = generateTrigger;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var React = _interopRequireWildcard(require("react"));
var _reactDom = _interopRequireDefault(require("react-dom"));
var _raf = _interopRequireDefault(require("rc-util/lib/raf"));
var _contains = _interopRequireDefault(require("rc-util/lib/Dom/contains"));
var _findDOMNode = _interopRequireDefault(require("rc-util/lib/Dom/findDOMNode"));
var _ref2 = require("rc-util/lib/ref");
var _addEventListener = _interopRequireDefault(require("rc-util/lib/Dom/addEventListener"));
var _Portal = _interopRequireDefault(require("rc-util/lib/Portal"));
var _classnames = _interopRequireDefault(require("classnames"));
var _alignUtil = require("./utils/alignUtil");
var _Popup = _interopRequireDefault(require("./Popup"));
var _context = _interopRequireDefault(require("./context"));
function noop() {}
function returnEmptyString() {
return '';
}
function returnDocument(element) {
if (element) {
return element.ownerDocument;
}
return window.document;
}
var ALL_HANDLERS = ['onClick', 'onMouseDown', 'onTouchStart', 'onMouseEnter', 'onMouseLeave', 'onFocus', 'onBlur', 'onContextMenu'];
/**
* Internal usage. Do not use in your code since this will be removed.
*/
function generateTrigger(PortalComponent) {
var Trigger = /*#__PURE__*/function (_React$Component) {
(0, _inherits2.default)(Trigger, _React$Component);
var _super = (0, _createSuper2.default)(Trigger);
// ensure `getContainer` will be called only once
function Trigger(props) {
var _this;
(0, _classCallCheck2.default)(this, Trigger);
_this = _super.call(this, props);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "popupRef", /*#__PURE__*/React.createRef());
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "triggerRef", /*#__PURE__*/React.createRef());
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "portalContainer", void 0);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "attachId", void 0);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "clickOutsideHandler", void 0);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "touchOutsideHandler", void 0);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "contextMenuOutsideHandler1", void 0);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "contextMenuOutsideHandler2", void 0);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "mouseDownTimeout", void 0);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "focusTime", void 0);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "preClickTime", void 0);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "preTouchTime", void 0);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "delayTimer", void 0);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "hasPopupMouseDown", void 0);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseEnter", function (e) {
var mouseEnterDelay = _this.props.mouseEnterDelay;
_this.fireEvents('onMouseEnter', e);
_this.delaySetPopupVisible(true, mouseEnterDelay, mouseEnterDelay ? null : e);
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseMove", function (e) {
_this.fireEvents('onMouseMove', e);
_this.setPoint(e);
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseLeave", function (e) {
_this.fireEvents('onMouseLeave', e);
_this.delaySetPopupVisible(false, _this.props.mouseLeaveDelay);
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onPopupMouseEnter", function () {
_this.clearDelayTimer();
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onPopupMouseLeave", function (e) {
var _this$popupRef$curren;
// https://github.com/react-component/trigger/pull/13
// react bug?
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)) {
return;
}
_this.delaySetPopupVisible(false, _this.props.mouseLeaveDelay);
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onFocus", function (e) {
_this.fireEvents('onFocus', e); // incase focusin and focusout
_this.clearDelayTimer();
if (_this.isFocusToShow()) {
_this.focusTime = Date.now();
_this.delaySetPopupVisible(true, _this.props.focusDelay);
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseDown", function (e) {
_this.fireEvents('onMouseDown', e);
_this.preClickTime = Date.now();
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onTouchStart", function (e) {
_this.fireEvents('onTouchStart', e);
_this.preTouchTime = Date.now();
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onBlur", function (e) {
_this.fireEvents('onBlur', e);
_this.clearDelayTimer();
if (_this.isBlurToHide()) {
_this.delaySetPopupVisible(false, _this.props.blurDelay);
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onContextMenu", function (e) {
e.preventDefault();
_this.fireEvents('onContextMenu', e);
_this.setPopupVisible(true, e);
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onContextMenuClose", function () {
if (_this.isContextMenuToShow()) {
_this.close();
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onClick", function (event) {
_this.fireEvents('onClick', event); // focus will trigger click
if (_this.focusTime) {
var preTime;
if (_this.preClickTime && _this.preTouchTime) {
preTime = Math.min(_this.preClickTime, _this.preTouchTime);
} else if (_this.preClickTime) {
preTime = _this.preClickTime;
} else if (_this.preTouchTime) {
preTime = _this.preTouchTime;
}
if (Math.abs(preTime - _this.focusTime) < 20) {
return;
}
_this.focusTime = 0;
}
_this.preClickTime = 0;
_this.preTouchTime = 0; // Only prevent default when all the action is click.
// https://github.com/ant-design/ant-design/issues/17043
// https://github.com/ant-design/ant-design/issues/17291
if (_this.isClickToShow() && (_this.isClickToHide() || _this.isBlurToHide()) && event && event.preventDefault) {
event.preventDefault();
}
var nextVisible = !_this.state.popupVisible;
if (_this.isClickToHide() && !nextVisible || nextVisible && _this.isClickToShow()) {
_this.setPopupVisible(!_this.state.popupVisible, event);
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onPopupMouseDown", function () {
_this.hasPopupMouseDown = true;
clearTimeout(_this.mouseDownTimeout);
_this.mouseDownTimeout = window.setTimeout(function () {
_this.hasPopupMouseDown = false;
}, 0);
if (_this.context) {
var _this$context;
(_this$context = _this.context).onPopupMouseDown.apply(_this$context, arguments);
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onDocumentClick", function (event) {
if (_this.props.mask && !_this.props.maskClosable) {
return;
}
var target = event.target;
var root = _this.getRootDomNode();
var popupNode = _this.getPopupDomNode();
if ( // mousedown on the target should also close popup when action is contextMenu.
// https://github.com/ant-design/ant-design/issues/29853
(!(0, _contains.default)(root, target) || _this.isContextMenuOnly()) && !(0, _contains.default)(popupNode, target) && !_this.hasPopupMouseDown) {
_this.close();
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getRootDomNode", function () {
var getTriggerDOMNode = _this.props.getTriggerDOMNode;
if (getTriggerDOMNode) {
return getTriggerDOMNode(_this.triggerRef.current);
}
try {
var domNode = (0, _findDOMNode.default)(_this.triggerRef.current);
if (domNode) {
return domNode;
}
} catch (err) {// Do nothing
}
return _reactDom.default.findDOMNode((0, _assertThisInitialized2.default)(_this));
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getPopupClassNameFromAlign", function (align) {
var className = [];
var _this$props = _this.props,
popupPlacement = _this$props.popupPlacement,
builtinPlacements = _this$props.builtinPlacements,
prefixCls = _this$props.prefixCls,
alignPoint = _this$props.alignPoint,
getPopupClassNameFromAlign = _this$props.getPopupClassNameFromAlign;
if (popupPlacement && builtinPlacements) {
className.push((0, _alignUtil.getAlignPopupClassName)(builtinPlacements, prefixCls, align, alignPoint));
}
if (getPopupClassNameFromAlign) {
className.push(getPopupClassNameFromAlign(align));
}
return className.join(' ');
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getComponent", function () {
var _this$props2 = _this.props,
prefixCls = _this$props2.prefixCls,
destroyPopupOnHide = _this$props2.destroyPopupOnHide,
popupClassName = _this$props2.popupClassName,
onPopupAlign = _this$props2.onPopupAlign,
popupMotion = _this$props2.popupMotion,
popupAnimation = _this$props2.popupAnimation,
popupTransitionName = _this$props2.popupTransitionName,
popupStyle = _this$props2.popupStyle,
mask = _this$props2.mask,
maskAnimation = _this$props2.maskAnimation,
maskTransitionName = _this$props2.maskTransitionName,
maskMotion = _this$props2.maskMotion,
zIndex = _this$props2.zIndex,
popup = _this$props2.popup,
stretch = _this$props2.stretch,
alignPoint = _this$props2.alignPoint,
mobile = _this$props2.mobile,
forceRender = _this$props2.forceRender,
onPopupClick = _this$props2.onPopupClick;
var _this$state = _this.state,
popupVisible = _this$state.popupVisible,
point = _this$state.point;
var align = _this.getPopupAlign();
var mouseProps = {};
if (_this.isMouseEnterToShow()) {
mouseProps.onMouseEnter = _this.onPopupMouseEnter;
}
if (_this.isMouseLeaveToHide()) {
mouseProps.onMouseLeave = _this.onPopupMouseLeave;
}
mouseProps.onMouseDown = _this.onPopupMouseDown;
mouseProps.onTouchStart = _this.onPopupMouseDown;
return /*#__PURE__*/React.createElement(_Popup.default, (0, _extends2.default)({
prefixCls: prefixCls,
destroyPopupOnHide: destroyPopupOnHide,
visible: popupVisible,
point: alignPoint && point,
className: popupClassName,
align: align,
onAlign: onPopupAlign,
animation: popupAnimation,
getClassNameFromAlign: _this.getPopupClassNameFromAlign
}, mouseProps, {
stretch: stretch,
getRootDomNode: _this.getRootDomNode,
style: popupStyle,
mask: mask,
zIndex: zIndex,
transitionName: popupTransitionName,
maskAnimation: maskAnimation,
maskTransitionName: maskTransitionName,
maskMotion: maskMotion,
ref: _this.popupRef,
motion: popupMotion,
mobile: mobile,
forceRender: forceRender,
onClick: onPopupClick
}), typeof popup === 'function' ? popup() : popup);
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "attachParent", function (popupContainer) {
_raf.default.cancel(_this.attachId);
var _this$props3 = _this.props,
getPopupContainer = _this$props3.getPopupContainer,
getDocument = _this$props3.getDocument;
var domNode = _this.getRootDomNode();
var mountNode;
if (!getPopupContainer) {
mountNode = getDocument(_this.getRootDomNode()).body;
} else if (domNode || getPopupContainer.length === 0) {
// Compatible for legacy getPopupContainer with domNode argument.
// If no need `domNode` argument, will call directly.
// https://codesandbox.io/s/eloquent-mclean-ss93m?file=/src/App.js
mountNode = getPopupContainer(domNode);
}
if (mountNode) {
mountNode.appendChild(popupContainer);
} else {
// Retry after frame render in case parent not ready
_this.attachId = (0, _raf.default)(function () {
_this.attachParent(popupContainer);
});
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getContainer", function () {
if (!_this.portalContainer) {
// In React.StrictMode component will call render multiple time in first mount.
// When you want to refactor with FC, useRef will also init multiple time and
// point to different useRef instance which will create multiple element
// (This multiple render will not trigger effect so you can not clean up this
// in effect). But this is safe with class component since it always point to same class instance.
var getDocument = _this.props.getDocument;
var popupContainer = getDocument(_this.getRootDomNode()).createElement('div'); // Make sure default popup container will never cause scrollbar appearing
// https://github.com/react-component/trigger/issues/41
popupContainer.style.position = 'absolute';
popupContainer.style.top = '0';
popupContainer.style.left = '0';
popupContainer.style.width = '100%';
_this.portalContainer = popupContainer;
}
_this.attachParent(_this.portalContainer);
return _this.portalContainer;
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setPoint", function (point) {
var alignPoint = _this.props.alignPoint;
if (!alignPoint || !point) return;
_this.setState({
point: {
pageX: point.pageX,
pageY: point.pageY
}
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handlePortalUpdate", function () {
if (_this.state.prevPopupVisible !== _this.state.popupVisible) {
_this.props.afterPopupVisibleChange(_this.state.popupVisible);
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "triggerContextValue", {
onPopupMouseDown: _this.onPopupMouseDown
});
var _popupVisible;
if ('popupVisible' in props) {
_popupVisible = !!props.popupVisible;
} else {
_popupVisible = !!props.defaultPopupVisible;
}
_this.state = {
prevPopupVisible: _popupVisible,
popupVisible: _popupVisible
};
ALL_HANDLERS.forEach(function (h) {
_this["fire".concat(h)] = function (e) {
_this.fireEvents(h, e);
};
});
return _this;
}
(0, _createClass2.default)(Trigger, [{
key: "componentDidMount",
value: function componentDidMount() {
this.componentDidUpdate();
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate() {
var props = this.props;
var state = this.state; // We must listen to `mousedown` or `touchstart`, edge case:
// https://github.com/ant-design/ant-design/issues/5804
// https://github.com/react-component/calendar/issues/250
// https://github.com/react-component/trigger/issues/50
if (state.popupVisible) {
var currentDocument;
if (!this.clickOutsideHandler && (this.isClickToHide() || this.isContextMenuToShow())) {
currentDocument = props.getDocument(this.getRootDomNode());
this.clickOutsideHandler = (0, _addEventListener.default)(currentDocument, 'mousedown', this.onDocumentClick);
} // always hide on mobile
if (!this.touchOutsideHandler) {
currentDocument = currentDocument || props.getDocument(this.getRootDomNode());
this.touchOutsideHandler = (0, _addEventListener.default)(currentDocument, 'touchstart', this.onDocumentClick);
} // close popup when trigger type contains 'onContextMenu' and document is scrolling.
if (!this.contextMenuOutsideHandler1 && this.isContextMenuToShow()) {
currentDocument = currentDocument || props.getDocument(this.getRootDomNode());
this.contextMenuOutsideHandler1 = (0, _addEventListener.default)(currentDocument, 'scroll', this.onContextMenuClose);
} // close popup when trigger type contains 'onContextMenu' and window is blur.
if (!this.contextMenuOutsideHandler2 && this.isContextMenuToShow()) {
this.contextMenuOutsideHandler2 = (0, _addEventListener.default)(window, 'blur', this.onContextMenuClose);
}
return;
}
this.clearOutsideHandler();
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.clearDelayTimer();
this.clearOutsideHandler();
clearTimeout(this.mouseDownTimeout);
_raf.default.cancel(this.attachId);
}
}, {
key: "getPopupDomNode",
value: function getPopupDomNode() {
var _this$popupRef$curren2;
// for test
return ((_this$popupRef$curren2 = this.popupRef.current) === null || _this$popupRef$curren2 === void 0 ? void 0 : _this$popupRef$curren2.getElement()) || null;
}
}, {
key: "getPopupAlign",
value: function getPopupAlign() {
var props = this.props;
var popupPlacement = props.popupPlacement,
popupAlign = props.popupAlign,
builtinPlacements = props.builtinPlacements;
if (popupPlacement && builtinPlacements) {
return (0, _alignUtil.getAlignFromPlacement)(builtinPlacements, popupPlacement, popupAlign);
}
return popupAlign;
}
}, {
key: "setPopupVisible",
value:
/**
* @param popupVisible Show or not the popup element
* @param event SyntheticEvent, used for `pointAlign`
*/
function setPopupVisible(popupVisible, event) {
var alignPoint = this.props.alignPoint;
var prevPopupVisible = this.state.popupVisible;
this.clearDelayTimer();
if (prevPopupVisible !== popupVisible) {
if (!('popupVisible' in this.props)) {
this.setState({
popupVisible: popupVisible,
prevPopupVisible: prevPopupVisible
});
}
this.props.onPopupVisibleChange(popupVisible);
} // Always record the point position since mouseEnterDelay will delay the show
if (alignPoint && event && popupVisible) {
this.setPoint(event);
}
}
}, {
key: "delaySetPopupVisible",
value: function delaySetPopupVisible(visible, delayS, event) {
var _this2 = this;
var delay = delayS * 1000;
this.clearDelayTimer();
if (delay) {
var point = event ? {
pageX: event.pageX,
pageY: event.pageY
} : null;
this.delayTimer = window.setTimeout(function () {
_this2.setPopupVisible(visible, point);
_this2.clearDelayTimer();
}, delay);
} else {
this.setPopupVisible(visible, event);
}
}
}, {
key: "clearDelayTimer",
value: function clearDelayTimer() {
if (this.delayTimer) {
clearTimeout(this.delayTimer);
this.delayTimer = null;
}
}
}, {
key: "clearOutsideHandler",
value: function clearOutsideHandler() {
if (this.clickOutsideHandler) {
this.clickOutsideHandler.remove();
this.clickOutsideHandler = null;
}
if (this.contextMenuOutsideHandler1) {
this.contextMenuOutsideHandler1.remove();
this.contextMenuOutsideHandler1 = null;
}
if (this.contextMenuOutsideHandler2) {
this.contextMenuOutsideHandler2.remove();
this.contextMenuOutsideHandler2 = null;
}
if (this.touchOutsideHandler) {
this.touchOutsideHandler.remove();
this.touchOutsideHandler = null;
}
}
}, {
key: "createTwoChains",
value: function createTwoChains(event) {
var childPros = this.props.children.props;
var props = this.props;
if (childPros[event] && props[event]) {
return this["fire".concat(event)];
}
return childPros[event] || props[event];
}
}, {
key: "isClickToShow",
value: function isClickToShow() {
var _this$props4 = this.props,
action = _this$props4.action,
showAction = _this$props4.showAction;
return action.indexOf('click') !== -1 || showAction.indexOf('click') !== -1;
}
}, {
key: "isContextMenuOnly",
value: function isContextMenuOnly() {
var action = this.props.action;
return action === 'contextMenu' || action.length === 1 && action[0] === 'contextMenu';
}
}, {
key: "isContextMenuToShow",
value: function isContextMenuToShow() {
var _this$props5 = this.props,
action = _this$props5.action,
showAction = _this$props5.showAction;
return action.indexOf('contextMenu') !== -1 || showAction.indexOf('contextMenu') !== -1;
}
}, {
key: "isClickToHide",
value: function isClickToHide() {
var _this$props6 = this.props,
action = _this$props6.action,
hideAction = _this$props6.hideAction;
return action.indexOf('click') !== -1 || hideAction.indexOf('click') !== -1;
}
}, {
key: "isMouseEnterToShow",
value: function isMouseEnterToShow() {
var _this$props7 = this.props,
action = _this$props7.action,
showAction = _this$props7.showAction;
return action.indexOf('hover') !== -1 || showAction.indexOf('mouseEnter') !== -1;
}
}, {
key: "isMouseLeaveToHide",
value: function isMouseLeaveToHide() {
var _this$props8 = this.props,
action = _this$props8.action,
hideAction = _this$props8.hideAction;
return action.indexOf('hover') !== -1 || hideAction.indexOf('mouseLeave') !== -1;
}
}, {
key: "isFocusToShow",
value: function isFocusToShow() {
var _this$props9 = this.props,
action = _this$props9.action,
showAction = _this$props9.showAction;
return action.indexOf('focus') !== -1 || showAction.indexOf('focus') !== -1;
}
}, {
key: "isBlurToHide",
value: function isBlurToHide() {
var _this$props10 = this.props,
action = _this$props10.action,
hideAction = _this$props10.hideAction;
return action.indexOf('focus') !== -1 || hideAction.indexOf('blur') !== -1;
}
}, {
key: "forcePopupAlign",
value: function forcePopupAlign() {
if (this.state.popupVisible) {
var _this$popupRef$curren3;
(_this$popupRef$curren3 = this.popupRef.current) === null || _this$popupRef$curren3 === void 0 ? void 0 : _this$popupRef$curren3.forceAlign();
}
}
}, {
key: "fireEvents",
value: function fireEvents(type, e) {
var childCallback = this.props.children.props[type];
if (childCallback) {
childCallback(e);
}
var callback = this.props[type];
if (callback) {
callback(e);
}
}
}, {
key: "close",
value: function close() {
this.setPopupVisible(false);
}
}, {
key: "render",
value: function render() {
var popupVisible = this.state.popupVisible;
var _this$props11 = this.props,
children = _this$props11.children,
forceRender = _this$props11.forceRender,
alignPoint = _this$props11.alignPoint,
className = _this$props11.className,
autoDestroy = _this$props11.autoDestroy;
var child = React.Children.only(children);
var newChildProps = {
key: 'trigger'
}; // ============================== Visible Handlers ==============================
// >>> ContextMenu
if (this.isContextMenuToShow()) {
newChildProps.onContextMenu = this.onContextMenu;
} else {
newChildProps.onContextMenu = this.createTwoChains('onContextMenu');
} // >>> Click
if (this.isClickToHide() || this.isClickToShow()) {
newChildProps.onClick = this.onClick;
newChildProps.onMouseDown = this.onMouseDown;
newChildProps.onTouchStart = this.onTouchStart;
} else {
newChildProps.onClick = this.createTwoChains('onClick');
newChildProps.onMouseDown = this.createTwoChains('onMouseDown');
newChildProps.onTouchStart = this.createTwoChains('onTouchStart');
} // >>> Hover(enter)
if (this.isMouseEnterToShow()) {
newChildProps.onMouseEnter = this.onMouseEnter; // Point align
if (alignPoint) {
newChildProps.onMouseMove = this.onMouseMove;
}
} else {
newChildProps.onMouseEnter = this.createTwoChains('onMouseEnter');
} // >>> Hover(leave)
if (this.isMouseLeaveToHide()) {
newChildProps.onMouseLeave = this.onMouseLeave;
} else {
newChildProps.onMouseLeave = this.createTwoChains('onMouseLeave');
} // >>> Focus
if (this.isFocusToShow() || this.isBlurToHide()) {
newChildProps.onFocus = this.onFocus;
newChildProps.onBlur = this.onBlur;
} else {
newChildProps.onFocus = this.createTwoChains('onFocus');
newChildProps.onBlur = this.createTwoChains('onBlur');
} // =================================== Render ===================================
var childrenClassName = (0, _classnames.default)(child && child.props && child.props.className, className);
if (childrenClassName) {
newChildProps.className = childrenClassName;
}
var cloneProps = (0, _objectSpread2.default)({}, newChildProps);
if ((0, _ref2.supportRef)(child)) {
cloneProps.ref = (0, _ref2.composeRef)(this.triggerRef, child.ref);
}
var trigger = /*#__PURE__*/React.cloneElement(child, cloneProps);
var portal; // prevent unmounting after it's rendered
if (popupVisible || this.popupRef.current || forceRender) {
portal = /*#__PURE__*/React.createElement(PortalComponent, {
key: "portal",
getContainer: this.getContainer,
didUpdate: this.handlePortalUpdate
}, this.getComponent());
}
if (!popupVisible && autoDestroy) {
portal = null;
}
return /*#__PURE__*/React.createElement(_context.default.Provider, {
value: this.triggerContextValue
}, trigger, portal);
}
}], [{
key: "getDerivedStateFromProps",
value: function getDerivedStateFromProps(_ref, prevState) {
var popupVisible = _ref.popupVisible;
var newState = {};
if (popupVisible !== undefined && prevState.popupVisible !== popupVisible) {
newState.popupVisible = popupVisible;
newState.prevPopupVisible = prevState.popupVisible;
}
return newState;
}
}]);
return Trigger;
}(React.Component);
(0, _defineProperty2.default)(Trigger, "contextType", _context.default);
(0, _defineProperty2.default)(Trigger, "defaultProps", {
prefixCls: 'rc-trigger-popup',
getPopupClassNameFromAlign: returnEmptyString,
getDocument: returnDocument,
onPopupVisibleChange: noop,
afterPopupVisibleChange: noop,
onPopupAlign: noop,
popupClassName: '',
mouseEnterDelay: 0,
mouseLeaveDelay: 0.1,
focusDelay: 0,
blurDelay: 0.15,
popupStyle: {},
destroyPopupOnHide: false,
popupAlign: {},
defaultPopupVisible: false,
mask: false,
maskClosable: true,
action: [],
showAction: [],
hideAction: [],
autoDestroy: false
});
return Trigger;
}
var _default = generateTrigger(_Portal.default);
exports.default = _default;