feat(Input): support format props (#533)

* feat(Input): support format props * test: update snapshots
Tencent · Nov 8, 2024 · b60cd75 · b60cd75
1 parent afc0184
commit b60cd75
Show file tree

Hide file tree

Showing 7 changed files with 1,166 additions and 13 deletions.
diff --git a/site/mobile/mobile.config.js b/site/mobile/mobile.config.js
@@ -28,7 +28,7 @@ export default {
     {
       title: 'Input 输入框',
       name: 'input',
-      component: () => import('tdesign-mobile-react/input/_example/index.jsx'),
+      component: () => import('tdesign-mobile-react/input/_example/index.tsx'),
     },
     {
       title: 'Grid 宫格',

diff --git a/src/input/Input.tsx b/src/input/Input.tsx
@@ -1,6 +1,7 @@
 import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import type { FocusEvent, TouchEvent, CompositionEvent, FormEvent } from 'react';
 import classNames from 'classnames';
+import isFunction from 'lodash/isFunction';
 import { CloseCircleFilledIcon, BrowseOffIcon, BrowseIcon } from 'tdesign-icons-react';
 import useDefault from '../_util/useDefault';
 import parseTNode from '../_util/parseTNode';
@@ -9,9 +10,10 @@ import { getCharacterLength } from '../_common/js/utils/helper';
 import useConfig from '../_util/useConfig';
 import useDefaultProps from '../hooks/useDefaultProps';
 import { TdInputProps } from './type';
-import withNativeProps, { NativeProps } from '../_util/withNativeProps';
+import { StyledProps } from '../common';
+import withNativeProps from '../_util/withNativeProps';
 
-export interface InputProps extends TdInputProps, NativeProps {
+export interface InputProps extends TdInputProps, StyledProps {
   required?: boolean;
   readonly?: boolean;
 }
@@ -30,6 +32,7 @@ const Input = forwardRef<InputRefProps, InputProps>((props, ref) => {
     clearable,
     clearTrigger,
     disabled,
+    format,
     label,
     layout,
     maxlength,
@@ -129,25 +132,31 @@ const Input = forwardRef<InputRefProps, InputProps>((props, ref) => {
     inputValueChangeHandle(e);
   };
 
-  const handleClear = (e: TouchEvent) => {
+  const handleClear = (e: TouchEvent<HTMLInputElement>) => {
     e.preventDefault();
     setInnerValue('');
     focus();
-    onClear?.({ e: e as TouchEvent<HTMLInputElement> });
+    onClear?.({ e });
   };
 
-  const handleFocus = (e: FocusEvent) => {
+  const handleFocus = (e: FocusEvent<HTMLInputElement>) => {
     focused.current = true;
-    onFocus?.(innerValue, { e: e as FocusEvent<HTMLInputElement> });
+    onFocus?.(innerValue, { e });
   };
 
-  const handleBlur = (e: FocusEvent) => {
+  const handleBlur = (e: FocusEvent<HTMLInputElement>) => {
     focused.current = false;
-    onBlur?.(innerValue, { e: e as FocusEvent<HTMLInputElement> });
+
+    // 失焦时处理 format
+    if (isFunction(format)) {
+      setInnerValue(format(innerValue));
+    }
+
+    onBlur?.(innerValue, { e });
   };
 
-  const handleCompositionend = (e: CompositionEvent) => {
-    inputValueChangeHandle(e as CompositionEvent<HTMLInputElement>);
+  const handleCompositionend = (e: CompositionEvent<HTMLInputElement>) => {
+    inputValueChangeHandle(e);
   };
 
   const handlePwdIconClick = () => {

diff --git a/src/input/_example/index.jsx → src/input/_example/index.tsx b/src/input/_example/index.jsx → src/input/_example/index.tsx
diff --git a/src/input/input.md b/src/input/input.md
@@ -17,7 +17,7 @@ clearTrigger | String | always | 清空图标触发方式，仅在输入框有
 clearable | Boolean | false | 是否可清空 | N
 disabled | Boolean | undefined | 是否禁用输入框 | N
 errorMessage | String | - | 已废弃。错误提示文本，值为空不显示（废弃属性，如果需要，请更为使用 status 和 tips） | N
-format | Function | - | 【开发中】指定输入框展示值的格式。TS 类型：`InputFormatType` `type InputFormatType = (value: InputValue) => string`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/input/type.ts) | N
+format | Function | - | 指定输入框展示值的格式。TS 类型：`InputFormatType` `type InputFormatType = (value: InputValue) => string`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/input/type.ts) | N
 label | TNode | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 layout | String | horizontal | 标题输入框布局方式。可选项：vertical/horizontal | N
 maxcharacter | Number | - | 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用 | N

diff --git a/src/input/type.ts b/src/input/type.ts
@@ -47,7 +47,7 @@ export interface TdInputProps {
    */
   disabled?: boolean;
   /**
-   * 【开发中】指定输入框展示值的格式
+   * 指定输入框展示值的格式
    */
   format?: InputFormatType;
   /**