type: code optimization (#49864)

* type: code optimization

* fix: fix
This commit is contained in:
lijianan 2024-07-15 09:21:54 +08:00 committed by GitHub
parent 7346f922e8
commit fe3378f644
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 49 additions and 43 deletions

View File

@ -54,24 +54,23 @@ export interface CalendarProps<DateType> {
onSelect?: (date: DateType, selectInfo: SelectInfo) => void; onSelect?: (date: DateType, selectInfo: SelectInfo) => void;
} }
function generateCalendar<DateType extends AnyObject>(generateConfig: GenerateConfig<DateType>) { const isSameYear = <T extends AnyObject>(date1: T, date2: T, config: GenerateConfig<T>) => {
function isSameYear(date1: DateType, date2: DateType) { const { getYear } = config;
return date1 && date2 && generateConfig.getYear(date1) === generateConfig.getYear(date2); return date1 && date2 && getYear(date1) === getYear(date2);
} };
function isSameMonth(date1: DateType, date2: DateType) { const isSameMonth = <T extends AnyObject>(date1: T, date2: T, config: GenerateConfig<T>) => {
return ( const { getMonth } = config;
isSameYear(date1, date2) && generateConfig.getMonth(date1) === generateConfig.getMonth(date2) return isSameYear(date1, date2, config) && getMonth(date1) === getMonth(date2);
); };
}
function isSameDate(date1: DateType, date2: DateType) { const isSameDate = <T extends AnyObject>(date1: T, date2: T, config: GenerateConfig<T>) => {
return ( const { getDate } = config;
isSameMonth(date1, date2) && generateConfig.getDate(date1) === generateConfig.getDate(date2) return isSameMonth(date1, date2, config) && getDate(date1) === getDate(date2);
); };
}
const Calendar = (props: CalendarProps<DateType>) => { const generateCalendar = <DateType extends AnyObject>(generateConfig: GenerateConfig<DateType>) => {
const Calendar: React.FC<Readonly<CalendarProps<DateType>>> = (props) => {
const { const {
prefixCls: customizePrefixCls, prefixCls: customizePrefixCls,
className, className,
@ -149,11 +148,11 @@ function generateCalendar<DateType extends AnyObject>(generateConfig: GenerateCo
const triggerChange = (date: DateType) => { const triggerChange = (date: DateType) => {
setMergedValue(date); setMergedValue(date);
if (!isSameDate(date, mergedValue)) { if (!isSameDate(date, mergedValue, generateConfig)) {
// Trigger when month panel switch month // Trigger when month panel switch month
if ( if (
(panelMode === 'date' && !isSameMonth(date, mergedValue)) || (panelMode === 'date' && !isSameMonth(date, mergedValue, generateConfig)) ||
(panelMode === 'month' && !isSameYear(date, mergedValue)) (panelMode === 'month' && !isSameYear(date, mergedValue, generateConfig))
) { ) {
triggerPanelChange(date, mergedMode); triggerPanelChange(date, mergedMode);
} }
@ -200,7 +199,7 @@ function generateCalendar<DateType extends AnyObject>(generateConfig: GenerateCo
return ( return (
<div <div
className={classNames(`${prefixCls}-cell-inner`, `${calendarPrefixCls}-date`, { className={classNames(`${prefixCls}-cell-inner`, `${calendarPrefixCls}-date`, {
[`${calendarPrefixCls}-date-today`]: isSameDate(today, date), [`${calendarPrefixCls}-date-today`]: isSameDate(today, date, generateConfig),
})} })}
> >
<div className={`${calendarPrefixCls}-date-value`}> <div className={`${calendarPrefixCls}-date-value`}>
@ -230,7 +229,7 @@ function generateCalendar<DateType extends AnyObject>(generateConfig: GenerateCo
return ( return (
<div <div
className={classNames(`${prefixCls}-cell-inner`, `${calendarPrefixCls}-date`, { className={classNames(`${prefixCls}-cell-inner`, `${calendarPrefixCls}-date`, {
[`${calendarPrefixCls}-date-today`]: isSameMonth(today, date), [`${calendarPrefixCls}-date-today`]: isSameMonth(today, date, generateConfig),
})} })}
> >
<div className={`${calendarPrefixCls}-date-value`}> <div className={`${calendarPrefixCls}-date-value`}>
@ -322,6 +321,6 @@ function generateCalendar<DateType extends AnyObject>(generateConfig: GenerateCo
} }
return Calendar; return Calendar;
} };
export default generateCalendar; export default generateCalendar;

View File

@ -3,6 +3,8 @@ import * as React from 'react';
import Button from '../button'; import Button from '../button';
import type { ButtonProps } from '../button'; import type { ButtonProps } from '../button';
export default function PickerButton(props: ButtonProps) { const PickerButton: React.FC<Readonly<ButtonProps>> = (props) => (
return <Button size="small" type="primary" {...props} />; <Button size="small" type="primary" {...props} />
} );
export default PickerButton;

View File

@ -27,18 +27,19 @@ import { getPlaceholder, transPlacement2DropdownAlign, useIcons } from '../util'
import type { GenericTimePickerProps, PickerProps, PickerPropsWithMultiple } from './interface'; import type { GenericTimePickerProps, PickerProps, PickerPropsWithMultiple } from './interface';
import useComponents from './useComponents'; import useComponents from './useComponents';
export default function generatePicker<DateType extends AnyObject>( const [WEEK, WEEKPICKER] = ['week', 'WeekPicker'] as const;
generateConfig: GenerateConfig<DateType>, const [MONTH, MONTHPICKER] = ['month', 'MonthPicker'] as const;
) { const [YEAR, YEARPICKER] = ['year', 'YearPicker'] as const;
const [QUARTER, QUARTERPICKER] = ['quarter', 'QuarterPicker'] as const;
const [TIME, TIMEPICKER] = ['time', 'TimePicker'] as const;
const generatePicker = <DateType extends AnyObject>(generateConfig: GenerateConfig<DateType>) => {
type DatePickerProps = PickerProps<DateType>; type DatePickerProps = PickerProps<DateType>;
type TimePickerProps = GenericTimePickerProps<DateType>; type TimePickerProps = GenericTimePickerProps<DateType>;
function getPicker<InnerPickerProps extends DatePickerProps>( const getPicker = <P extends DatePickerProps>(picker?: PickerMode, displayName?: string) => {
picker?: PickerMode,
displayName?: string,
) {
const consumerName = displayName === 'TimePicker' ? 'timePicker' : 'datePicker'; const consumerName = displayName === 'TimePicker' ? 'timePicker' : 'datePicker';
const Picker = forwardRef<PickerRef, InnerPickerProps>((props, ref) => { const Picker = forwardRef<PickerRef, P>((props, ref) => {
const { const {
prefixCls: customizePrefixCls, prefixCls: customizePrefixCls,
getPopupContainer: customizeGetPopupContainer, getPopupContainer: customizeGetPopupContainer,
@ -215,16 +216,18 @@ export default function generatePicker<DateType extends AnyObject>(
} }
return Picker as unknown as (<ValueType = DateType>( return Picker as unknown as (<ValueType = DateType>(
props: PickerPropsWithMultiple<DateType, InnerPickerProps, ValueType>, props: PickerPropsWithMultiple<DateType, P, ValueType>,
) => React.ReactElement) & { displayName?: string }; ) => React.ReactElement) & { displayName?: string };
} };
const DatePicker = getPicker<DatePickerProps>(); const DatePicker = getPicker<DatePickerProps>();
const WeekPicker = getPicker<Omit<DatePickerProps, 'picker'>>('week', 'WeekPicker'); const WeekPicker = getPicker<Omit<DatePickerProps, 'picker'>>(WEEK, WEEKPICKER);
const MonthPicker = getPicker<Omit<DatePickerProps, 'picker'>>('month', 'MonthPicker'); const MonthPicker = getPicker<Omit<DatePickerProps, 'picker'>>(MONTH, MONTHPICKER);
const YearPicker = getPicker<Omit<DatePickerProps, 'picker'>>('year', 'YearPicker'); const YearPicker = getPicker<Omit<DatePickerProps, 'picker'>>(YEAR, YEARPICKER);
const QuarterPicker = getPicker<Omit<DatePickerProps, 'picker'>>('quarter', 'QuarterPicker'); const QuarterPicker = getPicker<Omit<DatePickerProps, 'picker'>>(QUARTER, QUARTERPICKER);
const TimePicker = getPicker<Omit<TimePickerProps, 'picker'>>('time', 'TimePicker'); const TimePicker = getPicker<Omit<TimePickerProps, 'picker'>>(TIME, TIMEPICKER);
return { DatePicker, WeekPicker, MonthPicker, YearPicker, TimePicker, QuarterPicker }; return { DatePicker, WeekPicker, MonthPicker, YearPicker, TimePicker, QuarterPicker };
} };
export default generatePicker;

View File

@ -26,6 +26,7 @@ function generatePicker<DateType extends AnyObject>(generateConfig: GenerateConf
}; };
const MergedDatePicker = DatePicker as MergedDatePickerType; const MergedDatePicker = DatePicker as MergedDatePickerType;
MergedDatePicker.WeekPicker = WeekPicker; MergedDatePicker.WeekPicker = WeekPicker;
MergedDatePicker.MonthPicker = MonthPicker; MergedDatePicker.MonthPicker = MonthPicker;
MergedDatePicker.YearPicker = YearPicker; MergedDatePicker.YearPicker = YearPicker;

View File

@ -1,5 +1,6 @@
import * as React from 'react'; import * as React from 'react';
import type { Dayjs } from 'dayjs'; import type { Dayjs } from 'dayjs';
import type { PickerRef } from 'rc-picker';
import genPurePanel from '../_util/PurePanel'; import genPurePanel from '../_util/PurePanel';
import type { InputStatus } from '../_util/statusUtils'; import type { InputStatus } from '../_util/statusUtils';
@ -34,7 +35,7 @@ export interface TimeRangePickerProps extends Omit<RangePickerTimeProps<Dayjs>,
popupClassName?: string; popupClassName?: string;
} }
const RangePicker = React.forwardRef<any, TimeRangePickerProps>((props, ref) => ( const RangePicker = React.forwardRef<PickerRef, TimeRangePickerProps>((props, ref) => (
<InternalRangePicker {...props} picker="time" mode={undefined} ref={ref} /> <InternalRangePicker {...props} picker="time" mode={undefined} ref={ref} />
)); ));
@ -45,7 +46,7 @@ export interface TimePickerProps extends Omit<PickerTimeProps<Dayjs>, 'picker'>
rootClassName?: string; rootClassName?: string;
} }
const TimePicker = React.forwardRef<any, TimePickerProps>( const TimePicker = React.forwardRef<PickerRef, TimePickerProps>(
({ addon, renderExtraFooter, variant, bordered, ...restProps }, ref) => { ({ addon, renderExtraFooter, variant, bordered, ...restProps }, ref) => {
if (process.env.NODE_ENV !== 'production') { if (process.env.NODE_ENV !== 'production') {
const warning = devUseWarning('TimePicker'); const warning = devUseWarning('TimePicker');
@ -55,7 +56,7 @@ const TimePicker = React.forwardRef<any, TimePickerProps>(
const [mergedVariant] = useVariant('timePicker', variant, bordered); const [mergedVariant] = useVariant('timePicker', variant, bordered);
const internalRenderExtraFooter = React.useMemo(() => { const internalRenderExtraFooter = React.useMemo<TimePickerProps['renderExtraFooter']>(() => {
if (renderExtraFooter) { if (renderExtraFooter) {
return renderExtraFooter; return renderExtraFooter;
} }