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

package/esm/accordion/CollapseItem.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { CollapseProps } from '../collapse';
+import { BaseAccordionItemProps } from './type';
+/**
+ * 父组件传进来的值，不需要用户传入
+ */
+export interface CollapseAccordionItemProps extends BaseAccordionItemProps, Pick<CollapseProps, 'title' | 'appear' | 'visible'> {
+    onClick?: () => void;
+}
+declare class CollapseAccordionItem extends React.Component<CollapseAccordionItemProps, null> {
+    getTitle: () => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    render(): JSX.Element;
+}
+export default CollapseAccordionItem;

package/esm/accordion/CollapseItem.js

@@ -0,0 +1,56 @@
+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 from 'react';
+import Collapse from '../collapse';
+var CollapseAccordionItem = /** @class */function (_super) {
+  __extends(CollapseAccordionItem, _super);
+  function CollapseAccordionItem() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+    _this.getTitle = function () {
+      var _a = _this.props,
+        title = _a.title,
+        onClick = _a.onClick;
+      if (!title) {
+        return null;
+      }
+      var child = React.Children.only(title);
+      return /*#__PURE__*/React.cloneElement(child, {
+        onClick: onClick
+      });
+    };
+    return _this;
+  }
+  CollapseAccordionItem.prototype.render = function () {
+    var _a = this.props,
+      appear = _a.appear,
+      children = _a.children,
+      visible = _a.visible;
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Collapse, {
+      title: this.getTitle(),
+      visible: visible,
+      appear: appear
+    }, children));
+  };
+  return CollapseAccordionItem;
+}(React.Component);
+export default CollapseAccordionItem;

package/esm/accordion/Item.d.ts

@@ -1,22 +1,19 @@
 import React from 'react';
-import { CollapseProps } from '../collapse';
-/**
- * 暴露给用户的接口，用于接收来自用户输入的参数
- */
-export interface BaseAccordionItemProps extends Pick<CollapseProps, 'title' | 'appear'> {
+import { BaseAccordionItemProps } from './type';
+interface AccordionItemChild {
     /**
-     * 用于标识Item
+     * 是否是展开状态
      */
-    name: React.ReactText;
+    visible: boolean;
+    /**
+     * 点击触发后改变Visible状态
+     */
+    onClick?: () => void;
 }
-/**
- * 父组件传进来的值，不需要用户传入
- */
-export interface AccordionItemProps extends BaseAccordionItemProps, Pick<CollapseProps, 'visible'> {
-    onTitleClick?: () => void;
+export interface AccordionItemProps extends BaseAccordionItemProps, Partial<AccordionItemChild> {
+    children: React.ReactElement | ((params: AccordionItemChild) => React.ReactElement);
 }
 declare class AccordionItem extends React.Component<AccordionItemProps, null> {
-    getTitle: () => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-    render(): JSX.Element;
+    render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | (((params: AccordionItemChild) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & string) | (((params: AccordionItemChild) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & number) | (((params: AccordionItemChild) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & false) | (((params: AccordionItemChild) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & true);
 }
 export default AccordionItem;

package/esm/accordion/Item.js

@@ -21,35 +21,23 @@ var __extends = this && this.__extends || function () {
   };
 }();
 import React from 'react';
-import Collapse from '../collapse';
 var AccordionItem = /** @class */function (_super) {
   __extends(AccordionItem, _super);
   function AccordionItem() {
-    var _this = _super !== null && _super.apply(this, arguments) || this;
-    _this.getTitle = function () {
-      var _a = _this.props,
-        title = _a.title,
-        onTitleClick = _a.onTitleClick;
-      if (!title) {
-        return null;
-      }
-      var child = React.Children.only(title);
-      return /*#__PURE__*/React.cloneElement(child, {
-        onClick: onTitleClick
-      });
-    };
-    return _this;
+    return _super !== null && _super.apply(this, arguments) || this;
   }
   AccordionItem.prototype.render = function () {
     var _a = this.props,
-      appear = _a.appear,
-      children = _a.children,
-      visible = _a.visible;
-    return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Collapse, {
-      title: this.getTitle(),
-      visible: visible,
-      appear: appear
-    }, children));
+      onClick = _a.onClick,
+      visible = _a.visible,
+      children = _a.children;
+    if (typeof children === 'function') {
+      return children({
+        onClick: onClick,
+        visible: visible
+      });
+    }
+    return children;
   };
   return AccordionItem;
 }(React.Component);

package/esm/accordion/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import { BaseAccordionItemProps } from './Item';
+import { CollapseAccordionItemProps } from './CollapseItem';
+import { AccordionItemProps } from './Item';
 export interface AccordionProps {
     children: React.ReactElement | React.ReactElement[];
     /**
@@ -12,12 +13,13 @@ export interface AccordionProps {
     interactive?: boolean;
     /**
      * visible改变前执行的方法
+     * 如果返回false，则不执行这次visible变更；如果返回true，则执行这次visible变更
      */
-    beforeVisibleChange?: (name?: React.ReactText) => boolean;
+    beforeVisibleChange?: (visible: boolean, name?: React.ReactText) => boolean;
     /**
      * visible改变后执行的方法
      */
-    onVisibleChange?: (name?: React.ReactText, visible?: boolean) => void;
+    afterVisibleChange?: (visible: boolean, name?: React.ReactText) => void;
     /**
      * 需要一开始显示的Item name集合
      */
@@ -25,19 +27,20 @@ export interface AccordionProps {
 }
 interface AccordionState {
     visibleNames: {
-        [propName: string]: boolean;
-        [propName: number]: boolean;
+        [propName: React.ReactText]: boolean;
     };
 }
 declare class Accordion extends React.Component<AccordionProps, AccordionState> {
     readonly prefixCls = "ab-accordion";
-    static Item: React.ComponentType<BaseAccordionItemProps>;
+    static CollapseItem: React.ComponentType<Omit<CollapseAccordionItemProps, "visible" | "onClick">>;
+    static Item: React.ComponentType<Pick<AccordionItemProps, "name" | "children">>;
     constructor(props: any);
     static defaultProps: {
         className: string;
         interactive: boolean;
         defaultVisibleNames: any[];
     };
+    refresh: () => void;
     /** *
      * 展开下拉链接列表
      * @param name

package/esm/accordion/index.js

@@ -34,13 +34,26 @@ var __assign = this && this.__assign || function () {
 };
 import React from 'react';
 import classNames from 'classnames';
-import { isEmptyArray } from '@autobest-ui/utils';
+import { isBlank, isEmptyArray } from '@autobest-ui/utils';
+import CollapseAccordionItem from './CollapseItem';
 import AccordionItem from './Item';
 var Accordion = /** @class */function (_super) {
   __extends(Accordion, _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 (!isEmptyArray(defaultVisibleNames)) {
+        defaultVisibleNames.forEach(function (name) {
+          visibleNames[name] = true;
+        });
+      }
+      _this.setState({
+        visibleNames: visibleNames
+      });
+    };
     /** *
      * 展开下拉链接列表
      * @param name
@@ -50,25 +63,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 = {};
@@ -90,20 +103,23 @@ var Accordion = /** @class */function (_super) {
       className = _a.className,
       children = _a.children;
     var visibleNames = this.state.visibleNames;
-    return /*#__PURE__*/React.createElement("ul", {
+    return /*#__PURE__*/React.createElement("div", {
       className: classNames(cls, className)
     }, React.Children.map(children, function (child) {
       var name = child.props.name;
+      if (isBlank(name)) {
+        return child;
+      }
       return /*#__PURE__*/React.cloneElement(child, {
         key: name,
-        onTitleClick: function onTitleClick() {
+        onClick: function onClick() {
           _this.onVisibleChange(name);
         },
         visible: !!visibleNames[name]
       });
     }));
   };
-  // 限制用户传入的参数，所以用BaseAccordionItemProps
+  Accordion.CollapseItem = CollapseAccordionItem;
   Accordion.Item = AccordionItem;
   Accordion.defaultProps = {
     className: '',

package/esm/accordion/type.d.ts

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

package/esm/accordion/type.js

@@ -0,0 +1 @@
+export {};

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

@@ -31,16 +31,17 @@ var DayCalendar = function DayCalendar(props) {
           isOut = false;
         }
         var disabled = isOutOfDate(date, minDate, maxDate);
+        var selected = compareDate(date, selectedDate) === 0;
         return {
           value: date,
           name: date.getDate(),
           disabled: disabled,
-          selected: compareDate(date, selectedDate) === 0,
+          selected: selected,
           isToday: 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);
@@ -79,7 +80,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/esm/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/esm/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/esm/date-picker/calendar/grid/index.js

@@ -46,10 +46,10 @@ var CalendarGrid = function CalendarGrid(_a) {
   })), /*#__PURE__*/React.createElement("ul", {
     className: "".concat(cls, "-content")
   }, list.map(function (item, index) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     return /*#__PURE__*/React.createElement("li", {
       key: "".concat(index, " ").concat(item.name),
-      className: classNames((_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: classNames((_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/esm/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/esm/date-picker/index.js

@@ -37,6 +37,7 @@ import classNames from 'classnames';
 import Popover from '../popover';
 import Calendar from './calendar';
 // TODO: 移动端
+// TODO: 时区问题导致Date().getDate()获取到的日期会有±1天的时差
 var DatePicker = /** @class */function (_super) {
   __extends(DatePicker, _super);
   function DatePicker(props) {

package/esm/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/esm/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/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

@@ -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;