@autobest-ui/components 1.2.1 → 1.5.0

package/esm/date-picker/style/index.js

@@ -7,7 +7,5 @@ if (canUseDOM) {
 
   require('../calendar/grid/index.scss');
 
-  require('../../icon/style/index');
-
   require('../../popover/style/index');
 }

package/esm/date-picker/style/index.scss

@@ -8,12 +8,17 @@ $namespace: ab-date-picker;
     font-size: .14rem;
     padding: .04rem;
     width: 1.44rem;
+
+    &.#{$namespace}-error {
+      background: #fffacd;
+    }
   }
 
   &-icon {
+    color: #606060;
     position: absolute;
     right: 0.05rem;
     top: 50%;
     transform: translateY(-50%);
   }
-}
+}

package/esm/guide/index.d.ts

@@ -1,5 +1,9 @@
 import React from 'react';
 export interface GuideProps {
+    /**
+     * 图片路径
+     */
+    imgSrc: string;
     /**
      * 是否显示遮罩层
      */
@@ -12,10 +16,6 @@ export interface GuideProps {
      * 是否显示带箭头的图片，图片默认显示在子元素上方，水平居中
      */
     loadablePointer?: boolean;
-    /**
-     * 图片路径
-     */
-    img?: string;
     /**
      * 图片默认显示在子元素上方，水平居中
      */
@@ -43,7 +43,6 @@ declare class Guide extends React.Component<GuideProps, GuideStates> {
     imgRef: React.RefObject<HTMLImageElement>;
     static defaultProps: {
         loadablePointer: boolean;
-        img: string;
         position: string;
         translateX: number;
         translateY: number;

package/esm/guide/index.js

@@ -29,7 +29,6 @@ import classNames from 'classnames';
 import { findDOMNode } from 'react-dom';
 import { getOffsetAndSize } from '@autobest-ui/utils';
 import Portal from '../portal';
-import UseConfig from '../use-config';
 import Mask from '../mask';
 
 var Guide =
@@ -101,7 +100,7 @@ function (_super) {
 
     var _a = this.props,
         loadablePointer = _a.loadablePointer,
-        img = _a.img,
+        imgSrc = _a.imgSrc,
         position = _a.position,
         visible = _a.visible,
         translateX = _a.translateX,
@@ -109,7 +108,7 @@ function (_super) {
 
     if (loadablePointer && visible) {
       var image_1 = new Image();
-      image_1.src = img;
+      image_1.src = imgSrc;
 
       image_1.onload = function () {
         var element = _this.getElement();
@@ -156,7 +155,7 @@ function (_super) {
     var _a = this.props,
         visible = _a.visible,
         loadablePointer = _a.loadablePointer,
-        img = _a.img;
+        imgSrc = _a.imgSrc;
     var _b = this.state,
         top = _b.top,
         left = _b.left;
@@ -176,7 +175,7 @@ function (_super) {
       }), loadablePointer ? React.createElement("img", {
         style: style,
         className: cls + "-icon",
-        src: img,
+        src: imgSrc,
         alt: "selection pointer",
         ref: this.imgRef
       }) : null));
@@ -207,7 +206,6 @@ function (_super) {
 
   Guide.defaultProps = {
     loadablePointer: false,
-    img: UseConfig.assetCommonUiUrl + "/images/vehicle_pointer.png",
     position: 'center',
     translateX: 0,
     translateY: 0,

package/esm/index.d.ts

@@ -1,4 +1,3 @@
-export { default as UseConfig } from './use-config';
 export type { AccordionProps } from './accordion';
 export { default as Accordion } from './accordion';
 export type { EllipsisProps, EllipsisLinesType } from './ellipsis';
@@ -11,8 +10,6 @@ export type { PopoverPlacement, PopoverTriggerType, PopoverProps } from './popov
 export { default as Popover } from './popover';
 export type { TooltipProps, TooltipPlacement, TooltipTriggerType } from './tooltip';
 export { default as Tooltip } from './tooltip';
-export type { IconProps } from './icon';
-export { default as Icon } from './icon';
 export type { SkeletonProps } from './skeleton';
 export { default as Skeleton } from './skeleton';
 export type { MoveProps } from './move';
@@ -26,7 +23,7 @@ export { default as Confirm } from './confirm';
 export type { CollapseProps } from './collapse';
 export { default as Collapse } from './collapse';
 export type { CarouselProps } from './carousel';
-export { default as Carousel, CarouselDirection } from './carousel';
+export { default as Carousel } from './carousel';
 export type { GuideProps } from './guide';
 export { default as Guide } from './guide';
 export type { DrawerProps } from './drawer';
@@ -43,7 +40,8 @@ export type { ScriptAttributes, ScriptProps } from './script';
 export { default as Script } from './script';
 export type { MessageProps } from './message';
 export { default as Message } from './message';
-export type { TableProps } from './table';
+export type { TableProps, TableRowSelectionInfo } from './table';
+export type { TableColumnInfo, TableColumnOnRenderReturnObjectInfo } from './table/interface';
 export { default as Table } from './table';
 export type { DatePickerProps } from './date-picker';
 export { default as DatePicker } from './date-picker';

package/esm/index.js

@@ -1,18 +1,16 @@
-export { default as UseConfig } from './use-config';
 export { default as Accordion } from './accordion';
 export { default as Ellipsis } from './ellipsis';
 export { default as Affix } from './affix';
 export { default as Modal } from './modal';
 export { default as Popover } from './popover';
 export { default as Tooltip } from './tooltip';
-export { default as Icon } from './icon';
 export { default as Skeleton } from './skeleton';
 export { default as Move } from './move';
 export { default as ShowMore } from './show-more';
 export { default as Select } from './select';
 export { default as Confirm } from './confirm';
 export { default as Collapse } from './collapse';
-export { default as Carousel, CarouselDirection } from './carousel';
+export { default as Carousel } from './carousel';
 export { default as Guide } from './guide';
 export { default as Drawer } from './drawer';
 export { default as InputNumber } from './input-number';

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { AddListenerEventHandler } from '@autobest-ui/utils';
-interface OnchangeHandler {
+import { debounce, AddListenerEventHandler } from '@autobest-ui/utils';
+interface OnChangeHandler {
     (value: string, name?: string): void;
 }
 interface ChangeEvent {
@@ -12,7 +12,7 @@ export interface InputNumberProps extends Omit<React.InputHTMLAttributes<any>, '
     /**
      * 值修改后的回调函数，用于修改value属性
      */
-    onChange: OnchangeHandler;
+    onChange: OnChangeHandler;
     /**
      * input样式
      */
@@ -30,7 +30,8 @@ export interface InputNumberProps extends Omit<React.InputHTMLAttributes<any>, '
      */
     max?: number;
     /**
-     * 打包值，向上取整
+     * 打包值，向上取整，不赋值或者赋值为0表示不做取整操作
+     * 注：packMultiple不允许传小数
      */
     packMultiple?: number;
     /**
@@ -38,9 +39,13 @@ export interface InputNumberProps extends Omit<React.InputHTMLAttributes<any>, '
      */
     disabled?: boolean;
     /**
-     * 只能输入整数
+     * 可输入的小数位数，0或没有值表示只能输入整数
      */
-    isPositive?: boolean;
+    digital?: number;
+    /**
+     * 为true则自动补全小数位数
+     */
+    padDigital?: boolean;
     /**
      * 输入框默认字符大小
      */
@@ -56,11 +61,11 @@ export interface InputNumberProps extends Omit<React.InputHTMLAttributes<any>, '
     /**
      * packMultiple 有值时，判断前的回调函数
      */
-    onChangePackMultipleBefore?: OnchangeHandler;
+    onChangePackMultipleBefore?: OnChangeHandler;
     /**
      * packMultiple 有值时，判断后的回调函数
      */
-    onChangePackMultipleAfter?: OnchangeHandler;
+    onChangePackMultipleAfter?: OnChangeHandler;
     /**
      * 是否需要显示增加按钮
      */
@@ -70,10 +75,6 @@ interface InputNumberStates {
     enter: boolean;
     focus: boolean;
 }
-interface DebounceRef {
-    (value: string): void;
-    cancel: () => void;
-}
 interface LocationInfo {
     left: number;
     top: number;
@@ -86,13 +87,15 @@ declare class InputNumber extends React.Component<InputNumberProps, InputNumberS
         name: string;
         size: number;
         disabled: boolean;
-        isPositive: boolean;
+        digital: number;
+        padDigital: boolean;
         delay: number;
         visibleButton: boolean;
     };
     constructor(props: InputNumberProps);
     currentRef: React.RefObject<HTMLLabelElement>;
-    debounce: DebounceRef;
+    changePackMultipleValueDebounce: ReturnType<typeof debounce>;
+    padDigitalDebounce: ReturnType<typeof debounce>;
     addLocationInfo: LocationInfo;
     subLocationInfo: LocationInfo;
     mouseUpHandler: AddListenerEventHandler;
@@ -120,10 +123,20 @@ declare class InputNumber extends React.Component<InputNumberProps, InputNumberS
     isInside: (ev: React.MouseEvent<Element, MouseEvent>, locationInfo: LocationInfo) => boolean;
     getLocationInfo: () => void;
     getCurrentValue: (value: string) => number;
+    getPadDigitalValue: (value: string) => string;
     onChangePackMultipleValue: (value: string) => void;
-    getDebounce: () => DebounceRef;
-    callback: (value: string) => void;
-    onValueChange: (ev: ChangeEvent) => void;
+    onPadDigital: (value: any) => void;
+    getPadDigitalDebounce: () => {
+        (...arg: any[]): void;
+        cancel(): void;
+    };
+    getChangePackMultipleValueDebounce: () => {
+        (...arg: any[]): void;
+        cancel(): void;
+    };
+    callback: (value: string, ignoreDelay?: any) => void;
+    onValueChange: (ev: ChangeEvent, ignoreDelay?: any) => void;
+    getValueCalculate: (value: number, offset: number) => number;
     onAdd: () => void;
     onSub: () => void;
     renderButton: () => JSX.Element;

package/esm/input-number/index.js

@@ -43,7 +43,7 @@ var __assign = this && this.__assign || function () {
 import React from 'react';
 import classNames from 'classnames';
 import { isBlank, debounce, getOffsetAndSize, addEventListener } from '@autobest-ui/utils';
-var cls = 'ab-input-number';
+var cls = 'ab-input-number'; // TODO: 重构组件
 
 var InputNumber =
 /** @class */
@@ -305,6 +305,19 @@ function (_super) {
       return ceilNumber;
     };
 
+    _this.getPadDigitalValue = function (value) {
+      var _a = _this.props,
+          digital = _a.digital,
+          padDigital = _a.padDigital;
+
+      if (!padDigital || isBlank(value) || !digital) {
+        return value;
+      }
+
+      var resultArr = value.split('.');
+      return resultArr[0] + "." + (resultArr[1] || '').padEnd(digital, '0');
+    };
+
     _this.onChangePackMultipleValue = function (value) {
       var currentValue = _this.getCurrentValue(value).toString();
 
@@ -319,60 +332,97 @@ function (_super) {
       }
     };
 
-    _this.getDebounce = function () {
-      if (_this.debounce) {
-        return _this.debounce;
+    _this.onPadDigital = function (value) {
+      var currentValue = _this.getPadDigitalValue(value);
+
+      var _a = _this.props,
+          onChange = _a.onChange,
+          name = _a.name;
+
+      if (value !== currentValue) {
+        onChange(currentValue, name);
       }
+    };
+
+    _this.getPadDigitalDebounce = function () {
+      if (_this.padDigitalDebounce) {
+        return _this.padDigitalDebounce;
+      }
+
+      _this.padDigitalDebounce = debounce(_this.onPadDigital, _this.props.delay);
+      return _this.padDigitalDebounce;
+    };
 
-      _this.debounce = debounce(_this.onChangePackMultipleValue, _this.props.delay);
-      return _this.debounce;
+    _this.getChangePackMultipleValueDebounce = function () {
+      if (_this.changePackMultipleValueDebounce) {
+        return _this.changePackMultipleValueDebounce;
+      }
+
+      _this.changePackMultipleValueDebounce = debounce(_this.onChangePackMultipleValue, _this.props.delay);
+      return _this.changePackMultipleValueDebounce;
     };
 
-    _this.callback = function (value) {
+    _this.callback = function (value, ignoreDelay) {
       var _a = _this.props,
           name = _a.name,
           onChange = _a.onChange,
-          onChangePackMultipleBefore = _a.onChangePackMultipleBefore;
-      var packMultiple = _this.props.packMultiple || 1;
+          onChangePackMultipleBefore = _a.onChangePackMultipleBefore,
+          packMultiple = _a.packMultiple,
+          padDigital = _a.padDigital;
 
-      if (onChange) {
+      if (onChange && value !== _this.props.value) {
         onChange(value, name);
       }
 
-      var valueNumber = parseFloat(value);
-
-      if (!isBlank(packMultiple) && !isBlank(value) && valueNumber % packMultiple !== 0) {
+      if (packMultiple && !isBlank(value) && parseFloat(value) % packMultiple !== 0) {
         if (onChangePackMultipleBefore) {
           onChangePackMultipleBefore(value, name);
         }
 
-        _this.getDebounce()(value);
+        if (ignoreDelay) {
+          _this.onChangePackMultipleValue(value);
+        } else {
+          _this.getChangePackMultipleValueDebounce()(value);
+        }
+
+        return;
+      }
+
+      if (padDigital) {
+        if (ignoreDelay) {
+          _this.onPadDigital(value);
+
+          return;
+        }
+
+        _this.getPadDigitalDebounce()(value);
       }
     };
 
-    _this.onValueChange = function (ev) {
-      if (_this.debounce) {
-        _this.debounce.cancel();
+    _this.onValueChange = function (ev, ignoreDelay) {
+      if (_this.changePackMultipleValueDebounce) {
+        _this.changePackMultipleValueDebounce.cancel();
       }
 
       var _a = _this.props,
           min = _a.min,
           max = _a.max,
-          isPositive = _a.isPositive,
+          digital = _a.digital,
           value = _a.value;
-      var currentValue = ev.target.value.toString();
+      var currentValue = ev.target.value.toString(); // 输入为空
 
       if (isBlank(currentValue)) {
-        _this.callback('');
+        _this.callback('', ignoreDelay);
 
         return;
       }
 
-      var preValue = value.toString();
+      var preValue = value.toString(); // 输入的不是数字格式
+
       var reg = /^-$|(^(-?\d+)(\.\d*)?)$/;
 
       if (!reg.test(currentValue)) {
-        _this.callback(preValue);
+        _this.callback(preValue, ignoreDelay);
 
         return;
       } // 0开头后面直接是数字，没有点如：011， 这是不合法的
@@ -381,41 +431,59 @@ function (_super) {
       var zeroReg = /^0\d+$/;
 
       if (zeroReg.test(currentValue)) {
-        _this.callback(preValue);
+        _this.callback(preValue, ignoreDelay);
 
         return;
+      } // 小数位数限制
+
+
+      if (digital) {
+        currentValue = new RegExp("[^.]+([.](\\d{0," + digital + "}))?").exec(currentValue)[0].toString();
       }
 
       var valueNumber = parseFloat(currentValue);
 
       if (!isBlank(min)) {
         if (min > valueNumber) {
-          _this.callback(preValue);
+          _this.callback(preValue, ignoreDelay);
 
           return;
         } // 如果min>= 0, 将阻止输入-
 
 
         if (min >= 0 && currentValue.indexOf('-') > -1) {
-          _this.callback('');
+          _this.callback('', ignoreDelay);
 
           return;
         }
       }
 
       if (!isBlank(max) && max < valueNumber) {
-        _this.callback(preValue);
+        _this.callback(preValue, ignoreDelay);
 
         return;
       }
 
-      if (isPositive && currentValue.indexOf('.') > -1) {
-        _this.callback(preValue);
+      if (!digital && currentValue.indexOf('.') > -1) {
+        _this.callback(preValue, ignoreDelay);
 
         return;
       }
 
-      _this.callback(currentValue);
+      _this.callback(currentValue, ignoreDelay);
+    };
+
+    _this.getValueCalculate = function (value, offset) {
+      var valueStr = value.toString();
+      var offsetStr = offset.toString();
+
+      if (valueStr.indexOf('.') < 0 && offsetStr.indexOf('.') < 0) {
+        return value + offset;
+      }
+
+      var digital = _this.props.digital;
+      var powValue = Math.pow(10, digital);
+      return Math.round((value + offset) * powValue) / powValue;
     };
 
     _this.onAdd = function () {
@@ -426,7 +494,7 @@ function (_super) {
 
       var ev = {
         target: {
-          value: (parseFloat(value.toString()) || 0) + step
+          value: _this.getPadDigitalValue(_this.getValueCalculate(Number(value), step).toString())
         }
       };
 
@@ -440,7 +508,7 @@ function (_super) {
       var step = packMultiple || 1;
       var ev = {
         target: {
-          value: (parseFloat(value.toString()) || 0) - step
+          value: _this.getPadDigitalValue(_this.getValueCalculate(Number(value), step * -1).toString())
         }
       };
 
@@ -473,6 +541,11 @@ function (_super) {
 
   InputNumber.prototype.componentDidMount = function () {
     this.addMouseMoveListener();
+    this.onValueChange({
+      target: {
+        value: this.props.value
+      }
+    }, true);
   };
 
   InputNumber.prototype.componentWillUnmount = function () {
@@ -486,9 +559,14 @@ function (_super) {
       this.mouseMoveHandler = null;
     }
 
-    if (this.debounce) {
-      this.debounce.cancel();
-      this.debounce = null;
+    if (this.padDigitalDebounce) {
+      this.padDigitalDebounce.cancel();
+      this.padDigitalDebounce = null;
+    }
+
+    if (this.changePackMultipleValueDebounce) {
+      this.changePackMultipleValueDebounce.cancel();
+      this.changePackMultipleValueDebounce = null;
     }
   };
 
@@ -497,7 +575,8 @@ function (_super) {
 
     delete copyProps.onChangePackMultipleBefore;
     delete copyProps.onChangePackMultipleAfter;
-    delete copyProps.isPositive;
+    delete copyProps.digital;
+    delete copyProps.padDigital;
     delete copyProps.packMultiple;
     delete copyProps.visibleButton;
     delete copyProps.onChange;
@@ -539,7 +618,8 @@ function (_super) {
     name: '',
     size: 3,
     disabled: false,
-    isPositive: true,
+    digital: 0,
+    padDigital: false,
     delay: 1000,
     visibleButton: false
   };

package/esm/loading/index.d.ts

@@ -1,8 +1,13 @@
+import React from 'react';
 export interface LoadingProps {
     /**
-     * loading 样式的另一种
+     * loading 样式
      */
-    isRectLoading?: boolean;
+    className?: string;
+    /**
+     * 自定义loading, 需要补全自定义元素样式
+     */
+    customIcon?: React.ReactElement;
     /**
      * loading开始后自动隐藏的时间，单位：毫秒
      */

package/esm/loading/index.js

@@ -18,24 +18,18 @@ import React from 'react';
 import classNames from 'classnames';
 import ReactDOM from 'react-dom';
 import { canUseDOM } from '@autobest-ui/utils';
-import UseConfig from '../use-config';
 import LoadingIcon from '../loading-icon'; // 缓存创建的loading元素
 
 var loadingElement = null;
 var loadingTimer = null;
 var closeTimer = null;
+var prevCustomIcon = null;
 var cls = 'ab-loading';
 
-function getLoadingContainer(isRectLoading) {
-  var _a;
-
+function getLoadingContainer(customIcon, className) {
   return React.createElement("div", {
-    className: classNames(cls + "-wrap", (_a = {}, _a[cls + "-rect-loading"] = isRectLoading, _a))
-  }, isRectLoading ? React.createElement("img", {
-    className: cls + "-content",
-    src: UseConfig.assetCommonUiUrl + "/images/p_loading_rect.gif",
-    alt: "loading..."
-  }) : React.createElement(LoadingIcon, {
+    className: classNames(cls + "-wrap", className)
+  }, customIcon || React.createElement(LoadingIcon, {
     className: cls + "-content"
   }));
 } // openIds 容器
@@ -44,12 +38,11 @@ function getLoadingContainer(isRectLoading) {
 var openIds = []; // closeIds 容器
 
 var closeIds = [];
-var prevIsRectLoading = false;
 
-function createLoading(isRectLoading) {
+function createLoading(customIcon, className) {
   loadingElement = document.createElement('div');
   document.body.appendChild(loadingElement);
-  ReactDOM.render(getLoadingContainer(isRectLoading), loadingElement);
+  ReactDOM.render(getLoadingContainer(customIcon, className), loadingElement);
 }
 
 var Loading =
@@ -63,24 +56,25 @@ function () {
     }
 
     config = __assign({
-      isRectLoading: false,
       expire: 0
-    }, config); // 防止重复创建
+    }, config); // 防止重复创建或自定义loading icon，重新创建
 
     if (!loadingElement) {
-      createLoading(config.isRectLoading);
-    } else if (prevIsRectLoading !== config.isRectLoading) {
-      // loading 类型不同时，重新创建
-      try {
-        document.body.removeChild(loadingElement);
-      } catch (e) {}
-
-      createLoading(config.isRectLoading);
+      createLoading(config.customIcon, config.className);
+    } else if (config.customIcon || config.customIcon !== prevCustomIcon) {
+      if (loadingElement) {
+        try {
+          document.body.removeChild(loadingElement);
+          loadingElement = null;
+        } catch (e) {}
+      }
+
+      createLoading(config.customIcon, config.className);
     } else {
       loadingElement.style.display = 'block';
     }
 
-    prevIsRectLoading = config.isRectLoading; // 如果配置中有expire且大于0
+    prevCustomIcon = config.customIcon; // 如果配置中有expire且大于0
     // 将会在到达时间后自动关闭，不用手动再关闭（不需要再close()）
 
     if (config.expire > 0) {

package/esm/loading/style/index.css

@@ -1 +1 @@
-.ab-loading-wrap{position:fixed;top:0;left:0;z-index:9999;background-color:rgba(255,255,255,.7);height:100%;width:100%}.ab-loading-wrap .ab-loading-content{position:absolute;left:50%;top:50%;display:block;width:.31rem;height:.31rem;transform:translate3d(-50%,-50%,0)}.ab-loading-wrap.ab-loading-rect-loading{background-color:rgba(0,0,0,.7)}.ab-loading-wrap.ab-loading-rect-loading .ab-loading-content{top:10%;width:1.6rem;height:.24rem}
+.ab-loading-wrap{position:fixed;top:0;left:0;z-index:9999;background-color:rgba(255,255,255,.7);height:100%;width:100%}.ab-loading-wrap .ab-loading-content{position:absolute;left:50%;top:50%;display:block;width:.31rem;height:.31rem;transform:translate3d(-50%,-50%,0)}

package/esm/loading/style/index.scss

@@ -18,14 +18,4 @@ $namespace: ab-loading;
     height: .31rem;
     transform: translate3d(-50%, -50%, 0);
   }
-
-  &.#{$namespace}-rect-loading {
-    background-color: rgba(#000, .7);
-
-    .#{$namespace}-content {
-      top: 10%;
-      width: 1.6rem;
-      height: .24rem;
-    }
-  }
 }