@autobest-ui/components 2.2.1 → 2.4.0

package/esm/collapse/index.js

@@ -9,98 +9,72 @@ var __extends = this && this.__extends || function () {
         if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
       }
     };
-
     return _extendStatics(d, b);
   };
-
   return function (d, b) {
     if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-
     _extendStatics(d, b);
-
     function __() {
       this.constructor = d;
     }
-
     d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
   };
 }();
-
 import React from 'react';
 import { CSSTransition } from 'react-transition-group';
 import classNames from 'classnames';
-
-var Collapse =
-/** @class */
-function (_super) {
+var Collapse = /** @class */function (_super) {
   __extends(Collapse, _super);
-
   function Collapse(props) {
     var _this = _super.call(this, props) || this;
-
     _this.prefixCls = 'ab-collapse';
-
     _this.onEnter = function (el) {
       _this.cacheHeight = "".concat(el.offsetHeight, "px");
       el.style.height = '0px';
     };
-
     _this.onEntering = function (el) {
       el.style.height = _this.cacheHeight;
     };
-
     _this.onEntered = function (el) {
       el.style.height = '';
-
       if (_this.props.onEntered) {
         _this.props.onEntered(el, _this.props.name);
       }
     };
-
     _this.onExit = function (el) {
       el.style.height = "".concat(el.offsetHeight, "px");
     };
-
     _this.onExiting = function (el) {
       el.style.height = '0px';
     };
-
     _this.onExited = function (el) {
       el.style.height = '';
-
       if (_this.props.onExited) {
         _this.props.onExited(el, _this.props.name);
       }
     };
-
     _this.onChange = function () {
       var visible = !_this.state.visible;
-
       if (!('visible' in _this.props)) {
         var isUserClicked = _this.state.isUserClicked || visible;
-
         _this.setState({
           visible: visible,
           isUserClicked: isUserClicked
         });
       }
-
       var _a = _this.props,
-          onChange = _a.onChange,
-          name = _a.name;
-
+        onChange = _a.onChange,
+        name = _a.name;
       if (onChange) {
         onChange(visible, name);
       }
     };
-
     _this.state = {
       visible: props.defaultVisible,
       isUserClicked: false
     };
     return _this;
   }
-
   Collapse.getDerivedStateFromProps = function (nextProps, preState) {
     if ('visible' in nextProps) {
       var isUserClicked = preState.isUserClicked || nextProps.visible;
@@ -109,25 +83,19 @@ function (_super) {
         isUserClicked: isUserClicked
       };
     }
-
     return null;
   };
-
   Collapse.prototype.renderTitle = function () {
     var title = this.props.title;
-
     if (!title) {
       return null;
     }
-
     var child;
-
     if (typeof title === 'function') {
       child = title(this.state.visible);
     } else {
       child = React.Children.only(title);
     }
-
     return /*#__PURE__*/React.cloneElement(child, {
       onClick: child.props.onClick || this.onChange
     });
@@ -135,19 +103,16 @@ function (_super) {
   /**
    * @returns {*}
    */
-
-
   Collapse.prototype.renderContent = function () {
     var _a;
-
     var _b = this.props,
-        children = _b.children,
-        className = _b.className,
-        appear = _b.appear,
-        mountOnEnter = _b.mountOnEnter;
+      children = _b.children,
+      className = _b.className,
+      appear = _b.appear,
+      mountOnEnter = _b.mountOnEnter;
     var _c = this.state,
-        visible = _c.visible,
-        isUserClicked = _c.isUserClicked;
+      visible = _c.visible,
+      isUserClicked = _c.isUserClicked;
     var cls = this.prefixCls;
     return /*#__PURE__*/React.createElement(CSSTransition, {
       "in": visible,
@@ -167,12 +132,10 @@ function (_super) {
       className: "".concat(cls, "-content")
     }, children)));
   };
-
   Collapse.prototype.render = function () {
     return /*#__PURE__*/React.createElement(React.Fragment, null, this.renderTitle(), this.renderContent());
-  }; // 默认值
-
-
+  };
+  // 默认值
   Collapse.defaultProps = {
     defaultVisible: false,
     appear: true,
@@ -180,5 +143,4 @@ function (_super) {
   };
   return Collapse;
 }(React.Component);
-
 export default Collapse;

package/esm/confirm/index.d.ts

@@ -32,6 +32,14 @@ export interface ConfirmProps extends Omit<ModalProps, 'visible'> {
      * 点击取消的回调函数
      */
     onCancel?: () => void;
+    /**
+     *自定义渲染 cancel 按钮，cancelText 和 cancelClassName 不再生效
+     */
+    renderCancel?: (onCancel: () => void) => React.ReactChild;
+    /**
+     *自定义渲染 ok 按钮，okText 和 okClassName 不再生效
+     */
+    renderOk?: (onOk: () => void) => React.ReactChild;
 }
 declare const Confirm: (config: ConfirmProps) => {
     destroy: (type?: string) => void;

package/esm/confirm/index.js

@@ -2,18 +2,14 @@ var __assign = this && this.__assign || function () {
   __assign = Object.assign || function (t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
       s = arguments[i];
-
       for (var p in s) {
         if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
       }
     }
-
     return t;
   };
-
   return __assign.apply(this, arguments);
 };
-
 import React from 'react';
 import ReactDOM from 'react-dom';
 import classNames from 'classnames';
@@ -34,16 +30,13 @@ var defaultConfig = {
   onOk: function onOk() {},
   onCancel: function onCancel() {}
 };
-
 var Confirm = function Confirm(config) {
   if (!canUseDOM) {
     throw new Error('Confirm use client!');
   }
-
   var div = document.createElement('div');
   document.body.appendChild(div);
   var currentConfig = defaultConfig;
-
   function updateCurrentConfig(nextConfig) {
     var cancelClassName = classNames(currentConfig.cancelClassName, nextConfig.cancelClassName);
     var okClassName = classNames(currentConfig.okClassName, nextConfig.okClassName);
@@ -53,66 +46,66 @@ var Confirm = function Confirm(config) {
       onDestroy: onDestroy
     });
   }
-
   updateCurrentConfig(config);
-
   function close(type) {
     if (type === void 0) {
       type = 'cancel';
-    } // 防止重复触发close
-
-
+    }
+    // 防止重复触发close
     if (!currentConfig.visible) {
       return;
     }
-
     currentConfig = __assign(__assign({}, currentConfig), {
       visible: false
     });
     render(currentConfig);
-
     if (type === 'ok') {
       currentConfig.onOk();
     } else {
       currentConfig.onCancel();
     }
   }
-
   function onDestroy() {
     var unmountResult = ReactDOM.unmountComponentAtNode(div);
-
     if (unmountResult && div.parentNode) {
       try {
         div.parentNode.removeChild(div);
       } catch (e) {}
     }
   }
-
   function onVisible() {
     close('cancel');
   }
-
   function onConfirm() {
     close('ok');
   }
-
   function render(props) {
+    var className = props.className,
+      content = props.content,
+      hiddenCancel = props.hiddenCancel,
+      hiddenOk = props.hiddenOk,
+      cancelClassName = props.cancelClassName,
+      okClassName = props.okClassName,
+      okText = props.okText,
+      cancelText = props.cancelText,
+      renderOk = props.renderOk,
+      renderCancel = props.renderCancel,
+      visible = props.visible;
     ReactDOM.render( /*#__PURE__*/React.createElement(Modal, __assign({}, props, {
-      className: classNames("".concat(prefixCls, "-wrap"), props.className),
-      visible: props.visible,
+      className: classNames("".concat(prefixCls, "-wrap"), className),
+      visible: visible,
       onClose: onVisible
-    }), props.content, props.hiddenCancel && props.hiddenOk ? null : /*#__PURE__*/React.createElement("div", {
+    }), content, hiddenCancel && hiddenOk ? null : /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-btns")
-    }, props.hiddenCancel ? null : /*#__PURE__*/React.createElement("button", {
-      className: props.cancelClassName,
+    }, !hiddenCancel && (renderCancel ? renderCancel(onVisible) : /*#__PURE__*/React.createElement("button", {
+      className: cancelClassName,
       onClick: onVisible
-    }, props.cancelText), props.hiddenOk ? null : /*#__PURE__*/React.createElement("button", {
-      className: props.okClassName,
+    }, cancelText)), !hiddenOk && (renderOk ? renderOk(onConfirm) : /*#__PURE__*/React.createElement("button", {
+      className: okClassName,
       onClick: onConfirm
-    }, props.okText))), div);
-  } // 渲染组件
-
-
+    }, okText)))), div);
+  }
+  // 渲染组件
   render(currentConfig);
   return {
     destroy: close,
@@ -122,5 +115,4 @@ var Confirm = function Confirm(config) {
     }
   };
 };
-
 export default Confirm;

package/esm/confirm/style/index.css

@@ -1 +1 @@
-.ab-confirm-btns{display:flex;justify-content:flex-end;padding-top:.42rem}.ab-confirm-cancel,.ab-confirm-ok{overflow:hidden;position:relative;font-size:.12rem;border-width:1px;border-style:solid;outline:0;cursor:pointer;font-weight:700;padding:.05rem .3rem;display:inline-block;color:#fff;margin-left:.3rem}.ab-confirm-ok{border-color:#bc0000;background:linear-gradient(180deg,#c00000 0,#c00000 0,#a00000 100%,#a00000 100%)}.ab-confirm-ok:hover{border-color:#bc0000;background:#bc0000}.ab-confirm-cancel{border-color:grey;background:linear-gradient(180deg,#909090 0,#909090 0,#707070 100%,#707070 100%)}.ab-confirm-cancel:hover{border-color:grey;background:grey}
+.ab-mask{position:fixed;top:0;left:0;z-index:101;width:100%;height:100%;background-color:rgba(0,0,0,.45);transition:opacity .4s cubic-bezier(.7,.3,.1,1)}.ab-mask-fade-appear,.ab-mask-fade-enter{opacity:0}.ab-mask-fade-appear-active,.ab-mask-fade-enter-active,.ab-mask-fade-enter-done,.ab-mask-fade-exit{opacity:1}.ab-mask-fade-exit-active{opacity:0}.ab-mask-fade-exit-done{display:none}.ab-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:101;overflow:auto;outline:0}.ab-modal.ab-modal-center{text-align:center}.ab-modal.ab-modal-center::before{display:inline-block;width:0;height:100%;vertical-align:middle;content:""}.ab-modal.ab-modal-center .ab-modal-content{top:0;text-align:left;display:inline-block;vertical-align:middle}.ab-modal-content{position:relative;background-color:#fff;max-width:calc(100vw - .3rem);margin-left:auto;margin-right:auto;overflow:auto;-webkit-overflow-scrolling:touch;transition:transform .3s,opacity .3s cubic-bezier(.7,.3,.1,1);z-index:101}.ab-modal-title{position:relative;width:100%}.ab-modal-title .ab-modal-times{top:50%;transform:translateY(-50%)}.ab-modal-times{position:absolute;top:.12rem;right:.12rem;font-size:.15rem;color:#b0b0b0;cursor:pointer}.ab-modal-times svg{display:block}.ab-modal-times:hover{color:#333}.ab-modal-hidden{display:none}@media only screen and (max-width:767px){.ab-modal-content{width:calc(100vw - .3rem)}}.ab-modal-fade-appear,.ab-modal-fade-enter{transform:translate3d(0,-30px,0);opacity:0}.ab-modal-fade-appear-active,.ab-modal-fade-enter-active,.ab-modal-fade-enter-done,.ab-modal-fade-exit{transform:translateZ(0);opacity:1}.ab-modal-fade-exit-active{transform:translate3d(0,-30px,0);opacity:0}.ab-modal-fade-exit-done{display:none}.ab-confirm-btns{display:flex;justify-content:flex-end;padding-top:.42rem}.ab-confirm-cancel,.ab-confirm-ok{overflow:hidden;position:relative;font-size:.12rem;border-width:1px;border-style:solid;outline:0;cursor:pointer;font-weight:700;padding:.05rem .3rem;display:inline-block;color:#fff;margin-left:.3rem}.ab-confirm-ok{border-color:#bc0000;background:linear-gradient(180deg,#c00000 0,#c00000 0,#a00000 100%,#a00000 100%)}.ab-confirm-ok:hover{border-color:#bc0000;background:#bc0000}.ab-confirm-cancel{border-color:grey;background:linear-gradient(180deg,#909090 0,#909090 0,#707070 100%,#707070 100%)}.ab-confirm-cancel:hover{border-color:grey;background:grey}

package/esm/date-picker/DateEnum.js

@@ -1,5 +1,4 @@
 export var DayOfWeek;
-
 (function (DayOfWeek) {
   DayOfWeek[DayOfWeek["Sunday"] = 0] = "Sunday";
   DayOfWeek[DayOfWeek["Monday"] = 1] = "Monday";
@@ -9,9 +8,7 @@ export var DayOfWeek;
   DayOfWeek[DayOfWeek["Friday"] = 5] = "Friday";
   DayOfWeek[DayOfWeek["Saturday"] = 6] = "Saturday";
 })(DayOfWeek || (DayOfWeek = {}));
-
 export var MonthOfYear;
-
 (function (MonthOfYear) {
   MonthOfYear[MonthOfYear["January"] = 0] = "January";
   MonthOfYear[MonthOfYear["February"] = 1] = "February";

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

@@ -3,21 +3,19 @@ import { compareDate, getDateValue, getDayAdd, getDaysInMonth, getEndWeekInMonth
 import { DayOfWeek } from '../DateEnum';
 import CalendarGrid from './grid';
 var weekList = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
-
 var getTitle = function getTitle(date) {
   return "".concat(getMonthFullName(date.getMonth()), " ").concat(date.getFullYear());
 };
-
 var DayCalendar = function DayCalendar(props) {
   var cls = props.prefixCls,
-      today = props.today,
-      minDate = props.minDate,
-      maxDate = props.maxDate,
-      navigatedDate = props.navigatedDate,
-      selectedDate = props.selectedDate,
-      onChangeNavigatedDate = props.onChangeNavigatedDate,
-      onChangeSelectedDate = props.onChangeSelectedDate,
-      firstDayOfWeek = props.firstDayOfWeek;
+    today = props.today,
+    minDate = props.minDate,
+    maxDate = props.maxDate,
+    navigatedDate = props.navigatedDate,
+    selectedDate = props.selectedDate,
+    onChangeNavigatedDate = props.onChangeNavigatedDate,
+    onChangeSelectedDate = props.onChangeSelectedDate,
+    firstDayOfWeek = props.firstDayOfWeek;
   var onPrev = useCallback(function () {
     onChangeNavigatedDate(getMonthAdd(navigatedDate, -1));
   }, [navigatedDate, onChangeNavigatedDate]);
@@ -27,79 +25,66 @@ var DayCalendar = function DayCalendar(props) {
   var onSelect = useCallback(function (date) {
     onChangeSelectedDate(date);
   }, [onChangeSelectedDate]);
-
   var _a = useMemo(function () {
-    var getItem = function getItem(date, isOut) {
-      if (isOut === void 0) {
-        isOut = false;
-      }
-
-      var disabled = isOutOfDate(date, minDate, maxDate);
-      return {
-        value: date,
-        name: date.getDate(),
-        disabled: disabled,
-        selected: compareDate(date, selectedDate) === 0,
-        isToday: compareDate(date, today) === 0,
-        onClick: disabled ? null : function () {
-          return onSelect(date);
-        },
-        className: !disabled && isOut ? "".concat(cls, "-out") : null
+      var getItem = function getItem(date, isOut) {
+        if (isOut === void 0) {
+          isOut = false;
+        }
+        var disabled = isOutOfDate(date, minDate, maxDate);
+        return {
+          value: date,
+          name: date.getDate(),
+          disabled: disabled,
+          selected: compareDate(date, selectedDate) === 0,
+          isToday: compareDate(date, today) === 0,
+          onClick: disabled ? null : function () {
+            return onSelect(date);
+          },
+          className: !disabled && isOut ? "".concat(cls, "-out") : null
+        };
       };
-    };
-
-    var currentTitle = getTitle(navigatedDate);
-    var currentHeadList = weekList.slice(firstDayOfWeek, weekList.length).concat(weekList.slice(0, firstDayOfWeek));
-    var dayList = [];
-
-    var _a = getDateValue(navigatedDate),
+      var currentTitle = getTitle(navigatedDate);
+      var currentHeadList = weekList.slice(firstDayOfWeek, weekList.length).concat(weekList.slice(0, firstDayOfWeek));
+      var dayList = [];
+      var _a = getDateValue(navigatedDate),
         navigatedYear = _a.year,
         navigatedMonth = _a.month;
-
-    var thisMonthDays = getDaysInMonth(navigatedDate);
-    var thisMonthFirstDay = getMonthStart(navigatedYear, navigatedMonth);
-    var firstWeekday = getStartWeekInMonth(navigatedDate);
-    var lastWeekday = getEndWeekInMonth(navigatedDate);
-
-    if (firstWeekday !== firstDayOfWeek) {
-      // 补充上个月的日子
-      var lackDay = firstWeekday - firstDayOfWeek > 0 ? firstWeekday - firstDayOfWeek : firstDayOfWeek - firstWeekday;
-
-      for (var i = lackDay; i > 0; i--) {
-        dayList.push(getItem(getDayAdd(thisMonthFirstDay, -i), true));
+      var thisMonthDays = getDaysInMonth(navigatedDate);
+      var thisMonthFirstDay = getMonthStart(navigatedYear, navigatedMonth);
+      var firstWeekday = getStartWeekInMonth(navigatedDate);
+      var lastWeekday = getEndWeekInMonth(navigatedDate);
+      if (firstWeekday !== firstDayOfWeek) {
+        // 补充上个月的日子
+        var lackDay = firstWeekday - firstDayOfWeek > 0 ? firstWeekday - firstDayOfWeek : firstDayOfWeek - firstWeekday;
+        for (var i = lackDay; i > 0; i--) {
+          dayList.push(getItem(getDayAdd(thisMonthFirstDay, -i), true));
+        }
+      }
+      for (var thisMonth = 0; thisMonth < thisMonthDays; thisMonth++) {
+        dayList.push(getItem(getDayAdd(thisMonthFirstDay, thisMonth)));
       }
-    }
-
-    for (var thisMonth = 0; thisMonth < thisMonthDays; thisMonth++) {
-      dayList.push(getItem(getDayAdd(thisMonthFirstDay, thisMonth)));
-    }
-
-    var weekEndDay = (firstDayOfWeek + 6) % 7;
-    var thisMonthLastDay = getMonthEnd(navigatedYear, navigatedMonth);
-
-    if (lastWeekday !== weekEndDay) {
-      // 补充下个月的日子
-      var lackDay = weekEndDay - lastWeekday > 0 ? weekEndDay - lastWeekday : lastWeekday - weekEndDay;
-
-      for (var i = 1; i <= lackDay; i++) {
-        dayList.push(getItem(getDayAdd(thisMonthLastDay, i), true));
+      var weekEndDay = (firstDayOfWeek + 6) % 7;
+      var thisMonthLastDay = getMonthEnd(navigatedYear, navigatedMonth);
+      if (lastWeekday !== weekEndDay) {
+        // 补充下个月的日子
+        var lackDay = weekEndDay - lastWeekday > 0 ? weekEndDay - lastWeekday : lastWeekday - weekEndDay;
+        for (var i = 1; i <= lackDay; i++) {
+          dayList.push(getItem(getDayAdd(thisMonthLastDay, i), true));
+        }
       }
-    }
-
-    return {
-      title: currentTitle,
-      startDate: dayList[0].value,
-      endDate: dayList[dayList.length - 1].value,
-      headList: currentHeadList,
-      dateList: dayList
-    };
-  }, [today, navigatedDate, minDate, maxDate, firstDayOfWeek, selectedDate, onSelect, cls]),
-      title = _a.title,
-      startDate = _a.startDate,
-      endDate = _a.endDate,
-      headList = _a.headList,
-      dateList = _a.dateList;
-
+      return {
+        title: currentTitle,
+        startDate: dayList[0].value,
+        endDate: dayList[dayList.length - 1].value,
+        headList: currentHeadList,
+        dateList: dayList
+      };
+    }, [today, navigatedDate, minDate, maxDate, firstDayOfWeek, selectedDate, onSelect, cls]),
+    title = _a.title,
+    startDate = _a.startDate,
+    endDate = _a.endDate,
+    headList = _a.headList,
+    dateList = _a.dateList;
   var prevEnabled = minDate ? compareDate(minDate, startDate) < 0 : true;
   var nextEnabled = maxDate ? compareDate(endDate, maxDate) < 0 : true;
   return /*#__PURE__*/React.createElement("div", {
@@ -113,7 +98,6 @@ var DayCalendar = function DayCalendar(props) {
     onNext: nextEnabled ? onNext : null
   }));
 };
-
 DayCalendar.defaultProps = {
   firstDayOfWeek: DayOfWeek.Sunday
 };