feat: enhancement input events (#49)

* feat: enhancement input events

* docs: add jsdoc

* fix: compose event not work

Author: json-q

packages/sqi-web/src/input/Input.tsx

@@ -1,5 +1,4 @@
 import React, { forwardRef, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import type { FocusEvent, ReactNode } from 'react';
 import clsx from 'clsx';
 import { useMergeProps, useMergeState } from '@sqi-ui/hooks';
 import { isFunction, isNumber, isObject, isString, isUndefined } from '@sqi-ui/utils';
@@ -58,14 +57,20 @@ const Input = forwardRef<InputRef, InputProps>((baseProps, ref) => {
     visibilityToggle,
     maxLength,
     tips,
+    composing,
+    onKeyDown,
     onFocus,
     onBlur,
     onChange,
+    onEnter,
+    onCompositionStart,
+    onCompositionEnd,
     ...restProps
   } = useMergeProps(baseProps, defaultProps, componentConfig?.Input);
 
   const wrapperRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
+  const composingRef = useRef(false);
 
   useImperativeHandle(ref, () => ({
     currentElement: wrapperRef.current,
@@ -75,21 +80,39 @@ const Input = forwardRef<InputRef, InputProps>((baseProps, ref) => {
     select: () => inputRef.current?.select(),
   }));
 
-  // =========== Input Focus ============
+  // =========== Input Events Handler ============
   const [isFocused, toggleIsFocused] = useState(false);
 
-  const internalFocus = (e: FocusEvent<HTMLInputElement, Element>) => {
+  const internalFocus = (e: React.FocusEvent<HTMLInputElement, Element>) => {
     if (disabled || readOnly) return;
     toggleIsFocused(true);
     onFocus?.(e);
   };
 
-  const internalBlur = (e: FocusEvent<HTMLInputElement, Element>) => {
+  const internalBlur = (e: React.FocusEvent<HTMLInputElement, Element>) => {
     if (disabled || readOnly) return;
     toggleIsFocused(false);
     onBlur?.(e);
   };
 
+  const internalKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    e.key === 'Enter' && onEnter?.(e);
+    onKeyDown?.(e);
+  };
+
+  const internalCompositionStart = (e: React.CompositionEvent<HTMLInputElement>) => {
+    if (composing) composingRef.current = true;
+    onCompositionStart?.(e);
+  };
+
+  const internalCompositionEnd = (e: React.CompositionEvent<HTMLInputElement>) => {
+    if (composingRef.current) {
+      composingRef.current = false;
+      handleChange(e);
+    }
+    onCompositionEnd?.(e);
+  };
+
   // =========== Input State ============
   const mergedMaxLength = isNumber(maxLength) ? maxLength : maxLength?.length;
   const mergedErrorOnly = isNumber(maxLength) ? false : maxLength?.errorOnly;
@@ -100,10 +123,10 @@ const Input = forwardRef<InputRef, InputProps>((baseProps, ref) => {
   const formatValue = formatValueToString(innerValue, mergedMaxLength, mergedErrorOnly);
   const isErrorLength = isNumber(mergedMaxLength) ? formatValue.length > mergedMaxLength : false;
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { value } = e.target;
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement> | React.CompositionEvent<HTMLInputElement>) => {
+    const value = e.currentTarget.value;
     setInnerValue(value);
-    onChange?.(value, e);
+    !composingRef.current && onChange?.(value, e);
   };
 
   const handleClickInputWrapper = () => {
@@ -177,7 +200,7 @@ const Input = forwardRef<InputRef, InputProps>((baseProps, ref) => {
   // =========== Input Suffix ============
   const isPassword = type === 'password';
 
-  const suffixBaseElement: ReactNode = useMemo(() => {
+  const suffixBaseElement: React.ReactNode = useMemo(() => {
     if (!isPassword) return suffix;
     if (isObject(visibilityToggle) && isFunction(visibilityToggle.renderIcon)) {
       return visibilityToggle.renderIcon(renderType === 'text');
@@ -191,7 +214,7 @@ const Input = forwardRef<InputRef, InputProps>((baseProps, ref) => {
 
   // fix: rerender 会重新渲染 `InputGroupWrapper`，导致无法正常聚焦失焦
   const InputGroupWrapper = useMemo(() => {
-    return function GroupWrapper({ children }: { children: ReactNode }) {
+    return function GroupWrapper({ children }: { children: React.ReactNode }) {
       const hasCoreWrapper = addonBefore || addonAfter;
 
       let content = children;
@@ -267,6 +290,9 @@ const Input = forwardRef<InputRef, InputProps>((baseProps, ref) => {
         onChange={handleChange}
         onFocus={internalFocus}
         onBlur={internalBlur}
+        onKeyDown={internalKeyDown}
+        onCompositionStart={internalCompositionStart}
+        onCompositionEnd={internalCompositionEnd}
       />
       {clearElement}
       {suffixElement}

packages/sqi-web/src/input/type.ts

@@ -1,4 +1,11 @@
-import type { CompositionEvent, FormEvent, InputHTMLAttributes, MouseEvent, ReactNode } from 'react';
+import type {
+  ChangeEvent,
+  CompositionEvent,
+  InputHTMLAttributes,
+  KeyboardEventHandler,
+  MouseEvent,
+  ReactNode,
+} from 'react';
 import type { LiteralUnion } from '../_util/type';
 import type { ConfigSize } from '../config-provider';
 
@@ -130,5 +137,16 @@ export interface InputProps
   /**
    * @description 输入内容变化时触发
    */
-  onChange?: (value: string, e: FormEvent<HTMLInputElement> | MouseEvent | CompositionEvent<HTMLDivElement>) => void;
+  onChange?: (
+    value: string,
+    e: ChangeEvent<HTMLInputElement> | MouseEvent | CompositionEvent<HTMLInputElement>,
+  ) => void;
+  /**
+   * @description 键盘回车事件
+   */
+  onEnter?: KeyboardEventHandler<HTMLInputElement>;
+  /**
+   * @description IME 输入中文的过程中是否使用合成事件避免不必要的触发 onChange
+   */
+  composing?: boolean;
 }