@autobest-ui/components 2.3.0 → 2.4.0

package/esm/message/renderMessage.js

@@ -0,0 +1,137 @@
+var __extends = this && this.__extends || function () {
+  var _extendStatics = function extendStatics(d, b) {
+    _extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) {
+        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 __());
+  };
+}();
+import ReactDOM from 'react-dom';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
+import classNames from 'classnames';
+import React from 'react';
+import { getElementSize, isEmptyArray } from '@autobest-ui/utils';
+var container = null;
+/**
+ * Transition的组件，绑定其事件，处理收缩问题
+ */
+var TransitionContent = /** @class */function (_super) {
+  __extends(TransitionContent, _super);
+  function TransitionContent() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+    _this.removeContainer = function () {
+      if (container) {
+        document.body.removeChild(container);
+        container = null;
+      }
+    };
+    _this.onEnter = function (element) {
+      if (!element) {
+        return;
+      }
+      var height = getElementSize(element).height;
+      _this.elementContentHeight = height;
+      element.style.height = '0';
+    };
+    _this.onEntering = function (element) {
+      if (element) {
+        element.style.height = "".concat(_this.elementContentHeight, "px");
+      }
+    };
+    _this.onEntered = function (element) {
+      if (element) {
+        element.style.height = '';
+      }
+    };
+    _this.onExit = function (element) {
+      if (!element) {
+        return;
+      }
+      var height = getElementSize(element).height;
+      element.style.height = "".concat(height, "px");
+    };
+    _this.onExiting = function (element) {
+      if (element) {
+        element.style.height = '0';
+      }
+    };
+    _this.onExited = function (item) {
+      if (isEmptyArray(_this.props.options)) {
+        _this.removeContainer();
+      }
+      if (item.onDestroy) {
+        item.onDestroy();
+      }
+    };
+    return _this;
+  }
+  TransitionContent.prototype.componentWillUnmount = function () {
+    this.removeContainer();
+  };
+  TransitionContent.prototype.render = function () {
+    var _this = this;
+    var _a = this.props,
+      options = _a.options,
+      prefixCls = _a.prefixCls;
+    return /*#__PURE__*/React.createElement(TransitionGroup, {
+      component: null
+    }, options.map(function (item) {
+      var content = item.content,
+        onClose = item.onClose,
+        contentClassName = item.contentClassName;
+      return /*#__PURE__*/React.createElement(CSSTransition, {
+        key: item.id,
+        timeout: 300,
+        classNames: "".concat(prefixCls, "-fade"),
+        onEnter: _this.onEnter,
+        onEntering: _this.onEntering,
+        onEntered: _this.onEntered,
+        onExit: _this.onExit,
+        onExiting: _this.onExiting,
+        onExited: function onExited() {
+          return _this.onExited(item);
+        },
+        appear: true
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-notice")
+      }, /*#__PURE__*/React.createElement("div", {
+        className: classNames("".concat(prefixCls, "-content"), contentClassName)
+      }, content, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-close"),
+        onClick: function onClick() {
+          return onClose(item.id);
+        }
+      }, "\xD7"))));
+    }));
+  };
+  return TransitionContent;
+}(React.Component);
+export default function renderMessage(props) {
+  var prefixCls = props.prefixCls,
+    options = props.options,
+    className = props.className;
+  // 创建容器
+  if (!container) {
+    container = document.createElement('div');
+    container.setAttribute('class', classNames(className, "".concat(prefixCls, "-container")));
+    document.body.appendChild(container);
+  }
+  ReactDOM.render( /*#__PURE__*/React.createElement(TransitionContent, {
+    options: options,
+    prefixCls: prefixCls
+  }), container);
+}

package/esm/message/style/index.css

@@ -1 +1 @@
-.ab-message-container{position:fixed;left:0;bottom:0}.ab-message-content{display:flex;align-items:center;justify-content:space-between;max-width:calc(100vw - .3rem);border-radius:.02rem;margin:.08rem .15rem;padding:.08rem;background-color:#333;color:#fff;box-shadow:0 .04rem .08rem #00000059;transition:opacity .3s}.ab-message-close{display:flex;align-items:center;justify-content:center;cursor:pointer;width:.2rem;height:.2rem;font-size:.2rem;margin-left:.08rem;color:#b0b0b0}.ab-message-close:hover{color:#fff}.ab-message-fade-appear,.ab-message-fade-enter{opacity:0}.ab-message-fade-appear-active,.ab-message-fade-enter-active,.ab-message-fade-enter-done,.ab-message-fade-exit{opacity:1}.ab-message-fade-exit-active{opacity:0}.ab-message-fade-exit-done{display:none}@media only screen and (max-width:767px){.ab-message-content{width:calc(100vw - .3rem);margin:.08rem .15rem}}
+.ab-message-container{position:fixed}.ab-message-notice{overflow:hidden;transition:.3s ease-out}.ab-message-content{display:flex;align-items:center;justify-content:space-between;max-width:calc(100vw - .3rem);margin:.05rem .15rem;padding:.08rem;border-radius:.02rem;background-color:#333;color:#fff;box-shadow:0 .01rem .05rem #333}.ab-message-close{display:flex;align-items:center;justify-content:center;cursor:pointer;width:.2rem;height:.2rem;font-size:.2rem;margin-left:.08rem;color:#b0b0b0}.ab-message-close:hover{color:#fff}.ab-message-fade-appear,.ab-message-fade-enter{opacity:0}.ab-message-fade-appear-active,.ab-message-fade-enter-active,.ab-message-fade-enter-done,.ab-message-fade-exit{opacity:1}.ab-message-fade-exit-active{opacity:0}.ab-message-fade-exit-done{display:none}@media only screen and (max-width:767px){.ab-message-content{width:calc(100vw - .3rem);margin:.08rem .15rem}}

package/esm/modal/Title.js

@@ -1,10 +1,8 @@
 import React from 'react';
-
 function Times(_a) {
   var prefixCls = _a.prefixCls,
-      onClose = _a.onClose,
-      closable = _a.closable;
-
+    onClose = _a.onClose,
+    closable = _a.closable;
   if (closable) {
     return /*#__PURE__*/React.createElement("span", {
       className: "".concat(prefixCls, "-times"),
@@ -23,16 +21,13 @@ function Times(_a) {
       d: "M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
     })));
   }
-
   return null;
 }
-
 function Title(_a) {
   var title = _a.title,
-      closable = _a.closable,
-      prefixCls = _a.prefixCls,
-      onClose = _a.onClose;
-
+    closable = _a.closable,
+    prefixCls = _a.prefixCls,
+    onClose = _a.onClose;
   if (title) {
     return /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-title")
@@ -42,12 +37,10 @@ function Title(_a) {
       onClose: onClose
     }));
   }
-
   return /*#__PURE__*/React.createElement(Times, {
     prefixCls: prefixCls,
     closable: closable,
     onClose: onClose
   });
 }
-
 export default /*#__PURE__*/React.memo(Title);

package/esm/modal/getPopupLocation.js

@@ -1,22 +1,20 @@
 import { getAvailSize, getElementSize } from '@autobest-ui/utils';
 export default function getPopupLocation(_a) {
   var placement = _a.placement,
-      element = _a.element,
-      targetTop = _a.targetTop,
-      popupLimitSpacing = _a.popupLimitSpacing;
+    element = _a.element,
+    targetTop = _a.targetTop,
+    popupLimitSpacing = _a.popupLimitSpacing;
   var clientSize = getAvailSize(true);
   var popupSize = getElementSize(element);
   var doubleLimit = popupLimitSpacing * 2;
   var height = popupSize.height > clientSize.height - doubleLimit ? "".concat(clientSize.height - doubleLimit, "px") : '';
-
   if (placement === 'top') {
     return {
       top: targetTop,
       height: height
     };
-  } // 默认center
-
-
+  }
+  // 默认center
   return {
     height: height
   };

package/esm/modal/index.js

@@ -9,23 +9,17 @@ var __extends = this && this.__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 __());
   };
 }();
-
 import React from 'react';
 import { CSSTransition } from 'react-transition-group';
 import classNames from 'classnames';
@@ -35,7 +29,6 @@ import Mask from '../mask';
 import Title from './Title';
 import Affix from './Affix';
 import getPopupLocation from './getPopupLocation';
-
 function getId() {
   try {
     return new Date().getTime();
@@ -43,15 +36,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;
@@ -61,114 +49,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 (!contains(popupEl, target) && (maskEl === target || target === popupEl.parentNode) || notCloseElement && !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 (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 = getPopupLocation({
-        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 () {
@@ -178,7 +140,6 @@ function (_super) {
           var firstChildHeight = 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 {
@@ -187,55 +148,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) {
@@ -244,129 +197,101 @@ function (_super) {
         isUserOperated: true
       };
     }
-
     return null;
   };
-
   Modal.prototype.componentDidMount = function () {
     this.scrollBarSize = getScrollBarSize();
     this.componentDidUpdate();
   };
-
   Modal.prototype.getSnapshotBeforeUpdate = function () {
     var popupEl = this.getPopupDomNode();
-
     if (this.props.visible && popupEl) {
       var displayValue = getStyle(popupEl, 'display');
-
       if (displayValue === 'none') {
         return null;
       }
-
       return 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 = isTouchScreen();
-
     if (!this.clickOutsideHandler && !touch) {
       currentDocument = window.document;
       this.clickOutsideHandler = addEventListener(currentDocument, 'mousedown', this.onDocumentClick);
-    } // always hide on mobile
-
-
+    }
+    // always hide on mobile
     if (!this.touchOutsideHandler && touch) {
       currentDocument = currentDocument || window.document;
       this.touchOutsideHandler = addEventListener(currentDocument, 'touchstart', this.onDocumentClick);
     }
-
     if (!prevPopupSize) {
       return;
     }
-
     var popupEl = this.getPopupDomNode();
-
     if (popupEl && prevPopupSize) {
       var _a = 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.createElement("div", {
       className: classNames(cls, className, (_a = {}, _a["".concat(cls, "-center")] = placement === 'center', _a["".concat(this.prefixCls, "-hidden")] = !visible && !this.state.isUserOperated, _a))
@@ -395,12 +320,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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Mask, {
         visible: visible,
@@ -409,7 +332,6 @@ function (_super) {
         ref: this.maskRef
       }), this.renderPopup());
     }
-
     if (visible || this.popupRef.current) {
       return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Mask, {
         visible: visible,
@@ -417,13 +339,11 @@ function (_super) {
         ref: this.maskRef
       }), this.renderPopup()));
     }
-
     return null;
   };
-
   Modal.Affix = Affix;
-  Modal.cacheOpenedIds = []; // 默认值
-
+  Modal.cacheOpenedIds = [];
+  // 默认值
   Modal.defaultProps = {
     placement: 'center',
     width: '6.5rem',
@@ -436,5 +356,4 @@ function (_super) {
   };
   return Modal;
 }(React.Component);
-
 export default Modal;