fix: legacy onSelect of TimePicker (#47878)

* chore: update ts

* docs: update

components/date-picker/generatePicker/generateSinglePicker.tsx

@@ -22,14 +22,14 @@ import { NoCompactStyle, useCompactItemContext } from '../../space/Compact';
 import enUS from '../locale/en_US';
 import useStyle from '../style';
 import { getPlaceholder, transPlacement2DropdownAlign, useIcons } from '../util';
-import type { PickerProps, PickerPropsWithMultiple } from './interface';
+import type { GenericTimePickerProps, PickerProps, PickerPropsWithMultiple } from './interface';
 import useComponents from './useComponents';
 
 export default function generatePicker<DateType extends AnyObject>(
   generateConfig: GenerateConfig<DateType>,
 ) {
   type DatePickerProps = PickerProps<DateType>;
-  type TimePickerProps = Omit<PickerProps<DateType>, 'picker' | 'showTime'>;
+  type TimePickerProps = GenericTimePickerProps<DateType>;
 
   function getPicker<InnerPickerProps extends DatePickerProps>(
     picker?: PickerMode,
@@ -53,6 +53,7 @@ export default function generatePicker<DateType extends AnyObject>(
         disabled: customDisabled,
         status: customStatus,
         variant: customVariant,
+        onCalendarChange,
         ...restProps
       } = props;
 
@@ -83,6 +84,18 @@ export default function generatePicker<DateType extends AnyObject>(
 
       const rootPrefixCls = getPrefixCls();
 
+      // ==================== Legacy =====================
+      const { onSelect, multiple } = restProps as TimePickerProps;
+      const hasLegacyOnSelect = onSelect && picker === 'time' && !multiple;
+
+      const onInternalCalendarChange: typeof onCalendarChange = (date, dateStr, info) => {
+        onCalendarChange?.(date, dateStr, info);
+
+        if (hasLegacyOnSelect) {
+          onSelect(date as any);
+        }
+      };
+
       // =================== Warning =====================
       if (process.env.NODE_ENV !== 'production') {
         const warning = devUseWarning(displayName! || 'DatePicker');
@@ -96,6 +109,8 @@ export default function generatePicker<DateType extends AnyObject>(
         warning.deprecated(!dropdownClassName, 'dropdownClassName', 'popupClassName');
 
         warning.deprecated(!('bordered' in props), 'bordered', 'variant');
+
+        warning.deprecated(!hasLegacyOnSelect, 'onSelect', 'onCalendarChange');
       }
 
       // ===================== Icon =====================
@@ -141,6 +156,7 @@ export default function generatePicker<DateType extends AnyObject>(
             superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
             transitionName={`${rootPrefixCls}-slide-up`}
             picker={picker}
+            onCalendarChange={onInternalCalendarChange}
             {...additionalProps}
             {...restProps}
             locale={locale!.lang}
@@ -204,8 +220,8 @@ export default function generatePicker<DateType extends AnyObject>(
   const WeekPicker = getPicker<Omit<DatePickerProps, 'picker'>>('week', 'WeekPicker');
   const MonthPicker = getPicker<Omit<DatePickerProps, 'picker'>>('month', 'MonthPicker');
   const YearPicker = getPicker<Omit<DatePickerProps, 'picker'>>('year', 'YearPicker');
+  const QuarterPicker = getPicker<Omit<DatePickerProps, 'picker'>>('quarter', 'QuarterPicker');
   const TimePicker = getPicker<Omit<TimePickerProps, 'picker'>>('time', 'TimePicker');
-  const QuarterPicker = getPicker<Omit<TimePickerProps, 'picker'>>('quarter', 'QuarterPicker');
 
   return { DatePicker, WeekPicker, MonthPicker, YearPicker, TimePicker, QuarterPicker };
 }

components/date-picker/generatePicker/interface.ts

@@ -73,6 +73,14 @@ export type RangePickerProps<DateType extends AnyObject = any> = InjectDefaultPr
   RcRangePickerProps<DateType>
 >;
 
+export type GenericTimePickerProps<DateType extends AnyObject = any> = Omit<
+  PickerProps<DateType>,
+  'picker' | 'showTime'
+> & {
+  /** @deprecated Please use `onCalendarChange` instead */
+  onSelect?: (value: DateType) => void;
+};
+
 /**
  * Single Picker has the `multiple` prop,
  * which will make the `value` be `DateType[]` type.

components/time-picker/__tests__/legacy.test.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import dayjs, { type Dayjs } from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+
+import TimePicker from '..';
+import { resetWarned } from '../../_util/warning';
+import { fireEvent, render } from '../../../tests/utils';
+
+dayjs.extend(customParseFormat);
+
+describe('TimePicker.Legacy', () => {
+  const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+  afterEach(() => {
+    resetWarned();
+    errorSpy.mockReset();
+  });
+
+  afterAll(() => {
+    errorSpy.mockRestore();
+  });
+
+  it('compatible onSelect', () => {
+    const onSelect = jest.fn();
+    render(<TimePicker onSelect={onSelect} open />);
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: TimePicker] `onSelect` is deprecated. Please use `onCalendarChange` instead.',
+    );
+
+    fireEvent.click(document.querySelectorAll('.ant-picker-time-panel-cell-inner')[1]);
+    expect(onSelect).toHaveBeenCalled();
+
+    const passedDate: Dayjs = onSelect.mock.calls[0][0];
+    expect(passedDate.format('HH:mm:ss')).toBe('01:00:00');
+  });
+});

components/time-picker/index.en-US.md

@@ -79,9 +79,9 @@ dayjs.extend(customParseFormat)
 | use12Hours | Display as 12 hours format, with default format `h:mm:ss a` | boolean | false |  |
 | value | To set time | [dayjs](http://day.js.org/) | - |  |
 | variant | Variants of picker | `outlined` \| `borderless` \| `filled` | `outlined` | 5.13.0 |
+| onCalendarChange | Callback function, can be executed when the start time or the end time of the range is changing. `info` argument is added in 4.4.0 | function(dates: \[dayjs, dayjs], dateStrings: \[string, string], info: { range:`start`\|`end` }) | - |  |
 | onChange | A callback function, can be executed when the selected time is changing | function(time: dayjs, timeString: string): void | - |  |
 | onOpenChange | A callback function which will be called while panel opening/closing | (open: boolean) => void | - |  |
-| onSelect | A callback function, executes when a value is selected | function(time: dayjs): void | - |  |
 
 #### DisabledTime
 

components/time-picker/index.tsx

@@ -7,14 +7,14 @@ import type { AnyObject } from '../_util/type';
 import { devUseWarning } from '../_util/warning';
 import DatePicker from '../date-picker';
 import type {
-  PickerProps,
+  GenericTimePickerProps,
   PickerPropsWithMultiple,
   RangePickerProps,
 } from '../date-picker/generatePicker/interface';
 
 export type PickerTimeProps<DateType extends AnyObject> = PickerPropsWithMultiple<
   DateType,
-  Omit<PickerProps<DateType>, 'picker' | 'showTime'>
+  GenericTimePickerProps<DateType>
 >;
 
 export type RangePickerTimeProps<DateType extends AnyObject> = Omit<

components/time-picker/index.zh-CN.md

@@ -79,6 +79,7 @@ dayjs.extend(customParseFormat)
 | use12Hours | 使用 12 小时制，为 true 时 `format` 默认为 `h:mm:ss a` | boolean | false |  |
 | value | 当前时间 | [dayjs](http://day.js.org/) | - |  |
 | variant | 形态变体 | `outlined` \| `borderless` \| `filled` | `outlined` | 5.13.0 |
+| onCalendarChange | 待选日期发生变化的回调。`info` 参数自 4.4.0 添加 | function(dates: \[dayjs, dayjs], dateStrings: \[string, string], info: { range:`start`\|`end` }) | - |  |
 | onChange | 时间发生变化的回调 | function(time: dayjs, timeString: string): void | - |  |
 | onOpenChange | 面板打开/关闭时的回调 | (open: boolean) => void | - |  |