@autobest-ui/components 2.13.11 → 2.14.0

package/esm/carousel/index.d.ts

@@ -6,6 +6,10 @@ export interface CarouselProps {
      * 一行显示的数量
      */
     slidesPerView?: number;
+    /**
+     * 初始化时显示第几个，默认是第一个
+     */
+    defaultValue?: number;
     /**
      * 监听resize
      */

package/esm/carousel/index.js

@@ -40,12 +40,21 @@ var Carousel = /** @class */function (_super) {
     _this.autoplayTimer = null;
     _this.fadeEffectTimer = null;
     _this.next = function (transition) {
+      if (transition === void 0) {
+        transition = Transition.TransformEaseInOut;
+      }
       _this.interceptorChangePage(_this.state.currentPage + 1, transition);
     };
     _this.prev = function (transition) {
+      if (transition === void 0) {
+        transition = Transition.TransformEaseInOut;
+      }
       _this.interceptorChangePage(_this.state.currentPage - 1, transition);
     };
     _this.goTo = function (nextIndex, transition) {
+      if (transition === void 0) {
+        transition = Transition.TransformEaseInOut;
+      }
       _this.interceptorChangePage(nextIndex - 1, transition);
     };
     /**
@@ -154,7 +163,7 @@ var Carousel = /** @class */function (_super) {
           element.style.visibility = '';
         });
       } else {
-        element.style.transition = transition || Transition.TransformEaseInOut;
+        element.style.transition = transition;
       }
       element.style.transform = "translateX(".concat(translateX, "px)");
     };

package/esm/checkbox/Checkbox.js

@@ -39,30 +39,14 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
     type: "checkbox",
     checked: checked,
     disabled: disabled,
-    onChange: onCheckboxChange,
-    style: {
-      width: size,
-      height: size
-    }
+    onChange: onCheckboxChange
   }), /*#__PURE__*/React.createElement("span", {
-    className: "".concat(cls, "-control"),
-    style: {
-      width: size,
-      height: size,
-      fontSize: size
-    }
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "".concat(cls, "-outer"),
+    className: "".concat(cls, "-inner"),
     style: {
       width: size,
       height: size
     }
-  }), /*#__PURE__*/React.createElement("svg", {
-    className: "".concat(cls, "-check"),
-    viewBox: "0 0 18 18"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M2.8284 8.4853 7.7782 13.435 15.5563 5.6569 14.1421 4.2426 7.7782 10.6066 4.2426 7.0711 2.8284 8.4853Z"
-  }))), children);
+  }), children);
 });
 Checkbox.defaultProps = {
   disabled: false,

package/esm/checkbox/style/index.css

@@ -1 +1 @@
-.ab-checkbox{position:relative;cursor:pointer;display:inline-flex;align-items:center;user-select:none}.ab-checkbox:hover .ab-checkbox-outer{border-color:#767676}.ab-checkbox-input{cursor:pointer;position:absolute;opacity:0;margin:0;padding:0;top:50%;left:0;transform:translateY(-50%);z-index:2}.ab-checkbox-check{opacity:0;transform:scale(0);transition:.2s cubic-bezier(.71,-.46,.88,.6),opacity .1s}.ab-checkbox-control{display:inline-block;margin-right:.06rem;position:relative;flex-shrink:0}.ab-checkbox-control svg{position:absolute;left:0;top:0;width:1em;height:1em;user-select:none;flex-shrink:0;fill:currentcolor;stroke:none}.ab-checkbox-outer{position:absolute;left:0;top:0;border:1px solid #b0b0b0;border-radius:.02rem;background-color:#fff}.ab-checkbox-checked .ab-checkbox-check{opacity:1;transform:scale(1);transition:.2s cubic-bezier(.12,.4,.29,1.46) .1s}.ab-checkbox-disabled{cursor:not-allowed;color:rgba(0,0,0,.25)}.ab-checkbox-disabled .ab-checkbox-input{cursor:not-allowed}.ab-checkbox-disabled span.ab-checkbox-control .ab-checkbox-outer{border-color:#f0f0f0;background-color:#f5f5f5}.ab-checkbox-disabled svg.ab-checkbox-check{color:#cecece}.ab-checkbox-white .ab-checkbox-check{color:#e84040}.ab-checkbox-blue .ab-checkbox-check{color:#fff}.ab-checkbox-blue.ab-checkbox-checked .ab-checkbox-outer{background-color:#0075ff;border-color:#0075ff}.ab-checkbox-group{display:flex;flex-wrap:wrap}.ab-checkbox-group .ab-checkbox{margin-right:.08rem}
+.ab-checkbox{cursor:pointer;display:inline-flex;align-items:center;user-select:none;position:relative}.ab-checkbox-input{cursor:pointer;position:absolute;opacity:0;margin:0;padding:0;z-index:2}.ab-checkbox-inner{display:inline-block;margin-right:.06rem;position:relative;border:1px solid #b0b0b0;border-radius:.02rem;background-color:#fff;transition:.3s;flex-shrink:0}.ab-checkbox-inner::after{box-sizing:border-box;position:absolute;top:45%;left:22%;display:table;width:37.5%;height:62.5%;border-style:solid;border-width:2px;border-top:0;border-inline-start:0;transform:rotate(45deg) scale(0) translate(-50%,-50%);opacity:0;content:"";transition:.2s cubic-bezier(.71,-.46,.88,.6),opacity .1s}.ab-checkbox-checked .ab-checkbox-inner::after{opacity:1;transform:rotate(45deg) scale(1) translate(-50%,-50%);transition:.2s cubic-bezier(.12,.4,.29,1.46) .1s}.ab-checkbox-disabled{cursor:not-allowed;color:rgba(0,0,0,.25)}.ab-checkbox-disabled .ab-checkbox-inner{border-color:#f0f0f0;background-color:#f5f5f5}.ab-checkbox-disabled .ab-checkbox-input{cursor:not-allowed}.ab-checkbox-white .ab-checkbox-inner::after{border-color:#e84040}.ab-checkbox-white.ab-checkbox-disabled .ab-checkbox-inner::after{border-color:#cecece}.ab-checkbox-blue .ab-checkbox-inner::after{border-color:#fff}.ab-checkbox-blue.ab-checkbox-checked .ab-checkbox-inner{transition:none;background-color:#0075ff;border-color:#0075ff}.ab-checkbox-blue.ab-checkbox-disabled .ab-checkbox-inner{border-color:#f0f0f0;background-color:#f5f5f5}.ab-checkbox-blue.ab-checkbox-disabled .ab-checkbox-inner::after{border-color:#cecece}.ab-checkbox-group{display:flex;flex-wrap:wrap}.ab-checkbox-group .ab-checkbox{margin-right:.08rem}

package/esm/index.d.ts

@@ -14,6 +14,10 @@ export type { MoveProps } from './move';
 export { default as Move } from './move';
 export type { ShowMoreProps } from './show-more';
 export { default as ShowMore } from './show-more';
+export type { ReadMoreProps } from './read-more';
+export { default as ReadMore } from './show-more';
+export type { ReadMoreHtmlProps } from './read-more-html';
+export { default as ReadMoreHtml } from './read-more-html';
 export type { SelectOptionItem, SelectProps, SelectPlacement } from './select';
 export { default as Select } from './select';
 export type { ConfirmProps } from './confirm';
@@ -61,3 +65,5 @@ export { default as Trigger } from './trigger';
 export { composeRef, supportRef, fillRef } from './trigger/ref';
 export type { RadioProps, RadioGroupProps, RadioValue, RadioOptionItem } from './radio';
 export { Radio, RadioGroup } from './radio';
+export type { PortalProps } from './portal';
+export { default as Portal } from './portal';

package/esm/index.js

@@ -6,6 +6,8 @@ export { default as Popover } from './popover';
 export { default as Skeleton } from './skeleton';
 export { default as Move } from './move';
 export { default as ShowMore } from './show-more';
+export { default as ReadMore } from './show-more';
+export { default as ReadMoreHtml } from './read-more-html';
 export { default as Select } from './select';
 export { default as Confirm } from './confirm';
 export { default as Collapse } from './collapse';
@@ -29,4 +31,5 @@ export { default as LoadingBar } from './loading-bar';
 export { default as LoadingIcon } from './loading-icon';
 export { default as Trigger } from './trigger';
 export { composeRef, supportRef, fillRef } from './trigger/ref';
-export { Radio, RadioGroup } from './radio';
+export { Radio, RadioGroup } from './radio';
+export { default as Portal } from './portal';

package/esm/input/Adorn.d.ts

@@ -8,6 +8,10 @@ export interface AdornProps {
      * 样式前缀，这个需要使用者提供前缀
      */
     prefixCls: string;
+    /**
+     * 包裹input父级元素标签名
+     */
+    wrapTagName?: string;
     /**
      * 样式
      */

package/esm/input/Adorn.js

@@ -47,17 +47,21 @@ var Adorn = function Adorn(props) {
       onBlur(ev);
     }
   }, [onBlur, disabled]);
-  return /*#__PURE__*/React.createElement("div", {
+  var WrapTagName = props.wrapTagName;
+  return /*#__PURE__*/React.createElement(WrapTagName, {
     className: classNames(prefixCls, className, (_a = {}, _a["".concat(prefixCls, "-enter")] = isEnter || isFocus, _a), (_b = {}, _b["".concat(prefixCls, "-focus")] = isFocus, _b), (_c = {}, _c["".concat(prefixCls, "-disabled")] = disabled, _c)),
     onMouseEnter: onMouseEnterCallback,
     onMouseLeave: onMouseLeaveCallback
-  }, !isBlank(prefix) ? /*#__PURE__*/React.createElement("div", {
+  }, !isBlank(prefix) ? /*#__PURE__*/React.createElement("span", {
     className: "".concat(prefixCls, "-prefix")
   }, prefix) : null, /*#__PURE__*/React.cloneElement(children, {
     onFocus: onFocusCallback,
     onBlur: onBlurCallback
-  }), !isBlank(suffix) ? /*#__PURE__*/React.createElement("div", {
+  }), !isBlank(suffix) ? /*#__PURE__*/React.createElement("span", {
     className: "".concat(prefixCls, "-suffix")
   }, suffix) : null);
 };
+Adorn.defaultProps = {
+  wrapTagName: 'div'
+};
 export default Adorn;

package/esm/input/Input.d.ts

@@ -54,6 +54,7 @@ export declare class InputNotRef extends React.Component<InputPropsWithRef, Inpu
     inputRef: React.RefObject<HTMLInputElement>;
     static defaultProps: {
         defaultValue: string;
+        wrapTagName: string;
         type: string;
         checkValueOnMounted: boolean;
     };

package/esm/input/Input.js

@@ -207,10 +207,12 @@ var InputNotRef = /** @class */function (_super) {
       title = _a.title,
       onKeyUp = _a.onKeyUp,
       name = _a.name,
-      autoComplete = _a.autoComplete;
+      autoComplete = _a.autoComplete,
+      wrapTagName = _a.wrapTagName;
     var value = this.state.value;
     var isFileUpload = this.isFileUpload();
     return /*#__PURE__*/React.createElement(Adorn, {
+      wrapTagName: wrapTagName,
       prefixCls: cls,
       onFocus: this.onFocus,
       onBlur: this.onBlur,
@@ -239,6 +241,8 @@ var InputNotRef = /** @class */function (_super) {
   };
   InputNotRef.defaultProps = {
     defaultValue: '',
+    // TODO:: 在改动最小的情况下设置默认是div, 后续升级时默认需改成label
+    wrapTagName: 'div',
     type: 'text',
     checkValueOnMounted: false
   };

package/esm/input/TextArea.d.ts

@@ -54,6 +54,7 @@ export declare class TextAreaNotRef extends React.Component<TextAreaPropsWithRef
     textareaRef: React.RefObject<HTMLTextAreaElement>;
     static defaultProps: {
         defaultValue: string;
+        wrapTagName: string;
         rows: number;
         maxlength: number;
         checkValueOnMounted: boolean;

package/esm/input/TextArea.js

@@ -176,10 +176,12 @@ var TextAreaNotRef = /** @class */function (_super) {
       prefix = _a.prefix,
       rows = _a.rows,
       maxLength = _a.maxLength,
-      name = _a.name;
+      name = _a.name,
+      wrapTagName = _a.wrapTagName;
     var value = this.state.value;
     return /*#__PURE__*/React.createElement(Adorn, {
       prefixCls: cls,
+      wrapTagName: wrapTagName,
       onFocus: this.onFocus,
       onBlur: this.onBlur,
       className: className,
@@ -202,6 +204,7 @@ var TextAreaNotRef = /** @class */function (_super) {
   };
   TextAreaNotRef.defaultProps = {
     defaultValue: '',
+    wrapTagName: 'div',
     rows: 5,
     maxlength: 0,
     checkValueOnMounted: false

package/esm/input-number/index.d.ts

@@ -81,6 +81,7 @@ export declare class InputNumberNotRef extends React.Component<InputNumberPropsW
     keyboardHandler: AddListenerEventRemoveHandler;
     static defaultProps: {
         defaultValue: string;
+        wrapTagName: string;
         controls: boolean;
         isAllowNumberWithDotAndMinus: boolean;
         isOnlyAllowNumber: boolean;

package/esm/input-number/index.js

@@ -282,7 +282,8 @@ var InputNumberNotRef = /** @class */function (_super) {
       controls = _b.controls,
       isValueToString = _b.isValueToString,
       checkValueOnMounted = _b.checkValueOnMounted,
-      maxLength = _b.maxLength;
+      maxLength = _b.maxLength,
+      wrapTagName = _b.wrapTagName;
     var originalValueStr = this.state.originalValueStr;
     var hasControls = controls && !isValueToString;
     return /*#__PURE__*/React.createElement(Input, {
@@ -290,12 +291,14 @@ var InputNumberNotRef = /** @class */function (_super) {
       className: classNames(cls, className, (_a = {}, _a["".concat(cls, "-has-controls")] = hasControls, _a)),
       placeholder: placeholder,
       disabled: disabled,
+      wrapTagName: wrapTagName,
       style: style,
       prefix: prefix,
       name: name,
       value: originalValueStr,
       onChange: this.onChange,
       onKeyDown: this.onKeyDown,
+      "aria-label": this.props['aria-label'],
       onBlur: this.onBlur,
       onFocus: this.onFocus,
       suffix: hasControls ? /*#__PURE__*/React.createElement(ControlArrow, {
@@ -309,6 +312,7 @@ var InputNumberNotRef = /** @class */function (_super) {
   };
   InputNumberNotRef.defaultProps = {
     defaultValue: '',
+    wrapTagName: 'div',
     controls: true,
     isAllowNumberWithDotAndMinus: false,
     isOnlyAllowNumber: false,

package/esm/input-phone/index.d.ts

@@ -48,6 +48,7 @@ export declare class InputPhoneNotRef extends React.Component<InputPhonePropsWit
     onFocusTimer: ReturnType<typeof setTimeout>;
     static defaultProps: {
         defaultValue: string;
+        wrapTagName: string;
         format: string;
         placeholderChar: string;
     };

package/esm/input-phone/index.js

@@ -195,6 +195,7 @@ var InputPhoneNotRef = /** @class */function (_super) {
   };
   InputPhoneNotRef.defaultProps = {
     defaultValue: '',
+    wrapTagName: 'div',
     format: '(111)111-1111',
     placeholderChar: '_'
   };

package/esm/lazy-image/index.d.ts

@@ -1,5 +1,9 @@
-import React, { MouseEventHandler, MouseEvent } from 'react';
-export interface LazyImageProps {
+import React from 'react';
+export interface LazyImageProps extends React.AllHTMLAttributes<HTMLElement> {
+    /**
+     * 标签名，默认div
+     */
+    tagName?: string;
     /**
      * 需要显示的图片
      */
@@ -9,34 +13,13 @@ export interface LazyImageProps {
      */
     alt: string;
     /**
-     * 鼠标悬浮时显示的文字
+     * 图片额外的属性
      */
-    title?: string;
+    imgHTMLAttributes?: React.ImgHTMLAttributes<HTMLImageElement>;
     /**
      * 类名
      */
     className?: string;
-    /**
-     * hover 图片，图片透明度(需要注意不要少了isMobile属性)
-     */
-    hoverOpacity?: number;
-    /**
-     * 判断是否是移动端，如果是移动端，将不再执行hoverOpacity, onMouseOver, onMouseOut
-     */
-    isMobile?: boolean;
-    /**
-     * 判断是否需要动态loading效果，如果提供了defaultImage，则不再有loading
-     */
-    active?: boolean;
-    onClick?: MouseEventHandler<HTMLImageElement>;
-    /**
-     * 鼠标放上去的回调（方便自定义样式）
-     */
-    onMouseOver?: MouseEventHandler<HTMLImageElement>;
-    /**
-     * 鼠标离开的回调（方便自定义样式）
-     */
-    onMouseOut?: MouseEventHandler<HTMLImageElement>;
     /**
      * 加载图片时的回调
      */
@@ -55,10 +38,9 @@ interface LazyImageStates {
 }
 declare class LazyImage extends React.Component<LazyImageProps, LazyImageStates> {
     static defaultProps: {
+        tagName: string;
         className: string;
-        hoverOpacity: any;
-        isMobile: boolean;
-        active: boolean;
+        imgHTMLAttributes: {};
     };
     prefixCls: string;
     rootRef: React.RefObject<HTMLImageElement>;
@@ -71,8 +53,6 @@ declare class LazyImage extends React.Component<LazyImageProps, LazyImageStates>
      * 监听原生lazy loading, 并回调不同的事件
      */
     originalLazyLoad: () => void;
-    onMouseOut: (ev: MouseEvent<HTMLImageElement>) => void;
-    onMouseOver: (ev: MouseEvent<HTMLImageElement>) => void;
     render(): JSX.Element;
 }
 export default LazyImage;

package/esm/lazy-image/index.js

@@ -32,6 +32,16 @@ var __assign = this && this.__assign || function () {
   };
   return __assign.apply(this, arguments);
 };
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
 import React from 'react';
 import classNames from 'classnames';
 function noop() {}
@@ -90,36 +100,6 @@ var LazyImage = /** @class */function (_super) {
         };
       }
     };
-    _this.onMouseOut = function (ev) {
-      if (_this.props.isMobile) {
-        return;
-      }
-      var _a = _this.props,
-        hoverOpacity = _a.hoverOpacity,
-        onMouseOut = _a.onMouseOut;
-      var el = ev.target;
-      if (hoverOpacity) {
-        el.style.opacity = '1';
-      }
-      if (onMouseOut) {
-        onMouseOut(ev);
-      }
-    };
-    _this.onMouseOver = function (ev) {
-      if (_this.props.isMobile) {
-        return;
-      }
-      var _a = _this.props,
-        hoverOpacity = _a.hoverOpacity,
-        onMouseOver = _a.onMouseOver;
-      var el = ev.target;
-      if (hoverOpacity) {
-        el.style.opacity = hoverOpacity.toString();
-      }
-      if (onMouseOver) {
-        onMouseOver(ev);
-      }
-    };
     _this.state = {
       loading: true
     };
@@ -141,34 +121,33 @@ var LazyImage = /** @class */function (_super) {
     var cls = this.prefixCls;
     var _b = this.props,
       className = _b.className,
-      active = _b.active;
+      alt = _b.alt,
+      src = _b.src,
+      imgHTMLAttributes = _b.imgHTMLAttributes,
+      tagName = _b.tagName,
+      onError = _b.onError,
+      onLoading = _b.onLoading,
+      onLoaded = _b.onLoaded,
+      extraProps = __rest(_b, ["className", "alt", "src", "imgHTMLAttributes", "tagName", "onError", "onLoading", "onLoaded"]);
     var loading = this.state.loading;
-    var props = __assign({}, this.props);
-    delete props.className;
-    delete props.onMouseOver;
-    delete props.onMouseOut;
-    delete props.hoverOpacity;
-    delete props.isMobile;
-    delete props.active;
-    delete props.onLoading;
-    delete props.onLoaded;
-    return /*#__PURE__*/React.createElement("img", __assign({
-      alt: ""
-    }, props, {
-      className: classNames(cls, className, (_a = {}, _a["".concat(cls, "-loading")] = loading, _a["".concat(cls, "-active")] = loading && active, _a)),
-      onMouseOver: this.onMouseOver,
-      onMouseOut: this.onMouseOut,
+    var Wrapper = tagName;
+    // 需要图片根据容器自适应时，需增加mask
+    return /*#__PURE__*/React.createElement(Wrapper, __assign({}, extraProps, {
+      className: classNames(cls, className, (_a = {}, _a["".concat(cls, "-loading")] = loading, _a))
+    }), /*#__PURE__*/React.createElement("img", __assign({
       onFocus: noop,
-      onBlur: noop,
+      onBlur: noop
+    }, imgHTMLAttributes, {
+      src: src,
+      alt: alt,
       ref: this.rootRef,
       loading: "lazy"
-    }));
+    })));
   };
   LazyImage.defaultProps = {
+    tagName: 'div',
     className: '',
-    hoverOpacity: null,
-    isMobile: false,
-    active: true
+    imgHTMLAttributes: {}
   };
   return LazyImage;
 }(React.Component);

package/esm/lazy-image/style/index.css

@@ -1 +1 @@
-.ab-lazy-image{transition:opacity .5s}.ab-lazy-image-loading{background:#f2f2f2;overflow:hidden}.ab-lazy-image-loading.ab-lazy-image-active{background:linear-gradient(90deg,#f2f2f2 25%,#e6e6e6 37%,#f2f2f2 63%);background-size:400% 100%;animation:1.4s infinite ab-skeleton-loading}@keyframes ab-skeleton-loading{0%{background-position:100% 50%}100%{background-position:0 50%}}
+.ab-lazy-image{position:relative;overflow:hidden;transition:opacity .5s;display:flex;align-items:center;justify-content:center}.ab-lazy-image::after{display:none;content:"";position:absolute;left:0;top:0;width:100%;height:100%}.ab-lazy-image-loading::after{display:block;background:linear-gradient(90deg,#f2f2f2 25%,#e6e6e6 37%,#f2f2f2 63%);background-size:400% 100%;animation:1.4s infinite ab-skeleton-loading}.ab-lazy-image img{display:block;max-width:100%;max-height:100%}@keyframes ab-skeleton-loading{0%{background-position:100% 50%}100%{background-position:0 50%}}

package/esm/loading-container/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import { AddListenerEventRemoveHandler } from '@autobest-ui/utils';
 export interface LoadingContainerProps {
     /**
      * 容器是否loading
@@ -13,23 +12,6 @@ export interface LoadingContainerProps {
      * 内容区域
      */
     children?: React.ReactElement | React.ReactElement[];
-    /**
-     * LoadingIcon是否需要保持在可视区域内
-     */
-    loadingInView?: boolean;
-}
-declare class LoadingContainer extends React.Component<LoadingContainerProps> {
-    prefixCls: string;
-    addScrollHandlerListener: AddListenerEventRemoveHandler;
-    wrapRef: React.RefObject<HTMLDivElement>;
-    iconRef: React.RefObject<HTMLSpanElement>;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: Readonly<LoadingContainerProps>): void;
-    componentWillUnmount(): void;
-    addScrollListener: () => void;
-    removeScrollListener: () => void;
-    setIconTopStyle: (top: string) => void;
-    onHandlerScroll: () => void;
-    render(): JSX.Element;
 }
+declare function LoadingContainer(props: LoadingContainerProps): JSX.Element;
 export default LoadingContainer;

package/esm/loading-container/index.js

@@ -1,125 +1,19 @@
-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 React, { createRef } from 'react';
+import React from 'react';
 import classNames from 'classnames';
-import { addEventListener, getElementSize, getOffsetAndSize, isInViewArea, throttleWithRAF } from '@autobest-ui/utils';
 import LoadingIcon from '../loading-icon';
-var LoadingContainer = /** @class */function (_super) {
-  __extends(LoadingContainer, _super);
-  function LoadingContainer() {
-    var _this = _super !== null && _super.apply(this, arguments) || this;
-    _this.prefixCls = 'ab-loading-container';
-    _this.wrapRef = /*#__PURE__*/createRef();
-    _this.iconRef = /*#__PURE__*/createRef();
-    _this.addScrollListener = function () {
-      if (!_this.addScrollHandlerListener) {
-        // 滚动监听
-        _this.addScrollHandlerListener = addEventListener(window, 'scroll', throttleWithRAF(_this.onHandlerScroll));
-      }
-    };
-    _this.removeScrollListener = function () {
-      if (_this.addScrollHandlerListener) {
-        _this.addScrollHandlerListener();
-        _this.addScrollHandlerListener = null;
-      }
-    };
-    _this.setIconTopStyle = function (top) {
-      _this.iconRef.current.style.top = top;
-    };
-    _this.onHandlerScroll = function () {
-      var wrapElement = _this.wrapRef.current;
-      if (!_this.props.loadingInView || !_this.props.loading || !wrapElement) {
-        return;
-      }
-      var iconElement = _this.iconRef.current;
-      if (!isInViewArea(wrapElement) || !iconElement) {
-        // 组件在可视区域外
-        return;
-      }
-      var halfIconHeight = getElementSize(iconElement).height / 2;
-      var _a = getOffsetAndSize(wrapElement, true),
-        top = _a.top,
-        height = _a.height;
-      var bottom = top + height;
-      if (top >= 0 && bottom <= window.innerHeight) {
-        // 整个组件都在可视区域内，直接在组件内居中显示LoadingIcon
-        _this.setIconTopStyle('50%');
-        return;
-      }
-      if (top < 0 && bottom > window.innerHeight) {
-        // 组件超出浏览器可视区域，在浏览器可视区域居中显示LoadingIcon
-        _this.setIconTopStyle("".concat(window.innerHeight / 2 - top, "px"));
-        return;
-      }
-      if (top < 0) {
-        // 组件上半部分超出可视区域
-        var iconTop_1 = bottom / 2 - top;
-        _this.setIconTopStyle("".concat(iconTop_1 > height - halfIconHeight ? height - halfIconHeight : iconTop_1, "px"));
-        return;
-      }
-      // 组件下半部分超出可视区域
-      var iconTop = (window.innerHeight - top) / 2;
-      _this.setIconTopStyle("".concat(iconTop < halfIconHeight ? halfIconHeight : iconTop, "px"));
-    };
-    return _this;
-  }
-  LoadingContainer.prototype.componentDidMount = function () {
-    if (this.props.loadingInView && this.props.loading) {
-      this.onHandlerScroll();
-      this.addScrollListener();
-    }
-  };
-  LoadingContainer.prototype.componentDidUpdate = function (prevProps) {
-    if (prevProps.loading !== this.props.loading || prevProps.loadingInView !== this.props.loadingInView) {
-      if (this.props.loadingInView && this.props.loading) {
-        this.onHandlerScroll();
-        this.addScrollListener();
-        return;
-      }
-      this.removeScrollListener();
-    }
-  };
-  LoadingContainer.prototype.componentWillUnmount = function () {
-    this.removeScrollListener();
-  };
-  LoadingContainer.prototype.render = function () {
-    var _a;
-    var cls = this.prefixCls;
-    var _b = this.props,
-      _c = _b.loading,
-      loading = _c === void 0 ? false : _c,
-      className = _b.className,
-      children = _b.children;
-    return /*#__PURE__*/React.createElement("div", {
-      className: classNames(className, cls, (_a = {}, _a["".concat(cls, "-active")] = loading, _a)),
-      ref: this.wrapRef
-    }, children, loading && /*#__PURE__*/React.createElement("div", {
-      className: "".concat(cls, "-icon-box")
-    }, /*#__PURE__*/React.createElement(LoadingIcon, {
-      className: "".concat(cls, "-icon"),
-      ref: this.iconRef
-    })));
-  };
-  return LoadingContainer;
-}(React.Component);
+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;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(className, cls, (_a = {}, _a["".concat(cls, "-active")] = loading, _a))
+  }, children, loading && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(cls, "-icon-box")
+  }, /*#__PURE__*/React.createElement(LoadingIcon, {
+    className: "".concat(cls, "-icon")
+  })));
+}
 export default LoadingContainer;

package/esm/loading-icon/index.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 export interface LoadingIconProps {
     className?: string;
 }
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<LoadingIconProps & React.RefAttributes<HTMLSpanElement>>>;
+declare const _default: React.MemoExoticComponent<(props: LoadingIconProps) => JSX.Element>;
 export default _default;