choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
705 lines (587 loc) • 24 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;
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 _mobxReact = require("mobx-react");
var _reactDom = require("react-dom");
var _noop = _interopRequireDefault(require("lodash/noop"));
var _classnames = _interopRequireDefault(require("classnames"));
var _contains = _interopRequireDefault(require("../util/Dom/contains"));
var _addEventListener = _interopRequireDefault(require("../../_util/addEventListener"));
var _Popup = _interopRequireDefault(require("./Popup"));
var _utils = require("./utils");
var _Portal = _interopRequireDefault(require("../util/Portal"));
function returnEmptyString() {
return '';
}
function returnDocument() {
return window.document;
}
var ALL_HANDLERS = ['onClick', 'onMouseDown', 'onTouchStart', 'onMouseEnter', 'onMouseLeave', 'onFocus', 'onBlur', 'onContextMenu'];
var Trigger = /*#__PURE__*/function (_Component) {
(0, _inherits2["default"])(Trigger, _Component);
var _super = (0, _createSuper2["default"])(Trigger);
function Trigger(_props) {
var _this;
(0, _classCallCheck2["default"])(this, Trigger);
_this = _super.call(this, _props);
(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) {
// https://github.com/react-component/trigger/pull/13
// react bug?
var focusedElement = document.activeElement;
if (e.relatedTarget && !e.relatedTarget.setTimeout && _this._component && _this._component.getPopupDomNode && (0, _contains["default"])(_this._component.getPopupDomNode(), e.relatedTarget) || e.relatedTarget.setTimeout && (0, _contains["default"])(_this._component.getPopupDomNode(), focusedElement)) {
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);
if (!e.isDefaultPrevented()) {
_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;
if (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), "onDocumentClick", function (event) {
if (event.isDefaultPrevented() || _this.props.mask && !_this.props.maskClosable) {
return;
}
var target = event.target;
var root = (0, _reactDom.findDOMNode)((0, _assertThisInitialized2["default"])(_this));
var popupNode = _this.getPopupDomNode();
if (!(0, _contains["default"])(root, target) && !(0, _contains["default"])(popupNode, target)) {
_this.close();
}
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getRootDomNode", function () {
var getRootDomNode = _this.props.getRootDomNode;
if (getRootDomNode) {
return getRootDomNode();
} else {
return (0, _reactDom.findDOMNode)((0, _assertThisInitialized2["default"])(_this));
}
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getPopupClassFromAlign", 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, _utils.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,
action = _this$props2.action,
onPopupAlign = _this$props2.onPopupAlign,
popupAnimation = _this$props2.popupAnimation,
popupTransitionName = _this$props2.popupTransitionName,
popupStyle = _this$props2.popupStyle,
mask = _this$props2.mask,
maskAnimation = _this$props2.maskAnimation,
maskTransitionName = _this$props2.maskTransitionName,
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;
}
return /*#__PURE__*/_react["default"].createElement(_Popup["default"], (0, _extends2["default"])({
prefixCls: prefixCls,
destroyPopupOnHide: destroyPopupOnHide,
visible: popupVisible,
point: alignPoint && point,
className: popupClassName,
action: action,
align: align,
onAlign: onPopupAlign,
animation: popupAnimation,
getClassNameFromAlign: _this.getPopupClassFromAlign
}, mouseProps, {
stretch: stretch,
getRootDomNode: _this.getRootDomNode,
style: popupStyle,
mask: mask,
zIndex: zIndex,
transitionName: popupTransitionName,
maskAnimation: maskAnimation,
maskTransitionName: maskTransitionName,
ref: _this.savePopup
}), typeof popup === 'function' ? popup() : popup);
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_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((0, _reactDom.findDOMNode)((0, _assertThisInitialized2["default"])(_this))) : props.getDocument().body;
mountNode.appendChild(popupContainer);
return popupContainer;
});
(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.prevPopupVisible !== _this.state.popupVisible) {
_this.props.afterPopupVisibleChange(_this.state.popupVisible);
}
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "savePopup", function (node) {
_this._component = node;
});
var _popupVisible;
if ('popupVisible' in _props) {
_popupVisible = !!_props.popupVisible;
} else {
_popupVisible = !!_props.defaultPopupVisible;
}
_this.prevPopupVisible = _popupVisible;
_this.state = {
popupVisible: _popupVisible
};
return _this;
}
(0, _createClass2["default"])(Trigger, [{
key: "componentWillMount",
value: function componentWillMount() {
var _this2 = this;
ALL_HANDLERS.forEach(function (h) {
_this2["fire".concat(h)] = function (e) {
_this2.fireEvents(h, e);
};
});
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
this.componentDidUpdate({}, {
popupVisible: this.state.popupVisible
});
}
}, {
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(_ref) {
var popupVisible = _ref.popupVisible;
if (popupVisible !== undefined) {
this.setState({
popupVisible: popupVisible
});
}
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(_, prevState) {
var props = this.props;
var state = this.state;
this.prevPopupVisible = prevState.popupVisible; // We must listen to `mousedown` or `touchstart`, edge case:
// 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();
}
}, {
key: "getPopupDomNode",
value: function getPopupDomNode() {
// for test
if (this._component && this._component.getPopupDomNode) {
return this._component.getPopupDomNode();
}
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, _utils.getAlignFromPlacement)(builtinPlacements, popupPlacement, popupAlign);
}
return popupAlign;
}
}, {
key: "setPopupVisible",
value: function setPopupVisible(popupVisible, event) {
var alignPoint = this.props.alignPoint;
this.clearDelayTimer();
if (this.state.popupVisible !== popupVisible) {
if (this.props.beforePopupVisibleChange(popupVisible) !== false) {
if (!('popupVisible' in this.props)) {
this.setState({
popupVisible: popupVisible
});
}
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 _this3 = this;
var delay = delayS * 1000;
this.clearDelayTimer();
if (delay) {
var point = event ? {
pageX: event.pageX,
pageY: event.pageY
} : null;
this.delayTimer = setTimeout(function () {
_this3.setPopupVisible(visible, point);
_this3.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._component && this._component.alignInstance) {
this._component.alignInstance.forceAlign();
}
}
}, {
key: "fireEvents",
value: function fireEvents(type, e) {
var domEvent = e.hasOwnProperty('isDefaultPrevented') ? e : e.domEvent;
var childCallback = this.props.children.props[type];
if (childCallback) {
childCallback(domEvent);
}
if (!domEvent.isDefaultPrevented()) {
var callback = this.props[type];
if (callback) {
callback(domEvent);
}
}
}
}, {
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;
var child = _react.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 trigger = /*#__PURE__*/(0, _react.cloneElement)(child, newChildProps);
var portal; // prevent unmounting after it's rendered
if (popupVisible || this._component || forceRender) {
portal = /*#__PURE__*/_react["default"].createElement(_Portal["default"], {
key: "portal",
getContainer: this.getContainer,
didUpdate: this.handlePortalUpdate
}, this.getComponent());
}
return [trigger, portal];
}
}]);
return Trigger;
}(_react.Component);
(0, _defineProperty2["default"])(Trigger, "displayName", 'Trigger');
(0, _defineProperty2["default"])(Trigger, "defaultProps", {
prefixCls: 'rc-trigger-popup',
getPopupClassNameFromAlign: returnEmptyString,
getDocument: returnDocument,
onPopupVisibleChange: _noop["default"],
beforePopupVisibleChange: _noop["default"],
afterPopupVisibleChange: _noop["default"],
onPopupAlign: _noop["default"],
popupClassName: '',
mouseEnterDelay: 0,
mouseLeaveDelay: 0.1,
focusDelay: 0,
blurDelay: 0.15,
popupStyle: {},
destroyPopupOnHide: false,
popupAlign: {},
defaultPopupVisible: false,
mask: false,
maskClosable: true,
action: [],
showAction: [],
hideAction: []
});
var _default = (0, _mobxReact.observer)(Trigger);
exports["default"] = _default;
//# sourceMappingURL=index.js.map