@autobest-ui/components 3.0.0-alpha.6 → 3.0.0-alpha.8

package/lib/accordion/index.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _utils = require("@autobest-ui/utils");
+var _CollapseItem = _interopRequireDefault(require("./CollapseItem"));
 var _Item = _interopRequireDefault(require("./Item"));
 var __extends = void 0 && (void 0).__extends || function () {
   var _extendStatics = function extendStatics(d, b) {
@@ -48,6 +49,18 @@ var Accordion = /** @class */function (_super) {
   function Accordion(props) {
     var _this = _super.call(this, props) || this;
     _this.prefixCls = 'ab-accordion';
+    _this.refresh = function () {
+      var visibleNames = {};
+      var defaultVisibleNames = _this.props.defaultVisibleNames;
+      if (!(0, _utils.isEmptyArray)(defaultVisibleNames)) {
+        defaultVisibleNames.forEach(function (name) {
+          visibleNames[name] = true;
+        });
+      }
+      _this.setState({
+        visibleNames: visibleNames
+      });
+    };
     /** *
      * 展开下拉链接列表
      * @param name
@@ -57,25 +70,25 @@ var Accordion = /** @class */function (_super) {
       var _c = _this.props,
         interactive = _c.interactive,
         beforeVisibleChange = _c.beforeVisibleChange,
-        onVisibleChange = _c.onVisibleChange;
-      if (beforeVisibleChange) {
-        beforeVisibleChange(name);
-      }
+        afterVisibleChange = _c.afterVisibleChange;
       var visibleNames = _this.state.visibleNames;
-      var isCurVisible = visibleNames[name];
+      var nextVisible = !visibleNames[name];
+      if (beforeVisibleChange && !beforeVisibleChange(nextVisible, name)) {
+        return;
+      }
       if (interactive) {
         // 能同时展开多项，只对当前项做展开/闭合操作
         _this.setState({
-          visibleNames: __assign(__assign({}, visibleNames), (_a = {}, _a[name] = !isCurVisible, _a))
+          visibleNames: __assign(__assign({}, visibleNames), (_a = {}, _a[name] = nextVisible, _a))
         });
       } else {
         // 每次只能展开一项
         _this.setState({
-          visibleNames: (_b = {}, _b[name] = !isCurVisible, _b)
+          visibleNames: (_b = {}, _b[name] = nextVisible, _b)
         });
       }
-      if (onVisibleChange) {
-        onVisibleChange(name, !isCurVisible);
+      if (afterVisibleChange) {
+        afterVisibleChange(nextVisible, name);
       }
     };
     var visibleNames = {};
@@ -97,20 +110,23 @@ var Accordion = /** @class */function (_super) {
       className = _a.className,
       children = _a.children;
     var visibleNames = this.state.visibleNames;
-    return /*#__PURE__*/_react.default.createElement("ul", {
+    return /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)(cls, className)
     }, _react.default.Children.map(children, function (child) {
       var name = child.props.name;
+      if ((0, _utils.isBlank)(name)) {
+        return child;
+      }
       return /*#__PURE__*/_react.default.cloneElement(child, {
         key: name,
-        onTitleClick: function onTitleClick() {
+        onClick: function onClick() {
           _this.onVisibleChange(name);
         },
         visible: !!visibleNames[name]
       });
     }));
   };
-  // 限制用户传入的参数，所以用BaseAccordionItemProps
+  Accordion.CollapseItem = _CollapseItem.default;
   Accordion.Item = _Item.default;
   Accordion.defaultProps = {
     className: '',

package/lib/accordion/type.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface BaseAccordionItemProps {
+    /**
+     * 用于标识Item
+     * 每个Item的name必须是唯一值
+     */
+    name: React.ReactText;
+}

package/lib/accordion/type.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/date-picker/calendar/Day.js

@@ -41,16 +41,17 @@ var DayCalendar = function DayCalendar(props) {
           isOut = false;
         }
         var disabled = (0, _utils.isOutOfDate)(date, minDate, maxDate);
+        var selected = (0, _utils.compareDate)(date, selectedDate) === 0;
         return {
           value: date,
           name: date.getDate(),
           disabled: disabled,
-          selected: (0, _utils.compareDate)(date, selectedDate) === 0,
+          selected: selected,
           isToday: (0, _utils.compareDate)(date, today) === 0,
           onClick: disabled ? null : function () {
             return onSelect(date);
           },
-          className: !disabled && isOut ? "".concat(cls, "-out") : null
+          isOut: !selected && !disabled && isOut
         };
       };
       var currentTitle = getTitle(navigatedDate);
@@ -89,7 +90,7 @@ var DayCalendar = function DayCalendar(props) {
         headList: currentHeadList,
         dateList: dayList
       };
-    }, [today, navigatedDate, minDate, maxDate, firstDayOfWeek, selectedDate, onSelect, cls]),
+    }, [today, navigatedDate, minDate, maxDate, firstDayOfWeek, selectedDate, onSelect]),
     title = _a.title,
     startDate = _a.startDate,
     endDate = _a.endDate,

package/lib/date-picker/calendar/grid/index.css

@@ -1 +1 @@
-.ab-dp-cg-content,.ab-dp-cg-head,.ab-dp-cg-title{display:flex;align-items:center}.ab-dp-cg-title{user-select:none;font-size:.14rem;padding-bottom:.08rem}.ab-dp-cg-title>strong{flex:1 1;margin-left:.1rem;cursor:default;color:#4a4a4a}.ab-dp-cg-title>strong.ab-dp-cg-clickable{cursor:pointer}.ab-dp-cg-title>strong.ab-dp-cg-clickable:hover{color:#000}.ab-dp-cg-dis-icon,.ab-dp-cg-icon{align-self:flex-end;margin-left:.08rem}.ab-dp-cg-icon{cursor:pointer}.ab-dp-cg-head{padding-bottom:.05rem}.ab-dp-cg-head>li{display:flex;align-items:center;justify-content:center;cursor:default}.ab-dp-cg-content{flex-wrap:wrap}.ab-dp-cg-content>li{cursor:pointer;display:flex;align-items:center;justify-content:center;color:#000}.ab-dp-cg-content>li:hover{background:#f0f0f0}.ab-dp-cg-content>li.ab-dp-cg-dis{cursor:not-allowed;color:#b0b0b0}.ab-dp-cg-content>li.ab-dp-cg-dis:hover{background:0 0}.ab-dp-cg-content>li.ab-dp-cg-selected,.ab-dp-cg-content>li:active{background:#c7e0f4;border:3px solid #c7e0f4;border-radius:2px;color:#000}.ab-dp-cg-content>li.ab-dp-cg-today{background:#0078d4;color:#fff}.ab-dp-cg-arrow{cursor:pointer}
+.ab-dp-cg-content,.ab-dp-cg-head,.ab-dp-cg-title{display:flex;align-items:center}.ab-dp-cg-title{user-select:none;font-size:.14rem;padding-bottom:.08rem}.ab-dp-cg-title>strong{flex:1 1;margin-left:.1rem;cursor:default;color:#4a4a4a}.ab-dp-cg-title>strong.ab-dp-cg-clickable{cursor:pointer}.ab-dp-cg-title>strong.ab-dp-cg-clickable:hover{color:#000}.ab-dp-cg-dis-icon,.ab-dp-cg-icon{align-self:flex-end;margin-left:.08rem}.ab-dp-cg-icon{cursor:pointer}.ab-dp-cg-head{padding-bottom:.05rem}.ab-dp-cg-head>li{display:flex;align-items:center;justify-content:center;cursor:default}.ab-dp-cg-content{flex-wrap:wrap}.ab-dp-cg-content>li{cursor:pointer;display:flex;align-items:center;justify-content:center;color:#333;border-radius:4px}.ab-dp-cg-content>li:hover{background:#f0f0f0}.ab-dp-cg-content>li.ab-dp-cg-out{color:#666}.ab-dp-cg-content>li.ab-dp-cg-dis{cursor:not-allowed;color:#b0b0b0}.ab-dp-cg-content>li.ab-dp-cg-dis:hover{background:0 0}.ab-dp-cg-content>li.ab-dp-cg-selected{background:#0078d4;color:#fff}.ab-dp-cg-content>li.ab-dp-cg-selected:hover{background:#0078d4}.ab-dp-cg-content>li.ab-dp-cg-today{border:1px solid #0078d4}.ab-dp-cg-arrow{cursor:pointer}

package/lib/date-picker/calendar/grid/index.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 export interface CalendarGridItemProps {
-    className?: string;
     name: string;
     disabled: boolean;
     selected: boolean;
     isToday?: boolean;
+    isOut?: boolean;
     onClick: (event?: React.MouseEvent<HTMLElement, MouseEvent>) => void;
 }
 export interface CalendarGridProps {

package/lib/date-picker/calendar/grid/index.js

@@ -53,10 +53,10 @@ var CalendarGrid = function CalendarGrid(_a) {
   })), /*#__PURE__*/_react.default.createElement("ul", {
     className: "".concat(cls, "-content")
   }, list.map(function (item, index) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     return /*#__PURE__*/_react.default.createElement("li", {
       key: "".concat(index, " ").concat(item.name),
-      className: (0, _classnames.default)((_a = {}, _a["".concat(cls, "-dis")] = item.disabled, _a), (_b = {}, _b["".concat(cls, "-selected")] = item.selected, _b), (_c = {}, _c["".concat(cls, "-today")] = item.isToday, _c), item.className),
+      className: (0, _classnames.default)((_a = {}, _a["".concat(cls, "-dis")] = item.disabled, _a), (_b = {}, _b["".concat(cls, "-selected")] = item.selected, _b), (_c = {}, _c["".concat(cls, "-today")] = item.isToday, _c), (_d = {}, _d["".concat(cls, "-out")] = item.isOut, _d)),
       onClick: item.onClick
     }, item.name);
   })), bottomElement);

package/lib/date-picker/calendar/index.css

@@ -1 +1 @@
-.ab-dp-cal{display:flex}.ab-dp-cal-my{padding-left:.12rem;margin-left:.12rem;border-left:1px solid #b0b0b0}.ab-dp-cal-day,.ab-dp-cal-my{width:2.1rem}.ab-dp-cal-dis{color:#c8c8c8}.ab-dp-cal-dg>ul>li{width:14.28%;height:.28rem}.ab-dp-cal-dg>ul>li.ab-dp-cal-out{color:#666}.ab-dp-cal-myg{padding-bottom:.62rem}.ab-dp-cal-myg>ul{justify-content:space-between}.ab-dp-cal-myg>ul>li{width:.4rem;height:.4rem;margin-bottom:.1rem}.ab-dp-cal-t{cursor:pointer;position:absolute;right:.08rem;bottom:.3rem}.ab-dp-cal-t.ab-dp-cal-t-dis{color:#b0b0b0;cursor:default}
+.ab-dp-cal{display:flex}.ab-dp-cal-my{padding-left:.12rem;margin-left:.12rem;border-left:1px solid #b0b0b0}.ab-dp-cal-day,.ab-dp-cal-my{width:2.1rem}.ab-dp-cal-dis{color:#c8c8c8}.ab-dp-cal-dg>ul>li{width:14.28%;height:.28rem}.ab-dp-cal-myg{padding-bottom:.62rem}.ab-dp-cal-myg>ul{justify-content:space-between}.ab-dp-cal-myg>ul>li{width:.4rem;height:.4rem;margin-bottom:.1rem}.ab-dp-cal-t{cursor:pointer;position:absolute;right:.08rem;bottom:.3rem}.ab-dp-cal-t.ab-dp-cal-t-dis{color:#b0b0b0;cursor:default}

package/lib/date-picker/index.js

@@ -47,6 +47,7 @@ var __assign = void 0 && (void 0).__assign || function () {
   return __assign.apply(this, arguments);
 };
 // TODO: 移动端
+// TODO: 时区问题导致Date().getDate()获取到的日期会有±1天的时差
 var DatePicker = /** @class */function (_super) {
   __extends(DatePicker, _super);
   function DatePicker(props) {

package/lib/date-picker/style/index.css

@@ -1 +1 @@
-.ab-dp-cal{display:flex}.ab-dp-cal-my{padding-left:.12rem;margin-left:.12rem;border-left:1px solid #b0b0b0}.ab-dp-cal-day,.ab-dp-cal-my{width:2.1rem}.ab-dp-cal-dis{color:#c8c8c8}.ab-dp-cal-dg>ul>li{width:14.28%;height:.28rem}.ab-dp-cal-dg>ul>li.ab-dp-cal-out{color:#666}.ab-dp-cal-myg{padding-bottom:.62rem}.ab-dp-cal-myg>ul{justify-content:space-between}.ab-dp-cal-myg>ul>li{width:.4rem;height:.4rem;margin-bottom:.1rem}.ab-dp-cal-t{cursor:pointer;position:absolute;right:.08rem;bottom:.3rem}.ab-dp-cal-t.ab-dp-cal-t-dis{color:#b0b0b0;cursor:default}.ab-dp-cg-content,.ab-dp-cg-head,.ab-dp-cg-title{display:flex;align-items:center}.ab-dp-cg-title{user-select:none;font-size:.14rem;padding-bottom:.08rem}.ab-dp-cg-title>strong{flex:1 1;margin-left:.1rem;cursor:default;color:#4a4a4a}.ab-dp-cg-title>strong.ab-dp-cg-clickable{cursor:pointer}.ab-dp-cg-title>strong.ab-dp-cg-clickable:hover{color:#000}.ab-dp-cg-dis-icon,.ab-dp-cg-icon{align-self:flex-end;margin-left:.08rem}.ab-dp-cg-icon{cursor:pointer}.ab-dp-cg-head{padding-bottom:.05rem}.ab-dp-cg-head>li{display:flex;align-items:center;justify-content:center;cursor:default}.ab-dp-cg-content{flex-wrap:wrap}.ab-dp-cg-content>li{cursor:pointer;display:flex;align-items:center;justify-content:center;color:#000}.ab-dp-cg-content>li:hover{background:#f0f0f0}.ab-dp-cg-content>li.ab-dp-cg-dis{cursor:not-allowed;color:#b0b0b0}.ab-dp-cg-content>li.ab-dp-cg-dis:hover{background:0 0}.ab-dp-cg-content>li.ab-dp-cg-selected,.ab-dp-cg-content>li:active{background:#c7e0f4;border:3px solid #c7e0f4;border-radius:2px;color:#000}.ab-dp-cg-content>li.ab-dp-cg-today{background:#0078d4;color:#fff}.ab-dp-cg-arrow{cursor:pointer}.ab-trigger-wrap{position:absolute;top:0;left:0;z-index:101}.ab-trigger-wrap.ab-trigger-hidden{display:none}.ab-trigger-mask{position:fixed;top:0;left:0;bottom:0;right:0;z-index:101;background-color:transparent;display:none}.ab-trigger-mask.ab-trigger-mask-show{display:block}.ab-trigger-fade-appear,.ab-trigger-fade-enter,.ab-trigger-fade-hr-appear,.ab-trigger-fade-hr-enter{opacity:0}.ab-trigger-fade-appear,.ab-trigger-fade-enter{transform:scale(.7)}.ab-trigger-fade-hr-appear,.ab-trigger-fade-hr-enter{opacity:0;transform:scaleY(.7)}.ab-trigger-fade-appear-active,.ab-trigger-fade-enter-active,.ab-trigger-fade-hr-appear-active,.ab-trigger-fade-hr-enter-active{opacity:1;transition:opacity .2s,transform .2s}.ab-trigger-fade-appear-active,.ab-trigger-fade-enter-active{transform:scale(1)}.ab-trigger-fade-hr-appear-active,.ab-trigger-fade-hr-enter-active{transform:scaleY(1)}.ab-trigger-fade-exit,.ab-trigger-fade-hr-exit{opacity:1}.ab-trigger-fade-exit-active,.ab-trigger-fade-hr-exit-active{opacity:0;transition:opacity .2s,transform .2s}.ab-trigger-fade-exit-active{transform:scale(.7)}.ab-trigger-fade-hr-exit-active{transform:scaleY(.7)}.ab-trigger-fade-exit-done,.ab-trigger-fade-hr-exit-done{display:none}.ab-popover-wrap{background-clip:padding-box;min-width:210px;border-radius:4px}.ab-popover-inner{padding:.08rem .11rem .05rem;position:relative;width:100%;overflow:auto;font-size:.12rem}.ab-popover-inner-expand{padding-right:.1rem}.ab-popover-arrow{position:absolute;display:block;width:8px;height:8px;border-style:solid;box-shadow:3px 3px 7px rgba(0,0,0,.07)}.ab-popover-close{position:absolute;right:.02rem;top:.05rem;cursor:pointer;padding:0 .05rem;color:#bfbfbf;font-size:.2rem;line-height:1;z-index:2}.ab-popover-close:hover{color:#4a4a4a}.ab-popover-white{background-color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.15)}.ab-popover-white .ab-popover-arrow{background-color:#fff;border-color:transparent #fff #fff transparent;border-width:4px}.ab-popover-orange{border:1px solid #906c00;box-shadow:1px 1px 5px -1px #000;background-color:#fffaec}.ab-popover-orange .ab-popover-arrow{background-color:#fffaec;border-color:transparent #906c00 #906c00 transparent;border-width:1px}@media only screen and (max-width:767px){.ab-popover-wrap{width:calc(100% - .3rem)}}.ab-date-picker{position:relative}.ab-date-picker-input{outline:0;font-size:.14rem;padding:.04rem;width:1.44rem}.ab-date-picker-input.ab-date-picker-error{background:#fffacd}.ab-date-picker-icon{color:#606060;position:absolute;right:.05rem;top:50%;transform:translateY(-50%)}
+.ab-dp-cal{display:flex}.ab-dp-cal-my{padding-left:.12rem;margin-left:.12rem;border-left:1px solid #b0b0b0}.ab-dp-cal-day,.ab-dp-cal-my{width:2.1rem}.ab-dp-cal-dis{color:#c8c8c8}.ab-dp-cal-dg>ul>li{width:14.28%;height:.28rem}.ab-dp-cal-myg{padding-bottom:.62rem}.ab-dp-cal-myg>ul{justify-content:space-between}.ab-dp-cal-myg>ul>li{width:.4rem;height:.4rem;margin-bottom:.1rem}.ab-dp-cal-t{cursor:pointer;position:absolute;right:.08rem;bottom:.3rem}.ab-dp-cal-t.ab-dp-cal-t-dis{color:#b0b0b0;cursor:default}.ab-dp-cg-content,.ab-dp-cg-head,.ab-dp-cg-title{display:flex;align-items:center}.ab-dp-cg-title{user-select:none;font-size:.14rem;padding-bottom:.08rem}.ab-dp-cg-title>strong{flex:1 1;margin-left:.1rem;cursor:default;color:#4a4a4a}.ab-dp-cg-title>strong.ab-dp-cg-clickable{cursor:pointer}.ab-dp-cg-title>strong.ab-dp-cg-clickable:hover{color:#000}.ab-dp-cg-dis-icon,.ab-dp-cg-icon{align-self:flex-end;margin-left:.08rem}.ab-dp-cg-icon{cursor:pointer}.ab-dp-cg-head{padding-bottom:.05rem}.ab-dp-cg-head>li{display:flex;align-items:center;justify-content:center;cursor:default}.ab-dp-cg-content{flex-wrap:wrap}.ab-dp-cg-content>li{cursor:pointer;display:flex;align-items:center;justify-content:center;color:#333;border-radius:4px}.ab-dp-cg-content>li:hover{background:#f0f0f0}.ab-dp-cg-content>li.ab-dp-cg-out{color:#666}.ab-dp-cg-content>li.ab-dp-cg-dis{cursor:not-allowed;color:#b0b0b0}.ab-dp-cg-content>li.ab-dp-cg-dis:hover{background:0 0}.ab-dp-cg-content>li.ab-dp-cg-selected{background:#0078d4;color:#fff}.ab-dp-cg-content>li.ab-dp-cg-selected:hover{background:#0078d4}.ab-dp-cg-content>li.ab-dp-cg-today{border:1px solid #0078d4}.ab-dp-cg-arrow{cursor:pointer}.ab-trigger-wrap{position:absolute;top:0;left:0;z-index:101}.ab-trigger-wrap.ab-trigger-hidden{display:none}.ab-trigger-mask{position:fixed;top:0;left:0;bottom:0;right:0;z-index:101;background-color:transparent;display:none}.ab-trigger-mask.ab-trigger-mask-show{display:block}.ab-trigger-fade-appear,.ab-trigger-fade-enter,.ab-trigger-fade-hr-appear,.ab-trigger-fade-hr-enter{opacity:0}.ab-trigger-fade-appear,.ab-trigger-fade-enter{transform:scale(.7)}.ab-trigger-fade-hr-appear,.ab-trigger-fade-hr-enter{opacity:0;transform:scaleY(.7)}.ab-trigger-fade-appear-active,.ab-trigger-fade-enter-active,.ab-trigger-fade-hr-appear-active,.ab-trigger-fade-hr-enter-active{opacity:1;transition:opacity .2s,transform .2s}.ab-trigger-fade-appear-active,.ab-trigger-fade-enter-active{transform:scale(1)}.ab-trigger-fade-hr-appear-active,.ab-trigger-fade-hr-enter-active{transform:scaleY(1)}.ab-trigger-fade-exit,.ab-trigger-fade-hr-exit{opacity:1}.ab-trigger-fade-exit-active,.ab-trigger-fade-hr-exit-active{opacity:0;transition:opacity .2s,transform .2s}.ab-trigger-fade-exit-active{transform:scale(.7)}.ab-trigger-fade-hr-exit-active{transform:scaleY(.7)}.ab-trigger-fade-exit-done,.ab-trigger-fade-hr-exit-done{display:none}.ab-popover-wrap{background-clip:padding-box;min-width:210px;border-radius:4px}.ab-popover-inner{padding:.08rem .11rem .05rem;position:relative;width:100%;overflow:auto;font-size:.12rem}.ab-popover-inner-expand{padding-right:.1rem}.ab-popover-arrow{position:absolute;display:block;width:8px;height:8px;border-style:solid;box-shadow:3px 3px 7px rgba(0,0,0,.07)}.ab-popover-close{position:absolute;right:.02rem;top:.05rem;cursor:pointer;padding:0 .05rem;color:#bfbfbf;font-size:.2rem;line-height:1;z-index:2}.ab-popover-close:hover{color:#4a4a4a}.ab-popover-white{background-color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.15)}.ab-popover-white .ab-popover-arrow{background-color:#fff;border-color:transparent #fff #fff transparent;border-width:4px}.ab-popover-orange{border:1px solid #906c00;box-shadow:1px 1px 5px -1px #000;background-color:#fffaec}.ab-popover-orange .ab-popover-arrow{background-color:#fffaec;border-color:transparent #906c00 #906c00 transparent;border-width:1px}@media only screen and (max-width:767px){.ab-popover-wrap{width:calc(100% - .3rem)}}.ab-date-picker{position:relative}.ab-date-picker-input{outline:0;font-size:.14rem;padding:.04rem;width:1.44rem}.ab-date-picker-input.ab-date-picker-error{background:#fffacd}.ab-date-picker-icon{color:#606060;position:absolute;right:.05rem;top:50%;transform:translateY(-50%)}

package/lib/index.d.ts

@@ -53,8 +53,8 @@ export type { LoadingProps } from './loading';
 export { default as Loading } from './loading';
 export type { LoadingContainerProps } from './loading-container';
 export { default as LoadingContainer } from './loading-container';
-export type { ScrollContainerProps } from './scroll-container';
-export { default as ScrollContainer, ScrollbarSize } from './scroll-container';
+export type { ScrollbarProps } from './scrollbar';
+export { default as Scrollbar, ScrollbarSize } from './scrollbar';
 export { default as LoadingBar } from './loading-bar';
 export type { LoadingIconProps } from './loading-icon';
 export { default as LoadingIcon } from './loading-icon';

package/lib/index.js

@@ -167,16 +167,16 @@ Object.defineProperty(exports, "Script", {
     return _script.default;
   }
 });
-Object.defineProperty(exports, "ScrollContainer", {
+Object.defineProperty(exports, "Scrollbar", {
   enumerable: true,
   get: function get() {
-    return _scrollContainer.default;
+    return _scrollbar.default;
   }
 });
 Object.defineProperty(exports, "ScrollbarSize", {
   enumerable: true,
   get: function get() {
-    return _scrollContainer.ScrollbarSize;
+    return _scrollbar.ScrollbarSize;
   }
 });
 Object.defineProperty(exports, "Select", {
@@ -272,7 +272,7 @@ var _datePicker = _interopRequireDefault(require("./date-picker"));
 var _tabs = _interopRequireDefault(require("./tabs"));
 var _loading = _interopRequireDefault(require("./loading"));
 var _loadingContainer = _interopRequireDefault(require("./loading-container"));
-var _scrollContainer = _interopRequireWildcard(require("./scroll-container"));
+var _scrollbar = _interopRequireWildcard(require("./scrollbar"));
 var _loadingBar = _interopRequireDefault(require("./loading-bar"));
 var _loadingIcon = _interopRequireDefault(require("./loading-icon"));
 var _trigger = _interopRequireDefault(require("./trigger"));

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

@@ -1,5 +1,9 @@
-import React, { MouseEventHandler, MouseEvent } from 'react';
-export interface LazyImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+import React from 'react';
+export interface LazyImageProps extends React.AllHTMLAttributes<HTMLElement> {
+    /**
+     * 标签名，默认div
+     */
+    tagName?: string;
     /**
      * 需要显示的图片
      */
@@ -9,34 +13,13 @@ export interface LazyImageProps extends React.ImgHTMLAttributes<HTMLImageElement
      */
     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/lib/lazy-image/index.js

@@ -41,6 +41,16 @@ var __assign = void 0 && (void 0).__assign || function () {
   };
   return __assign.apply(this, arguments);
 };
+var __rest = void 0 && (void 0).__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;
+};
 function noop() {}
 var LazyImage = /** @class */function (_super) {
   __extends(LazyImage, _super);
@@ -97,36 +107,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
     };
@@ -148,34 +128,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.default.createElement("img", __assign({
-      alt: ""
-    }, props, {
-      className: (0, _classnames.default)(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.default.createElement(Wrapper, __assign({}, extraProps, {
+      className: (0, _classnames.default)(cls, className, (_a = {}, _a["".concat(cls, "-loading")] = loading, _a))
+    }), /*#__PURE__*/_react.default.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.default.Component);

package/lib/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/lib/loading-container/index.d.ts

@@ -17,17 +17,26 @@ export interface LoadingContainerProps {
      * LoadingIcon是否需要保持在可视区域内
      */
     loadingInView?: boolean;
+    /**
+     * loadingInView为true时才生效
+     * LoadingIcon距离边界最近距离
+     */
+    spaceToBorder: number;
 }
 declare class LoadingContainer extends React.Component<LoadingContainerProps> {
     prefixCls: string;
     addScrollHandlerListener: AddListenerEventRemoveHandler;
+    addResizeHandlerListener: AddListenerEventRemoveHandler;
     wrapRef: React.RefObject<HTMLDivElement>;
     iconRef: React.RefObject<HTMLSpanElement>;
+    static defaultProps: {
+        spaceToBorder: number;
+    };
     componentDidMount(): void;
     componentDidUpdate(prevProps: Readonly<LoadingContainerProps>): void;
     componentWillUnmount(): void;
-    addScrollListener: () => void;
-    removeScrollListener: () => void;
+    addListener: () => void;
+    removeListener: () => void;
     setIconTopStyle: (top: string) => void;
     onHandlerScroll: () => void;
     render(): JSX.Element;

package/lib/loading-container/index.js

@@ -41,17 +41,25 @@ var LoadingContainer = /** @class */function (_super) {
     _this.prefixCls = 'ab-loading-container';
     _this.wrapRef = /*#__PURE__*/(0, _react.createRef)();
     _this.iconRef = /*#__PURE__*/(0, _react.createRef)();
-    _this.addScrollListener = function () {
+    _this.addListener = function () {
       if (!_this.addScrollHandlerListener) {
         // 滚动监听
         _this.addScrollHandlerListener = (0, _utils.addEventListener)(window, 'scroll', (0, _utils.throttleWithRAF)(_this.onHandlerScroll));
       }
+      if (!_this.addResizeHandlerListener) {
+        // resize监听
+        _this.addResizeHandlerListener = (0, _utils.addEventListener)(window, 'resize', (0, _utils.throttleWithRAF)(_this.onHandlerScroll));
+      }
     };
-    _this.removeScrollListener = function () {
+    _this.removeListener = function () {
       if (_this.addScrollHandlerListener) {
         _this.addScrollHandlerListener();
         _this.addScrollHandlerListener = null;
       }
+      if (_this.addResizeHandlerListener) {
+        _this.addResizeHandlerListener();
+        _this.addResizeHandlerListener = null;
+      }
     };
     _this.setIconTopStyle = function (top) {
       _this.iconRef.current.style.top = top;
@@ -81,36 +89,39 @@ var LoadingContainer = /** @class */function (_super) {
         _this.setIconTopStyle("".concat(window.innerHeight / 2 - top, "px"));
         return;
       }
+      var spaceToBorder = _this.props.spaceToBorder;
       if (top < 0) {
         // 组件上半部分超出可视区域
         var iconTop_1 = bottom / 2 - top;
-        _this.setIconTopStyle("".concat(iconTop_1 > height - halfIconHeight ? height - halfIconHeight : iconTop_1, "px"));
+        var maxTop = height - halfIconHeight - spaceToBorder;
+        _this.setIconTopStyle("".concat(iconTop_1 > maxTop ? maxTop : iconTop_1, "px"));
         return;
       }
       // 组件下半部分超出可视区域
       var iconTop = (window.innerHeight - top) / 2;
-      _this.setIconTopStyle("".concat(iconTop < halfIconHeight ? halfIconHeight : iconTop, "px"));
+      var minTop = halfIconHeight + spaceToBorder;
+      _this.setIconTopStyle("".concat(iconTop < minTop ? minTop : iconTop, "px"));
     };
     return _this;
   }
   LoadingContainer.prototype.componentDidMount = function () {
     if (this.props.loadingInView && this.props.loading) {
       this.onHandlerScroll();
-      this.addScrollListener();
+      this.addListener();
     }
   };
   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();
+        this.addListener();
         return;
       }
-      this.removeScrollListener();
+      this.removeListener();
     }
   };
   LoadingContainer.prototype.componentWillUnmount = function () {
-    this.removeScrollListener();
+    this.removeListener();
   };
   LoadingContainer.prototype.render = function () {
     var _a;
@@ -130,6 +141,9 @@ var LoadingContainer = /** @class */function (_super) {
       ref: this.iconRef
     })));
   };
+  LoadingContainer.defaultProps = {
+    spaceToBorder: 0
+  };
   return LoadingContainer;
 }(_react.default.Component);
 var _default = LoadingContainer;

package/{esm/scroll-container → lib/scrollbar}/index.d.ts

@@ -4,7 +4,7 @@ export declare enum ScrollbarSize {
     Medium = "md",
     Large = "lg"
 }
-export interface ScrollContainerProps extends React.HtmlHTMLAttributes<HTMLElement> {
+export interface ScrollbarProps extends React.HtmlHTMLAttributes<HTMLElement> {
     /**
      * 滚动内容
      */
@@ -38,13 +38,13 @@ export interface ScrollContainerProps extends React.HtmlHTMLAttributes<HTMLEleme
      */
     isHiddenBar?: boolean;
 }
-interface ScrollContainerNotRefProps extends ScrollContainerProps {
+interface ScrollbarNotRefProps extends ScrollbarProps {
     /**
      * 此属性可以忽略， storybook问题
      */
     upperRef: React.Ref<HTMLElement>;
 }
-export declare class ScrollContainerNotRef extends React.Component<ScrollContainerNotRefProps> {
+export declare class ScrollbarNotRef extends React.Component<ScrollbarNotRefProps> {
     static defaultProps: {
         tagName: string;
         isHiddenBar: boolean;
@@ -54,9 +54,7 @@ export declare class ScrollContainerNotRef extends React.Component<ScrollContain
     };
     prefixCls: string;
     wrapRef: React.RefObject<HTMLElement>;
-    contentRef: React.RefObject<HTMLDivElement>;
-    getMarginValueBySize: () => "0" | "0.12rem" | "0.08rem" | "0.06rem";
     render(): JSX.Element;
 }
-declare const ScrollContainer: React.ForwardRefExoticComponent<ScrollContainerProps & React.RefAttributes<HTMLElement>>;
-export default ScrollContainer;
+declare const Scrollbar: React.ForwardRefExoticComponent<ScrollbarProps & React.RefAttributes<HTMLElement>>;
+export default Scrollbar;