@autobest-ui/components 1.1.2 → 1.1.9

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/input-number/style/index.scss

@@ -1,87 +1,87 @@
-$namespace: ab-input-number;
-
-.#{$namespace} {
-  padding: .06rem .07rem;
-  -webkit-appearance: none;
-  outline: none;
-  width: 100%;
-  border: 1px solid #ccc;
-  border-radius: 2px;
-  resize: none;
-  font-size: .12rem;
-  transition: all .3s;
-  position: relative;
-  background-color: transparent;
-  z-index: 2;
-
-  &:focus {
-    box-shadow: 0 0 4px rgba(#348FEE, 0.8);
-    border-color: rgba(#348FEE, 0.8);
-  }
-
-  &-wrap {
-    position: relative;
-    background-color: #fff;
-    display: inline-block;
-  }
-
-  &-button-wrap {
-    position: absolute;
-    user-select: none;
-    top: 50%;
-    transform: translateY(-50%);
-    right: .02rem;
-  }
-
-  &-button {
-    position: relative;
-    width: .16rem;
-    height: .1rem;
-    overflow: hidden;
-    background-color: #f1f1f1;
-    &.#{$namespace}-hover {
-      background-color: #d0d0d0;
-    }
-    &.#{$namespace}-active {
-      background-color: #787878;
-      .#{$namespace}-add {
-        border-bottom-color: #fff;
-      }
-      .#{$namespace}-sub {
-        border-top-color: #fff;
-      }
-    }
-
-    &:first-child {
-      margin-bottom: .02rem;
-    }
-  }
-
-  &-add {
-    position: absolute;
-    top: -.01rem;
-    left: .04rem;
-    display: block;
-    border-top-color: transparent;
-    border-right-color: transparent;
-    border-bottom-color: #505050;
-    border-left-color: transparent;
-    border-width: .04rem;
-    border-style: solid;
-    width: 0;
-    height: 0;
-  }
-
-  &-sub {
-    display: block;
-    margin: .03rem 0 0 .04rem;
-    border-top-color: #505050;
-    border-right-color: transparent;
-    border-bottom-color: transparent;
-    border-left-color: transparent;
-    border-width: .04rem;
-    border-style: solid;
-    width: 0;
-    height: 0;
-  }
+$namespace: ab-input-number;
+
+.#{$namespace} {
+  padding: .06rem .07rem;
+  -webkit-appearance: none;
+  outline: none;
+  width: 100%;
+  border: 1px solid #ccc;
+  border-radius: 2px;
+  resize: none;
+  font-size: .12rem;
+  transition: all .3s;
+  position: relative;
+  background-color: transparent;
+  z-index: 2;
+
+  &:focus {
+    box-shadow: 0 0 4px rgba(#348FEE, 0.8);
+    border-color: rgba(#348FEE, 0.8);
+  }
+
+  &-wrap {
+    position: relative;
+    background-color: #fff;
+    display: inline-block;
+  }
+
+  &-button-wrap {
+    position: absolute;
+    user-select: none;
+    top: 50%;
+    transform: translateY(-50%);
+    right: .02rem;
+  }
+
+  &-button {
+    position: relative;
+    width: .16rem;
+    height: .1rem;
+    overflow: hidden;
+    background-color: #f1f1f1;
+    &.#{$namespace}-hover {
+      background-color: #d0d0d0;
+    }
+    &.#{$namespace}-active {
+      background-color: #787878;
+      .#{$namespace}-add {
+        border-bottom-color: #fff;
+      }
+      .#{$namespace}-sub {
+        border-top-color: #fff;
+      }
+    }
+
+    &:first-child {
+      margin-bottom: .02rem;
+    }
+  }
+
+  &-add {
+    position: absolute;
+    top: -.01rem;
+    left: .04rem;
+    display: block;
+    border-top-color: transparent;
+    border-right-color: transparent;
+    border-bottom-color: #505050;
+    border-left-color: transparent;
+    border-width: .04rem;
+    border-style: solid;
+    width: 0;
+    height: 0;
+  }
+
+  &-sub {
+    display: block;
+    margin: .03rem 0 0 .04rem;
+    border-top-color: #505050;
+    border-right-color: transparent;
+    border-bottom-color: transparent;
+    border-left-color: transparent;
+    border-width: .04rem;
+    border-style: solid;
+    width: 0;
+    height: 0;
+  }
 }

package/esm/lazy-image/__stories__/style.scss

@@ -1,9 +1,9 @@
-.lazy-image-demo {
-  margin-top: 200vh;
-
-  img {
-    display: block;
-    width: 400px;
-    margin: .2rem;
-  }
-}
+.lazy-image-demo {
+  margin-top: 200vh;
+
+  img {
+    display: block;
+    width: 400px;
+    margin: .2rem;
+  }
+}

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

@@ -1,25 +1,25 @@
-$namespace: ab-lazy-image;
-
-.#{$namespace} {
-  transition: opacity 500ms;
-
-  &-loading {
-    background: #f2f2f2;
-    overflow: hidden;
-  }
-
-  &-loading.#{$namespace}-active {
-    background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
-    background-size: 400% 100%;
-    animation: ab-skeleton-loading 1.4s ease infinite;
-  }
-
-  @keyframes ab-skeleton-loading {
-    0% {
-      background-position: 100% 50%;
-    }
-    100% {
-      background-position: 0 50%;
-    }
-  }
+$namespace: ab-lazy-image;
+
+.#{$namespace} {
+  transition: opacity 500ms;
+
+  &-loading {
+    background: #f2f2f2;
+    overflow: hidden;
+  }
+
+  &-loading.#{$namespace}-active {
+    background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
+    background-size: 400% 100%;
+    animation: ab-skeleton-loading 1.4s ease infinite;
+  }
+
+  @keyframes ab-skeleton-loading {
+    0% {
+      background-position: 100% 50%;
+    }
+    100% {
+      background-position: 0 50%;
+    }
+  }
 }