@hi-ui/input 4.2.1 → 4.3.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hi-ui/input
 
+## 4.3.0
+
+### Minor Changes
+
+- [#3092](https://github.com/XiaoMi/hiui/pull/3092) [`bf2179191`](https://github.com/XiaoMi/hiui/commit/bf21791917f96c0b33b6a74539650bc56aba1d99) Thanks [@zyprepare](https://github.com/zyprepare)! - feat(input): add awaitCompositionEnd api (#3090)
+
 ## 4.2.1
 
 ### Patch Changes

package/lib/cjs/Input.js

@@ -67,7 +67,8 @@ var Input = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     onClear = _a.onClear,
     type = _a.type,
     containerRef = _a.containerRef,
-    rest = tslib.__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"]);
+    waitCompositionEnd = _a.waitCompositionEnd,
+    rest = tslib.__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", "waitCompositionEnd"]);
   // @TODO: 临时方案，后面迁移至 InputGroup
   var _useMemo = React.useMemo(function () {
       var shouldUnset = [false, false];
@@ -107,7 +108,8 @@ var Input = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       onBlur: onBlur,
       onKeyDown: onKeyDown,
       trimValueOnBlur: trimValueOnBlur,
-      type: type
+      type: type,
+      waitCompositionEnd: waitCompositionEnd
     }),
     tryChangeValue = _useInput.tryChangeValue,
     focused = _useInput.focused,

package/lib/cjs/use-input.js

@@ -44,11 +44,18 @@ var useInput = function useInput(_ref) {
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'text' : _ref$type,
     clearElementRef = _ref.clearElementRef,
-    inputElementRef = _ref.inputElementRef;
+    inputElementRef = _ref.inputElementRef,
+    waitCompositionEnd = _ref.waitCompositionEnd;
   // Object.is 避免 trimValueOnBlur 和 点击 clearIcon 触发 2 次相同的 onCHange
   var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultValue, valueProp, onChange, Object.is),
     value = _useUncontrolledState[0],
     tryChangeValue = _useUncontrolledState[1];
+  // 用于存储中文输入法下输入未完成时的值
+  var _useState = React.useState(''),
+    tempValue = _useState[0],
+    setTempValue = _useState[1];
+  // 是否正在输入中文
+  var isComposingRef = React.useRef(false);
   var _useInputCursor = useInputCursor.useInputCursor({
       inputElementRef: inputElementRef,
       value: index.format(value, type)
@@ -68,6 +75,13 @@ var useInput = function useInput(_ref) {
     }
     evt.persist();
     var nextValue = evt.target.value;
+    // 如果正在输入中文中，则更新临时要显示的值，并返回
+    if (waitCompositionEnd && isComposingRef.current) {
+      setTempValue(nextValue);
+      return;
+    }
+    // 中文输入完成后才触发 onChange 并清空临时值
+    setTempValue('');
     var valueTrue = index.pure(nextValue, type);
     // 防溢出，保证 onChange 拿到的是值是最新的 formatted value
     var value = index.format(nextValue, type);
@@ -81,10 +95,20 @@ 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];
+  }, [formatHandleChange, needResetCursorPosition, tryChangeValue, type, waitCompositionEnd]);
+  var handleCompositionStart = React.useCallback(function () {
+    if (!waitCompositionEnd) return;
+    isComposingRef.current = true;
+  }, [waitCompositionEnd]);
+  var handleCompositionEnd = React.useCallback(function (event) {
+    if (!waitCompositionEnd) return;
+    isComposingRef.current = false;
+    setTempValue('');
+    handleChange(event);
+  }, [handleChange, waitCompositionEnd]);
+  var _useState2 = React.useState(autoFocus),
+    focused = _useState2[0],
+    setFocused = _useState2[1];
   var handleFocus = useLatest.useLatestCallback(function (evt) {
     setFocused(true);
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(evt);
@@ -119,14 +143,16 @@ var useInput = function useInput(_ref) {
   var getInputProps = React.useCallback(function () {
     var nativeType = EXTRA_TYPE.includes(type) ? undefined : type;
     return Object.assign(Object.assign({}, nativeInputProps), {
-      value: index.format(value, type),
+      value: tempValue || index.format(value, type),
       type: nativeType,
       onChange: handleChange,
       onFocus: handleFocus,
       onBlur: handleBlur,
-      onKeyDown: needResetCursorPosition ? funcUtils.callAllFuncs(handleOnKeyDown, onKeyDown) : onKeyDown
+      onKeyDown: needResetCursorPosition ? funcUtils.callAllFuncs(handleOnKeyDown, onKeyDown) : onKeyDown,
+      onCompositionStart: handleCompositionStart,
+      onCompositionEnd: handleCompositionEnd
     });
-  }, [type, nativeInputProps, value, handleChange, handleFocus, handleBlur, needResetCursorPosition, handleOnKeyDown, onKeyDown]);
+  }, [type, nativeInputProps, tempValue, value, handleChange, handleFocus, handleBlur, needResetCursorPosition, handleOnKeyDown, onKeyDown, handleCompositionStart, handleCompositionEnd]);
   React.useEffect(function () {
     // 满足以下条件时需要校对光标位置
     if (needResetCursorPosition && inputElementRef.current) {

package/lib/esm/Input.js

@@ -55,7 +55,8 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
     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"]);
+    waitCompositionEnd = _a.waitCompositionEnd,
+    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", "waitCompositionEnd"]);
   // @TODO: 临时方案，后面迁移至 InputGroup
   var _useMemo = useMemo(function () {
       var shouldUnset = [false, false];
@@ -95,7 +96,8 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
       onBlur: onBlur,
       onKeyDown: onKeyDown,
       trimValueOnBlur: trimValueOnBlur,
-      type: type
+      type: type,
+      waitCompositionEnd: waitCompositionEnd
     }),
     tryChangeValue = _useInput.tryChangeValue,
     focused = _useInput.focused,

package/lib/esm/use-input.js

@@ -7,7 +7,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { useMemo, useCallback, useState, useEffect } from 'react';
+import { useState, useRef, useMemo, useCallback, useEffect } from 'react';
 import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
 import { useLatestCallback } from '@hi-ui/use-latest';
 import { setAttrStatus } from '@hi-ui/dom-utils';
@@ -39,11 +39,18 @@ var useInput = function useInput(_ref) {
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'text' : _ref$type,
     clearElementRef = _ref.clearElementRef,
-    inputElementRef = _ref.inputElementRef;
+    inputElementRef = _ref.inputElementRef,
+    waitCompositionEnd = _ref.waitCompositionEnd;
   // Object.is 避免 trimValueOnBlur 和 点击 clearIcon 触发 2 次相同的 onCHange
   var _useUncontrolledState = useUncontrolledState(defaultValue, valueProp, onChange, Object.is),
     value = _useUncontrolledState[0],
     tryChangeValue = _useUncontrolledState[1];
+  // 用于存储中文输入法下输入未完成时的值
+  var _useState = useState(''),
+    tempValue = _useState[0],
+    setTempValue = _useState[1];
+  // 是否正在输入中文
+  var isComposingRef = useRef(false);
   var _useInputCursor = useInputCursor({
       inputElementRef: inputElementRef,
       value: format(value, type)
@@ -63,6 +70,13 @@ var useInput = function useInput(_ref) {
     }
     evt.persist();
     var nextValue = evt.target.value;
+    // 如果正在输入中文中，则更新临时要显示的值，并返回
+    if (waitCompositionEnd && isComposingRef.current) {
+      setTempValue(nextValue);
+      return;
+    }
+    // 中文输入完成后才触发 onChange 并清空临时值
+    setTempValue('');
     var valueTrue = pure(nextValue, type);
     // 防溢出，保证 onChange 拿到的是值是最新的 formatted value
     var value = format(nextValue, type);
@@ -76,10 +90,20 @@ var useInput = function useInput(_ref) {
     });
     tryChangeValue(valueTrue, event);
     needResetCursorPosition && formatHandleChange(event);
-  }, [formatHandleChange, needResetCursorPosition, tryChangeValue, type]);
-  var _useState = useState(autoFocus),
-    focused = _useState[0],
-    setFocused = _useState[1];
+  }, [formatHandleChange, needResetCursorPosition, tryChangeValue, type, waitCompositionEnd]);
+  var handleCompositionStart = useCallback(function () {
+    if (!waitCompositionEnd) return;
+    isComposingRef.current = true;
+  }, [waitCompositionEnd]);
+  var handleCompositionEnd = useCallback(function (event) {
+    if (!waitCompositionEnd) return;
+    isComposingRef.current = false;
+    setTempValue('');
+    handleChange(event);
+  }, [handleChange, waitCompositionEnd]);
+  var _useState2 = useState(autoFocus),
+    focused = _useState2[0],
+    setFocused = _useState2[1];
   var handleFocus = useLatestCallback(function (evt) {
     setFocused(true);
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(evt);
@@ -114,14 +138,16 @@ var useInput = function useInput(_ref) {
   var getInputProps = useCallback(function () {
     var nativeType = EXTRA_TYPE.includes(type) ? undefined : type;
     return Object.assign(Object.assign({}, nativeInputProps), {
-      value: format(value, type),
+      value: tempValue || format(value, type),
       type: nativeType,
       onChange: handleChange,
       onFocus: handleFocus,
       onBlur: handleBlur,
-      onKeyDown: needResetCursorPosition ? callAllFuncs(handleOnKeyDown, onKeyDown) : onKeyDown
+      onKeyDown: needResetCursorPosition ? callAllFuncs(handleOnKeyDown, onKeyDown) : onKeyDown,
+      onCompositionStart: handleCompositionStart,
+      onCompositionEnd: handleCompositionEnd
     });
-  }, [type, nativeInputProps, value, handleChange, handleFocus, handleBlur, needResetCursorPosition, handleOnKeyDown, onKeyDown]);
+  }, [type, nativeInputProps, tempValue, value, handleChange, handleFocus, handleBlur, needResetCursorPosition, handleOnKeyDown, onKeyDown, handleCompositionStart, handleCompositionEnd]);
   useEffect(function () {
     // 满足以下条件时需要校对光标位置
     if (needResetCursorPosition && inputElementRef.current) {

package/lib/types/Input.d.ts

@@ -89,6 +89,10 @@ export interface InputProps extends HiBaseHTMLFieldProps<'input'> {
      * @private
      */
     containerRef?: React.Ref<HTMLDivElement>;
+    /**
+     * 是否等待文本段落组成完成
+     */
+    waitCompositionEnd?: boolean;
 }
 /**
  * 模拟伪装目标事件 target

package/lib/types/use-input.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare const useInput: ({ name, autoFocus, disabled, readOnly, maxLength, placeholder, defaultValue, value: valueProp, onChange, onFocus, onBlur, onKeyDown, trimValueOnBlur, type, clearElementRef, inputElementRef, }: UseInputProps) => {
+export declare const useInput: ({ name, autoFocus, disabled, readOnly, maxLength, placeholder, defaultValue, value: valueProp, onChange, onFocus, onBlur, onKeyDown, trimValueOnBlur, type, clearElementRef, inputElementRef, waitCompositionEnd, }: UseInputProps) => {
     focused: boolean;
     value: string;
     tryChangeValue: (stateOrFunction: React.SetStateAction<string>, ...args: any[]) => void;
@@ -10,6 +10,8 @@ export declare const useInput: ({ name, autoFocus, disabled, readOnly, maxLength
         onFocus: (evt: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
         onBlur: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
         onKeyDown: ((evt: React.KeyboardEvent<any>) => void) | ((...args: any) => void) | undefined;
+        onCompositionStart: () => void;
+        onCompositionEnd: (event: any) => void;
         name: string | undefined;
         disabled: boolean;
         readOnly: boolean;
@@ -84,5 +86,9 @@ export interface UseInputProps {
      * 输入框 ref
      */
     inputElementRef?: any;
+    /**
+     * 是否等待文本段落组成完成
+     */
+    waitCompositionEnd?: boolean;
 }
 export declare type useInputReturn = ReturnType<typeof useInput>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/input",
-  "version": "4.2.1",
+  "version": "4.3.0",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HiUI <mi-hiui@xiaomi.com>",