choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
749 lines (629 loc) • 25.7 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
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 _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _mobxReact = require("mobx-react");
var _reactDom = require("react-dom");
var _noop = _interopRequireDefault(require("lodash/noop"));
var _contains = _interopRequireDefault(require("../util/Dom/contains"));
var _addEventListener = _interopRequireDefault(require("../../_util/addEventListener"));
var _Popup = _interopRequireDefault(require("./Popup"));
var _utils = require("./utils");
var _ContainerRender = _interopRequireDefault(require("../util/ContainerRender"));
var _Portal = _interopRequireDefault(require("../util/Portal"));
function _createSuper(Derived) {
function isNativeReflectConstruct() {
if (typeof Reflect === "undefined" || !Reflect.construct) return false;
if (Reflect.construct.sham) return false;
if (typeof Proxy === "function") return true;
try {
Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
return true;
} catch (e) {
return false;
}
}
return function () {
var Super = (0, _getPrototypeOf2["default"])(Derived),
result;
if (isNativeReflectConstruct()) {
var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor;
result = Reflect.construct(Super, arguments, NewTarget);
} else {
result = Super.apply(this, arguments);
}
return (0, _possibleConstructorReturn2["default"])(this, result);
};
}
function returnEmptyString() {
return '';
}
function returnDocument() {
return window.document;
}
var ALL_HANDLERS = ['onClick', 'onMouseDown', 'onTouchStart', 'onMouseEnter', 'onMouseLeave', 'onFocus', 'onBlur', 'onContextMenu'];
var IS_REACT_16 = !!_reactDom.createPortal;
var Trigger =
/*#__PURE__*/
function (_Component) {
(0, _inherits2["default"])(Trigger, _Component);
var _super = _createSuper(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) {
_this.fireEvents('onMouseEnter', e);
_this.delaySetPopupVisible(true, _this.props.mouseEnterDelay);
});
(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?
if (e.relatedTarget && !e.relatedTarget.setTimeout && _this._component && _this._component.getPopupDomNode && (0, _contains["default"])(_this._component.getPopupDomNode(), 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);
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);
});
(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;
event.preventDefault();
var nextVisible = !_this.state.popupVisible;
if (_this.isClickToHide() && !nextVisible || nextVisible && _this.isClickToShow()) {
_this.setPopupVisible(!_this.state.popupVisible);
}
});
(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 props = _this.props;
var popupPlacement = props.popupPlacement,
builtinPlacements = props.builtinPlacements,
prefixCls = props.prefixCls;
if (popupPlacement && builtinPlacements) {
className.push((0, _utils.getPopupClassNameFromAlign)(builtinPlacements, prefixCls, align));
}
if (props.getPopupClassNameFromAlign) {
className.push(props.getPopupClassNameFromAlign(align));
}
return className.join(' ');
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getComponent", function () {
var _this$props = _this.props,
prefixCls = _this$props.prefixCls,
destroyPopupOnHide = _this$props.destroyPopupOnHide,
popupClassName = _this$props.popupClassName,
action = _this$props.action,
onPopupAlign = _this$props.onPopupAlign,
popupAnimation = _this$props.popupAnimation,
popupTransitionName = _this$props.popupTransitionName,
popupStyle = _this$props.popupStyle,
mask = _this$props.mask,
maskAnimation = _this$props.maskAnimation,
maskTransitionName = _this$props.maskTransitionName,
zIndex = _this$props.zIndex,
popup = _this$props.popup,
stretch = _this$props.stretch;
var _assertThisInitialize = (0, _assertThisInitialized2["default"])(_this),
state = _assertThisInitialize.state;
var align = _this.getPopupAlign();
var mouseProps = {};
if (_this.isMouseEnterToShow()) {
mouseProps.onMouseEnter = _this.onPopupMouseEnter;
}
if (_this.isMouseLeaveToHide()) {
mouseProps.onMouseLeave = _this.onPopupMouseLeave;
}
return _react["default"].createElement(_Popup["default"], (0, _extends2["default"])({
prefixCls: prefixCls,
destroyPopupOnHide: destroyPopupOnHide,
visible: state.popupVisible,
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 _assertThisInitialize2 = (0, _assertThisInitialized2["default"])(_this),
props = _assertThisInitialize2.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), "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;
var triggerAfterPopupVisibleChange = function triggerAfterPopupVisibleChange() {
if (prevState.popupVisible !== state.popupVisible) {
props.afterPopupVisibleChange(state.popupVisible);
}
};
if (!IS_REACT_16) {
this.renderComponent(null, triggerAfterPopupVisibleChange);
}
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) {
this.clearDelayTimer();
if (this.state.popupVisible !== popupVisible) {
if (!('popupVisible' in this.props)) {
this.setState({
popupVisible: popupVisible
});
}
this.props.onPopupVisibleChange(popupVisible);
}
}
}, {
key: "delaySetPopupVisible",
value: function delaySetPopupVisible(visible, delayS) {
var _this3 = this;
var delay = delayS * 1000;
this.clearDelayTimer();
if (delay) {
this.delayTimer = setTimeout(function () {
_this3.setPopupVisible(visible);
_this3.clearDelayTimer();
}, delay);
} else {
this.setPopupVisible(visible);
}
}
}, {
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$props2 = this.props,
action = _this$props2.action,
showAction = _this$props2.showAction;
return action.indexOf('click') !== -1 || showAction.indexOf('click') !== -1;
}
}, {
key: "isContextMenuToShow",
value: function isContextMenuToShow() {
var _this$props3 = this.props,
action = _this$props3.action,
showAction = _this$props3.showAction;
return action.indexOf('contextMenu') !== -1 || showAction.indexOf('contextMenu') !== -1;
}
}, {
key: "isClickToHide",
value: function isClickToHide() {
var _this$props4 = this.props,
action = _this$props4.action,
hideAction = _this$props4.hideAction;
return action.indexOf('click') !== -1 || hideAction.indexOf('click') !== -1;
}
}, {
key: "isMouseEnterToShow",
value: function isMouseEnterToShow() {
var _this$props5 = this.props,
action = _this$props5.action,
showAction = _this$props5.showAction;
return action.indexOf('hover') !== -1 || showAction.indexOf('mouseEnter') !== -1;
}
}, {
key: "isMouseLeaveToHide",
value: function isMouseLeaveToHide() {
var _this$props6 = this.props,
action = _this$props6.action,
hideAction = _this$props6.hideAction;
return action.indexOf('hover') !== -1 || hideAction.indexOf('mouseLeave') !== -1;
}
}, {
key: "isFocusToShow",
value: function isFocusToShow() {
var _this$props7 = this.props,
action = _this$props7.action,
showAction = _this$props7.showAction;
return action.indexOf('focus') !== -1 || showAction.indexOf('focus') !== -1;
}
}, {
key: "isBlurToHide",
value: function isBlurToHide() {
var _this$props8 = this.props,
action = _this$props8.action,
hideAction = _this$props8.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 _this4 = this;
var popupVisible = this.state.popupVisible;
var props = this.props;
var child = _react.Children.only(props.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;
} 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 trigger = (0, _react.cloneElement)(child, newChildProps);
if (!IS_REACT_16) {
return _react["default"].createElement(_ContainerRender["default"], {
parent: this,
visible: popupVisible,
autoMount: false,
forceRender: props.forceRender,
getComponent: this.getComponent,
getContainer: this.getContainer
}, function (_ref2) {
var renderComponent = _ref2.renderComponent;
_this4.renderComponent = renderComponent;
return trigger;
});
}
var portal; // prevent unmounting after it's rendered
if (popupVisible || this._component || props.forceRender) {
portal = _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, "propTypes", {
children: _propTypes["default"].any,
action: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].string)]),
showAction: _propTypes["default"].any,
hideAction: _propTypes["default"].any,
getPopupClassNameFromAlign: _propTypes["default"].any,
onPopupVisibleChange: _propTypes["default"].func,
afterPopupVisibleChange: _propTypes["default"].func,
popup: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]).isRequired,
popupStyle: _propTypes["default"].object,
prefixCls: _propTypes["default"].string,
popupClassName: _propTypes["default"].string,
popupPlacement: _propTypes["default"].string,
builtinPlacements: _propTypes["default"].object,
popupTransitionName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
popupAnimation: _propTypes["default"].any,
mouseEnterDelay: _propTypes["default"].number,
mouseLeaveDelay: _propTypes["default"].number,
zIndex: _propTypes["default"].number,
focusDelay: _propTypes["default"].number,
blurDelay: _propTypes["default"].number,
getPopupContainer: _propTypes["default"].func,
getDocument: _propTypes["default"].func,
getRootDomNode: _propTypes["default"].func,
forceRender: _propTypes["default"].bool,
destroyPopupOnHide: _propTypes["default"].bool,
mask: _propTypes["default"].bool,
maskClosable: _propTypes["default"].bool,
onPopupAlign: _propTypes["default"].func,
popupAlign: _propTypes["default"].object,
popupVisible: _propTypes["default"].bool,
defaultPopupVisible: _propTypes["default"].bool,
maskTransitionName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
maskAnimation: _propTypes["default"].string,
stretch: _propTypes["default"].string
});
(0, _defineProperty2["default"])(Trigger, "defaultProps", {
prefixCls: 'rc-trigger-popup',
getPopupClassNameFromAlign: returnEmptyString,
getDocument: returnDocument,
onPopupVisibleChange: _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