mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
parent
7346f922e8
commit
fe3378f644
@ -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;
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user