refactor: New Picker interactive

components/calendar/__tests__/index.test.tsx

@@ -1,11 +1,14 @@
 import Dayjs from 'dayjs';
+
 import 'dayjs/locale/zh-cn';
+
+import React from 'react';
 import MockDate from 'mockdate';
 import { type PickerPanelProps } from 'rc-picker';
 import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs';
 import type { Locale } from 'rc-picker/lib/interface';
 import { resetWarned } from 'rc-util/lib/warning';
-import React from 'react';
+
 import Calendar from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
@@ -16,7 +19,7 @@ import Select from '../../select';
 import Header, { type CalendarHeaderProps } from '../Header';
 
 const ref: {
-  calendarProps?: PickerPanelProps<unknown>;
+  calendarProps?: PickerPanelProps<any>;
   calendarHeaderProps?: CalendarHeaderProps<unknown>;
 } = {};
 
@@ -34,7 +37,7 @@ jest.mock('rc-picker', () => {
   const PickerPanelComponent = RcPicker.PickerPanel;
   return {
     ...RcPicker,
-    PickerPanel: (props: PickerPanelProps<unknown>) => {
+    PickerPanel: (props: PickerPanelProps<any>) => {
       ref.calendarProps = props;
       return <PickerPanelComponent {...props} />;
     },
@@ -149,8 +152,8 @@ describe('Calendar', () => {
   it('getDateRange should returns a disabledDate function', () => {
     const validRange: [Dayjs.Dayjs, Dayjs.Dayjs] = [Dayjs('2018-02-02'), Dayjs('2018-05-18')];
     render(<Calendar validRange={validRange} defaultValue={Dayjs('2018-02-02')} />);
-    expect(ref.calendarProps?.disabledDate?.(Dayjs('2018-06-02'))).toBe(true);
-    expect(ref.calendarProps?.disabledDate?.(Dayjs('2018-04-02'))).toBe(false);
+    expect(ref.calendarProps?.disabledDate?.(Dayjs('2018-06-02'), {} as any)).toBe(true);
+    expect(ref.calendarProps?.disabledDate?.(Dayjs('2018-04-02'), {} as any)).toBe(false);
   });
 
   it('validRange should work with disabledDate function', () => {
@@ -162,11 +165,11 @@ describe('Calendar', () => {
       />,
     );
 
-    expect(ref.calendarProps?.disabledDate?.(Dayjs('2018-02-01'))).toBe(true);
-    expect(ref.calendarProps?.disabledDate?.(Dayjs('2018-02-02'))).toBe(false);
-    expect(ref.calendarProps?.disabledDate?.(Dayjs('2018-02-03'))).toBe(true);
-    expect(ref.calendarProps?.disabledDate?.(Dayjs('2018-02-04'))).toBe(false);
-    expect(ref.calendarProps?.disabledDate?.(Dayjs('2018-06-01'))).toBe(true);
+    expect(ref.calendarProps?.disabledDate?.(Dayjs('2018-02-01'), {} as any)).toBe(true);
+    expect(ref.calendarProps?.disabledDate?.(Dayjs('2018-02-02'), {} as any)).toBe(false);
+    expect(ref.calendarProps?.disabledDate?.(Dayjs('2018-02-03'), {} as any)).toBe(true);
+    expect(ref.calendarProps?.disabledDate?.(Dayjs('2018-02-04'), {} as any)).toBe(false);
+    expect(ref.calendarProps?.disabledDate?.(Dayjs('2018-06-01'), {} as any)).toBe(true);
   });
 
   it('Calendar MonthSelect should display correct label', () => {

components/calendar/generateCalendar.tsx

@@ -3,11 +3,6 @@ import classNames from 'classnames';
 import { PickerPanel as RCPickerPanel } from 'rc-picker';
 import type { GenerateConfig } from 'rc-picker/lib/generate';
 import type { CellRenderInfo } from 'rc-picker/lib/interface';
-import type {
-  PickerPanelBaseProps as RCPickerPanelBaseProps,
-  PickerPanelDateProps as RCPickerPanelDateProps,
-  PickerPanelTimeProps as RCPickerPanelTimeProps,
-} from 'rc-picker/lib/PickerPanel';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 
 import { devUseWarning } from '../_util/warning';
@@ -17,24 +12,6 @@ import CalendarHeader from './Header';
 import enUS from './locale/en_US';
 import useStyle from './style';
 
-type InjectDefaultProps<Props> = Omit<
-  Props,
-  'locale' | 'generateConfig' | 'prevIcon' | 'nextIcon' | 'superPrevIcon' | 'superNextIcon'
-> & {
-  locale?: typeof enUS;
-  size?: 'large' | 'default' | 'small';
-};
-
-// Picker Props
-export type PickerPanelBaseProps<DateType> = InjectDefaultProps<RCPickerPanelBaseProps<DateType>>;
-export type PickerPanelDateProps<DateType> = InjectDefaultProps<RCPickerPanelDateProps<DateType>>;
-export type PickerPanelTimeProps<DateType> = InjectDefaultProps<RCPickerPanelTimeProps<DateType>>;
-
-export type PickerProps<DateType> =
-  | PickerPanelBaseProps<DateType>
-  | PickerPanelDateProps<DateType>
-  | PickerPanelTimeProps<DateType>;
-
 export type CalendarMode = 'year' | 'month';
 export type HeaderRender<DateType> = (config: {
   value: DateType;
@@ -75,7 +52,7 @@ export interface CalendarProps<DateType> {
   onSelect?: (date: DateType, selectInfo: SelectInfo) => void;
 }
 
-function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
+function generateCalendar<DateType extends object>(generateConfig: GenerateConfig<DateType>) {
   function isSameYear(date1: DateType, date2: DateType) {
     return date1 && date2 && generateConfig.getYear(date1) === generateConfig.getYear(date2);
   }

components/date-picker/__tests__/DatePicker.test.tsx

@@ -35,6 +35,12 @@ jest.mock('@rc-component/trigger', () => {
   };
 });
 
+function getCell(text: string) {
+  const cells = Array.from(document.querySelectorAll('.ant-picker-cell'));
+
+  return cells.find((cell) => cell.textContent === text);
+}
+
 describe('DatePicker', () => {
   const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
 
@@ -96,8 +102,10 @@ describe('DatePicker', () => {
 
   it('disabled date', () => {
     const disabledDate = (current: any) => current && current < dayjs().endOf('day');
-    const wrapper = render(<DatePicker disabledDate={disabledDate} open />);
-    expect(Array.from(wrapper.container.children)).toMatchSnapshot();
+    render(<DatePicker disabledDate={disabledDate} open />);
+
+    expect(getCell('21')).toHaveClass('ant-picker-cell-disabled');
+    expect(getCell('23')).not.toHaveClass('ant-picker-cell-disabled');
   });
 
   it('placeholder', () => {
@@ -234,12 +242,7 @@ describe('DatePicker', () => {
 
   it('showTime={{ showHour: true }}', () => {
     const { container } = render(
-      <DatePicker
-        defaultValue={dayjs()}
-        showTime={{ showHour: true }}
-        format="YYYY-MM-DD"
-        open
-      />,
+      <DatePicker defaultValue={dayjs()} showTime={{ showHour: true }} format="YYYY-MM-DD" open />,
     );
     expect(container.querySelectorAll('.ant-picker-time-panel-column').length).toBe(1);
     expect(
@@ -249,16 +252,11 @@ describe('DatePicker', () => {
     ).toBe(24);
   });
 
-    it('showTime={{ }} (no true args)', () => {
+  it('showTime={{ }} (no true args)', () => {
     const { container } = render(
-      <DatePicker
-        defaultValue={dayjs()}
-        showTime={{ }}
-        format="YYYY-MM-DD"
-        open
-      />,
+      <DatePicker defaultValue={dayjs()} showTime={{}} format="YYYY-MM-DD" open />,
     );
-    expect(container.querySelectorAll('.ant-picker-time-panel-column').length).toBe(0);
+    expect(container.querySelectorAll('.ant-picker-time-panel-column')).toHaveLength(3);
   });
 
   it('showTime should work correctly when format is custom function', () => {
@@ -411,7 +409,7 @@ describe('DatePicker', () => {
     const { container } = render(
       <DatePicker defaultValue={dayjs()} format="kk:mm" showTime open />,
     );
-    expect(container.querySelectorAll('.ant-picker-time-panel-column').length).toBe(2);
+    expect(container.querySelectorAll('.ant-picker-time-panel-column')).toHaveLength(2);
     expect(
       container
         .querySelectorAll('.ant-picker-time-panel-column')?.[0]

components/date-picker/__tests__/RangePicker.test.tsx

@@ -1,18 +1,23 @@
-import dayjs from 'dayjs';
-import customParseFormat from 'dayjs/plugin/customParseFormat';
-import type { RangeValue } from 'rc-picker/lib/interface';
 import React, { useState } from 'react';
-import userEvent from '@testing-library/user-event';
 import { CloseCircleFilled } from '@ant-design/icons';
+import userEvent from '@testing-library/user-event';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+
 import DatePicker from '..';
-import focusTest from '../../../tests/shared/focusTest';
-import { render, resetMockDate, setMockDate, screen, waitFor } from '../../../tests/utils';
 import { resetWarned } from '../../_util/warning';
+import focusTest from '../../../tests/shared/focusTest';
+import { render, resetMockDate, screen, setMockDate, waitFor } from '../../../tests/utils';
 import enUS from '../locale/en_US';
-import { closeCircleByRole, expectCloseCircle, closePicker, openPicker, selectCell } from './utils';
+import { closeCircleByRole, closePicker, expectCloseCircle, openPicker, selectCell } from './utils';
 
 dayjs.extend(customParseFormat);
 
+type RangeValue<DateType extends object> = [
+  DateType | undefined | null,
+  DateType | undefined | null,
+];
+
 const { RangePicker } = DatePicker;
 
 describe('RangePicker', () => {
@@ -30,7 +35,7 @@ describe('RangePicker', () => {
   it('should not throw error when value is reset to `[]`', () => {
     const birthday = dayjs('2000-01-01', 'YYYY-MM-DD');
     const wrapper1 = render(<RangePicker value={[birthday, birthday]} open />);
-    const wrapper2 = render(<RangePicker value={[] as unknown as null} open />);
+    const wrapper2 = render(<RangePicker value={[] as unknown as RangeValue<any>} open />);
 
     expect(() => {
       openPicker(wrapper1);
@@ -59,7 +64,7 @@ describe('RangePicker', () => {
   it('the left selection is before the right selection', () => {
     let rangePickerValue: dayjs.Dayjs[] = [];
     const Test: React.FC = () => {
-      const [value, setValue] = useState<RangeValue<dayjs.Dayjs>>(null);
+      const [value, setValue] = useState<RangeValue<dayjs.Dayjs>>(null!);
       return (
         <RangePicker
           value={value}
@@ -85,42 +90,12 @@ describe('RangePicker', () => {
     expect(start.isBefore(end, 'date')).toBeTruthy();
   });
 
-  it('the left selection is after the right selection, no selection made', () => {
-    let rangePickerValue: dayjs.Dayjs[] = [];
-    const Test: React.FC = () => {
-      const [value, setValue] = useState<RangeValue<dayjs.Dayjs>>(null);
-      return (
-        <RangePicker
-          value={value}
-          mode={['month', 'month']}
-          onPanelChange={(v) => {
-            setValue(v);
-            rangePickerValue = v as dayjs.Dayjs[];
-          }}
-        />
-      );
-    };
-
-    const wrapper = render(<Test />);
-
-    openPicker(wrapper);
-    selectCell(wrapper, 'May');
-    openPicker(wrapper, 1);
-    selectCell(wrapper, 'Feb');
-    closePicker(wrapper, 1);
-
-    const [start, end] = rangePickerValue;
-
-    expect(start).not.toBeNull();
-    expect(end).toBeNull();
-  });
-
   // https://github.com/ant-design/ant-design/issues/13302
   describe('in "month" mode, when the left and right panels select the same month', () => {
     it('the cell status is correct', () => {
       let rangePickerValue: dayjs.Dayjs[] = [];
       const Test: React.FC = () => {
-        const [value, setValue] = useState<RangeValue<dayjs.Dayjs>>(null);
+        const [value, setValue] = useState<RangeValue<dayjs.Dayjs>>(null!);
         return (
           <RangePicker
             value={value}