feat(TimePicker): add Icon API

packages/products/tdesign-react/packages/components/time-picker/defaultProps.ts

@@ -2,7 +2,21 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { TdTimeRangePickerProps } from './type';
+import { TdTimePickerProps, TdTimeRangePickerProps } from './type';
+
+export const timePickerDefaultProps: TdTimePickerProps = {
+  allowInput: false,
+  borderless: false,
+  clearable: false,
+  disabled: undefined,
+  format: 'HH:mm:ss',
+  hideDisabledTime: true,
+  placeholder: undefined,
+  readonly: undefined,
+  size: 'medium',
+  status: 'default',
+  steps: [1, 1, 1],
+};
 
 export const timeRangePickerDefaultProps: TdTimeRangePickerProps = {
   allowInput: false,

packages/products/tdesign-react/packages/components/time-picker/time-picker.en-US.md

@@ -7,67 +7,69 @@
 name | type | default | description | required
 -- | -- | -- | -- | --
 className | String | - | className of component | N
-style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript: `React.CSSProperties` | N
 allowInput | Boolean | false | \- | N
 borderless | Boolean | false | \- | N
 clearable | Boolean | false | \- | N
-disableTime | Function | - | disable time config function。Typescript：`(h: number, m: number, s: number, ms: number) => Partial<{ hour: Array<number>, minute: Array<number>, second: Array<number>, millisecond: Array<number>  }>` | N
+disableTime | Function | - | disable time config function。Typescript: `(h: number, m: number, s: number, ms: number) => Partial<{ hour: Array<number>, minute: Array<number>, second: Array<number>, millisecond: Array<number>  }>` | N
 disabled | Boolean | undefined | \- | N
 format | String | HH:mm:ss | \- | N
 hideDisabledTime | Boolean | true | \- | N
-inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N
-label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+inputProps | Object | - | Typescript: `InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N
+label | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
 placeholder | String | undefined | \- | N
-popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N
-presets | Object | - | Typescript：`PresetTime` `interface PresetTime { [presetName: string]: TimePickerValue \| (() => TimePickerValue) }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N
+popupProps | Object | - | Typescript: `PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N
+prefixIcon | TElement | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+presets | Object | - | Typescript: `PresetTime` `interface PresetTime { [presetName: string]: TimePickerValue \| (() => TimePickerValue) }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N
 readonly | Boolean | undefined | Whether it is read only, the priority is greater than `allowInput` | N
-selectInputProps | Object | - | Typescript：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N
+selectInputProps | Object | - | Typescript: `SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N
 size | String | medium | options: small/medium/large | N
 status | String | default | options: default/success/warning/error | N
-steps | Array | [1, 1, 1] | Typescript：`Array<string \| number>` | N
-tips | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
-value | String | - | Typescript：`TimePickerValue` `type TimePickerValue = string`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N
-defaultValue | String | - | uncontrolled property。Typescript：`TimePickerValue` `type TimePickerValue = string`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N
-valueDisplay | TNode | - | `MouseEvent<SVGElement>`。Typescript：`string \| TNode<{ value: TimePickerValue }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
-onBlur | Function |  | Typescript：`(context: { value: TimePickerValue } & SelectInputBlurContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts)。<br/>`import { SelectInputBlurContext } from '@SelectInput'`<br/> | N
-onChange | Function |  | Typescript：`(value: TimePickerValue) => void`<br/> | N
-onClear | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/>Triggered when the clear button is clicked | N
-onClose | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
-onConfirm | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
-onFocus | Function |  | Typescript：`(context: { value: TimePickerValue; e: FocusEvent }) => void`<br/> | N
-onInput | Function |  | Typescript：`(context: { value: TimePickerValue; e: InputEvent }) => void`<br/> | N
-onOpen | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
-onPick | Function |  | Typescript：`(value: TimePickerValue, context: { e: MouseEvent }) => void`<br/> | N
+steps | Array | [1, 1, 1] | Typescript: `Array<string \| number>` | N
+suffixIcon | TElement | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+tips | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+value | String | - | Typescript: `TimePickerValue` `type TimePickerValue = string`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N
+defaultValue | String | - | uncontrolled property。Typescript: `TimePickerValue` `type TimePickerValue = string`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N
+valueDisplay | TNode | - | `MouseEvent<SVGElement>`。Typescript: `string \| TNode<{ value: TimePickerValue }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+onBlur | Function |  | Typescript: `(context: { value: TimePickerValue } & SelectInputBlurContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts)。<br/>`import { SelectInputBlurContext } from '@SelectInput'`<br/> | N
+onChange | Function |  | Typescript: `(value: TimePickerValue) => void`<br/> | N
+onClear | Function |  | Typescript: `(context: { e: MouseEvent }) => void`<br/>Triggered when the clear button is clicked | N
+onClose | Function |  | Typescript: `(context: { e: MouseEvent }) => void`<br/> | N
+onConfirm | Function |  | Typescript: `(context: { e: MouseEvent }) => void`<br/> | N
+onFocus | Function |  | Typescript: `(context: { value: TimePickerValue; e: FocusEvent }) => void`<br/> | N
+onInput | Function |  | Typescript: `(context: { value: TimePickerValue; e: InputEvent }) => void`<br/> | N
+onOpen | Function |  | Typescript: `(context: { e: MouseEvent }) => void`<br/> | N
+onPick | Function |  | Typescript: `(value: TimePickerValue, context: { e: MouseEvent }) => void`<br/> | N
 
 
 ### TimeRangePicker Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
 className | String | - | className of component | N
-style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript: `React.CSSProperties` | N
 allowInput | Boolean | false | \- | N
 autoSwap | Boolean | true | \- | N
 borderless | Boolean | false | \- | N
 clearable | Boolean | false | \- | N
-disableTime | Function | - | Typescript：`(h: number, m: number, s: number, ms: number, context: { partial: TimeRangePickerPartial }) =>Partial<{ hour: Array<number>, minute: Array<number>, second: Array<number> }>` `type TimeRangePickerPartial = 'start' \| 'end'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N
-disabled | Boolean / Array | undefined | Typescript：`boolean \| Array<boolean>` | N
+disableTime | Function | - | Typescript: `(h: number, m: number, s: number, ms: number, context: { partial: TimeRangePickerPartial }) =>Partial<{ hour: Array<number>, minute: Array<number>, second: Array<number> }>` `type TimeRangePickerPartial = 'start' \| 'end'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N
+disabled | Boolean / Array | undefined | Typescript: `boolean \| Array<boolean>` | N
 format | String | HH:mm:ss | \- | N
 hideDisabledTime | Boolean | true | \- | N
-label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
-placeholder | String / Array | undefined | Typescript：`string \| Array<string>` | N
-popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N
-presets | Object | - | Typescript：`PresetTimeRange` `interface PresetTimeRange { [presetRageName: string]: TimeRangeValue \| (() => TimeRangeValue)}`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N
-rangeInputProps | Object | - | Typescript：`RangeInputProps`，[RangeInput API Documents](./range-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N
+label | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+placeholder | String / Array | undefined | Typescript: `string \| Array<string>` | N
+popupProps | Object | - | Typescript: `PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N
+presets | Object | - | Typescript: `PresetTimeRange` `interface PresetTimeRange { [presetRageName: string]: TimeRangeValue \| (() => TimeRangeValue)}`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N
+rangeInputProps | Object | - | Typescript: `RangeInputProps`，[RangeInput API Documents](./range-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N
 readonly | Boolean | undefined | Whether it is read only, the priority is greater than `allowInput` | N
 size | String | medium | options: small/medium/large | N
 status | String | default | options: default/success/warning/error | N
-steps | Array | [1, 1, 1] | Typescript：`Array<string \| number>` | N
-tips | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
-value | Array | - | Typescript：`TimeRangeValue` `type TimeRangeValue = Array<string>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N
-defaultValue | Array | - | uncontrolled property。Typescript：`TimeRangeValue` `type TimeRangeValue = Array<string>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N
-onBlur | Function |  | Typescript：`(context: { value: TimeRangeValue; e?: FocusEvent; position?: TimeRangePickerPartial })  => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts)。<br/>`type TimeRangePickerPartial = 'start' \| 'end'`<br/> | N
-onChange | Function |  | Typescript：`(value: TimeRangeValue) => void`<br/> | N
-onFocus | Function |  | Typescript：`(context?: { value: TimeRangeValue; e?: FocusEvent; position?: TimeRangePickerPartial })  => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts)。<br/>`type TimeRangePickerPartial = 'start' \| 'end'`<br/> | N
-onInput | Function |  | Typescript：`(context: { value: TimeRangeValue; e?: InputEvent; position?: TimeRangePickerPartial  })  => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts)。<br/>`type TimeRangePickerPartial = 'start' \| 'end'`<br/> | N
-onPick | Function |  | Typescript：`(value: TimeRangeValue, context: { e: MouseEvent, position?: TimeRangePickerPartial }) => void`<br/> | N
+steps | Array | [1, 1, 1] | Typescript: `Array<string \| number>` | N
+tips | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+value | Array | - | Typescript: `TimeRangeValue` `type TimeRangeValue = Array<string>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N
+defaultValue | Array | - | uncontrolled property。Typescript: `TimeRangeValue` `type TimeRangeValue = Array<string>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N
+onBlur | Function |  | Typescript: `(context: { value: TimeRangeValue; e?: FocusEvent; position?: TimeRangePickerPartial })  => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts)。<br/>`type TimeRangePickerPartial = 'start' \| 'end'`<br/> | N
+onChange | Function |  | Typescript: `(value: TimeRangeValue) => void`<br/> | N
+onFocus | Function |  | Typescript: `(context?: { value: TimeRangeValue; e?: FocusEvent; position?: TimeRangePickerPartial })  => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts)。<br/>`type TimeRangePickerPartial = 'start' \| 'end'`<br/> | N
+onInput | Function |  | Typescript: `(context: { value: TimeRangeValue; e?: InputEvent; position?: TimeRangePickerPartial  })  => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts)。<br/>`type TimeRangePickerPartial = 'start' \| 'end'`<br/> | N
+onPick | Function |  | Typescript: `(value: TimeRangeValue, context: { e: MouseEvent, position?: TimeRangePickerPartial }) => void`<br/> | N

packages/products/tdesign-react/packages/components/time-picker/time-picker.md

@@ -19,12 +19,14 @@ inputProps | Object | - | 透传给输入框（Input）组件的参数。TS 类
 label | TNode | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
 placeholder | String | undefined | 占位符 | N
 popupProps | Object | - | 透传 Popup 组件全部属性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N
+prefixIcon | TElement | - | 用于自定义组件前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
 presets | Object | - | 预设快捷时间选择，示例：`{ '前一小时': '11:00:00' }`。TS 类型：`PresetTime` `interface PresetTime { [presetName: string]: TimePickerValue \| (() => TimePickerValue) }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N
 readonly | Boolean | undefined | 只读状态，优先级大于 `allowInput` | N
 selectInputProps | Object | - | 透传 SelectInput 筛选器输入框组件的全部属性。TS 类型：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N
 size | String | medium | 尺寸。可选项：small/medium/large | N
 status | String | default | 输入框状态。可选项：default/success/warning/error | N
 steps | Array | [1, 1, 1] | 时间间隔步数，数组排列 [小时, 分钟, 秒]，示例：[2, 1, 1] 或者 ['2', '1', '1']。TS 类型：`Array<string \| number>` | N
+suffixIcon | TElement | - | 用于自定义组件后置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
 tips | TNode | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
 value | String | - | 选中值。TS 类型：`TimePickerValue` `type TimePickerValue = string`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N
 defaultValue | String | - | 选中值。非受控属性。TS 类型：`TimePickerValue` `type TimePickerValue = string`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N

packages/products/tdesign-react/packages/components/time-picker/type.ts

@@ -9,8 +9,8 @@ import { PopupProps } from '../popup';
 import { SelectInputProps } from '../select-input';
 import { SelectInputBlurContext } from '../select-input';
 import { RangeInputProps } from '../range-input';
-import { TNode } from '../common';
-import { MouseEvent, FocusEvent, FormEvent } from 'react';
+import type { TNode, TElement } from '../common';
+import type { MouseEvent, FocusEvent, FormEvent } from 'react';
 
 export interface TdTimePickerProps {
   /**
@@ -67,6 +67,10 @@ export interface TdTimePickerProps {
    * 透传 Popup 组件全部属性
    */
   popupProps?: PopupProps;
+  /**
+   * 用于自定义组件前置图标
+   */
+  prefixIcon?: TElement;
   /**
    * 预设快捷时间选择，示例：`{ '前一小时': '11:00:00' }`
    */
@@ -94,6 +98,10 @@ export interface TdTimePickerProps {
    * @default [1, 1, 1]
    */
   steps?: Array<string | number>;
+  /**
+   * 用于自定义组件后置图标
+   */
+  suffixIcon?: TElement;
   /**
    * 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式
    */