feat: support label (#3276)

Tencent · Dec 10, 2024 · fdac7b5 · fdac7b5
1 parent f41678a
commit fdac7b5
Show file tree

Hide file tree

Showing 16 changed files with 70 additions and 1 deletion.
diff --git a/src/date-picker/DatePicker.tsx b/src/date-picker/DatePicker.tsx
@@ -36,8 +36,9 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((originalProps, r
     timePickerProps,
     presetsPlacement,
     needConfirm,
-    disableTime,
     multiple,
+    label,
+    disableTime,
     onPick,
   } = props;
 
@@ -308,6 +309,7 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((originalProps, r
         status={props.status}
         tips={props.tips}
         borderless={props.borderless}
+        label={label}
         popupProps={popupProps}
         inputProps={inputProps}
         popupVisible={popupVisible}

diff --git a/src/date-picker/__tests__/date-picker.test.tsx b/src/date-picker/__tests__/date-picker.test.tsx
@@ -184,6 +184,14 @@ describe('DatePicker', () => {
     expect(queryByText(tips)).toBeInTheDocument();
   });
 
+  test('label', async () => {
+    const label = 'test-label';
+    const { container } = render(<DatePicker label={label} />);
+    const prefix = container.querySelector('.t-input__prefix');
+    expect(prefix).toBeTruthy();
+    expect(prefix).toHaveTextContent(label);
+  });
+
   test('onBlur onFocus', async () => {
     const blurFn = vi.fn();
     const focusFn = vi.fn();

diff --git a/src/date-picker/__tests__/date-range-picker.test.tsx b/src/date-picker/__tests__/date-range-picker.test.tsx
@@ -154,6 +154,14 @@ describe('DateRangePicker', () => {
     expect(queryByText(tips)).toBeInTheDocument();
   });
 
+  it('label', async () => {
+    const label = 'test-label';
+    const { container } = render(<DateRangePicker label={label} />);
+    const prefix = container.querySelector('.t-input__prefix');
+    expect(prefix).toBeTruthy();
+    expect(prefix).toHaveTextContent(label);
+  });
+
   it('onBlur onFocus', async () => {
     const blurFn = vi.fn();
     const focusFn = vi.fn();

diff --git a/src/date-picker/date-picker.en-US.md b/src/date-picker/date-picker.en-US.md
@@ -19,6 +19,7 @@ enableTimePicker | Boolean | false | \- | N
 firstDayOfWeek | Number | 7 | options: 1/2/3/4/5/6/7 | N
 format | String | 'YYYY-MM-DD' | \- | N
 inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N
+label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 mode | String | date | options: year/quarter/month/week/date | N
 multiple | Boolean | false | support multiple date，but not support being use together with range-picker、enableTimePicker and allowInput。Typescript：`boolean` | N
 needConfirm | Boolean | true | whether a confirmation button needs to be clicked to complete the action in the date-time picker scenario, default is true | N
@@ -62,6 +63,7 @@ disabled | Boolean | - | \- | N
 enableTimePicker | Boolean | false | \- | N
 firstDayOfWeek | Number | - | options: 1/2/3/4/5/6/7 | N
 format | String | - | \- | N
+label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 mode | String | date | options: year/quarter/month/week/date | N
 needConfirm | Boolean | true | whether a confirmation button needs to be clicked to complete the action in the date-time range picker scenario, default is true | N
 panelPreselection | Boolean | true | \- | N

diff --git a/src/date-picker/date-picker.md b/src/date-picker/date-picker.md
@@ -19,6 +19,7 @@ enableTimePicker | Boolean | false | 是否显示时间选择 | N
 firstDayOfWeek | Number | 7 | 第一天从星期几开始。可选项：1/2/3/4/5/6/7 | N
 format | String | 'YYYY-MM-DD' | 仅用于格式化日期显示的格式，不影响日期值。注意和 `valueType` 的区别，`valueType`会直接决定日期值 `value` 的格式。全局配置默认为：'YYYY-MM-DD'，[详细文档](https://day.js.org/docs/en/display/format) | N
 inputProps | Object | - | 透传给输入框（Input）组件的参数。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N
+label | TNode | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 mode | String | date | 选择器模式。可选项：year/quarter/month/week/date | N
 multiple | Boolean | false | 支持多选日期，但不支持在range-picker中，或与enableTimePicker、allowInput 一起使用。TS 类型：`boolean` | N
 needConfirm | Boolean | true | 决定在日期时间选择器的场景下是否需要点击确认按钮才完成选择动作，默认为`true` | N
@@ -61,6 +62,7 @@ disabled | Boolean | - | 是否禁用组件 | N
 enableTimePicker | Boolean | false | 是否显示时间选择 | N
 firstDayOfWeek | Number | - | 第一天从星期几开始。可选项：1/2/3/4/5/6/7 | N
 format | String | - | 用于格式化日期，[详细文档](https://day.js.org/docs/en/display/format) | N
+label | TNode | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 mode | String | date | 选择器模式。可选项：year/quarter/month/week/date | N
 needConfirm | Boolean | true | 决定在日期时间区间选择器的场景下是否需要点击确认按钮才完成选择动作，默认为 `true` | N
 panelPreselection | Boolean | true | 在开始日期选中之前，面板是否显示预选状态，即是否高亮预选日期 | N

diff --git a/src/date-picker/hooks/useRange.tsx b/src/date-picker/hooks/useRange.tsx
@@ -60,6 +60,7 @@ export default function useRange(props: TdDateRangePickerProps) {
     placeholder: props.placeholder ?? globalDatePickerConfig.placeholder[props.mode],
     activeIndex: popupVisible ? activeIndex : undefined,
     suffixIcon: props.suffixIcon ?? <CalendarIcon />,
+    label: props.label,
     className: classNames({
       [`${name}__input--placeholder`]: isHoverCell,
     }),

diff --git a/src/date-picker/type.ts b/src/date-picker/type.ts
@@ -65,6 +65,10 @@ export interface TdDatePickerProps {
    * 透传给输入框（Input）组件的参数
    */
   inputProps?: InputProps;
+  /**
+   * 左侧文本
+   */
+  label?: TNode;
   /**
    * 选择器模式
    * @default date
@@ -222,6 +226,10 @@ export interface TdDateRangePickerProps {
    * @default ''
    */
   format?: string;
+  /**
+   * 左侧文本
+   */
+  label?: TNode;
   /**
    * 选择器模式
    * @default date
@@ -518,6 +526,7 @@ export interface PresetDate {
 }
 
 export type DateValue = string | number | Date;
+
 export type DateMultipleValue = Array<DateValue>;
 
 export type DatePickerValueType =

diff --git a/src/range-input/range-input.en-US.md b/src/range-input/range-input.en-US.md
@@ -57,6 +57,7 @@ autoWidth | Boolean | false | \- | N
 disabled | Boolean | - | \- | N
 inputValue | Array | - | Typescript：`RangeInputValue` | N
 defaultInputValue | Array | - | uncontrolled property。Typescript：`RangeInputValue` | N
+label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 panel | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/range-input/type.ts) | N
 popupVisible | Boolean | - | \- | N

diff --git a/src/range-input/range-input.md b/src/range-input/range-input.md
@@ -57,6 +57,7 @@ autoWidth | Boolean | false | 宽度随内容自适应 | N
 disabled | Boolean | - | 是否禁用范围输入框，值为数组表示可分别控制某一个输入框是否禁用 | N
 inputValue | Array | - | 输入框的值。TS 类型：`RangeInputValue` | N
 defaultInputValue | Array | - | 输入框的值。非受控属性。TS 类型：`RangeInputValue` | N
+label | TNode | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 panel | TNode | - | 下拉框内容，可完全自定义。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 popupProps | Object | - | 透传 Popup 浮层组件全部属性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/range-input/type.ts) | N
 popupVisible | Boolean | - | 是否显示下拉框 | N

diff --git a/src/range-input/type.ts b/src/range-input/type.ts
@@ -181,6 +181,10 @@ export interface TdRangeInputPopupProps {
    * 输入框的值，非受控属性
    */
   defaultInputValue?: RangeInputValue;
+  /**
+   * 左侧文本
+   */
+  label?: TNode;
   /**
    * 下拉框内容，可完全自定义
    */

diff --git a/src/time-picker/TimePicker.tsx b/src/time-picker/TimePicker.tsx
@@ -135,6 +135,7 @@ const TimePicker = forwardRefWithStatics(
           popupProps={{ overlayInnerStyle: { width: 'auto', padding: 0 }, ...props.popupProps }}
           tips={props.tips}
           status={props.status}
+          label={props.label}
           panel={
             <TimePickerPanel
               steps={steps}

diff --git a/src/time-picker/TimeRangePicker.tsx b/src/time-picker/TimeRangePicker.tsx
@@ -48,6 +48,7 @@ const TimeRangePicker: FC<TimeRangePickerProps> = (originalProps) => {
     style,
     className,
     presets,
+    label,
   } = props;
 
   const [value, onChange] = useControlled(props, 'value', props.onChange);
@@ -191,6 +192,7 @@ const TimeRangePicker: FC<TimeRangePickerProps> = (originalProps) => {
           onBlur: handleInputBlur,
           readonly: !allowInput,
           activeIndex: currentPanelIdx,
+          label,
           ...props.rangeInputProps,
         }}
         tips={props.tips}

diff --git a/src/time-picker/__tests__/time-picker.test.tsx b/src/time-picker/__tests__/time-picker.test.tsx
@@ -157,6 +157,22 @@ describe('Timepicker 组件测试', () => {
     expect(inputs.item(0).value).toBe(date);
   });
 
+  test('props.label for TimePicker  works fine', async () => {
+    const label = 'abc';
+    const { container } = render(<TimePicker label={label}></TimePicker>);
+    const prefix = container.querySelector('.t-input__prefix');
+    expect(prefix).toBeTruthy();
+    expect(prefix).toHaveTextContent(label);
+  });
+
+  test('props.label for TimeRangePicker  works fine', async () => {
+    const label = 'abc';
+    const { container } = render(<TimePicker.TimeRangePicker label={label}></TimePicker.TimeRangePicker>);
+    const prefix = container.querySelector('.t-input__prefix');
+    expect(prefix).toBeTruthy();
+    expect(prefix).toHaveTextContent(label);
+  });
+
   test('TimeRangePick presets test', async () => {
     const date = ['11:00:00', '12:00:00'];
     const defaultValue = ['00:00:01', '00:00:02'];

diff --git a/src/time-picker/time-picker.en-US.md b/src/time-picker/time-picker.en-US.md
@@ -16,6 +16,7 @@ disabled | Boolean | false | \- | 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/src/time-picker/type.ts) | N
+label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/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/src/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/src/time-picker/type.ts) | N
@@ -48,6 +49,7 @@ disableTime | Function | - | Typescript：`(h: number, m: number, s: number, con
 disabled | Boolean / Array | false | 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/src/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/src/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/src/time-picker/type.ts) | N

diff --git a/src/time-picker/time-picker.md b/src/time-picker/time-picker.md
@@ -16,6 +16,7 @@ disabled | Boolean | false | 是否禁用组件 | N
 format | String | HH:mm:ss | 用于格式化时间，[详细文档](https://day.js.org/docs/en/display/format) | N
 hideDisabledTime | Boolean | true | 是否隐藏禁用状态的时间项 | N
 inputProps | Object | - | 透传给输入框（Input）组件的参数。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N
+label | TNode | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/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/src/time-picker/type.ts) | N
 presets | Object | - | 预设快捷时间选择，示例：`{ '前一小时': '11:00:00' }`。TS 类型：`PresetTime` `interface PresetTime { [presetName: string]: TimePickerValue \| (() => TimePickerValue) }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N
@@ -48,6 +49,7 @@ disableTime | Function | - | 禁用时间项。TS 类型：`(h: number, m: numbe
 disabled | Boolean / Array | false | 是否禁用组件，值为数组表示可分别控制开始日期和结束日期是否禁用。TS 类型：`boolean \| Array<boolean>` | N
 format | String | HH:mm:ss | 用于格式化时间，[详细文档](https://day.js.org/docs/en/display/format) | N
 hideDisabledTime | Boolean | true | 是否隐藏禁用状态的时间项 | N
+label | TNode | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 placeholder | String / Array | undefined | 占位符，值为数组表示可分别为开始日期和结束日期设置占位符。TS 类型：`string \| Array<string>` | N
 popupProps | Object | - | 透传给 popup 组件的参数。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N
 presets | Object | - | 预设快捷时间范围选择，示例：{ '下午': ['13:00:00', '18:00:00'] }。TS 类型：`PresetTimeRange` `interface PresetTimeRange { [presetRageName: string]: TimeRangeValue \| (() => TimeRangeValue)}`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N

diff --git a/src/time-picker/type.ts b/src/time-picker/type.ts
@@ -54,6 +54,10 @@ export interface TdTimePickerProps {
    * 透传给输入框（Input）组件的参数
    */
   inputProps?: InputProps;
+  /**
+   * 左侧文本
+   */
+  label?: TNode;
   /**
    * 占位符
    */
@@ -170,6 +174,10 @@ export interface TdTimeRangePickerProps {
    * @default true
    */
   hideDisabledTime?: boolean;
+  /**
+   * 左侧文本
+   */
+  label?: TNode;
   /**
    * 占位符，值为数组表示可分别为开始日期和结束日期设置占位符
    */