You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
767 lines
24 KiB
767 lines
24 KiB
"use strict";
|
|
|
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.generateTrigger = generateTrigger;
|
|
exports.default = void 0;
|
|
|
|
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
|
|
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 _react = _interopRequireDefault(require("react"));
|
|
|
|
var _reactDom = _interopRequireDefault(require("react-dom"));
|
|
|
|
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() {
|
|
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);
|
|
|
|
function Trigger(props) {
|
|
var _this;
|
|
|
|
(0, _classCallCheck2.default)(this, Trigger);
|
|
_this = _super.call(this, props);
|
|
_this.popupRef = _react.default.createRef();
|
|
_this.triggerRef = _react.default.createRef();
|
|
|
|
_this.onMouseEnter = function (e) {
|
|
var mouseEnterDelay = _this.props.mouseEnterDelay;
|
|
|
|
_this.fireEvents('onMouseEnter', e);
|
|
|
|
_this.delaySetPopupVisible(true, mouseEnterDelay, mouseEnterDelay ? null : e);
|
|
};
|
|
|
|
_this.onMouseMove = function (e) {
|
|
_this.fireEvents('onMouseMove', e);
|
|
|
|
_this.setPoint(e);
|
|
};
|
|
|
|
_this.onMouseLeave = function (e) {
|
|
_this.fireEvents('onMouseLeave', e);
|
|
|
|
_this.delaySetPopupVisible(false, _this.props.mouseLeaveDelay);
|
|
};
|
|
|
|
_this.onPopupMouseEnter = function () {
|
|
_this.clearDelayTimer();
|
|
};
|
|
|
|
_this.onPopupMouseLeave = function (e) {
|
|
// https://github.com/react-component/trigger/pull/13
|
|
// react bug?
|
|
if (e.relatedTarget && !e.relatedTarget.setTimeout && _this.popupRef.current && _this.popupRef.current.popupRef.current && (0, _contains.default)(_this.popupRef.current.popupRef.current, e.relatedTarget)) {
|
|
return;
|
|
}
|
|
|
|
_this.delaySetPopupVisible(false, _this.props.mouseLeaveDelay);
|
|
};
|
|
|
|
_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);
|
|
}
|
|
};
|
|
|
|
_this.onMouseDown = function (e) {
|
|
_this.fireEvents('onMouseDown', e);
|
|
|
|
_this.preClickTime = Date.now();
|
|
};
|
|
|
|
_this.onTouchStart = function (e) {
|
|
_this.fireEvents('onTouchStart', e);
|
|
|
|
_this.preTouchTime = Date.now();
|
|
};
|
|
|
|
_this.onBlur = function (e) {
|
|
_this.fireEvents('onBlur', e);
|
|
|
|
_this.clearDelayTimer();
|
|
|
|
if (_this.isBlurToHide()) {
|
|
_this.delaySetPopupVisible(false, _this.props.blurDelay);
|
|
}
|
|
};
|
|
|
|
_this.onContextMenu = function (e) {
|
|
e.preventDefault();
|
|
|
|
_this.fireEvents('onContextMenu', e);
|
|
|
|
_this.setPopupVisible(true, e);
|
|
};
|
|
|
|
_this.onContextMenuClose = function () {
|
|
if (_this.isContextMenuToShow()) {
|
|
_this.close();
|
|
}
|
|
};
|
|
|
|
_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);
|
|
}
|
|
};
|
|
|
|
_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);
|
|
}
|
|
};
|
|
|
|
_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 (!(0, _contains.default)(root, target) && !(0, _contains.default)(popupNode, target) && !_this.hasPopupMouseDown) {
|
|
_this.close();
|
|
}
|
|
};
|
|
|
|
_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));
|
|
};
|
|
|
|
_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(' ');
|
|
};
|
|
|
|
_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;
|
|
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 _react.default.createElement(_Popup.default, Object.assign({
|
|
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
|
|
}), typeof popup === 'function' ? popup() : popup);
|
|
};
|
|
|
|
_this.getContainer = function () {
|
|
var _assertThisInitialize = (0, _assertThisInitialized2.default)(_this),
|
|
props = _assertThisInitialize.props;
|
|
|
|
var popupContainer = document.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%';
|
|
var mountNode = props.getPopupContainer ? props.getPopupContainer(_this.getRootDomNode()) : props.getDocument().body;
|
|
mountNode.appendChild(popupContainer);
|
|
return popupContainer;
|
|
};
|
|
|
|
_this.setPoint = function (point) {
|
|
var alignPoint = _this.props.alignPoint;
|
|
if (!alignPoint || !point) return;
|
|
|
|
_this.setState({
|
|
point: {
|
|
pageX: point.pageX,
|
|
pageY: point.pageY
|
|
}
|
|
});
|
|
};
|
|
|
|
_this.handlePortalUpdate = function () {
|
|
if (_this.state.prevPopupVisible !== _this.state.popupVisible) {
|
|
_this.props.afterPopupVisibleChange(_this.state.popupVisible);
|
|
}
|
|
};
|
|
|
|
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.clickOutsideHandler = (0, _addEventListener.default)(currentDocument, 'mousedown', this.onDocumentClick);
|
|
} // always hide on mobile
|
|
|
|
|
|
if (!this.touchOutsideHandler) {
|
|
currentDocument = currentDocument || props.getDocument();
|
|
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.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);
|
|
}
|
|
}, {
|
|
key: "getPopupDomNode",
|
|
value: function getPopupDomNode() {
|
|
// for test
|
|
if (this.popupRef.current && this.popupRef.current.popupRef.current) {
|
|
return this.popupRef.current.popupRef.current;
|
|
}
|
|
|
|
return 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;
|
|
}
|
|
/**
|
|
* @param popupVisible Show or not the popup element
|
|
* @param event SyntheticEvent, used for `pointAlign`
|
|
*/
|
|
|
|
}, {
|
|
key: "setPopupVisible",
|
|
value: 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) {
|
|
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$props3 = this.props,
|
|
action = _this$props3.action,
|
|
showAction = _this$props3.showAction;
|
|
return action.indexOf('click') !== -1 || showAction.indexOf('click') !== -1;
|
|
}
|
|
}, {
|
|
key: "isContextMenuToShow",
|
|
value: function isContextMenuToShow() {
|
|
var _this$props4 = this.props,
|
|
action = _this$props4.action,
|
|
showAction = _this$props4.showAction;
|
|
return action.indexOf('contextMenu') !== -1 || showAction.indexOf('contextMenu') !== -1;
|
|
}
|
|
}, {
|
|
key: "isClickToHide",
|
|
value: function isClickToHide() {
|
|
var _this$props5 = this.props,
|
|
action = _this$props5.action,
|
|
hideAction = _this$props5.hideAction;
|
|
return action.indexOf('click') !== -1 || hideAction.indexOf('click') !== -1;
|
|
}
|
|
}, {
|
|
key: "isMouseEnterToShow",
|
|
value: function isMouseEnterToShow() {
|
|
var _this$props6 = this.props,
|
|
action = _this$props6.action,
|
|
showAction = _this$props6.showAction;
|
|
return action.indexOf('hover') !== -1 || showAction.indexOf('mouseEnter') !== -1;
|
|
}
|
|
}, {
|
|
key: "isMouseLeaveToHide",
|
|
value: function isMouseLeaveToHide() {
|
|
var _this$props7 = this.props,
|
|
action = _this$props7.action,
|
|
hideAction = _this$props7.hideAction;
|
|
return action.indexOf('hover') !== -1 || hideAction.indexOf('mouseLeave') !== -1;
|
|
}
|
|
}, {
|
|
key: "isFocusToShow",
|
|
value: function isFocusToShow() {
|
|
var _this$props8 = this.props,
|
|
action = _this$props8.action,
|
|
showAction = _this$props8.showAction;
|
|
return action.indexOf('focus') !== -1 || showAction.indexOf('focus') !== -1;
|
|
}
|
|
}, {
|
|
key: "isBlurToHide",
|
|
value: function isBlurToHide() {
|
|
var _this$props9 = this.props,
|
|
action = _this$props9.action,
|
|
hideAction = _this$props9.hideAction;
|
|
return action.indexOf('focus') !== -1 || hideAction.indexOf('blur') !== -1;
|
|
}
|
|
}, {
|
|
key: "forcePopupAlign",
|
|
value: function forcePopupAlign() {
|
|
if (this.state.popupVisible && this.popupRef.current && this.popupRef.current.alignRef.current) {
|
|
this.popupRef.current.alignRef.current.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$props10 = this.props,
|
|
children = _this$props10.children,
|
|
forceRender = _this$props10.forceRender,
|
|
alignPoint = _this$props10.alignPoint,
|
|
className = _this$props10.className,
|
|
autoDestroy = _this$props10.autoDestroy;
|
|
|
|
var child = _react.default.Children.only(children);
|
|
|
|
var newChildProps = {
|
|
key: 'trigger'
|
|
};
|
|
|
|
if (this.isContextMenuToShow()) {
|
|
newChildProps.onContextMenu = this.onContextMenu;
|
|
} else {
|
|
newChildProps.onContextMenu = this.createTwoChains('onContextMenu');
|
|
}
|
|
|
|
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');
|
|
}
|
|
|
|
if (this.isMouseEnterToShow()) {
|
|
newChildProps.onMouseEnter = this.onMouseEnter;
|
|
|
|
if (alignPoint) {
|
|
newChildProps.onMouseMove = this.onMouseMove;
|
|
}
|
|
} else {
|
|
newChildProps.onMouseEnter = this.createTwoChains('onMouseEnter');
|
|
}
|
|
|
|
if (this.isMouseLeaveToHide()) {
|
|
newChildProps.onMouseLeave = this.onMouseLeave;
|
|
} else {
|
|
newChildProps.onMouseLeave = this.createTwoChains('onMouseLeave');
|
|
}
|
|
|
|
if (this.isFocusToShow() || this.isBlurToHide()) {
|
|
newChildProps.onFocus = this.onFocus;
|
|
newChildProps.onBlur = this.onBlur;
|
|
} else {
|
|
newChildProps.onFocus = this.createTwoChains('onFocus');
|
|
newChildProps.onBlur = this.createTwoChains('onBlur');
|
|
}
|
|
|
|
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 = _react.default.cloneElement(child, cloneProps);
|
|
|
|
var portal; // prevent unmounting after it's rendered
|
|
|
|
if (popupVisible || this.popupRef.current || forceRender) {
|
|
portal = _react.default.createElement(PortalComponent, {
|
|
key: "portal",
|
|
getContainer: this.getContainer,
|
|
didUpdate: this.handlePortalUpdate
|
|
}, this.getComponent());
|
|
}
|
|
|
|
if (!popupVisible && autoDestroy) {
|
|
portal = null;
|
|
}
|
|
|
|
return _react.default.createElement(_context.default.Provider, {
|
|
value: {
|
|
onPopupMouseDown: this.onPopupMouseDown
|
|
}
|
|
}, 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.default.Component);
|
|
|
|
Trigger.contextType = _context.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; |