@autobest-ui/components 2.2.1 → 2.4.0

package/lib/trigger/index.js

@@ -1,28 +1,18 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _reactDom = require("react-dom");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _utils = require("@autobest-ui/utils");
-
 var _reactTransitionGroup = require("react-transition-group");
-
 var _portal = _interopRequireDefault(require("../portal"));
-
 var _ref = require("./ref");
-
 var _getPopupLocation = _interopRequireDefault(require("./getPopupLocation"));
-
 var __extends = void 0 && (void 0).__extends || function () {
   var _extendStatics = function extendStatics(d, b) {
     _extendStatics = Object.setPrototypeOf || {
@@ -34,140 +24,106 @@ var __extends = void 0 && (void 0).__extends || function () {
         if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
       }
     };
-
     return _extendStatics(d, b);
   };
-
   return function (d, b) {
     if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-
     _extendStatics(d, b);
-
     function __() {
       this.constructor = d;
     }
-
     d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
   };
 }();
-
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
       s = arguments[i];
-
       for (var p in s) {
         if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
       }
     }
-
     return t;
   };
-
   return __assign.apply(this, arguments);
 };
-
 function noop() {}
-
-var Trigger =
-/** @class */
-function (_super) {
+var Trigger = /** @class */function (_super) {
   __extends(Trigger, _super);
-
   function Trigger(props) {
     var _this = _super.call(this, props) || this;
-
     _this.prefixCls = 'ab-trigger';
     _this.popupRef = /*#__PURE__*/_react.default.createRef();
     _this.maskRef = /*#__PURE__*/_react.default.createRef();
     _this.triggerRef = /*#__PURE__*/_react.default.createRef();
-
     _this.isClickToHide = function () {
       return _this.props.trigger.indexOf('click') !== -1;
     };
-
     _this.clearPopupTimer = function (popupEl) {
       clearTimeout(_this.popupTimer);
-
       var element = popupEl || _this.getPopupDomNode();
-
       if (element) {
         element.style.visibility = '';
       }
     };
-
     _this.forceAlign = function (popupEl) {
       var rootEl = _this.getRootDomNode();
-
       popupEl = popupEl || _this.getPopupDomNode();
-
       if (!popupEl || !rootEl) {
         return;
       }
-
       _this.clearPopupTimer(popupEl);
-
       var _a = _this.props,
-          placement = _a.placement,
-          translateX = _a.translateX,
-          translateY = _a.translateY,
-          rootToPopupSpacing = _a.rootToPopupSpacing,
-          popupLimitSpacing = _a.popupLimitSpacing,
-          isTransformHorizontalDirection = _a.isTransformHorizontalDirection,
-          hiddenArrow = _a.hiddenArrow,
-          onArrowStyleChange = _a.onArrowStyleChange,
-          maxHeight = _a.maxHeight,
-          isMinRootWidth = _a.isMinRootWidth,
-          isMaxRootWidth = _a.isMaxRootWidth,
-          isInsertNode = _a.isInsertNode;
-
+        placement = _a.placement,
+        translateX = _a.translateX,
+        translateY = _a.translateY,
+        rootToPopupSpacing = _a.rootToPopupSpacing,
+        popupLimitSpacing = _a.popupLimitSpacing,
+        isTransformHorizontalDirection = _a.isTransformHorizontalDirection,
+        hiddenArrow = _a.hiddenArrow,
+        onArrowStyleChange = _a.onArrowStyleChange,
+        maxHeight = _a.maxHeight,
+        isMinRootWidth = _a.isMinRootWidth,
+        isMaxRootWidth = _a.isMaxRootWidth,
+        isInsertNode = _a.isInsertNode;
       if (maxHeight) {
         popupEl.style.maxHeight = "".concat(maxHeight, "px");
         popupEl.style.overflowY = 'auto';
       }
-
       if (isMinRootWidth || isMaxRootWidth) {
         var rootWidth = (0, _utils.getElementSize)(rootEl).width;
-
         if (isMinRootWidth) {
           popupEl.style.minWidth = "".concat(rootWidth, "px");
         }
-
         if (isMaxRootWidth) {
           popupEl.style.maxWidth = "".concat(rootWidth, "px");
           popupEl.style.overflowX = 'auto';
         }
-      } // 计算Popup元素应该显示的位置
-
-
+      }
+      // 计算Popup元素应该显示的位置
       var _b = (0, _getPopupLocation.default)(placement, rootEl, popupEl, translateX, translateY, rootToPopupSpacing, popupLimitSpacing, isTransformHorizontalDirection, hiddenArrow, isInsertNode),
-          left = _b.left,
-          top = _b.top,
-          arrowStyle = _b.arrowStyle,
-          transformOrigin = _b.transformOrigin,
-          popupMaxWidthByCalc = _b.maxWidth,
-          popupMaxHeightByCalc = _b.maxHeight,
-          width = _b.width,
-          height = _b.height;
-
+        left = _b.left,
+        top = _b.top,
+        arrowStyle = _b.arrowStyle,
+        transformOrigin = _b.transformOrigin,
+        popupMaxWidthByCalc = _b.maxWidth,
+        popupMaxHeightByCalc = _b.maxHeight,
+        width = _b.width,
+        height = _b.height;
       _this.prevPopupSize = {
         width: width,
         height: height
       };
-
       if (!hiddenArrow && onArrowStyleChange && JSON.stringify(arrowStyle) !== JSON.stringify(_this.prevArrowStyle)) {
         _this.prevArrowStyle = arrowStyle;
         onArrowStyleChange(arrowStyle);
       }
-
       popupEl.style.transformOrigin = transformOrigin;
       popupEl.style.left = "".concat(left, "px");
       popupEl.style.top = "".concat(top, "px");
-
       if (popupMaxHeightByCalc) {
         popupEl.style.maxHeight = "".concat(popupMaxWidthByCalc, "px");
       }
-
       if (popupMaxWidthByCalc) {
         popupEl.style.maxWidth = "".concat(popupMaxWidthByCalc, "px");
         popupEl.style.overflowX = 'auto';
@@ -175,89 +131,67 @@ function (_super) {
         popupEl.style.maxWidth = '';
       }
     };
-
     _this.getRootDomNode = function () {
       var getCurrentDOMNode = _this.props.getCurrentDOMNode;
-
       if (getCurrentDOMNode) {
         return getCurrentDOMNode(_this.triggerRef.current);
       }
-
       try {
         // 支持children是组件的情况， 穿透组件获取HTML元素
         // eslint-disable-next-line react/no-find-dom-node
         var domNode = (0, _reactDom.findDOMNode)(_this.triggerRef.current);
-
         if (domNode) {
           return domNode;
         }
       } catch (err) {}
-
       return null;
     };
     /**
      * 全局事件回调
      * @param event
      */
-
-
     _this.onDocumentClick = function (event) {
       if (!_this.state.visible) {
         return;
       }
-
       var target = event.target;
-
       var root = _this.getRootDomNode();
-
       var popupNode = _this.getPopupDomNode();
-
       if (!root || !target || !popupNode) {
         return;
       }
-
       var showMask = _this.props.showMask;
-
       var maskEl = _this.getMaskDomNode();
-
       if (showMask && !maskEl) {
         return;
-      } // 排除操作当前元素
-
-
+      }
+      // 排除操作当前元素
       if (!(0, _utils.contains)(root, target) && (!showMask || maskEl === target) && !(0, _utils.contains)(popupNode, target) && !_this.hasPopupMouseDown) {
         _this.hidePopup();
       }
     };
-
     _this.showPopup = function () {
       _this.triggerPopup(true);
     };
-
     _this.hidePopup = function (ev) {
       if (ev) {
         ev.stopPropagation();
         ev.nativeEvent.stopImmediatePropagation();
       }
-
       _this.triggerPopup(false);
     };
-
     _this.onVisibleChange = function (visible) {
       var prevVisible = _this.state.visible;
       clearTimeout(_this.delayTimer);
-
       if (prevVisible !== visible) {
         if (!_this.isOutsideControl()) {
           _this.setState({
             visible: visible
           });
         }
-
         var _a = _this.props,
-            onVisibleChange = _a.onVisibleChange,
-            name_1 = _a.name;
-
+          onVisibleChange = _a.onVisibleChange,
+          name_1 = _a.name;
         if (onVisibleChange) {
           onVisibleChange(visible, name_1);
         }
@@ -267,21 +201,17 @@ function (_super) {
      * 设置显示与隐藏
      * @param nextVisible
      */
-
-
     _this.triggerPopup = function (nextVisible) {
       if (nextVisible) {
-        _this.hasPopupMouseDown = true; // 禁止执行全局监听，回调函数中的隐藏功能
-
+        _this.hasPopupMouseDown = true;
+        // 禁止执行全局监听，回调函数中的隐藏功能
         clearTimeout(_this.mouseDownTimeout);
         _this.mouseDownTimeout = setTimeout(function () {
           _this.hasPopupMouseDown = false;
         }, 0);
       }
-
       _this.onVisibleChange(nextVisible);
     };
-
     _this.onPopupMouseDown = function () {
       _this.hasPopupMouseDown = true;
       clearTimeout(_this.mouseDownTimeout);
@@ -289,59 +219,45 @@ function (_super) {
         _this.hasPopupMouseDown = false;
       }, 0);
     };
-
     _this.onClick = function (event) {
       if (event && event.preventDefault) {
         event.preventDefault();
       }
-
       var touch = (0, _utils.isTouchScreen)();
-
       if (event.type === 'touchstart' && touch || event.type === 'mousedown' && !touch) {
         _this.triggerPopup(!_this.state.visible);
       }
     };
-
     _this.onMouseEnter = function () {
       _this.delaySetPopupVisible(true, _this.props.mouseEnterDelay);
     };
-
     _this.onMouseLeave = function () {
       _this.delaySetPopupVisible(false, _this.props.mouseLeaveDelay);
     };
-
     _this.onPopupMouseEnter = function () {
       clearTimeout(_this.delayTimer);
     };
-
     _this.onPopupMouseLeave = function () {
       _this.delaySetPopupVisible(false, _this.props.mouseLeaveDelay);
     };
-
     _this.onExited = function () {
       _this.clearPopupTimer();
-
       var onDestroy = _this.props.onDestroy;
-
       if (onDestroy) {
         onDestroy();
       }
     };
-
     _this.isCurrentTrigger = function (eventName, trigger) {
       return trigger.indexOf(eventName) !== -1;
     };
-
     _this.isOutsideControl = function () {
       return 'visible' in _this.props;
     };
-
     _this.onPreventThrough = function (event) {
       if (event && event.preventDefault) {
         event.preventDefault();
       }
     };
-
     _this.state = {
       visible: false,
       isUserOperated: false,
@@ -349,7 +265,6 @@ function (_super) {
     };
     return _this;
   }
-
   Trigger.getPopupInnerHeight = function (element) {
     if (element.children && element.children.length) {
       var height_1 = (0, _utils.getStyleValue)(element, 'padding-top') + (0, _utils.getStyleValue)(element, 'padding-bottom');
@@ -359,53 +274,40 @@ function (_super) {
       });
       return height_1;
     }
-
     return (0, _utils.getElementSize)(element).height;
   };
-
   Trigger.getDerivedStateFromProps = function (nextProps, preState) {
     var nextState = {};
-
     if ('visible' in nextProps) {
       nextState.visible = nextProps.visible;
-    } // 在触摸屏下， hover 事件转成click
-
-
+    }
+    // 在触摸屏下， hover 事件转成click
     if (nextProps.trigger === 'hover' && (0, _utils.isTouchScreen)()) {
       nextState.trigger = 'click';
     }
-
     var isUserOperated = preState.isUserOperated || nextState.visible || preState.visible;
-
     if (isUserOperated !== preState.isUserOperated) {
       nextState.isUserOperated = isUserOperated;
     }
-
     if ((0, _utils.isEmptyObject)(nextState)) {
       return null;
     }
-
     return nextState;
   };
-
   Trigger.prototype.componentDidMount = function () {
     this.componentDidUpdate();
   };
-
   Trigger.prototype.componentDidUpdate = function () {
     var _this = this;
-
     var visible = this.state.visible;
-
     if (!visible) {
       // 其中参数是解决： 当同时多个trigger在同一个组件中，一个更新（一个使用visible）导致多个都发生componentDidUpdate
       // 应该不让其他trigger 的delay事件销毁
       this.clearOutsideHandler(true);
       return;
     }
-
-    var popupEl = this.getPopupDomNode(); // 加入 resize 监听
-
+    var popupEl = this.getPopupDomNode();
+    // 加入 resize 监听
     if (this.props.monitorWindowResize && !this.resizeHandler) {
       var handle = this.props.windowResizeHidden ? (0, _utils.throttleWithRAF)(function () {
         return _this.triggerPopup(false);
@@ -413,126 +315,99 @@ function (_super) {
         return _this.forceAlign();
       });
       this.resizeHandler = (0, _utils.addEventListener)(window, 'resize', handle);
-    } // 加入 scroll 监听
-
-
+    }
+    // 加入 scroll 监听
     if (visible && this.props.scrollClosable && !this.scrollHandler) {
       this.scrollHandler = (0, _utils.addEventListener)(window, 'scroll', function () {
         if (_this.scrollHandler) {
           _this.scrollHandler.remove();
-
           _this.scrollHandler = null;
         }
-
         _this.triggerPopup(false);
       });
-    } // 需要监听 `mousedown` or `touchstart`, 而不是click
-
-
+    }
+    // 需要监听 `mousedown` or `touchstart`, 而不是click
     var currentDocument;
     var touch = (0, _utils.isTouchScreen)();
-
     if (!this.clickOutsideHandler && !touch && this.isClickToHide()) {
       currentDocument = window.document;
       this.clickOutsideHandler = (0, _utils.addEventListener)(currentDocument, 'mousedown', this.onDocumentClick);
-    } // always hide on mobile
-
-
+    }
+    // always hide on mobile
     if (!this.touchOutsideHandler) {
       currentDocument = currentDocument || window.document;
       this.touchOutsideHandler = (0, _utils.addEventListener)(currentDocument, 'touchstart', this.onDocumentClick);
     }
-
     if (popupEl && this.prevPopupSize) {
       var _a = (0, _utils.getElementSize)(popupEl),
-          width = _a.width,
-          height = _a.height;
-
+        width = _a.width,
+        height = _a.height;
       if (this.prevPopupSize.width !== width || this.prevPopupSize.height !== height) {
         this.clearPopupTimer(popupEl);
         popupEl.style.visibility = 'hidden';
         this.popupTimer = setTimeout(function () {
           _this.forceAlign(popupEl);
-
           popupEl.style.visibility = '';
         });
       }
     }
   };
-
   Trigger.prototype.componentWillUnmount = function () {
     // remove绑定事件
     this.clearOutsideHandler();
   };
-
   Trigger.prototype.getPopupDomNode = function () {
     if (this.popupRef && this.popupRef.current) {
       return this.popupRef.current;
     }
-
     return null;
   };
-
   Trigger.prototype.getMaskDomNode = function () {
     if (this.maskRef && this.maskRef.current) {
       return this.maskRef.current;
     }
-
     return null;
   };
-
   Trigger.prototype.clearOutsideHandler = function (ignoreDelayTimer) {
     // clearTimeout(this.mouseDownTimeout);
     if (!ignoreDelayTimer) {
       clearTimeout(this.delayTimer);
     }
-
     this.clearPopupTimer();
-
     if (this.resizeHandler) {
       this.resizeHandler.remove();
       this.resizeHandler = null;
     }
-
     if (this.scrollHandler) {
       this.scrollHandler.remove();
       this.scrollHandler = null;
     }
-
     if (this.clickOutsideHandler) {
       this.clickOutsideHandler.remove();
       this.clickOutsideHandler = null;
     }
-
     if (this.touchOutsideHandler) {
       this.touchOutsideHandler.remove();
       this.touchOutsideHandler = null;
     }
   };
-
   Trigger.prototype.delaySetPopupVisible = function (visible, delayTime) {
     var _this = this;
-
     clearTimeout(this.delayTimer);
-
     if (delayTime) {
       var delay = delayTime * 1000;
       this.delayTimer = setTimeout(function () {
         _this.triggerPopup(visible);
-
         clearTimeout(_this.delayTimer);
       }, delay);
     } else {
       this.triggerPopup(visible);
     }
   };
-
   Trigger.prototype.renderMask = function () {
     var _a;
-
     var visible = this.state.visible;
     var showMask = this.props.showMask;
-
     if (showMask) {
       var cls = this.prefixCls;
       return /*#__PURE__*/_react.default.createElement("div", {
@@ -541,32 +416,27 @@ function (_super) {
         onTouchEnd: this.onPreventThrough
       });
     }
-
     return null;
   };
-
   Trigger.prototype.renderPopupContent = function () {
     var _a;
-
     var cls = this.prefixCls;
     var _b = this.props,
-        popup = _b.popup,
-        wrapClassName = _b.wrapClassName,
-        isTransformHorizontalDirection = _b.isTransformHorizontalDirection,
-        isInsertNode = _b.isInsertNode;
+      popup = _b.popup,
+      wrapClassName = _b.wrapClassName,
+      isTransformHorizontalDirection = _b.isTransformHorizontalDirection,
+      isInsertNode = _b.isInsertNode;
     var _c = this.state,
-        visible = _c.visible,
-        isUserOperated = _c.isUserOperated,
-        trigger = _c.trigger;
-    var wrapClass = (0, _classnames.default)("".concat(cls, "-wrap"), wrapClassName, (_a = {}, _a["".concat(cls, "-hidden")] = isInsertNode && !isUserOperated && !visible, _a)); // hover 下，对popup增加相应的事件，延迟隐藏，可以在弹框中停留
-
+      visible = _c.visible,
+      isUserOperated = _c.isUserOperated,
+      trigger = _c.trigger;
+    var wrapClass = (0, _classnames.default)("".concat(cls, "-wrap"), wrapClassName, (_a = {}, _a["".concat(cls, "-hidden")] = isInsertNode && !isUserOperated && !visible, _a));
+    // hover 下，对popup增加相应的事件，延迟隐藏，可以在弹框中停留
     var mouseProps = {};
-
     if (this.isCurrentTrigger('hover', trigger)) {
       mouseProps.onMouseEnter = this.onPopupMouseEnter;
       mouseProps.onMouseLeave = this.onPopupMouseLeave;
     }
-
     mouseProps.onMouseDown = this.onPopupMouseDown;
     mouseProps.onTouchStart = this.onPopupMouseDown;
     return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
@@ -584,61 +454,46 @@ function (_super) {
   /**
    * 扩充children属性，根据trigger绑定不同事件
    */
-
-
   Trigger.prototype.renderChildComponent = function () {
     var children = this.props.children;
     var trigger = this.state.trigger;
-
     var child = _react.default.Children.only(children);
-
     var newChildProps = {
       key: 'trigger'
     };
-
     if (this.isCurrentTrigger('hover', trigger) && this.props.trigger === trigger) {
       newChildProps.onMouseEnter = this.onMouseEnter;
       newChildProps.onMouseLeave = this.onMouseLeave;
     }
-
     if (!this.isOutsideControl() || this.props.trigger !== trigger) {
       if (this.isCurrentTrigger('click', trigger)) {
         newChildProps.onMouseDown = this.onClick;
         newChildProps.onTouchStart = this.onClick;
       }
-
       if (this.isCurrentTrigger('focus', trigger)) {
         newChildProps.onFocus = this.showPopup;
         newChildProps.onBlur = this.hidePopup;
       }
     }
-
     var cloneProps = __assign({}, newChildProps);
-
     if ((0, _ref.supportRef)(child)) {
       cloneProps.ref = (0, _ref.composeRef)(this.triggerRef, child.ref);
-    } // 对当前children元素添加额外属性
-
-
+    }
+    // 对当前children元素添加额外属性
     return /*#__PURE__*/_react.default.cloneElement(child, cloneProps);
   };
-
   Trigger.prototype.renderPopupComponent = function () {
     if (this.props.isInsertNode) {
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.renderMask(), this.renderPopupContent());
     }
-
     if (this.state.visible || this.popupRef.current) {
       return /*#__PURE__*/_react.default.createElement(_portal.default, null, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.renderMask(), this.renderPopupContent()));
     }
-
     return null;
   };
-
   Trigger.prototype.render = function () {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.renderChildComponent(), this.renderPopupComponent());
   };
-
   Trigger.defaultProps = {
     placement: 'Top',
     trigger: 'hover',
@@ -662,6 +517,5 @@ function (_super) {
   };
   return Trigger;
 }(_react.default.Component);
-
 var _default = Trigger;
 exports.default = _default;