From f2d5dad8e0156f00380c35fb90ae4709297b0367 Mon Sep 17 00:00:00 2001 From: Zack Chang <73225408+jrr997@users.noreply.github.com> Date: Sun, 25 Jun 2023 10:16:02 +0800 Subject: [PATCH] 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 --- .../date-picker/generatePicker/Components.ts | 5 ++ .../generatePicker/generateRangePicker.tsx | 4 +- .../generatePicker/generateSinglePicker.tsx | 4 +- .../date-picker/generatePicker/index.tsx | 60 +------------------ components/date-picker/util.ts | 56 +++++++++++++++++ 5 files changed, 66 insertions(+), 63 deletions(-) create mode 100644 components/date-picker/generatePicker/Components.ts diff --git a/components/date-picker/generatePicker/Components.ts b/components/date-picker/generatePicker/Components.ts new file mode 100644 index 0000000000..b5484ed3fd --- /dev/null +++ b/components/date-picker/generatePicker/Components.ts @@ -0,0 +1,5 @@ +import PickerButton from '../PickerButton'; + +const Components = { button: PickerButton }; + +export default Components; diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx index 7159b8adfd..c794e0777c 100644 --- a/components/date-picker/generatePicker/generateRangePicker.tsx +++ b/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(generateConfig: GenerateConfig) { diff --git a/components/date-picker/generatePicker/generateSinglePicker.tsx b/components/date-picker/generatePicker/generateSinglePicker.tsx index c6c085394c..d164f6e601 100644 --- a/components/date-picker/generatePicker/generateSinglePicker.tsx +++ b/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(generateConfig: GenerateConfig) { diff --git a/components/date-picker/generatePicker/index.tsx b/components/date-picker/generatePicker/index.tsx index 3ea013a1b4..2aeacc16b5 100644 --- a/components/date-picker/generatePicker/index.tsx +++ b/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(list: T | T[]): T[] { - if (!list) { - return []; - } - return Array.isArray(list) ? list : [list]; -} - -export function getTimeProps( - props: { format?: string; picker?: PickerMode } & Omit< - SharedTimeProps, - '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]; diff --git a/components/date-picker/util.ts b/components/date-picker/util.ts index 051ca32079..c0e0a20477 100644 --- a/components/date-picker/util.ts +++ b/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(list: T | T[]): T[] { + if (!list) { + return []; + } + return Array.isArray(list) ? list : [list]; +} + +export function getTimeProps( + props: { format?: string; picker?: PickerMode } & Omit< + SharedTimeProps, + '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, + }; +}