@autobest-ui/components 2.3.0 → 2.5.0

package/esm/link-list/index.js

@@ -9,53 +9,38 @@ 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 classNames from 'classnames';
 import { isEmptyObject } from '@autobest-ui/utils';
 import Popover from '../popover';
-
-var LinkList =
-/** @class */
-function (_super) {
+var LinkList = /** @class */function (_super) {
   __extends(LinkList, _super);
-
   function LinkList(props) {
     var _this = _super.call(this, props) || this;
-
     _this.prefixCls = 'ab-link-list';
-
     _this.onVisibleChange = function () {
       _this.setState({
         visible: !_this.state.visible
       });
     };
-
     _this.state = {
       visible: props.defaultVisible
     };
     return _this;
   }
-
   LinkList.prototype.renderItemContent = function (item) {
     var _a;
-
     var hrefTarget = this.props.hrefTarget;
     var cls = this.prefixCls;
     return item.url ? /*#__PURE__*/React.createElement("a", {
@@ -68,13 +53,11 @@ function (_super) {
       className: classNames((_a = {}, _a["".concat(cls, "-hidden")] = item.isHidden, _a))
     }, "".concat(item.name, " "));
   };
-
   LinkList.prototype.renderItem = function (item) {
     // 判断hiddenPopover和是否有具体的popover参数
     if (this.props.hiddenPopover || isEmptyObject(item.subInfo)) {
       return this.renderItemContent(item);
     }
-
     var subInfo = item.subInfo;
     var cls = this.prefixCls;
     return /*#__PURE__*/React.createElement(Popover, {
@@ -95,37 +78,32 @@ function (_super) {
       mouseEnterDelay: 0.1
     }, this.renderItemContent(item));
   };
-
   LinkList.prototype.renderContent = function () {
     var _this = this;
-
     var _a = this.props,
-        hiddenPopover = _a.hiddenPopover,
-        options = _a.options; // 隐藏popover和忽略分列
-
+      hiddenPopover = _a.hiddenPopover,
+      options = _a.options;
+    // 隐藏popover和忽略分列
     if (hiddenPopover) {
       return options.map(function (item) {
         return _this.renderItemContent(item);
       });
-    } // 忽略分列
-
-
+    }
+    // 忽略分列
     return options.map(function (item) {
       return _this.renderItem(item);
     });
   };
-
   LinkList.prototype.render = function () {
     var _a, _b;
-
     var cls = this.prefixCls;
     var visible = this.state.visible;
     var _c = this.props,
-        className = _c.className,
-        title = _c.title,
-        extraTopElement = _c.extraTopElement,
-        extraBottomElement = _c.extraBottomElement,
-        columnCount = _c.columnCount;
+      className = _c.className,
+      title = _c.title,
+      extraTopElement = _c.extraTopElement,
+      extraBottomElement = _c.extraBottomElement,
+      columnCount = _c.columnCount;
     return /*#__PURE__*/React.createElement("div", {
       className: classNames(cls, className)
     }, title ? /*#__PURE__*/React.createElement("div", {
@@ -139,7 +117,6 @@ function (_super) {
       className: classNames("".concat(cls, "-content"), "".concat(cls, "-col").concat(columnCount))
     }, this.renderContent()), extraBottomElement));
   };
-
   LinkList.defaultProps = {
     className: '',
     hrefTarget: '_self',
@@ -150,5 +127,4 @@ function (_super) {
   };
   return LinkList;
 }(React.Component);
-
 export default LinkList;

package/esm/loading/index.js

@@ -2,63 +2,51 @@ var __assign = this && this.__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);
 };
-
 import React from 'react';
 import classNames from 'classnames';
 import ReactDOM from 'react-dom';
 import { canUseDOM } from '@autobest-ui/utils';
-import LoadingIcon from '../loading-icon'; // 缓存创建的loading元素
-
+import LoadingIcon from '../loading-icon';
+// 缓存创建的loading元素
 var loadingElement = null;
 var loadingTimer = null;
 var closeTimer = null;
 var prevCustomIcon = null;
 var cls = 'ab-loading';
-
 function getLoadingContainer(customIcon, className) {
   return /*#__PURE__*/React.createElement("div", {
     className: classNames("".concat(cls, "-wrap"), className)
   }, customIcon || /*#__PURE__*/React.createElement(LoadingIcon, {
     className: "".concat(cls, "-content")
   }));
-} // openIds 容器
-
-
-var openIds = []; // closeIds 容器
-
+}
+// openIds 容器
+var openIds = [];
+// closeIds 容器
 var closeIds = [];
-
 function createLoading(customIcon, className) {
   loadingElement = document.createElement('div');
   document.body.appendChild(loadingElement);
   ReactDOM.render(getLoadingContainer(customIcon, className), loadingElement);
 }
-
-var Loading =
-/** @class */
-function () {
+var Loading = /** @class */function () {
   function Loading() {}
-
   Loading.open = function (config) {
     if (!canUseDOM) {
       return null;
     }
-
     config = __assign({
       expire: 0
-    }, config); // 防止重复创建或自定义loading icon，重新创建
-
+    }, config);
+    // 防止重复创建或自定义loading icon，重新创建
     if (!loadingElement) {
       createLoading(config.customIcon, config.className);
     } else if (config.customIcon || config.customIcon !== prevCustomIcon) {
@@ -68,75 +56,60 @@ function () {
           loadingElement = null;
         } catch (e) {}
       }
-
       createLoading(config.customIcon, config.className);
     } else {
       loadingElement.style.display = 'block';
     }
-
-    prevCustomIcon = config.customIcon; // 如果配置中有expire且大于0
+    prevCustomIcon = config.customIcon;
+    // 如果配置中有expire且大于0
     // 将会在到达时间后自动关闭，不用手动再关闭（不需要再close()）
-
     if (config.expire > 0) {
       loadingTimer = setTimeout(function () {
         Loading.close();
       }, config.expire);
     }
-
     var id = new Date().getTime();
     openIds.push(id);
     return id;
   };
-
   Loading.close = function (closeId) {
     if (!canUseDOM) {
       return;
-    } // 防止重复关闭
-
-
+    }
+    // 防止重复关闭
     if (loadingTimer) {
       clearTimeout(loadingTimer);
     }
-
     if (closeTimer) {
       clearTimeout(closeTimer);
     }
-
     if (!closeId) {
       openIds = [];
       closeIds = [];
-
       if (loadingElement) {
         loadingElement.style.display = 'none';
       }
-
       return;
     }
-
-    closeIds.push(closeId); // 代码执行时，由于一些接口loading很短暂，而另一个接口还没有开始调用，
+    closeIds.push(closeId);
+    // 代码执行时，由于一些接口loading很短暂，而另一个接口还没有开始调用，
     // 只有closeId是不能真正解决一些特殊loading抖动情况，
     // 根据js的任务队列，我们加入setTimeout，只有主线程结束后才执行销毁
-
     closeTimer = setTimeout(function () {
       closeIds.forEach(function (id) {
         var index = openIds.indexOf(id);
-
         if (index >= 0) {
           openIds.splice(index, 1);
         }
       });
-
       if (!openIds.length) {
         closeIds = [];
-
         if (loadingElement) {
           loadingElement.style.display = 'none';
         }
       }
     });
   };
-
   return Loading;
 }();
-
 export default Loading;

package/esm/loading-container/index.js

@@ -2,14 +2,12 @@ import React from 'react';
 import classNames from 'classnames';
 import LoadingIcon from '../loading-icon';
 var cls = 'ab-loading-container';
-
 function LoadingContainer(props) {
   var _a;
-
   var _b = props.loading,
-      loading = _b === void 0 ? false : _b,
-      className = props.className,
-      children = props.children;
+    loading = _b === void 0 ? false : _b,
+    className = props.className,
+    children = props.children;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(className, cls, (_a = {}, _a["".concat(cls, "-active")] = loading, _a))
   }, children, loading && /*#__PURE__*/React.createElement("div", {
@@ -18,5 +16,4 @@ function LoadingContainer(props) {
     className: "".concat(cls, "-icon")
   })));
 }
-
 export default LoadingContainer;

package/esm/loading-icon/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
 var cls = 'ab-svg-loading';
-
 var LoadingIcon = function LoadingIcon(props) {
   var className = props.className;
   return /*#__PURE__*/React.createElement("span", {
@@ -54,5 +53,4 @@ var LoadingIcon = function LoadingIcon(props) {
     fill: "#fff"
   })));
 };
-
 export default /*#__PURE__*/React.memo(LoadingIcon);

package/esm/mask/index.js

@@ -3,18 +3,16 @@ import classNames from 'classnames';
 import { CSSTransition } from 'react-transition-group';
 import { isTouchScreen } from '@autobest-ui/utils';
 var prefixCls = 'ab-mask';
-
 function Mask(_a, ref) {
   var className = _a.className,
-      _b = _a.timeout,
-      timeout = _b === void 0 ? 300 : _b,
-      _c = _a.onClose,
-      onClose = _c === void 0 ? function () {} : _c,
-      visible = _a.visible; // mousedown和touchstart会一起触发，这里判断后，只执行一次
-
+    _b = _a.timeout,
+    timeout = _b === void 0 ? 300 : _b,
+    _c = _a.onClose,
+    onClose = _c === void 0 ? function () {} : _c,
+    visible = _a.visible;
+  // mousedown和touchstart会一起触发，这里判断后，只执行一次
   var onChangeVisible = React.useCallback(function (event) {
     var touch = isTouchScreen();
-
     if (event.type === 'touchstart' && touch || event.type === 'mousedown' && !touch) {
       onClose(event);
     }
@@ -31,5 +29,4 @@ function Mask(_a, ref) {
     ref: ref
   }));
 }
-
 export default /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(Mask));

package/esm/message/index.d.ts

@@ -1,24 +1,61 @@
 import React from 'react';
+import { MessageItem } from './renderMessage';
 export interface MessageProps {
     /**
      * 提示文字
      */
-    content: React.ReactNode;
+    content: React.ReactChild;
     /**
-     * class样式名
+     * 支持多种样式
      */
-    className?: string;
     contentClassName?: string;
     /**
      * 提示文字显示的时间，达到时间后自动关闭
      */
     expires?: number;
+    /**
+     * 销毁后的回调
+     */
+    onDestroy?: () => void;
+}
+export interface MessageConfig {
+    className?: string;
+    expires?: number;
     /**
      * 最多同时显示的提示文字条数
      */
     maxCount?: number;
-    width?: string;
-    height?: string;
-    onDestroy?: (id: number) => void;
 }
-export default function Message(config: MessageProps): () => void;
+export interface MessageResult {
+    onClose: () => void;
+    onCloseAll: () => void;
+}
+declare type MessageItemWithTimer = MessageItem & {
+    timer?: ReturnType<typeof setTimeout>;
+};
+export declare class Message {
+    id: number;
+    prefixCls: string;
+    options: MessageItemWithTimer[];
+    config: MessageConfig;
+    constructor(config?: MessageConfig & {
+        prefixCls?: string;
+    });
+    private _render;
+    /**
+     * 关闭指定的一条message
+     * @param currentId
+     */
+    private _onClose;
+    /**
+     * 关闭所有message
+     */
+    private _onCloseAll;
+    setConfig: (config: MessageConfig) => void;
+    open: (props: MessageProps) => {
+        onCloseAll: () => void;
+        onClose: () => void;
+    };
+}
+declare const message: Message;
+export default message;

package/esm/message/index.js

@@ -2,125 +2,110 @@ var __assign = this && this.__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);
 };
-
-import React from 'react';
-import { CSSTransition, TransitionGroup } from 'react-transition-group';
-import classNames from 'classnames';
-import ReactDOM from 'react-dom';
-import { canUseDOM } from '@autobest-ui/utils';
-var defaultConfig = {
-  expires: 3000,
-  maxCount: 3,
-  width: '6rem',
-  height: 'auto',
-  onDestroy: function onDestroy() {}
-};
-var prefixCls = 'ab-message';
-var container = null;
-var items = [];
-var id = 0;
-export default function Message(config) {
-  if (!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', classNames(currentConfig.className, "".concat(prefixCls, "-container")));
-    document.body.appendChild(container);
-  }
-
-  if (items.length >= currentConfig.maxCount) {
-    close(items[0].id);
-  }
-
-  function close(currentId) {
-    var index = items.findIndex(function (item) {
-      return item.id === currentId;
-    });
-
-    if (index >= 0) {
-      clearTimeout(items[index].timer);
-      items.splice(index, 1);
-    } // 关闭需要再渲染一次
-
-
-    render();
-  }
-
-  function _onExited(currentId) {
-    currentConfig.onDestroy(currentId);
-  } // 渲染组件
-
-
-  function render() {
-    var cls = prefixCls;
-    ReactDOM.render( /*#__PURE__*/React.createElement(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
+import { canUseDOM, isEmptyArray } from '@autobest-ui/utils';
+import renderMessage from './renderMessage';
+var Message = /** @class */function () {
+  function Message(config) {
+    if (config === void 0) {
+      config = {};
+    }
+    var _this = this;
+    this.id = 0;
+    this.options = [];
+    this._render = function () {
+      renderMessage({
+        prefixCls: _this.prefixCls,
+        className: _this.config.className,
+        options: _this.options
+      });
+    };
+    /**
+     * 关闭指定的一条message
+     * @param currentId
+     */
+    this._onClose = function (currentId) {
+      if (isEmptyArray(_this.options)) {
+        return;
+      }
+      var index = _this.options.findIndex(function (item) {
+        return item.id === currentId;
+      });
+      if (index >= 0) {
+        clearTimeout(_this.options[index].timer);
+        _this.options.splice(index, 1);
+        // 关闭需要再渲染一次
+        _this._render();
+      }
+    };
+    /**
+     * 关闭所有message
+     */
+    this._onCloseAll = function () {
+      if (isEmptyArray(_this.options)) {
+        return;
+      }
+      _this.options.forEach(function (child) {
+        clearTimeout(child.timer);
+      });
+      _this.options = [];
+      _this._render();
+    };
+    this.setConfig = function (config) {
+      _this.config = __assign({
+        expires: 3000,
+        maxCount: 3
+      }, config);
+    };
+    this.open = function (props) {
+      if (!canUseDOM) {
+        throw new Error('Message use client!');
+      }
+      _this.id++;
+      var currentId = _this.id;
+      /**
+       * 超出条数，将删除最旧的那条message
+       */
+      if (_this.options.length >= _this.config.maxCount) {
+        _this._onClose(_this.options[0].id);
+      }
+      // 每条message对象
+      var item = {
+        content: props.content,
+        contentClassName: props.contentClassName,
+        id: currentId,
+        onDestroy: props.onDestroy,
+        onClose: _this._onClose,
+        timer: null
       };
-      return /*#__PURE__*/React.createElement(CSSTransition, {
-        key: item.id,
-        timeout: 300,
-        classNames: "".concat(cls, "-fade"),
-        onExited: function onExited() {
-          _onExited(item.id);
-        },
-        appear: true
-      }, /*#__PURE__*/React.createElement("div", {
-        className: classNames("".concat(cls, "-content"), contentClassName),
-        style: style
-      }, content, /*#__PURE__*/React.createElement("div", {
-        className: "".concat(cls, "-close"),
-        onClick: function onClick() {
-          close(item.id);
+      // push
+      _this.options.push(item);
+      // 开始渲染
+      _this._render();
+      // render后设置自动关闭功能，把定时器绑定到列表
+      item.timer = setTimeout(function () {
+        _this._onClose(currentId);
+      }, props.expires || _this.config.expires);
+      return {
+        onCloseAll: _this._onCloseAll,
+        onClose: function onClose() {
+          return _this._onClose(currentId);
         }
-      }, "\xD7")));
-    })), container);
-  }
-
-  var item = {
-    currentConfig: currentConfig,
-    id: cachedId,
-    timer: null
-  };
-  items.push(item);
-  render(); // render后设置自动关闭功能，把定时器绑定到列表
-
-  item.timer = setTimeout(function () {
-    close(cachedId);
-  }, currentConfig.expires);
-
-  function destroy() {
-    items.forEach(function (child) {
-      clearTimeout(child.timer);
-    });
-    items = [];
-    render();
+      };
+    };
+    this.prefixCls = config.prefixCls || 'ab-message';
+    delete config.prefixCls;
+    this.setConfig(__assign({}, config));
   }
-
-  return destroy;
-}
+  return Message;
+}();
+export { Message };
+var message = new Message();
+export default message;

package/esm/message/renderMessage.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface MessageItem {
+    content: React.ReactChild;
+    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 {};