@autobest-ui/components 2.9.2 → 2.10.1-alpha.0

package/esm/input/Input.js

@@ -33,7 +33,8 @@ var __assign = this && this.__assign || function () {
   return __assign.apply(this, arguments);
 };
 import React from 'react';
-import { composeRef, isEmptyObject } from '@autobest-ui/utils';
+import { isEmptyObject, isBlank } from '@autobest-ui/utils';
+import { composeRef } from '@autobest-ui/components';
 import Adorn from './Adorn';
 var InputNotRef = /** @class */function (_super) {
   __extends(InputNotRef, _super);
@@ -47,6 +48,53 @@ var InputNotRef = /** @class */function (_super) {
     _this.getFileInfo = function (element) {
       return element && element.files && element.files.length ? element.files[0] : undefined;
     };
+    /**
+     * 在触发了onChange的前提下，如果当前为失焦状态，则触发一次onBlur
+     * @param value
+     */
+    _this.onBlurOnMounted = function (value) {
+      var _a = _this.props,
+        onBlur = _a.onBlur,
+        autoFocus = _a.autoFocus,
+        name = _a.name;
+      if (!onBlur || autoFocus || document.activeElement === _this.inputRef.current) {
+        return;
+      }
+      onBlur(value, name);
+    };
+    _this.checkCurrentValue = function () {
+      if (!_this.inputRef.current) {
+        return;
+      }
+      if (_this.isFileUpload()) {
+        var file = _this.getFileInfo(_this.inputRef.current);
+        if (file) {
+          var _a = _this.props,
+            name_1 = _a.name,
+            onChange = _a.onChange;
+          if (onChange) {
+            onChange(file, name_1);
+          }
+          _this.onBlurOnMounted(file);
+        }
+        return;
+      }
+      var value = _this.inputRef.current.value;
+      if (!isBlank(value) && _this.state.value !== value) {
+        var _b = _this.props,
+          name_2 = _b.name,
+          onChange = _b.onChange;
+        if (onChange) {
+          onChange(value, name_2);
+          _this.onBlurOnMounted(value);
+          return;
+        }
+        _this.setState({
+          value: value
+        });
+        _this.onBlurOnMounted(value);
+      }
+    };
     /**
      * 修改value值的回调
      * @param ev
@@ -138,6 +186,10 @@ var InputNotRef = /** @class */function (_super) {
       }
       element.focus();
     }
+    if (this.props.checkValueOnMounted) {
+      // ssr在网络慢时，用户在js文件加载完前修改input框的会导致不触发onChange
+      this.checkCurrentValue();
+    }
   };
   InputNotRef.prototype.render = function () {
     var cls = this.prefixCls;
@@ -151,7 +203,11 @@ var InputNotRef = /** @class */function (_super) {
       className = _a.className,
       prefix = _a.prefix,
       suffix = _a.suffix,
-      maxLength = _a.maxLength;
+      maxLength = _a.maxLength,
+      title = _a.title,
+      onKeyUp = _a.onKeyUp,
+      name = _a.name,
+      autoComplete = _a.autoComplete;
     var value = this.state.value;
     var isFileUpload = this.isFileUpload();
     return /*#__PURE__*/React.createElement(Adorn, {
@@ -171,14 +227,20 @@ var InputNotRef = /** @class */function (_super) {
       accept: accept,
       maxLength: maxLength,
       style: style,
+      name: name,
       value: isFileUpload ? undefined : value || '',
       onChange: this.onChange,
-      onKeyDown: this.onKeyDown
+      onKeyDown: this.onKeyDown,
+      title: title,
+      onKeyUp: onKeyUp,
+      "aria-label": this.props['aria-label'],
+      autoComplete: autoComplete
     }));
   };
   InputNotRef.defaultProps = {
     defaultValue: '',
-    type: 'text'
+    type: 'text',
+    checkValueOnMounted: false
   };
   return InputNotRef;
 }(React.Component);

package/esm/input/TextArea.d.ts

@@ -33,6 +33,11 @@ export interface TextAreaProps extends Omit<AdornProps, 'prefixCls' | 'children'
      * 用户触发keydown时的回调，主要用于键盘监听
      */
     onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>, name?: string) => void;
+    /**
+     * 在网络慢时，组件已经渲染js文件还未加载，用户此时修改input框会不触发onChange事件
+     * 需要在组件加载后检测输入框内容，触发一次onChange
+     */
+    checkValueOnMounted?: boolean;
 }
 interface TextareaStates {
     value: string | undefined;
@@ -51,10 +56,13 @@ export declare class TextAreaNotRef extends React.Component<TextAreaPropsWithRef
         defaultValue: string;
         rows: number;
         maxlength: number;
+        checkValueOnMounted: boolean;
     };
     constructor(props: TextAreaPropsWithRef);
     static getDerivedStateFromProps(nextProps: TextAreaPropsWithRef, prevStates: TextareaStates): TextareaStates;
     componentDidMount(): void;
+    changeValue: (value: any, onBlurAfterChange?: boolean) => void;
+    checkCurrentValue: () => void;
     /**
      * 修改value值的回调
      * @param ev

package/esm/input/TextArea.js

@@ -33,7 +33,8 @@ var __assign = this && this.__assign || function () {
   return __assign.apply(this, arguments);
 };
 import React from 'react';
-import { composeRef, isBlank, isEmptyObject } from '@autobest-ui/utils';
+import { composeRef } from '@autobest-ui/components';
+import { isBlank, isEmptyObject } from '@autobest-ui/utils';
 import Adorn from './Adorn';
 function getValueLength(value) {
   return isBlank(value) ? 0 : value.length;
@@ -44,15 +45,10 @@ var TextAreaNotRef = /** @class */function (_super) {
     var _this = _super.call(this, props) || this;
     _this.prefixCls = 'ab-textarea';
     _this.textareaRef = /*#__PURE__*/React.createRef();
-    /**
-     * 修改value值的回调
-     * @param ev
-     */
-    _this.onChange = function (ev) {
-      if (_this.props.disabled) {
-        return;
+    _this.changeValue = function (value, onBlurAfterChange) {
+      if (onBlurAfterChange === void 0) {
+        onBlurAfterChange = false;
       }
-      var value = ev.target.value;
       if (_this.props.maxLength > 0) {
         var currentLength = getValueLength(value);
         if (_this.props.maxLength && currentLength > _this.props.maxLength) {
@@ -64,14 +60,43 @@ var TextAreaNotRef = /** @class */function (_super) {
       }
       var _a = _this.props,
         onChange = _a.onChange,
-        name = _a.name;
+        name = _a.name,
+        onBlur = _a.onBlur;
       if (onChange) {
         onChange(value, name);
+        if (onBlurAfterChange && onBlur) {
+          onBlur(value, name);
+        }
         return;
       }
       _this.setState({
         value: value
       });
+      if (onBlurAfterChange && onBlur) {
+        onBlur(value, name);
+      }
+    };
+    _this.checkCurrentValue = function () {
+      if (!_this.textareaRef.current) {
+        return;
+      }
+      var value = _this.textareaRef.current.value;
+      if (!isBlank(value) && _this.state.value !== value) {
+        var autoFocus = _this.props.autoFocus;
+        // 在值改变了的前提下，如果当前为失焦状态，则触发一次onBlur
+        _this.changeValue(value, !autoFocus && document.activeElement !== _this.textareaRef.current);
+      }
+    };
+    /**
+     * 修改value值的回调
+     * @param ev
+     */
+    _this.onChange = function (ev) {
+      if (_this.props.disabled) {
+        return;
+      }
+      var value = ev.target.value;
+      _this.changeValue(value);
     };
     _this.onFocus = function (ev) {
       var _a = _this.props,
@@ -129,6 +154,9 @@ var TextAreaNotRef = /** @class */function (_super) {
       }
       element.focus();
     }
+    if (this.props.checkValueOnMounted) {
+      this.checkCurrentValue();
+    }
   };
   TextAreaNotRef.prototype.renderSuffix = function () {
     var maxLength = this.props.maxLength;
@@ -147,7 +175,8 @@ var TextAreaNotRef = /** @class */function (_super) {
       className = _a.className,
       prefix = _a.prefix,
       rows = _a.rows,
-      maxLength = _a.maxLength;
+      maxLength = _a.maxLength,
+      name = _a.name;
     var value = this.state.value;
     return /*#__PURE__*/React.createElement(Adorn, {
       prefixCls: cls,
@@ -164,6 +193,7 @@ var TextAreaNotRef = /** @class */function (_super) {
       rows: rows,
       disabled: disabled,
       maxLength: maxLength,
+      name: name,
       style: style,
       value: value || '',
       onChange: this.onChange,
@@ -173,7 +203,8 @@ var TextAreaNotRef = /** @class */function (_super) {
   TextAreaNotRef.defaultProps = {
     defaultValue: '',
     rows: 5,
-    maxlength: 0
+    maxlength: 0,
+    checkValueOnMounted: false
   };
   return TextAreaNotRef;
 }(React.Component);

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

@@ -0,0 +1,26 @@
+interface GetParserOriginalValueParams {
+    originalValue: string | number;
+    prevParserValue: string | number;
+    trimStartZero?: boolean;
+    precision?: number;
+    isRounding?: boolean;
+    min?: number;
+    max?: number;
+    skipError?: boolean;
+}
+/**
+ *
+ * @param originalValueParam
+ * @param trimStartZero
+ * @param prevParserValue
+ * @param precision
+ * @param isRounding
+ * @param min
+ * @param max
+ * @param skipError 遇到首位0、小于最小值、大于最大值问题，不对value进行处理，输出控制台警告
+ */
+export default function ({ originalValue: originalValueParam, trimStartZero, prevParserValue, precision, isRounding, min, max, skipError }: GetParserOriginalValueParams): {
+    parserValueStr: string | undefined;
+    parserValue: string | number | undefined;
+};
+export {};

package/esm/input-number/getParserOriginalValue.js

@@ -0,0 +1,73 @@
+import { getNumberFromString, isBlank, toFixed } from '@autobest-ui/utils';
+import { FirstZeroReg, NumberReg } from './constants';
+function consoleError(msg) {
+  if (process.env.NODE_ENV === 'development') {
+    // eslint-disable-next-line no-console
+    console.error(msg);
+  }
+}
+function getValueBetweenMinAndMax(value, min, max, skipError) {
+  var currentValue = parseFloat(value);
+  if (!isBlank(min) && currentValue < min) {
+    if (!skipError) {
+      return min;
+    }
+    consoleError('Value is smaller than min');
+  }
+  if (!isBlank(max) && currentValue > max) {
+    if (!skipError) {
+      return max;
+    }
+    consoleError('Value is greater than max');
+  }
+  return currentValue;
+}
+/**
+ *
+ * @param originalValueParam
+ * @param trimStartZero
+ * @param prevParserValue
+ * @param precision
+ * @param isRounding
+ * @param min
+ * @param max
+ * @param skipError 遇到首位0、小于最小值、大于最大值问题，不对value进行处理，输出控制台警告
+ */
+export default function (_a) {
+  var originalValueParam = _a.originalValue,
+    trimStartZero = _a.trimStartZero,
+    prevParserValue = _a.prevParserValue,
+    precision = _a.precision,
+    isRounding = _a.isRounding,
+    min = _a.min,
+    max = _a.max,
+    skipError = _a.skipError;
+  // 输入为空
+  if (isBlank(originalValueParam)) {
+    return {
+      parserValueStr: undefined,
+      parserValue: undefined
+    };
+  }
+  var originalValue = typeof originalValueParam === 'number' ? originalValueParam.toString() : originalValueParam;
+  var hasFirstZero = FirstZeroReg.test(originalValue);
+  if (!NumberReg.test(originalValue) || trimStartZero && hasFirstZero) {
+    if (!skipError) {
+      return {
+        parserValueStr: isBlank(prevParserValue) ? undefined : prevParserValue.toString(),
+        parserValue: prevParserValue
+      };
+    }
+    consoleError('Value has first 0');
+  }
+  var currentValue = getValueBetweenMinAndMax(originalValue, min, max, skipError);
+  var parserString = toFixed(currentValue, precision, isRounding);
+  if (hasFirstZero) {
+    // 补齐首位0
+    parserString = parserString.padStart(originalValue.split('.')[0].length, '0');
+  }
+  return {
+    parserValueStr: parserString,
+    parserValue: hasFirstZero ? parserString : getNumberFromString(parserString)
+  };
+}

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import { AddListenerEventHandler } from '@autobest-ui/utils';
+import { AddListenerEventRemoveHandler } from '@autobest-ui/utils';
 import { InputProps, InputValue } from '../input/Input';
-export interface InputNumberProps extends Omit<InputProps<number>, 'value' | 'defaultValue' | 'suffix' | 'onKeyDown'> {
+export interface InputNumberProps extends Omit<InputProps<number | string>, 'value' | 'defaultValue' | 'suffix' | 'onKeyDown'> {
     /**
      * 输入框默认值，用于非受控组件，配合ref使用
      */
@@ -42,15 +42,23 @@ export interface InputNumberProps extends Omit<InputProps<number>, 'value' | 'de
      * 值发生改变将会触发，onChange是不合法将不在触发，只在最后onBlur时再触发一次
      * 该方法主要用在用户输入内容判断上，不要在此方法中执行修改value的操作
      */
-    onContinualChange?: (originalValue: string | number | undefined, parserValue: number | undefined, name?: string) => void;
+    onContinualChange?: (originalValue: string | number | undefined, parserValue: string | number | undefined, name?: string) => void;
     /**
      * 用户触发keydown时的回调，主要用于键盘监听
      */
-    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>, parserValue: number | undefined, name?: string) => void;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>, parserValue: string | number | undefined, name?: string) => void;
+    /**
+     * 是否过滤开头的0，默认true过滤
+     */
+    trimStartZero?: boolean;
+    /**
+     * 处理用户输入值时是否要四舍五入，默认true
+     */
+    isRounding?: boolean;
 }
 interface InputNumberStates {
     originalValueStr: string | undefined;
-    parserValue: number | undefined;
+    parserValue: string | number | undefined;
 }
 interface InputNumberPropsWithRef extends InputNumberProps {
     /**
@@ -61,12 +69,14 @@ interface InputNumberPropsWithRef extends InputNumberProps {
 export declare class InputNumberNotRef extends React.Component<InputNumberPropsWithRef, InputNumberStates> {
     prefixCls: string;
     inputRef: React.RefObject<HTMLInputElement>;
-    keyboardHandler: AddListenerEventHandler;
+    keyboardHandler: AddListenerEventRemoveHandler;
     static defaultProps: {
         defaultValue: string;
         controls: boolean;
         step: number;
         keyboard: boolean;
+        trimStartZero: boolean;
+        isRounding: boolean;
     };
     constructor(props: InputNumberPropsWithRef);
     static getDerivedStateFromProps(nextProps: InputNumberPropsWithRef, prevStates: InputNumberStates): InputNumberStates;
@@ -75,7 +85,10 @@ export declare class InputNumberNotRef extends React.Component<InputNumberPropsW
      * 解析用户输入的内容，并返回解析后的结果
      * @param originalValue
      */
-    getParserOriginalValue: (originalValue: string) => string | undefined;
+    getParserOriginalValue: (originalValue: string) => {
+        parserValueStr: string;
+        parserValue: string | number;
+    };
     /**
      * 键盘和点击上下按钮更新value值
      * @param isUp

package/esm/input-number/index.js

@@ -34,10 +34,12 @@ var __assign = this && this.__assign || function () {
 };
 import React from 'react';
 import classNames from 'classnames';
-import { isBlank, composeRef, toFixed, isEmptyObject, addEventListener, getNumberFromString } from '@autobest-ui/utils';
+import { composeRef } from '@autobest-ui/components';
+import { isBlank, isEmptyObject, addEventListener } from '@autobest-ui/utils';
 import Input from '../input/Input';
-import { FirstZeroReg, NumberReg } from './constants';
+import { FirstZeroReg } from './constants';
 import ControlArrow from './ControlArrow';
+import getParserOriginalValue from './getParserOriginalValue';
 var InputNumberNotRef = /** @class */function (_super) {
   __extends(InputNumberNotRef, _super);
   function InputNumberNotRef(props) {
@@ -49,25 +51,10 @@ var InputNumberNotRef = /** @class */function (_super) {
      * @param originalValue
      */
     _this.getParserOriginalValue = function (originalValue) {
-      // 输入为空
-      if (isBlank(originalValue)) {
-        return undefined;
-      }
-      if (!NumberReg.test(originalValue) || FirstZeroReg.test(originalValue)) {
-        return isBlank(_this.state.parserValue) ? undefined : _this.state.parserValue.toString();
-      }
-      var _a = _this.props,
-        min = _a.min,
-        max = _a.max,
-        precision = _a.precision;
-      var currentValue = parseFloat(originalValue);
-      if (!isBlank(min) && currentValue < min) {
-        currentValue = min;
-      }
-      if (!isBlank(max) && currentValue > max) {
-        currentValue = max;
-      }
-      return toFixed(currentValue, precision);
+      return getParserOriginalValue(__assign(__assign({}, _this.props), {
+        originalValue: originalValue,
+        prevParserValue: _this.state.parserValue
+      }));
     };
     /**
      * 键盘和点击上下按钮更新value值
@@ -75,14 +62,20 @@ var InputNumberNotRef = /** @class */function (_super) {
      */
     _this.changeValueWithStep = function (isUp) {
       var step = _this.props.step;
-      var prevValue = _this.state.parserValue ? _this.state.parserValue : 0;
+      var prevParserValue = _this.state.parserValue;
+      var prevValue = prevParserValue ? typeof prevParserValue === 'number' ? prevParserValue : parseFloat(prevParserValue) : 0;
       var keyboardValue = isUp ? prevValue + step : prevValue - step;
-      var parserValueStr = _this.getParserOriginalValue(keyboardValue.toString());
-      var parserValue = getNumberFromString(parserValueStr);
-      var _a = _this.props,
-        name = _a.name,
-        onChange = _a.onChange,
-        onContinualChange = _a.onContinualChange;
+      var keyboardValueStr = keyboardValue.toString();
+      if (typeof prevParserValue === 'string' && FirstZeroReg.test(prevParserValue)) {
+        keyboardValueStr = keyboardValueStr.padStart(prevParserValue.length, '0');
+      }
+      var _a = _this.getParserOriginalValue(keyboardValueStr),
+        parserValueStr = _a.parserValueStr,
+        parserValue = _a.parserValue;
+      var _b = _this.props,
+        name = _b.name,
+        onChange = _b.onChange,
+        onContinualChange = _b.onContinualChange;
       if (prevValue !== parserValue) {
         if (onContinualChange) {
           onContinualChange(parserValueStr, parserValue, name);
@@ -123,14 +116,13 @@ var InputNumberNotRef = /** @class */function (_super) {
       }
       var onFocus = _this.props.onFocus;
       if (onFocus) {
-        var parserValueStr = _this.getParserOriginalValue(originalValueStr);
-        var parserValue = getNumberFromString(parserValueStr);
+        var parserValue = _this.getParserOriginalValue(originalValueStr).parserValue;
         onFocus(parserValue, name);
       }
     };
     _this.onBlur = function (originalValueStr, name) {
       if (_this.keyboardHandler) {
-        _this.keyboardHandler.remove();
+        _this.keyboardHandler();
         _this.keyboardHandler = null;
       }
       if (_this.props.disabled) {
@@ -140,8 +132,9 @@ var InputNumberNotRef = /** @class */function (_super) {
         onBlur = _a.onBlur,
         onChange = _a.onChange,
         onContinualChange = _a.onContinualChange;
-      var parserValueStr = _this.getParserOriginalValue(originalValueStr);
-      var parserValue = getNumberFromString(parserValueStr);
+      var _b = _this.getParserOriginalValue(originalValueStr),
+        parserValueStr = _b.parserValueStr,
+        parserValue = _b.parserValue;
       _this.setState({
         originalValueStr: parserValueStr
       });
@@ -171,11 +164,12 @@ var InputNumberNotRef = /** @class */function (_super) {
       if (_this.props.disabled) {
         return;
       }
-      var parserValueStr = _this.getParserOriginalValue(originalValueStr);
-      var parserValue = getNumberFromString(parserValueStr);
-      var _a = _this.props,
-        onChange = _a.onChange,
-        onContinualChange = _a.onContinualChange;
+      var _a = _this.getParserOriginalValue(originalValueStr),
+        parserValueStr = _a.parserValueStr,
+        parserValue = _a.parserValue;
+      var _b = _this.props,
+        onChange = _b.onChange,
+        onContinualChange = _b.onContinualChange;
       if (onContinualChange) {
         onContinualChange(originalValueStr, parserValue, name);
       }
@@ -219,10 +213,16 @@ var InputNumberNotRef = /** @class */function (_super) {
         onKeyDown(ev, _this.state.parserValue, name);
       }
     };
-    var defaultValueStr = toFixed(props.defaultValue, props.precision);
+    var _a = getParserOriginalValue(__assign(__assign({}, props), {
+        originalValue: props.defaultValue,
+        prevParserValue: undefined,
+        skipError: true
+      })),
+      parserValueStr = _a.parserValueStr,
+      parserValue = _a.parserValue;
     _this.state = {
-      originalValueStr: defaultValueStr,
-      parserValue: getNumberFromString(defaultValueStr)
+      originalValueStr: parserValueStr,
+      parserValue: parserValue
     };
     return _this;
   }
@@ -233,9 +233,15 @@ var InputNumberNotRef = /** @class */function (_super) {
       if (nextProps.value !== prevStates.parserValue && (
       // 兼容外部传入空string/null的情况， 只有当一个值非空时，才会重新重置State信息
       !isBlank(nextProps.value) || !isBlank(prevStates.parserValue))) {
-        var fixedValueStr = toFixed(nextProps.value, nextProps.precision);
-        nextState.parserValue = getNumberFromString(fixedValueStr);
-        nextState.originalValueStr = fixedValueStr;
+        var _a = getParserOriginalValue(__assign(__assign({}, nextProps), {
+            originalValue: nextProps.value,
+            prevParserValue: prevStates.parserValue,
+            skipError: true
+          })),
+          parserValueStr = _a.parserValueStr,
+          parserValue = _a.parserValue;
+        nextState.parserValue = parserValue;
+        nextState.originalValueStr = parserValueStr;
       }
     }
     if (isEmptyObject(nextState)) {
@@ -245,7 +251,7 @@ var InputNumberNotRef = /** @class */function (_super) {
   };
   InputNumberNotRef.prototype.componentWillUnmount = function () {
     if (this.keyboardHandler) {
-      this.keyboardHandler.remove();
+      this.keyboardHandler();
       this.keyboardHandler = null;
     }
   };
@@ -260,7 +266,9 @@ var InputNumberNotRef = /** @class */function (_super) {
       disabled = _b.disabled,
       style = _b.style,
       prefix = _b.prefix,
-      controls = _b.controls;
+      controls = _b.controls,
+      checkValueOnMounted = _b.checkValueOnMounted,
+      maxLength = _b.maxLength;
     var originalValueStr = this.state.originalValueStr;
     return /*#__PURE__*/React.createElement(Input, {
       ref: composeRef(this.inputRef, upperRef),
@@ -279,14 +287,18 @@ var InputNumberNotRef = /** @class */function (_super) {
         cls: cls,
         onUp: this.onUp,
         onDown: this.onDown
-      }) : null
+      }) : null,
+      checkValueOnMounted: checkValueOnMounted,
+      maxLength: maxLength
     });
   };
   InputNumberNotRef.defaultProps = {
     defaultValue: '',
     controls: true,
     step: 1,
-    keyboard: true
+    keyboard: true,
+    trimStartZero: true,
+    isRounding: true
   };
   return InputNumberNotRef;
 }(React.Component);

package/esm/input-phone/format.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 按照给定的模板（111-222-333）格式化数字形式电话号码（111222333）
+ * @param value
+ * @param format
+ * @param placeholder
+ */
+export declare function getPhoneFormat(value: any, format: any, placeholder: any): any;
+/**
+ * 删除字符串中非数字内容
+ * @param value
+ */
+export declare function getNumberValue(value: any): any;
+export declare function getFirstCursorPosition(value: any, format: string, placeholder: any): any;
+export declare function getUpdatedValue({ value, prevValue, format, selectionEnd, placeholder }: {
+    value: any;
+    prevValue: any;
+    format: any;
+    selectionEnd: any;
+    placeholder: any;
+}): {
+    value: any;
+    cursorPosition: any;
+};