refactor: solve circular reference of DatePicker (#42809)

* refactor: resolve circular reference of DataPicker

* Revert "Merge remote-tracking branch 'origin/feature' into fix/datePicker"

This reverts commit 852394c19834456d205c3f90feba2c1d2dc8aeb8, reversing
changes made to d661c7b009b955b1bc1354a15c04365dc7160359.

* Revert "Revert "Merge remote-tracking branch 'origin/feature' into fix/datePicker""

This reverts commit 1471235e679a4bfe4df6ef7ca4e64f5a1425f538.

* Update SiteThemeProvider.tsx

fix lint

* Update useMenu.tsx

fix lint

* Update component-token.tsx

fix lint

* Update index.ts

fix lint

* Update index.test.tsx

fix lint

* Update list.ts

fix lint

* Update index.ts

fix lint

* Update component-token.tsx

fix lint

* Update index.zh-CN.md

fix lint

* Update index.zh-CN.md

fix lint

* Update index.zh-CN.md

fix lint

* fix: update getTimeProps fn

components/date-picker/generatePicker/Components.ts

@@ -0,0 +1,5 @@
+import PickerButton from '../PickerButton';
+
+const Components = { button: PickerButton };
+
+export default Components;

components/date-picker/generatePicker/generateRangePicker.tsx

@@ -8,7 +8,6 @@ import type { GenerateConfig } from 'rc-picker/lib/generate/index';
 import * as React from 'react';
 import { forwardRef, useContext, useImperativeHandle } from 'react';
 import type { RangePickerProps } from '.';
-import { Components, getTimeProps } from '.';
 import { getMergedStatus, getStatusClassNames } from '../../_util/statusUtils';
 import warning from '../../_util/warning';
 import { ConfigContext } from '../../config-provider';
@@ -19,7 +18,8 @@ import { useLocale } from '../../locale';
 import { useCompactItemContext } from '../../space/Compact';
 import enUS from '../locale/en_US';
 import useStyle from '../style';
-import { getRangePlaceholder, transPlacement2DropdownAlign } from '../util';
+import { getRangePlaceholder, getTimeProps, transPlacement2DropdownAlign } from '../util';
+import Components from './Components';
 import type { CommonPickerMethods, PickerComponentClass } from './interface';
 
 export default function generateRangePicker<DateType>(generateConfig: GenerateConfig<DateType>) {

components/date-picker/generatePicker/generateSinglePicker.tsx

@@ -8,7 +8,6 @@ import type { PickerMode } from 'rc-picker/lib/interface';
 import * as React from 'react';
 import { forwardRef, useContext, useImperativeHandle } from 'react';
 import type { PickerProps, PickerTimeProps } from '.';
-import { Components, getTimeProps } from '.';
 import type { InputStatus } from '../../_util/statusUtils';
 import { getMergedStatus, getStatusClassNames } from '../../_util/statusUtils';
 import warning from '../../_util/warning';
@@ -20,7 +19,8 @@ import { useLocale } from '../../locale';
 import { useCompactItemContext } from '../../space/Compact';
 import enUS from '../locale/en_US';
 import useStyle from '../style';
-import { getPlaceholder, transPlacement2DropdownAlign } from '../util';
+import { getPlaceholder, getTimeProps, transPlacement2DropdownAlign } from '../util';
+import Components from './Components';
 import type { CommonPickerMethods, DatePickRef, PickerComponentClass } from './interface';
 
 export default function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {

components/date-picker/generatePicker/index.tsx

@@ -9,71 +9,13 @@ import type {
   RangePickerTimeProps as RCRangePickerTimeProps,
 } from 'rc-picker/lib/RangePicker';
 import type { GenerateConfig } from 'rc-picker/lib/generate/index';
-import type { PickerMode, Locale as RcPickerLocale } from 'rc-picker/lib/interface';
-import type { SharedTimeProps } from 'rc-picker/lib/panels/TimePanel';
+import type { Locale as RcPickerLocale } from 'rc-picker/lib/interface';
 import type { InputStatus } from '../../_util/statusUtils';
 import type { SizeType } from '../../config-provider/SizeContext';
 import type { TimePickerLocale } from '../../time-picker';
-import PickerButton from '../PickerButton';
 import generateRangePicker from './generateRangePicker';
 import generateSinglePicker from './generateSinglePicker';
 
-export const Components = { button: PickerButton };
-
-function toArray<T>(list: T | T[]): T[] {
-  if (!list) {
-    return [];
-  }
-  return Array.isArray(list) ? list : [list];
-}
-
-export function getTimeProps<DateType, DisabledTime>(
-  props: { format?: string; picker?: PickerMode } & Omit<
-    SharedTimeProps<DateType>,
-    'disabledTime'
-  > & {
-      disabledTime?: DisabledTime;
-    },
-) {
-  const { format, picker, showHour, showMinute, showSecond, use12Hours } = props;
-
-  const firstFormat = toArray(format)[0];
-  const showTimeObj = { ...props };
-
-  if (firstFormat && typeof firstFormat === 'string') {
-    if (!firstFormat.includes('s') && showSecond === undefined) {
-      showTimeObj.showSecond = false;
-    }
-    if (!firstFormat.includes('m') && showMinute === undefined) {
-      showTimeObj.showMinute = false;
-    }
-    if (
-      !firstFormat.includes('H') &&
-      !firstFormat.includes('h') &&
-      !firstFormat.includes('K') &&
-      !firstFormat.includes('k') &&
-      showHour === undefined
-    ) {
-      showTimeObj.showHour = false;
-    }
-    if ((firstFormat.includes('a') || firstFormat.includes('A')) && use12Hours === undefined) {
-      showTimeObj.use12Hours = true;
-    }
-  }
-
-  if (picker === 'time') {
-    return showTimeObj;
-  }
-
-  if (typeof firstFormat === 'function') {
-    // format of showTime should use default when format is custom format function
-    delete showTimeObj.format;
-  }
-
-  return {
-    showTime: showTimeObj,
-  };
-}
 const DataPickerPlacements = ['bottomLeft', 'bottomRight', 'topLeft', 'topRight'] as const;
 type DataPickerPlacement = (typeof DataPickerPlacements)[number];
 

components/date-picker/util.ts

@@ -1,5 +1,6 @@
 import type { AlignType } from '@rc-component/trigger';
 import type { PickerMode } from 'rc-picker/lib/interface';
+import type { SharedTimeProps } from 'rc-picker/lib/panels/TimePanel';
 import type { SelectCommonPlacement } from '../_util/motion';
 import type { DirectionType } from '../config-provider';
 import type { PickerLocale } from './generatePicker';
@@ -104,3 +105,58 @@ export function transPlacement2DropdownAlign(
     }
   }
 }
+
+function toArray<T>(list: T | T[]): T[] {
+  if (!list) {
+    return [];
+  }
+  return Array.isArray(list) ? list : [list];
+}
+
+export function getTimeProps<DateType, DisabledTime>(
+  props: { format?: string; picker?: PickerMode } & Omit<
+    SharedTimeProps<DateType>,
+    'disabledTime'
+  > & {
+      disabledTime?: DisabledTime;
+    },
+) {
+  const { format, picker, showHour, showMinute, showSecond, use12Hours } = props;
+
+  const firstFormat = toArray(format)[0];
+  const showTimeObj = { ...props };
+
+  if (firstFormat && typeof firstFormat === 'string') {
+    if (!firstFormat.includes('s') && showSecond === undefined) {
+      showTimeObj.showSecond = false;
+    }
+    if (!firstFormat.includes('m') && showMinute === undefined) {
+      showTimeObj.showMinute = false;
+    }
+    if (
+      !firstFormat.includes('H') &&
+      !firstFormat.includes('h') &&
+      !firstFormat.includes('K') &&
+      !firstFormat.includes('k') &&
+      showHour === undefined
+    ) {
+      showTimeObj.showHour = false;
+    }
+    if ((firstFormat.includes('a') || firstFormat.includes('A')) && use12Hours === undefined) {
+      showTimeObj.use12Hours = true;
+    }
+  }
+
+  if (picker === 'time') {
+    return showTimeObj;
+  }
+
+  if (typeof firstFormat === 'function') {
+    // format of showTime should use default when format is custom format function
+    delete showTimeObj.format;
+  }
+
+  return {
+    showTime: showTimeObj,
+  };
+}