@autobest-ui/components 2.3.0 → 2.4.0

package/lib/message/index.js

@@ -1,142 +1,105 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Message;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _reactTransitionGroup = require("react-transition-group");
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
 var _utils = require("@autobest-ui/utils");
-
+var _renderMessage = _interopRequireDefault(require("./renderMessage"));
 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);
 };
-
-var defaultConfig = {
-  expires: 3000,
-  maxCount: 3,
-  width: '6rem',
-  height: 'auto',
-  onDestroy: function onDestroy() {}
-};
 var prefixCls = 'ab-message';
-var container = null;
-var items = [];
+var options = [];
 var id = 0;
-
-function Message(config) {
+// 全局配置的默认值
+var currentConfig = {
+  expires: 3000,
+  maxCount: 3
+};
+function Message(props) {
   if (!_utils.canUseDOM) {
     throw new Error('Message use client!');
   }
-
   var cachedId = id++;
-
-  var currentConfig = __assign(__assign({}, defaultConfig), config);
-
-  if (!container) {
-    container = document.createElement('div');
-    container.setAttribute('class', (0, _classnames.default)(currentConfig.className, "".concat(prefixCls, "-container")));
-    document.body.appendChild(container);
-  }
-
-  if (items.length >= currentConfig.maxCount) {
-    close(items[0].id);
+  function render() {
+    (0, _renderMessage.default)({
+      prefixCls: prefixCls,
+      className: currentConfig.className,
+      options: options
+    });
   }
-
-  function close(currentId) {
-    var index = items.findIndex(function (item) {
+  /**
+   * 关闭指定的一条message
+   * @param currentId
+   */
+  function _onClose(currentId) {
+    if ((0, _utils.isEmptyArray)(options)) {
+      return;
+    }
+    var index = options.findIndex(function (item) {
       return item.id === currentId;
     });
-
     if (index >= 0) {
-      clearTimeout(items[index].timer);
-      items.splice(index, 1);
-    } // 关闭需要再渲染一次
-
-
+      clearTimeout(options[index].timer);
+      options.splice(index, 1);
+      // 关闭需要再渲染一次
+      render();
+    }
+  }
+  /**
+   * 关闭所有message
+   */
+  function onCloseAll() {
+    if ((0, _utils.isEmptyArray)(options)) {
+      return;
+    }
+    options.forEach(function (child) {
+      clearTimeout(child.timer);
+    });
+    options = [];
     render();
   }
-
-  function _onExited(currentId) {
-    currentConfig.onDestroy(currentId);
-  } // 渲染组件
-
-
-  function render() {
-    var cls = prefixCls;
-
-    _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.TransitionGroup, {
-      component: null
-    }, items.map(function (item) {
-      var _a = item.currentConfig,
-          content = _a.content,
-          width = _a.width,
-          height = _a.height,
-          contentClassName = _a.contentClassName;
-      var style = {
-        width: width,
-        height: height
-      };
-      return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
-        key: item.id,
-        timeout: 300,
-        classNames: "".concat(cls, "-fade"),
-        onExited: function onExited() {
-          _onExited(item.id);
-        },
-        appear: true
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)("".concat(cls, "-content"), contentClassName),
-        style: style
-      }, content, /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(cls, "-close"),
-        onClick: function onClick() {
-          close(item.id);
-        }
-      }, "\xD7")));
-    })), container);
+  /**
+   * 超出条数，将删除最旧的那条message
+   */
+  if (options.length >= currentConfig.maxCount) {
+    _onClose(options[0].id);
   }
-
+  // 每条message对象
   var item = {
-    currentConfig: currentConfig,
+    content: props.content,
+    contentClassName: props.contentClassName,
     id: cachedId,
+    onDestroy: props.onDestroy,
+    onClose: _onClose,
     timer: null
   };
-  items.push(item);
-  render(); // render后设置自动关闭功能，把定时器绑定到列表
-
+  // push
+  options.push(item);
+  // 开始渲染
+  render();
+  // render后设置自动关闭功能，把定时器绑定到列表
   item.timer = setTimeout(function () {
-    close(cachedId);
-  }, currentConfig.expires);
-
-  function destroy() {
-    items.forEach(function (child) {
-      clearTimeout(child.timer);
-    });
-    items = [];
-    render();
-  }
-
-  return destroy;
-}
+    _onClose(cachedId);
+  }, props.expires || currentConfig.expires);
+  return {
+    onCloseAll: onCloseAll,
+    onClose: function onClose() {
+      return _onClose(cachedId);
+    }
+  };
+}
+Message.setConfig = function (config) {
+  currentConfig = __assign(__assign({}, currentConfig), config);
+};

package/lib/message/renderMessage.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface MessageItem {
+    content: React.ReactNode;
+    contentClassName?: string;
+    id: number;
+    onClose?: (id: number) => void;
+    onDestroy?: () => void;
+}
+interface TransitionContentProps {
+    prefixCls: string;
+    options: MessageItem[];
+}
+export interface RenderMessageProps extends TransitionContentProps {
+    className?: string;
+}
+export default function renderMessage(props: RenderMessageProps): void;
+export {};

package/lib/message/renderMessage.js

@@ -0,0 +1,144 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = renderMessage;
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _reactTransitionGroup = require("react-transition-group");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("@autobest-ui/utils");
+var __extends = void 0 && (void 0).__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 __());
+  };
+}();
+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 = (0, _utils.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 = (0, _utils.getElementSize)(element).height;
+      element.style.height = "".concat(height, "px");
+    };
+    _this.onExiting = function (element) {
+      if (element) {
+        element.style.height = '0';
+      }
+    };
+    _this.onExited = function (item) {
+      if ((0, _utils.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.default.createElement(_reactTransitionGroup.TransitionGroup, {
+      component: null
+    }, options.map(function (item) {
+      var content = item.content,
+        onClose = item.onClose,
+        contentClassName = item.contentClassName;
+      return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.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.default.createElement("div", {
+        className: "".concat(prefixCls, "-notice")
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)("".concat(prefixCls, "-content"), contentClassName)
+      }, content, /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(prefixCls, "-close"),
+        onClick: function onClick() {
+          return onClose(item.id);
+        }
+      }, "\xD7"))));
+    }));
+  };
+  return TransitionContent;
+}(_react.default.Component);
+function renderMessage(props) {
+  var prefixCls = props.prefixCls,
+    options = props.options,
+    className = props.className;
+  // 创建容器
+  if (!container) {
+    container = document.createElement('div');
+    container.setAttribute('class', (0, _classnames.default)(className, "".concat(prefixCls, "-container")));
+    document.body.appendChild(container);
+  }
+  _reactDom.default.render( /*#__PURE__*/_react.default.createElement(TransitionContent, {
+    options: options,
+    prefixCls: prefixCls
+  }), container);
+}

package/lib/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/lib/modal/Affix.js

@@ -1,16 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Affix;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _portal = _interopRequireDefault(require("../portal"));
-
 function Affix(props) {
   return /*#__PURE__*/_react.default.createElement(_portal.default, {
     getContainer: props.getContainer

package/lib/modal/Title.js

@@ -1,19 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("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.default.createElement("span", {
       className: "".concat(prefixCls, "-times"),
@@ -32,16 +28,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.default.createElement("div", {
       className: "".concat(prefixCls, "-title")
@@ -51,14 +44,11 @@ function Title(_a) {
       onClose: onClose
     }));
   }
-
   return /*#__PURE__*/_react.default.createElement(Times, {
     prefixCls: prefixCls,
     closable: closable,
     onClose: onClose
   });
 }
-
 var _default = /*#__PURE__*/_react.default.memo(Title);
-
 exports.default = _default;

package/lib/modal/getPopupLocation.js

@@ -4,27 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = getPopupLocation;
-
 var _utils = require("@autobest-ui/utils");
-
 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 = (0, _utils.getAvailSize)(true);
   var popupSize = (0, _utils.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
   };