feat: input 支持 onWheel、onCompositionstart、onCompositionend 事件

Tencent · Feb 9, 2022 · b85ea42 · b85ea42
1 parent 52acbbe
commit b85ea42
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 16 deletions.
diff --git a/src/input/Input.tsx b/src/input/Input.tsx
@@ -8,10 +8,7 @@ import { StyledProps, TNode } from '../common';
 import InputGroup from './InputGroup';
 import useDefaultValue from '../_util/useDefaultValue';
 
-export interface InputProps extends TdInputProps, StyledProps {
-  onCompositionStart?: Function;
-  onCompositionEnd?: Function;
-}
+export interface InputProps extends TdInputProps, StyledProps {}
 
 export interface InputRefInterface extends React.RefObject<unknown> {
   currentElement: HTMLDivElement;
@@ -53,11 +50,16 @@ const Input = forwardRefWithStatics(
       onClear,
       onEnter,
       onKeydown,
+      onKeyup,
+      onKeypress,
       onFocus,
       onBlur,
       onPaste,
-      onCompositionStart,
-      onCompositionEnd,
+      onMouseenter,
+      onMouseleave,
+      onWheel,
+      onCompositionstart,
+      onCompositionend,
       autofocus,
       readonly,
       ...restProps
@@ -108,6 +110,8 @@ const Input = forwardRefWithStatics(
         autoFocus={autofocus}
         onChange={handleChange}
         onKeyDown={handleKeyDown}
+        onKeyUp={handleKeyUp}
+        onKeyPress={handleKeyPress}
         onCompositionStart={handleCompositionStart}
         onCompositionEnd={handleCompositionEnd}
         onFocus={handleFocus}
@@ -131,8 +135,9 @@ const Input = forwardRefWithStatics(
           [`${classPrefix}-input--suffix`]: suffixIconContent,
           [`${classPrefix}-input--focused`]: isFocused,
         })}
-        onMouseEnter={() => toggleIsHover(true)}
-        onMouseLeave={() => toggleIsHover(false)}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        onWheel={handleWheel}
       >
         {prefixIconContent}
         {renderInput}
@@ -160,12 +165,24 @@ const Input = forwardRefWithStatics(
       key === 'Enter' && onEnter?.(value, { e });
       onKeydown?.(value, { e });
     }
+    function handleKeyUp(e: React.KeyboardEvent<HTMLInputElement>) {
+      const {
+        currentTarget: { value },
+      } = e;
+      onKeyup?.(value, { e });
+    }
+    function handleKeyPress(e: React.KeyboardEvent<HTMLInputElement>) {
+      const {
+        currentTarget: { value },
+      } = e;
+      onKeypress?.(value, { e });
+    }
     function handleCompositionStart(e: React.CompositionEvent<HTMLInputElement>) {
       composingRef.current = true;
       const {
         currentTarget: { value },
       } = e;
-      onCompositionStart?.(value, { e });
+      onCompositionstart?.(value, { e });
     }
     function handleCompositionEnd(e: React.CompositionEvent<HTMLInputElement>) {
       const {
@@ -176,7 +193,7 @@ const Input = forwardRefWithStatics(
         handleChange(e);
       }
       setComposingValue('');
-      onCompositionEnd?.(value, { e });
+      onCompositionend?.(value, { e });
     }
 
     function handleFocus(e: React.FocusEvent<HTMLInputElement>) {
@@ -201,6 +218,20 @@ const Input = forwardRefWithStatics(
       onPaste?.({ e, pasteValue });
     }
 
+    function handleMouseEnter(e: React.MouseEvent<HTMLDivElement>) {
+      toggleIsHover(true);
+      onMouseenter?.({ e });
+    }
+
+    function handleMouseLeave(e: React.MouseEvent<HTMLDivElement>) {
+      toggleIsHover(false);
+      onMouseleave?.({ e });
+    }
+
+    function handleWheel(e: React.WheelEvent<HTMLDivElement>) {
+      onWheel?.({ e });
+    }
+
     useImperativeHandle(ref as InputRefInterface, () => ({
       currentElement: wrapperRef.current,
       inputElement: inputRef.current,

diff --git a/src/input/__tests__/input.test.tsx b/src/input/__tests__/input.test.tsx
@@ -85,8 +85,8 @@ describe('Input 组件测试', () => {
     const { queryByPlaceholderText } = render(
       <Input
         placeholder={InputPlaceholder}
-        onCompositionStart={onCompositionStartFn}
-        onCompositionEnd={onCompositionEndFn}
+        onCompositionstart={onCompositionStartFn}
+        onCompositionend={onCompositionEndFn}
       />,
     );
     const InputDom = queryByPlaceholderText(InputPlaceholder);

diff --git a/src/input/input.md b/src/input/input.md
@@ -26,11 +26,13 @@ suffix | TNode | - | 后置图标前的后置内容。TS 类型：`string | TNod
 suffixIcon | TElement | - | 组件后置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 tips | TNode | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 type | String | text | 输入框类型。可选项：text/number/url/tel/password/search/submit/hidden | N
-value | String / Number | - | 输入框的值。TS 类型：`InputValue`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/input/type.ts) | N
-defaultValue | String / Number | - | 输入框的值。非受控属性。TS 类型：`InputValue`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/input/type.ts) | N
+value | String / Number | - | 输入框的值。TS 类型：`InputValue` `type InputValue = string | number`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/input/type.ts) | N
+defaultValue | String / Number | - | 输入框的值。非受控属性。TS 类型：`InputValue` `type InputValue = string | number`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/input/type.ts) | N
 onBlur | Function |  | TS 类型：`(value: InputValue, context: { e: FocusEvent }) => void`<br/>失去焦点时触发 | N
 onChange | Function |  | TS 类型：`(value: InputValue, context?: { e?: InputEvent | MouseEvent }) => void`<br/>输入框值发生变化时触发 | N
 onClear | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>清空按钮点击时触发 | N
+onCompositionend | Function |  | TS 类型：`(value: InputValue, context: { e: CompositionEvent }) => void`<br/>中文输入结束时触发 | N
+onCompositionstart | Function |  | TS 类型：`(value: InputValue, context: { e: CompositionEvent }) => void`<br/>中文输入开始时触发 | N
 onEnter | Function |  | TS 类型：`(value: InputValue, context: { e: KeyboardEvent }) => void`<br/>回车键按下时触发 | N
 onFocus | Function |  | TS 类型：`(value: InputValue, context: { e: FocusEvent }) => void`<br/>获得焦点时触发 | N
 onKeydown | Function |  | TS 类型：`(value: InputValue, context: { e: KeyboardEvent }) => void`<br/>键盘按下时触发 | N
@@ -39,3 +41,4 @@ onKeyup | Function |  | TS 类型：`(value: InputValue, context: { e: KeyboardE
 onMouseenter | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>进入输入框时触发 | N
 onMouseleave | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>离开输入框时触发 | N
 onPaste | Function |  | TS 类型：`(context: { e: ClipboardEvent; pasteValue: string }) => void`<br/>粘贴事件，`pasteValue` 表示粘贴板的内容 | N
+onWheel | Function |  | TS 类型：`(context: { e: WheelEvent }) => void`<br/>输入框中滚动鼠标时触发 | N
diff --git a/src/input/type.ts b/src/input/type.ts
@@ -5,7 +5,7 @@
  * */
 
 import { TNode, TElement, SizeEnum } from '../common';
-import { MouseEvent, KeyboardEvent, FocusEvent, FormEvent, ClipboardEvent } from 'react';
+import { MouseEvent, KeyboardEvent, ClipboardEvent, FocusEvent, WheelEvent, FormEvent, CompositionEvent } from 'react';
 
 export interface TdInputProps {
   /**
@@ -116,6 +116,14 @@ export interface TdInputProps {
    * 清空按钮点击时触发
    */
   onClear?: (context: { e: MouseEvent<SVGElement> }) => void;
+  /**
+   * 中文输入结束时触发
+   */
+  onCompositionend?: (value: InputValue, context: { e: CompositionEvent<HTMLInputElement> }) => void;
+  /**
+   * 中文输入开始时触发
+   */
+  onCompositionstart?: (value: InputValue, context: { e: CompositionEvent<HTMLInputElement> }) => void;
   /**
    * 回车键按下时触发
    */
@@ -147,7 +155,11 @@ export interface TdInputProps {
   /**
    * 粘贴事件，`pasteValue` 表示粘贴板的内容
    */
-  onPaste?: (context: { e: ClipboardEvent; pasteValue: string }) => void;
+  onPaste?: (context: { e: ClipboardEvent<HTMLInputElement>; pasteValue: string }) => void;
+  /**
+   * 输入框中滚动鼠标时触发
+   */
+  onWheel?: (context: { e: WheelEvent<HTMLDivElement> }) => void;
 }
 
 export type InputValue = string | number;