@autobest-ui/components 2.2.1 → 2.4.0

package/lib/modal/index.js

@@ -1,30 +1,19 @@
 "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 _reactTransitionGroup = require("react-transition-group");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _utils = require("@autobest-ui/utils");
-
 var _portal = _interopRequireDefault(require("../portal"));
-
 var _mask = _interopRequireDefault(require("../mask"));
-
 var _Title = _interopRequireDefault(require("./Title"));
-
 var _Affix = _interopRequireDefault(require("./Affix"));
-
 var _getPopupLocation = _interopRequireDefault(require("./getPopupLocation"));
-
 var __extends = void 0 && (void 0).__extends || function () {
   var _extendStatics = function extendStatics(d, b) {
     _extendStatics = Object.setPrototypeOf || {
@@ -36,23 +25,17 @@ 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 __());
   };
 }();
-
 function getId() {
   try {
     return new Date().getTime();
@@ -60,15 +43,10 @@ function getId() {
     return Math.random();
   }
 }
-
-var Modal =
-/** @class */
-function (_super) {
+var Modal = /** @class */function (_super) {
   __extends(Modal, _super);
-
   function Modal(props) {
     var _this = _super.call(this, props) || this;
-
     _this.openId = getId();
     _this.prefixCls = 'ab-modal';
     _this.scrollBarSize = 0;
@@ -78,114 +56,88 @@ function (_super) {
      * 全局事件回调
      * @param event
      */
-
     _this.onDocumentClick = function (event) {
       if (!_this.props.visible) {
         return;
       }
-
       var target = event.target;
-
       var popupEl = _this.getPopupDomNode();
-
       var maskEl = _this.getMaskDomNode();
-
       if (!target || !popupEl || !maskEl) {
         return;
       }
-
       var notCloseElement;
-
       if (_this.props.getNotCloseElement) {
         notCloseElement = _this.props.getNotCloseElement();
-      } // 排除操作当前元素
-
-
+      }
+      // 排除操作当前元素
       if (!(0, _utils.contains)(popupEl, target) && (maskEl === target || target === popupEl.parentNode) || notCloseElement && !(0, _utils.contains)(notCloseElement, target)) {
         _this.onClose(target, true);
       }
     };
-
     _this.clearPopupTimer = function (popupEl) {
       clearTimeout(_this.popupTimer);
-
       var element = popupEl || _this.getPopupDomNode();
-
       if (element) {
         element.style.visibility = '';
       }
     };
-
     _this.onClose = function (event, isOutsideClick) {
       if (isOutsideClick === void 0) {
         isOutsideClick = false;
       }
-
       var _a = _this.props,
-          closable = _a.closable,
-          maskClosable = _a.maskClosable,
-          onClose = _a.onClose,
-          name = _a.name;
-
+        closable = _a.closable,
+        maskClosable = _a.maskClosable,
+        onClose = _a.onClose,
+        name = _a.name;
       if ((isOutsideClick && maskClosable || !isOutsideClick && closable) && onClose) {
         onClose(event, name);
       }
     };
-
     _this.onEnter = function (popupEl) {
       var element = popupEl || _this.getPopupDomNode();
-
       if (!element) {
         return;
       }
-
       if (element && element.parentNode) {
         var parentNode = element.parentNode;
         parentNode.style.display = 'block';
       }
-
       _this.clearPopupTimer(element);
-
       var _a = _this.props,
-          placement = _a.placement,
-          hiddenScroll = _a.hiddenScroll,
-          targetTop = _a.top,
-          popupLimitSpacing = _a.popupLimitSpacing;
-
+        placement = _a.placement,
+        hiddenScroll = _a.hiddenScroll,
+        targetTop = _a.top,
+        popupLimitSpacing = _a.popupLimitSpacing;
       if (hiddenScroll) {
         Modal.cacheOpenedIds.push(_this.openId);
         var currentDocument = window.document.body;
         currentDocument.style.overflow = 'hidden';
-
         if ((0, _utils.hasVerticalScrollbar)(_this.scrollBarSize)) {
           currentDocument.style.paddingRight = "".concat(_this.scrollBarSize, "px");
-
           if (element && element.parentNode) {
             var parentNode = element.parentNode;
             parentNode.style.paddingRight = "".concat(_this.scrollBarSize, "px");
           }
         }
       }
-
       var _b = (0, _getPopupLocation.default)({
-        placement: placement,
-        element: element,
-        targetTop: targetTop,
-        popupLimitSpacing: popupLimitSpacing
-      }),
-          top = _b.top,
-          height = _b.height;
-
+          placement: placement,
+          element: element,
+          targetTop: targetTop,
+          popupLimitSpacing: popupLimitSpacing
+        }),
+        top = _b.top,
+        height = _b.height;
       if (top) {
         element.style.top = top;
       }
-
       if (height) {
         element.style.height = height;
       }
-
-      var isFixedTitle = _this.props.isFixedTitle; // 固定title
-
+      var isFixedTitle = _this.props.isFixedTitle;
+      // 固定title
       if (isFixedTitle) {
         // 需要延迟执行
         _this.affixTimer = setTimeout(function () {
@@ -195,7 +147,6 @@ function (_super) {
           var firstChildHeight = (0, _utils.getStyleValue)(firstChild, 'height');
           lastChild.style.overflow = 'auto';
           var popupHeight = height || _this.props.height;
-
           if (!popupHeight || popupHeight === 'auto') {
             lastChild.style.maxHeight = "calc(100vh - .3rem - ".concat(placement === 'top' && top ? top : '0px', " - ").concat(firstChildHeight, "px)");
           } else {
@@ -204,55 +155,47 @@ function (_super) {
         });
       }
     };
-
     _this.onEntered = function () {
       var _a = _this.props,
-          onOpened = _a.onOpened,
-          name = _a.name;
-
+        onOpened = _a.onOpened,
+        name = _a.name;
       if (onOpened) {
         onOpened(name);
       }
     };
-
     _this.onExited = function (element) {
       clearTimeout(_this.affixTimer);
       var _a = _this.props,
-          hiddenScroll = _a.hiddenScroll,
-          onDestroy = _a.onDestroy,
-          name = _a.name;
+        hiddenScroll = _a.hiddenScroll,
+        onDestroy = _a.onDestroy,
+        name = _a.name;
       var currentDocument = window.document.body;
-
       if (hiddenScroll && currentDocument) {
         // 删除指定id
         Modal.cacheOpenedIds = Modal.cacheOpenedIds.filter(function (id) {
           return id !== _this.openId;
-        }); // 如果都隐藏了，才清除body样式
-
+        });
+        // 如果都隐藏了，才清除body样式
         if (Modal.cacheOpenedIds.length === 0) {
           currentDocument.style.overflow = '';
           currentDocument.style.paddingRight = '';
         }
       }
-
       if (element && element.parentNode) {
         var parentNode = element.parentNode;
         parentNode.style.display = 'none';
         parentNode.style.paddingRight = '';
       }
-
       if (onDestroy) {
         onDestroy(name);
       }
     };
-
     _this.state = {
       isUserOperated: false,
       cacheVisible: props.visible
     };
     return _this;
   }
-
   Modal.getDerivedStateFromProps = function (nextProps, preState) {
     // isInsertNode为true时，只判断isUserOperated为false的情况
     if (nextProps.isInsertNode && !preState.isUserOperated && preState.cacheVisible !== nextProps.visible) {
@@ -261,129 +204,101 @@ function (_super) {
         isUserOperated: true
       };
     }
-
     return null;
   };
-
   Modal.prototype.componentDidMount = function () {
     this.scrollBarSize = (0, _utils.getScrollBarSize)();
     this.componentDidUpdate();
   };
-
   Modal.prototype.getSnapshotBeforeUpdate = function () {
     var popupEl = this.getPopupDomNode();
-
     if (this.props.visible && popupEl) {
       var displayValue = (0, _utils.getStyle)(popupEl, 'display');
-
       if (displayValue === 'none') {
         return null;
       }
-
       return (0, _utils.getElementSize)(popupEl);
     }
-
     return null;
   };
-
   Modal.prototype.componentDidUpdate = function (_prevProps, _prevState, prevPopupSize) {
     var _this = this;
-
     if (!this.props.visible) {
       this.clearOutsideHandler();
       return;
     }
-
     var currentDocument;
     var touch = (0, _utils.isTouchScreen)();
-
     if (!this.clickOutsideHandler && !touch) {
       currentDocument = window.document;
       this.clickOutsideHandler = (0, _utils.addEventListener)(currentDocument, 'mousedown', this.onDocumentClick);
-    } // always hide on mobile
-
-
+    }
+    // always hide on mobile
     if (!this.touchOutsideHandler && touch) {
       currentDocument = currentDocument || window.document;
       this.touchOutsideHandler = (0, _utils.addEventListener)(currentDocument, 'touchstart', this.onDocumentClick);
     }
-
     if (!prevPopupSize) {
       return;
     }
-
     var popupEl = this.getPopupDomNode();
-
     if (popupEl && prevPopupSize) {
       var _a = (0, _utils.getElementSize)(popupEl),
-          width = _a.width,
-          height = _a.height;
-
+        width = _a.width,
+        height = _a.height;
       if (prevPopupSize.width !== width || prevPopupSize.height !== height) {
         this.clearPopupTimer(popupEl);
         popupEl.style.visibility = 'hidden';
         this.popupTimer = setTimeout(function () {
           _this.onEnter(popupEl);
-
           popupEl.style.visibility = '';
         });
       }
     }
   };
-
   Modal.prototype.componentWillUnmount = function () {
     // remove绑定事件
     this.clearOutsideHandler();
     this.onExited();
     clearTimeout(this.affixTimer);
   };
-
   Modal.prototype.clearOutsideHandler = function () {
     this.clearPopupTimer();
-
     if (this.clickOutsideHandler) {
       this.clickOutsideHandler.remove();
       this.clickOutsideHandler = null;
     }
-
     if (this.touchOutsideHandler) {
       this.touchOutsideHandler.remove();
       this.touchOutsideHandler = null;
     }
   };
-
   Modal.prototype.getPopupDomNode = function () {
     if (this.popupRef && this.popupRef.current) {
       return this.popupRef.current;
     }
-
     return null;
   };
-
   Modal.prototype.getMaskDomNode = function () {
     if (this.maskRef && this.maskRef.current) {
       return this.maskRef.current;
     }
-
     return null;
   };
-
   Modal.prototype.renderPopup = function () {
     var _a;
-
     var _this = this;
-
     var cls = this.prefixCls;
     var _b = this.props,
-        visible = _b.visible,
-        children = _b.children,
-        width = _b.width,
-        height = _b.height,
-        className = _b.className,
-        closable = _b.closable,
-        title = _b.title,
-        placement = _b.placement,
-        top = _b.top;
+      visible = _b.visible,
+      children = _b.children,
+      width = _b.width,
+      height = _b.height,
+      className = _b.className,
+      closable = _b.closable,
+      title = _b.title,
+      placement = _b.placement,
+      top = _b.top;
     var maxHeight = "calc(100vh - .3rem - ".concat(placement === 'top' && top ? top : '0px', ")");
     return /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)(cls, className, (_a = {}, _a["".concat(cls, "-center")] = placement === 'center', _a["".concat(this.prefixCls, "-hidden")] = !visible && !this.state.isUserOperated, _a))
@@ -412,12 +327,10 @@ function (_super) {
       }), children);
     }));
   };
-
   Modal.prototype.render = function () {
     var _a;
-
-    var visible = this.props.visible; // 插入元素，不使用传送门， 和当前元素同级
-
+    var visible = this.props.visible;
+    // 插入元素，不使用传送门， 和当前元素同级
     if (this.props.isInsertNode) {
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_mask.default, {
         visible: visible,
@@ -426,7 +339,6 @@ function (_super) {
         ref: this.maskRef
       }), this.renderPopup());
     }
-
     if (visible || this.popupRef.current) {
       return /*#__PURE__*/_react.default.createElement(_portal.default, null, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_mask.default, {
         visible: visible,
@@ -434,13 +346,11 @@ function (_super) {
         ref: this.maskRef
       }), this.renderPopup()));
     }
-
     return null;
   };
-
   Modal.Affix = _Affix.default;
-  Modal.cacheOpenedIds = []; // 默认值
-
+  Modal.cacheOpenedIds = [];
+  // 默认值
   Modal.defaultProps = {
     placement: 'center',
     width: '6.5rem',
@@ -453,6 +363,5 @@ function (_super) {
   };
   return Modal;
 }(_react.default.Component);
-
 var _default = Modal;
 exports.default = _default;

package/lib/modal/style/index.css

@@ -1 +1 @@
-.ab-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:101;overflow:auto;outline:0}.ab-modal.ab-modal-center{text-align:center}.ab-modal.ab-modal-center:before{display:inline-block;width:0;height:100%;vertical-align:middle;content:""}.ab-modal.ab-modal-center .ab-modal-content{top:0;text-align:left;display:inline-block;vertical-align:middle}.ab-modal-content{position:relative;background-color:#fff;max-width:calc(100vw - .3rem);margin-left:auto;margin-right:auto;overflow:auto;-webkit-overflow-scrolling:touch;transition:transform .3s,opacity .3s cubic-bezier(.7,.3,.1,1);z-index:101}.ab-modal-title{position:relative;width:100%}.ab-modal-title .ab-modal-times{top:50%;transform:translateY(-50%)}.ab-modal-times{position:absolute;top:.12rem;right:.12rem;font-size:.15rem;color:#b0b0b0;cursor:pointer}.ab-modal-times svg{display:block}.ab-modal-times:hover{color:#333}.ab-modal-hidden{display:none}@media only screen and (max-width:767px){.ab-modal-content{width:calc(100vw - .3rem)}}.ab-modal-fade-appear,.ab-modal-fade-enter{transform:translate3d(0,-30px,0);opacity:0}.ab-modal-fade-appear-active,.ab-modal-fade-enter-active{transform:translateZ(0);opacity:1}.ab-modal-fade-enter-done{transform:translateZ(0);opacity:1}.ab-modal-fade-exit{transform:translateZ(0);opacity:1}.ab-modal-fade-exit-active{transform:translate3d(0,-30px,0);opacity:0}.ab-modal-fade-exit-done{display:none}
+.ab-mask{position:fixed;top:0;left:0;z-index:101;width:100%;height:100%;background-color:rgba(0,0,0,.45);transition:opacity .4s cubic-bezier(.7,.3,.1,1)}.ab-mask-fade-appear,.ab-mask-fade-enter{opacity:0}.ab-mask-fade-appear-active,.ab-mask-fade-enter-active,.ab-mask-fade-enter-done,.ab-mask-fade-exit{opacity:1}.ab-mask-fade-exit-active{opacity:0}.ab-mask-fade-exit-done{display:none}.ab-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:101;overflow:auto;outline:0}.ab-modal.ab-modal-center{text-align:center}.ab-modal.ab-modal-center::before{display:inline-block;width:0;height:100%;vertical-align:middle;content:""}.ab-modal.ab-modal-center .ab-modal-content{top:0;text-align:left;display:inline-block;vertical-align:middle}.ab-modal-content{position:relative;background-color:#fff;max-width:calc(100vw - .3rem);margin-left:auto;margin-right:auto;overflow:auto;-webkit-overflow-scrolling:touch;transition:transform .3s,opacity .3s cubic-bezier(.7,.3,.1,1);z-index:101}.ab-modal-title{position:relative;width:100%}.ab-modal-title .ab-modal-times{top:50%;transform:translateY(-50%)}.ab-modal-times{position:absolute;top:.12rem;right:.12rem;font-size:.15rem;color:#b0b0b0;cursor:pointer}.ab-modal-times svg{display:block}.ab-modal-times:hover{color:#333}.ab-modal-hidden{display:none}@media only screen and (max-width:767px){.ab-modal-content{width:calc(100vw - .3rem)}}.ab-modal-fade-appear,.ab-modal-fade-enter{transform:translate3d(0,-30px,0);opacity:0}.ab-modal-fade-appear-active,.ab-modal-fade-enter-active,.ab-modal-fade-enter-done,.ab-modal-fade-exit{transform:translateZ(0);opacity:1}.ab-modal-fade-exit-active{transform:translate3d(0,-30px,0);opacity:0}.ab-modal-fade-exit-done{display:none}