@hi-ui/input 4.0.10 → 4.0.11

package/lib/cjs/use-input-cursor.js

@@ -9,67 +9,53 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', {
-  value: true
-});
-
 var React = require('react');
-
 var typeAssertion = require('@hi-ui/type-assertion');
-
 var defaultSeparator = ' ';
-
 var useInputCursor = function useInputCursor(_ref) {
   var inputElementRef = _ref.inputElementRef,
-      value = _ref.value,
-      formatter = _ref.formatter,
-      _ref$separator = _ref.separator,
-      separator = _ref$separator === void 0 ? defaultSeparator : _ref$separator;
-
+    value = _ref.value,
+    formatter = _ref.formatter,
+    _ref$separator = _ref.separator,
+    separator = _ref$separator === void 0 ? defaultSeparator : _ref$separator;
   var _useState = React.useState(0),
-      position = _useState[0],
-      setPosition = _useState[1];
-
-  var startPositionRef = React.useRef(0); // 记录值变化前的位置
-
+    position = _useState[0],
+    setPosition = _useState[1];
+  var startPositionRef = React.useRef(0);
+  // 记录值变化前的位置
   var handleOnKeyDown = React.useCallback(function () {
     var _a, _b;
-
     startPositionRef.current = (_b = (_a = inputElementRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : 0;
   }, [inputElementRef]);
   var handleChange = React.useCallback(function (evt) {
     var _a, _b;
-
     if (typeAssertion.isNullish(value)) {
       return;
     }
-
-    var val = evt.target.value; // 处理后的字符串
-
-    var str = typeof formatter === 'function' ? formatter(val) : val; // 光标变化后的位置
-
-    var endPosition = (_b = (_a = inputElementRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : 0; // 字符串添加
-
+    var val = evt.target.value;
+    // 处理后的字符串
+    var str = typeof formatter === 'function' ? formatter(val) : val;
+    // 光标变化后的位置
+    var endPosition = (_b = (_a = inputElementRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : 0;
+    // 字符串添加
     if (str.length > value.length) {
       // 值变化的长度
-      var len = str.length - value.length; // 取出变化的值
-
-      var addStr = str.substring(startPositionRef.current, startPositionRef.current + len); // 光标应该移动的格数
-
+      var len = str.length - value.length;
+      // 取出变化的值
+      var addStr = str.substring(startPositionRef.current, startPositionRef.current + len);
+      // 光标应该移动的格数
       var step = getSeparatorNum(addStr, separator);
       setPosition(endPosition + step);
-    } // 字符串删除
-
-
+    }
+    // 字符串删除
     if (str.length < value.length) {
       if (str.charAt(endPosition - 1) === separator) {
         setPosition(endPosition - 1);
       } else {
         setPosition(endPosition);
       }
-    } // 没有变化
-
-
+    }
+    // 没有变化
     if (str.length === value.length) {
       if (str.charAt(startPositionRef.current) === separator) {
         setPosition(endPosition + 1);
@@ -89,22 +75,16 @@ var useInputCursor = function useInputCursor(_ref) {
  * @param str
  * @returns
  */
-
-
 var getSeparatorNum = function getSeparatorNum(str, separator) {
   if (separator === void 0) {
     separator = defaultSeparator;
   }
-
   var index = str.indexOf(separator);
   var num = 0;
-
   while (index !== -1) {
     index = str.indexOf(separator, index + 1);
     num++;
   }
-
   return num;
 };
-
 exports.useInputCursor = useInputCursor;

package/lib/cjs/use-input.js

@@ -9,68 +9,53 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', {
-  value: true
-});
-
 var React = require('react');
-
 var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
-
 var useLatest = require('@hi-ui/use-latest');
-
 var domUtils = require('@hi-ui/dom-utils');
-
 var funcUtils = require('@hi-ui/func-utils');
-
 var index = require('./utils/index.js');
-
 var useInputCursor = require('./use-input-cursor.js');
-
-var EXTRA_TYPE = ['text', 'id', 'tel', 'card', 'amount', 'email']; // 需要格式化后校对光标的类型
-
+var EXTRA_TYPE = ['text', 'id', 'tel', 'card', 'amount', 'email'];
+// 需要格式化后校对光标的类型
 var RESET_CURSOR_TYPE = ['id', 'tel', 'card'];
-
 var useInput = function useInput(_ref) {
   var name = _ref.name,
-      _ref$autoFocus = _ref.autoFocus,
-      autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$readOnly = _ref.readOnly,
-      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-      maxLength = _ref.maxLength,
-      placeholder = _ref.placeholder,
-      _ref$defaultValue = _ref.defaultValue,
-      defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
-      valueProp = _ref.value,
-      onChange = _ref.onChange,
-      onFocus = _ref.onFocus,
-      onBlur = _ref.onBlur,
-      onKeyDown = _ref.onKeyDown,
-      _ref$trimValueOnBlur = _ref.trimValueOnBlur,
-      trimValueOnBlur = _ref$trimValueOnBlur === void 0 ? false : _ref$trimValueOnBlur,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'text' : _ref$type,
-      clearElementRef = _ref.clearElementRef,
-      inputElementRef = _ref.inputElementRef; // Object.is 避免 trimValueOnBlur 和 点击 clearIcon 触发 2 次相同的 onCHange
-
+    _ref$autoFocus = _ref.autoFocus,
+    autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    maxLength = _ref.maxLength,
+    placeholder = _ref.placeholder,
+    _ref$defaultValue = _ref.defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
+    valueProp = _ref.value,
+    onChange = _ref.onChange,
+    onFocus = _ref.onFocus,
+    onBlur = _ref.onBlur,
+    onKeyDown = _ref.onKeyDown,
+    _ref$trimValueOnBlur = _ref.trimValueOnBlur,
+    trimValueOnBlur = _ref$trimValueOnBlur === void 0 ? false : _ref$trimValueOnBlur,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'text' : _ref$type,
+    clearElementRef = _ref.clearElementRef,
+    inputElementRef = _ref.inputElementRef;
+  // Object.is 避免 trimValueOnBlur 和 点击 clearIcon 触发 2 次相同的 onCHange
   var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultValue, valueProp, onChange, Object.is),
-      value = _useUncontrolledState[0],
-      tryChangeValue = _useUncontrolledState[1];
-
+    value = _useUncontrolledState[0],
+    tryChangeValue = _useUncontrolledState[1];
   var _useInputCursor = useInputCursor.useInputCursor({
-    inputElementRef: inputElementRef,
-    value: index.format(value, type)
-  }),
-      formatHandleChange = _useInputCursor.handleChange,
-      handleOnKeyDown = _useInputCursor.handleOnKeyDown,
-      position = _useInputCursor.position;
+      inputElementRef: inputElementRef,
+      value: index.format(value, type)
+    }),
+    formatHandleChange = _useInputCursor.handleChange,
+    handleOnKeyDown = _useInputCursor.handleOnKeyDown,
+    position = _useInputCursor.position;
   /**
    * 修复值格式化时光标位置问题：https://github.com/XiaoMi/hiui/issues/2438
    */
-
-
   var needResetCursorPosition = React.useMemo(function () {
     return RESET_CURSOR_TYPE.includes(type);
   }, [type]);
@@ -78,18 +63,15 @@ var useInput = function useInput(_ref) {
     if (trim === void 0) {
       trim = false;
     }
-
     evt.persist();
     var nextValue = evt.target.value;
-    var valueTrue = index.pure(nextValue, type); // 防溢出，保证 onChange 拿到的是值是最新的 formatted value
-
+    var valueTrue = index.pure(nextValue, type);
+    // 防溢出，保证 onChange 拿到的是值是最新的 formatted value
     var value = index.format(nextValue, type);
-
     if (trim) {
       valueTrue = valueTrue.trim();
       value = value.trim();
     }
-
     var event = Object.create(evt);
     event.target = Object.assign(Object.assign({}, evt.target), {
       value: value
@@ -97,31 +79,27 @@ var useInput = function useInput(_ref) {
     tryChangeValue(valueTrue, event);
     needResetCursorPosition && formatHandleChange(event);
   }, [formatHandleChange, needResetCursorPosition, tryChangeValue, type]);
-
   var _useState = React.useState(autoFocus),
-      focused = _useState[0],
-      setFocused = _useState[1];
-
+    focused = _useState[0],
+    setFocused = _useState[1];
   var handleFocus = useLatest.useLatestCallback(function (evt) {
     setFocused(true);
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(evt);
   });
   var handleBlur = useLatest.useLatestCallback(function (event) {
-    var relatedTarget = event.relatedTarget; // 拦截 clearIcon 点击清空，阻止其触发 input 失焦
-
+    var relatedTarget = event.relatedTarget;
+    // 拦截 clearIcon 点击清空，阻止其触发 input 失焦
     if (clearElementRef && clearElementRef.current && clearElementRef.current === relatedTarget) {
       return;
     }
-
-    setFocused(false); // amount 自动添加小数
-
+    setFocused(false);
+    // amount 自动添加小数
     if (type === 'amount') {
       event.target.value = index.formatAmount(value, true);
       handleChange(event, trimValueOnBlur);
     } else if (trimValueOnBlur) {
       handleChange(event, true);
     }
-
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
   });
   var nativeInputProps = React.useMemo(function () {
@@ -160,5 +138,4 @@ var useInput = function useInput(_ref) {
     getInputProps: getInputProps
   };
 };
-
 exports.useInput = useInput;

package/lib/cjs/utils/index.js

@@ -9,21 +9,15 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', {
-  value: true
-});
 /**
  * 格式化身份证
  */
-
 var formatId = function formatId(val) {
   val = val.replace(/[^a-zA-Z0-9]/g, '');
   var len = val.length;
-
   if (val === '' || len < 7) {
     return val;
   }
-
   if (len < 11) {
     return val.slice(0, 6) + ' ' + val.slice(6, 10);
   } else if (len < 15) {
@@ -32,7 +26,6 @@ var formatId = function formatId(val) {
     return val.slice(0, 6) + ' ' + val.slice(6, 10) + ' ' + val.slice(10, 14) + ' ' + val.slice(14, 18);
   }
 };
-
 var pureId = function pureId(val) {
   var tmp = val.replace(/[^\d|.]/g, '');
   return tmp.slice(0, 18);
@@ -40,23 +33,18 @@ var pureId = function pureId(val) {
 /**
  * 格式化手机号
  */
-
-
 var formatTel = function formatTel(val) {
   val = val.replace(/\D/g, '');
   var len = val.length;
-
   if (val === '' || len < 4) {
     return val;
   }
-
   if (len < 8) {
     return val.slice(0, 3) + ' ' + val.slice(3, 7);
   } else {
     return val.slice(0, 3) + ' ' + val.slice(3, 7) + ' ' + val.slice(7, 11);
   }
 };
-
 var pureTel = function pureTel(val) {
   var tmp = val.replace(/[^\d|.]/g, '');
   return tmp.slice(0, 11);
@@ -64,16 +52,12 @@ var pureTel = function pureTel(val) {
 /**
  * 格式化银行卡号
  */
-
-
 var formatCard = function formatCard(val) {
   val = val.replace(/\D/g, '');
   var len = val.length;
-
   if (val === '' || val.length < 5) {
     return val;
   }
-
   if (len < 9) {
     return val.slice(0, 4) + ' ' + val.slice(4, 8);
   } else if (len < 13) {
@@ -84,7 +68,6 @@ var formatCard = function formatCard(val) {
     return val.slice(0, 4) + ' ' + val.slice(4, 8) + ' ' + val.slice(8, 12) + ' ' + val.slice(12, 16) + ' ' + val.slice(16, 19);
   }
 };
-
 var pureCard = function pureCard(val) {
   var tmp = val.replace(/[^\d|.]/g, '');
   return tmp.slice(0, 19);
@@ -93,59 +76,44 @@ var pureCard = function pureCard(val) {
  * 金额自动生成小数
  * @param {string} val  需要处理的值
  */
-
-
 var formatAmount = function formatAmount(val, fill) {
   if (fill === void 0) {
     fill = false;
   }
-
   val = val.replace(/[^\d|.|,]/g, '').replace(/(\.\d*?)(\.|,).*/, function (_, $1) {
     return $1;
   });
-
   if (fill) {
     if (!val) return val;
     return val.indexOf('.') > -1 ? val : val + '.00';
   }
-
   return val;
 };
-
 var pureAmount = function pureAmount(val) {
   var tmp = val.replace(/[^\d|.]/g, '');
   return tmp;
 };
-
 var formatEmail = function formatEmail(val) {
   return val.replace(/\W/g, '');
 };
-
 var pureEmail = function pureEmail(val) {
   return val;
 };
 /**
  * 输入规则
  */
-
-
 var format = function format(val, type) {
   switch (type) {
     case 'id':
       return formatId(val);
-
     case 'tel':
       return formatTel(val);
-
     case 'card':
       return formatCard(val);
-
     case 'email':
       return formatEmail(val);
-
     case 'amount':
       return formatAmount(val);
-
     default:
       return val;
   }
@@ -153,30 +121,22 @@ var format = function format(val, type) {
 /**
  * 净化规则
  */
-
-
 var pure = function pure(val, type) {
   switch (type) {
     case 'id':
       return pureId(val);
-
     case 'tel':
       return pureTel(val);
-
     case 'card':
       return pureCard(val);
-
     case 'email':
       return pureEmail(val);
-
     case 'amount':
       return pureAmount(val);
-
     default:
       return val;
   }
 };
-
 exports.format = format;
 exports.formatAmount = formatAmount;
 exports.formatCard = formatCard;

package/lib/esm/Input.js

@@ -14,113 +14,101 @@ import { __DEV__ } from '@hi-ui/env';
 import { useMergeRefs } from '@hi-ui/use-merge-refs';
 import { CloseCircleFilled } from '@hi-ui/icons';
 import { useInput } from './use-input.js';
-
 var _prefix = getPrefixCls('input');
 /**
  * 输入框
  */
-
-
 var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _a$prefixCls = _a.prefixCls,
-      prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
-      _a$role = _a.role,
-      role = _a$role === void 0 ? 'input' : _a$role,
-      className = _a.className,
-      style = _a.style,
-      _a$size = _a.size,
-      size = _a$size === void 0 ? 'md' : _a$size,
-      _a$appearance = _a.appearance,
-      appearance = _a$appearance === void 0 ? 'line' : _a$appearance,
-      prepend = _a.prepend,
-      append = _a.append,
-      prefix = _a.prefix,
-      suffix = _a.suffix,
-      _a$clearableTrigger = _a.clearableTrigger,
-      clearableTrigger = _a$clearableTrigger === void 0 ? 'hover' : _a$clearableTrigger,
-      _a$clearable = _a.clearable,
-      clearable = _a$clearable === void 0 ? false : _a$clearable,
-      _a$invalid = _a.invalid,
-      invalid = _a$invalid === void 0 ? false : _a$invalid,
-      name = _a.name,
-      autoFocus = _a.autoFocus,
-      disabled = _a.disabled,
-      readOnly = _a.readOnly,
-      maxLength = _a.maxLength,
-      placeholder = _a.placeholder,
-      defaultValue = _a.defaultValue,
-      valueProp = _a.value,
-      onChange = _a.onChange,
-      onFocus = _a.onFocus,
-      onBlur = _a.onBlur,
-      onKeyDown = _a.onKeyDown,
-      trimValueOnBlur = _a.trimValueOnBlur,
-      onClear = _a.onClear,
-      type = _a.type,
-      containerRef = _a.containerRef,
-      rest = __rest(_a, ["prefixCls", "role", "className", "style", "size", "appearance", "prepend", "append", "prefix", "suffix", "clearableTrigger", "clearable", "invalid", "name", "autoFocus", "disabled", "readOnly", "maxLength", "placeholder", "defaultValue", "value", "onChange", "onFocus", "onBlur", "onKeyDown", "trimValueOnBlur", "onClear", "type", "containerRef"]); // @TODO: 临时方案，后面迁移至 InputGroup
-
-
+    prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
+    _a$role = _a.role,
+    role = _a$role === void 0 ? 'input' : _a$role,
+    className = _a.className,
+    style = _a.style,
+    _a$size = _a.size,
+    size = _a$size === void 0 ? 'md' : _a$size,
+    _a$appearance = _a.appearance,
+    appearance = _a$appearance === void 0 ? 'line' : _a$appearance,
+    prepend = _a.prepend,
+    append = _a.append,
+    prefix = _a.prefix,
+    suffix = _a.suffix,
+    _a$clearableTrigger = _a.clearableTrigger,
+    clearableTrigger = _a$clearableTrigger === void 0 ? 'hover' : _a$clearableTrigger,
+    _a$clearable = _a.clearable,
+    clearable = _a$clearable === void 0 ? false : _a$clearable,
+    _a$invalid = _a.invalid,
+    invalid = _a$invalid === void 0 ? false : _a$invalid,
+    name = _a.name,
+    autoFocus = _a.autoFocus,
+    disabled = _a.disabled,
+    readOnly = _a.readOnly,
+    maxLength = _a.maxLength,
+    placeholder = _a.placeholder,
+    defaultValue = _a.defaultValue,
+    valueProp = _a.value,
+    onChange = _a.onChange,
+    onFocus = _a.onFocus,
+    onBlur = _a.onBlur,
+    onKeyDown = _a.onKeyDown,
+    trimValueOnBlur = _a.trimValueOnBlur,
+    onClear = _a.onClear,
+    type = _a.type,
+    containerRef = _a.containerRef,
+    rest = __rest(_a, ["prefixCls", "role", "className", "style", "size", "appearance", "prepend", "append", "prefix", "suffix", "clearableTrigger", "clearable", "invalid", "name", "autoFocus", "disabled", "readOnly", "maxLength", "placeholder", "defaultValue", "value", "onChange", "onFocus", "onBlur", "onKeyDown", "trimValueOnBlur", "onClear", "type", "containerRef"]);
+  // @TODO: 临时方案，后面迁移至 InputGroup
   var _useMemo = useMemo(function () {
-    var shouldUnset = [false, false]; // @ts-ignore
-    // @ts-ignore
-
-    if ( /*#__PURE__*/isValidElement(prepend) && ['Select', 'Button'].includes(prepend.type.HiName)) {
-      shouldUnset[0] = true;
-    } // @ts-ignore
-    // @ts-ignore
-
-
-    if ( /*#__PURE__*/isValidElement(append) && ['Select', 'Button'].includes(append.type.HiName)) {
-      shouldUnset[1] = true;
-    }
-
-    return shouldUnset;
-  }, [prepend, append]),
-      unsetPrepend = _useMemo[0],
-      unsetAppend = _useMemo[1];
-
+      var shouldUnset = [false, false];
+      // @ts-ignore
+      // @ts-ignore
+      if ( /*#__PURE__*/isValidElement(prepend) && ['Select', 'Button'].includes(prepend.type.HiName)) {
+        shouldUnset[0] = true;
+      }
+      // @ts-ignore
+      // @ts-ignore
+      if ( /*#__PURE__*/isValidElement(append) && ['Select', 'Button'].includes(append.type.HiName)) {
+        shouldUnset[1] = true;
+      }
+      return shouldUnset;
+    }, [prepend, append]),
+    unsetPrepend = _useMemo[0],
+    unsetAppend = _useMemo[1];
   var inputElementRef = useRef(null);
   var proxyOnChange = useCallback(function (value, evt) {
     if (!onChange) return;
     onChangeMock(onChange, evt, inputElementRef.current, value);
   }, [onChange]);
   var clearElementRef = useRef(null);
-
   var _useInput = useInput({
-    clearElementRef: clearElementRef,
-    inputElementRef: inputElementRef,
-    name: name,
-    autoFocus: autoFocus,
-    disabled: disabled,
-    readOnly: readOnly,
-    maxLength: maxLength,
-    placeholder: placeholder,
-    defaultValue: defaultValue,
-    value: valueProp,
-    onChange: proxyOnChange,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    onKeyDown: onKeyDown,
-    trimValueOnBlur: trimValueOnBlur,
-    type: type
-  }),
-      tryChangeValue = _useInput.tryChangeValue,
-      focused = _useInput.focused,
-      value = _useInput.value,
-      getInputProps = _useInput.getInputProps;
-
+      clearElementRef: clearElementRef,
+      inputElementRef: inputElementRef,
+      name: name,
+      autoFocus: autoFocus,
+      disabled: disabled,
+      readOnly: readOnly,
+      maxLength: maxLength,
+      placeholder: placeholder,
+      defaultValue: defaultValue,
+      value: valueProp,
+      onChange: proxyOnChange,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      onKeyDown: onKeyDown,
+      trimValueOnBlur: trimValueOnBlur,
+      type: type
+    }),
+    tryChangeValue = _useInput.tryChangeValue,
+    focused = _useInput.focused,
+    value = _useInput.value,
+    getInputProps = _useInput.getInputProps;
   var focus = useCallback(function () {
     var _a;
-
     (_a = inputElementRef.current) === null || _a === void 0 ? void 0 : _a.focus();
   }, []);
-
   var _useState = useState(false),
-      hover = _useState[0],
-      setHover = _useState[1]; // 在开启 clearable 下展示 清除内容按钮，可点击进行内容清楚
-
-
+    hover = _useState[0],
+    setHover = _useState[1];
+  // 在开启 clearable 下展示 清除内容按钮，可点击进行内容清楚
   var showClearableIcon = clearable && !!value && !disabled;
   var mergedRef = useMergeRefs(ref, inputElementRef);
   var cls = cx(prefixCls, className, prefixCls + "--size-" + size, prefixCls + "--appearance-" + appearance);
@@ -163,7 +151,6 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
     className: prefixCls + "__append"
   }, append) : null));
 });
-
 if (__DEV__) {
   Input.displayName = 'Input';
 }
@@ -176,11 +163,9 @@ if (__DEV__) {
  * @param targetValue
  * @returns
  */
-
-
 function onChangeMock(onChange, evt, target, targetValue) {
-  var event = evt; // 点击 clearIcon 或者 失焦 trim 时，都会代理 onChange 的事件对象 target 指向 input.target
-
+  var event = evt;
+  // 点击 clearIcon 或者 失焦 trim 时，都会代理 onChange 的事件对象 target 指向 input.target
   if (evt.type !== 'change') {
     if (!target) return;
     var originalTargetValue = target.value;
@@ -188,13 +173,11 @@ function onChangeMock(onChange, evt, target, targetValue) {
     event.target = target;
     event.currentTarget = target;
     target.value = targetValue;
-    onChange(event, targetValue); // 重置为之前值
-
+    onChange(event, targetValue);
+    // 重置为之前值
     target.value = originalTargetValue;
     return;
   }
-
   onChange(event, targetValue);
 }
-
 export { Input, onChangeMock };