2019-12-11 23:32:19 +08:00
|
|
|
import classNames from 'classnames';
|
|
|
|
import { PickerPanel as RCPickerPanel } from 'rc-picker';
|
2022-05-07 14:31:54 +08:00
|
|
|
import type {
|
2019-12-11 23:32:19 +08:00
|
|
|
PickerPanelBaseProps as RCPickerPanelBaseProps,
|
|
|
|
PickerPanelDateProps as RCPickerPanelDateProps,
|
|
|
|
PickerPanelTimeProps as RCPickerPanelTimeProps,
|
|
|
|
} from 'rc-picker/lib/PickerPanel';
|
2023-05-17 21:18:51 +08:00
|
|
|
import type { GenerateConfig } from 'rc-picker/lib/generate';
|
|
|
|
import type { CellRenderInfo } from 'rc-picker/lib/interface';
|
2022-06-22 14:57:09 +08:00
|
|
|
import useMergedState from 'rc-util/lib/hooks/useMergedState';
|
2023-05-06 15:49:37 +08:00
|
|
|
import * as React from 'react';
|
2019-12-11 23:32:19 +08:00
|
|
|
import { ConfigContext } from '../config-provider';
|
2023-03-21 13:08:43 +08:00
|
|
|
import { useLocale } from '../locale';
|
2019-12-11 23:32:19 +08:00
|
|
|
import CalendarHeader from './Header';
|
2022-06-22 14:57:09 +08:00
|
|
|
import enUS from './locale/en_US';
|
2019-12-11 23:32:19 +08:00
|
|
|
|
2023-04-03 11:21:24 +08:00
|
|
|
import warning from '../_util/warning';
|
2023-05-17 21:18:51 +08:00
|
|
|
import useStyle from './style';
|
2019-12-11 23:32:19 +08:00
|
|
|
|
|
|
|
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;
|
|
|
|
type: CalendarMode;
|
|
|
|
onChange: (date: DateType) => void;
|
|
|
|
onTypeChange: (type: CalendarMode) => void;
|
|
|
|
}) => React.ReactNode;
|
|
|
|
|
2023-05-17 21:18:51 +08:00
|
|
|
export interface SelectInfo {
|
|
|
|
source: 'year' | 'month' | 'date' | 'customize';
|
|
|
|
}
|
|
|
|
|
2019-12-11 23:32:19 +08:00
|
|
|
export interface CalendarProps<DateType> {
|
|
|
|
prefixCls?: string;
|
|
|
|
className?: string;
|
2023-01-20 11:03:50 +08:00
|
|
|
rootClassName?: string;
|
2019-12-11 23:32:19 +08:00
|
|
|
style?: React.CSSProperties;
|
|
|
|
locale?: typeof enUS;
|
|
|
|
validRange?: [DateType, DateType];
|
|
|
|
disabledDate?: (date: DateType) => boolean;
|
2023-04-03 11:21:24 +08:00
|
|
|
/** @deprecated Please use fullCellRender instead. */
|
2019-12-11 23:32:19 +08:00
|
|
|
dateFullCellRender?: (date: DateType) => React.ReactNode;
|
2023-04-03 11:21:24 +08:00
|
|
|
/** @deprecated Please use cellRender instead. */
|
2019-12-11 23:32:19 +08:00
|
|
|
dateCellRender?: (date: DateType) => React.ReactNode;
|
2023-04-03 11:21:24 +08:00
|
|
|
/** @deprecated Please use fullCellRender instead. */
|
2019-12-11 23:32:19 +08:00
|
|
|
monthFullCellRender?: (date: DateType) => React.ReactNode;
|
2023-04-03 11:21:24 +08:00
|
|
|
/** @deprecated Please use cellRender instead. */
|
2019-12-11 23:32:19 +08:00
|
|
|
monthCellRender?: (date: DateType) => React.ReactNode;
|
2023-04-03 11:21:24 +08:00
|
|
|
cellRender?: (date: DateType, info: CellRenderInfo<DateType>) => React.ReactNode;
|
|
|
|
fullCellRender?: (date: DateType, info: CellRenderInfo<DateType>) => React.ReactNode;
|
2019-12-11 23:32:19 +08:00
|
|
|
headerRender?: HeaderRender<DateType>;
|
|
|
|
value?: DateType;
|
|
|
|
defaultValue?: DateType;
|
|
|
|
mode?: CalendarMode;
|
|
|
|
fullscreen?: boolean;
|
|
|
|
onChange?: (date: DateType) => void;
|
|
|
|
onPanelChange?: (date: DateType, mode: CalendarMode) => void;
|
2023-05-17 21:18:51 +08:00
|
|
|
onSelect?: (date: DateType, selectInfo: SelectInfo) => void;
|
2019-12-11 23:32:19 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
|
2020-06-02 21:26:52 +08:00
|
|
|
function isSameYear(date1: DateType, date2: DateType) {
|
|
|
|
return date1 && date2 && generateConfig.getYear(date1) === generateConfig.getYear(date2);
|
|
|
|
}
|
|
|
|
|
2019-12-11 23:32:19 +08:00
|
|
|
function isSameMonth(date1: DateType, date2: DateType) {
|
|
|
|
return (
|
2020-06-02 21:26:52 +08:00
|
|
|
isSameYear(date1, date2) && generateConfig.getMonth(date1) === generateConfig.getMonth(date2)
|
2019-12-11 23:32:19 +08:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
function isSameDate(date1: DateType, date2: DateType) {
|
|
|
|
return (
|
|
|
|
isSameMonth(date1, date2) && generateConfig.getDate(date1) === generateConfig.getDate(date2)
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
const Calendar = (props: CalendarProps<DateType>) => {
|
|
|
|
const {
|
|
|
|
prefixCls: customizePrefixCls,
|
|
|
|
className,
|
2023-01-20 11:03:50 +08:00
|
|
|
rootClassName,
|
2020-04-09 15:44:22 +08:00
|
|
|
style,
|
2019-12-11 23:32:19 +08:00
|
|
|
dateFullCellRender,
|
|
|
|
dateCellRender,
|
|
|
|
monthFullCellRender,
|
|
|
|
monthCellRender,
|
2023-04-03 11:21:24 +08:00
|
|
|
cellRender,
|
|
|
|
fullCellRender,
|
2019-12-11 23:32:19 +08:00
|
|
|
headerRender,
|
|
|
|
value,
|
|
|
|
defaultValue,
|
|
|
|
disabledDate,
|
|
|
|
mode,
|
|
|
|
validRange,
|
|
|
|
fullscreen = true,
|
|
|
|
onChange,
|
|
|
|
onPanelChange,
|
|
|
|
onSelect,
|
|
|
|
} = props;
|
2023-07-06 09:38:21 +08:00
|
|
|
const { getPrefixCls, direction, calendar } = React.useContext(ConfigContext);
|
2019-12-11 23:32:19 +08:00
|
|
|
const prefixCls = getPrefixCls('picker', customizePrefixCls);
|
|
|
|
const calendarPrefixCls = `${prefixCls}-calendar`;
|
2022-05-11 20:07:40 +08:00
|
|
|
|
|
|
|
const [wrapSSR, hashId] = useStyle(prefixCls);
|
|
|
|
|
2019-12-11 23:32:19 +08:00
|
|
|
const today = generateConfig.getNow();
|
|
|
|
|
2023-04-03 11:21:24 +08:00
|
|
|
// ====================== Warning =======================
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
|
|
warning(
|
|
|
|
!dateFullCellRender,
|
|
|
|
'Calendar',
|
|
|
|
'`dateFullCellRender` is deprecated. Please use `fullCellRender` instead.',
|
|
|
|
);
|
|
|
|
warning(
|
|
|
|
!dateCellRender,
|
|
|
|
'Calendar',
|
|
|
|
'`dateCellRender` is deprecated. Please use `cellRender` instead.',
|
|
|
|
);
|
|
|
|
warning(
|
|
|
|
!monthFullCellRender,
|
|
|
|
'Calendar',
|
|
|
|
'`monthFullCellRender` is deprecated. Please use `fullCellRender` instead.',
|
|
|
|
);
|
|
|
|
warning(
|
|
|
|
!monthCellRender,
|
|
|
|
'Calendar',
|
|
|
|
'`monthCellRender` is deprecated. Please use `cellRender` instead.',
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2019-12-11 23:32:19 +08:00
|
|
|
// ====================== State =======================
|
|
|
|
|
|
|
|
// Value
|
2020-06-02 21:26:52 +08:00
|
|
|
const [mergedValue, setMergedValue] = useMergedState(() => value || generateConfig.getNow(), {
|
|
|
|
defaultValue,
|
|
|
|
value,
|
|
|
|
});
|
2019-12-11 23:32:19 +08:00
|
|
|
|
|
|
|
// Mode
|
2020-06-02 21:26:52 +08:00
|
|
|
const [mergedMode, setMergedMode] = useMergedState('month', {
|
|
|
|
value: mode,
|
|
|
|
});
|
2019-12-11 23:32:19 +08:00
|
|
|
const panelMode = React.useMemo<'month' | 'date'>(
|
|
|
|
() => (mergedMode === 'year' ? 'month' : 'date'),
|
|
|
|
[mergedMode],
|
|
|
|
);
|
|
|
|
|
|
|
|
// Disabled Date
|
2020-07-21 16:29:27 +08:00
|
|
|
const mergedDisabledDate = React.useCallback(
|
|
|
|
(date: DateType) => {
|
|
|
|
const notInRange = validRange
|
|
|
|
? generateConfig.isAfter(validRange[0], date) ||
|
2019-12-11 23:32:19 +08:00
|
|
|
generateConfig.isAfter(date, validRange[1])
|
2020-07-21 16:29:27 +08:00
|
|
|
: false;
|
|
|
|
return notInRange || !!disabledDate?.(date);
|
|
|
|
},
|
|
|
|
[disabledDate, validRange],
|
|
|
|
);
|
2019-12-11 23:32:19 +08:00
|
|
|
|
|
|
|
// ====================== Events ======================
|
|
|
|
const triggerPanelChange = (date: DateType, newMode: CalendarMode) => {
|
2021-02-19 18:26:53 +08:00
|
|
|
onPanelChange?.(date, newMode);
|
2019-12-11 23:32:19 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
const triggerChange = (date: DateType) => {
|
2020-06-02 21:26:52 +08:00
|
|
|
setMergedValue(date);
|
2019-12-11 23:32:19 +08:00
|
|
|
|
|
|
|
if (!isSameDate(date, mergedValue)) {
|
2020-06-02 21:26:52 +08:00
|
|
|
// Trigger when month panel switch month
|
|
|
|
if (
|
|
|
|
(panelMode === 'date' && !isSameMonth(date, mergedValue)) ||
|
|
|
|
(panelMode === 'month' && !isSameYear(date, mergedValue))
|
|
|
|
) {
|
|
|
|
triggerPanelChange(date, mergedMode);
|
|
|
|
}
|
2019-12-11 23:32:19 +08:00
|
|
|
|
2021-02-19 18:26:53 +08:00
|
|
|
onChange?.(date);
|
2019-12-11 23:32:19 +08:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
const triggerModeChange = (newMode: CalendarMode) => {
|
2020-06-02 21:26:52 +08:00
|
|
|
setMergedMode(newMode);
|
2019-12-11 23:32:19 +08:00
|
|
|
triggerPanelChange(mergedValue, newMode);
|
|
|
|
};
|
|
|
|
|
2023-05-17 21:18:51 +08:00
|
|
|
const onInternalSelect = (date: DateType, source: SelectInfo['source']) => {
|
2019-12-11 23:32:19 +08:00
|
|
|
triggerChange(date);
|
|
|
|
|
2023-05-17 21:18:51 +08:00
|
|
|
onSelect?.(date, { source });
|
2019-12-11 23:32:19 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
// ====================== Locale ======================
|
|
|
|
const getDefaultLocale = () => {
|
|
|
|
const { locale } = props;
|
|
|
|
const result = {
|
|
|
|
...enUS,
|
|
|
|
...locale,
|
|
|
|
};
|
|
|
|
result.lang = {
|
|
|
|
...result.lang,
|
2022-10-01 22:17:14 +08:00
|
|
|
...(locale || {}).lang,
|
2019-12-11 23:32:19 +08:00
|
|
|
};
|
|
|
|
return result;
|
|
|
|
};
|
|
|
|
|
|
|
|
// ====================== Render ======================
|
|
|
|
const dateRender = React.useCallback(
|
2023-04-03 11:21:24 +08:00
|
|
|
(date: DateType, info: CellRenderInfo<DateType>): React.ReactNode => {
|
|
|
|
if (fullCellRender) {
|
|
|
|
return fullCellRender(date, info);
|
|
|
|
}
|
2019-12-11 23:32:19 +08:00
|
|
|
if (dateFullCellRender) {
|
|
|
|
return dateFullCellRender(date);
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div
|
|
|
|
className={classNames(`${prefixCls}-cell-inner`, `${calendarPrefixCls}-date`, {
|
|
|
|
[`${calendarPrefixCls}-date-today`]: isSameDate(today, date),
|
|
|
|
})}
|
|
|
|
>
|
|
|
|
<div className={`${calendarPrefixCls}-date-value`}>
|
2022-11-28 00:20:50 +08:00
|
|
|
{String(generateConfig.getDate(date)).padStart(2, '0')}
|
2019-12-11 23:32:19 +08:00
|
|
|
</div>
|
|
|
|
<div className={`${calendarPrefixCls}-date-content`}>
|
2023-04-03 11:21:24 +08:00
|
|
|
{cellRender ? cellRender(date, info) : dateCellRender && dateCellRender(date)}
|
2019-12-11 23:32:19 +08:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
},
|
2023-04-03 11:21:24 +08:00
|
|
|
[dateFullCellRender, dateCellRender, cellRender, fullCellRender],
|
2019-12-11 23:32:19 +08:00
|
|
|
);
|
|
|
|
|
|
|
|
const monthRender = React.useCallback(
|
2023-04-03 11:21:24 +08:00
|
|
|
(date: DateType, info: CellRenderInfo<DateType>): React.ReactNode => {
|
|
|
|
if (fullCellRender) {
|
|
|
|
return fullCellRender(date, info);
|
|
|
|
}
|
2019-12-11 23:32:19 +08:00
|
|
|
if (monthFullCellRender) {
|
|
|
|
return monthFullCellRender(date);
|
|
|
|
}
|
|
|
|
|
2023-04-03 11:21:24 +08:00
|
|
|
const months =
|
|
|
|
info.locale!.shortMonths || generateConfig.locale.getShortMonths!(info.locale!.locale);
|
2019-12-11 23:32:19 +08:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div
|
|
|
|
className={classNames(`${prefixCls}-cell-inner`, `${calendarPrefixCls}-date`, {
|
|
|
|
[`${calendarPrefixCls}-date-today`]: isSameMonth(today, date),
|
|
|
|
})}
|
|
|
|
>
|
|
|
|
<div className={`${calendarPrefixCls}-date-value`}>
|
|
|
|
{months[generateConfig.getMonth(date)]}
|
|
|
|
</div>
|
|
|
|
<div className={`${calendarPrefixCls}-date-content`}>
|
2023-04-03 11:21:24 +08:00
|
|
|
{cellRender ? cellRender(date, info) : monthCellRender && monthCellRender(date)}
|
2019-12-11 23:32:19 +08:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
},
|
2023-04-03 11:21:24 +08:00
|
|
|
[monthFullCellRender, monthCellRender, cellRender, fullCellRender],
|
2019-12-11 23:32:19 +08:00
|
|
|
);
|
|
|
|
|
2023-02-24 10:51:59 +08:00
|
|
|
const [contextLocale] = useLocale('Calendar', getDefaultLocale);
|
2023-02-22 18:18:26 +08:00
|
|
|
|
2023-04-03 11:21:24 +08:00
|
|
|
const mergedCellRender = (current: DateType, info: CellRenderInfo<DateType>) => {
|
|
|
|
if (info.type === 'date') {
|
|
|
|
return dateRender(current, info);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (info.type === 'month') {
|
|
|
|
return monthRender(current, {
|
|
|
|
...info,
|
|
|
|
locale: contextLocale?.lang,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2022-05-11 20:07:40 +08:00
|
|
|
return wrapSSR(
|
2023-02-22 18:18:26 +08:00
|
|
|
<div
|
|
|
|
className={classNames(
|
|
|
|
calendarPrefixCls,
|
|
|
|
{
|
|
|
|
[`${calendarPrefixCls}-full`]: fullscreen,
|
|
|
|
[`${calendarPrefixCls}-mini`]: !fullscreen,
|
|
|
|
[`${calendarPrefixCls}-rtl`]: direction === 'rtl',
|
|
|
|
},
|
2023-07-06 09:38:21 +08:00
|
|
|
calendar?.className,
|
2023-02-22 18:18:26 +08:00
|
|
|
className,
|
|
|
|
rootClassName,
|
|
|
|
hashId,
|
|
|
|
)}
|
2023-07-06 09:38:21 +08:00
|
|
|
style={{ ...calendar?.style, ...style }}
|
2023-02-22 18:18:26 +08:00
|
|
|
>
|
|
|
|
{headerRender ? (
|
|
|
|
headerRender({
|
|
|
|
value: mergedValue,
|
|
|
|
type: mergedMode,
|
2023-05-17 21:18:51 +08:00
|
|
|
onChange: (nextDate) => {
|
|
|
|
onInternalSelect(nextDate, 'customize');
|
|
|
|
},
|
2023-02-22 18:18:26 +08:00
|
|
|
onTypeChange: triggerModeChange,
|
|
|
|
})
|
|
|
|
) : (
|
|
|
|
<CalendarHeader
|
|
|
|
prefixCls={calendarPrefixCls}
|
|
|
|
value={mergedValue}
|
|
|
|
generateConfig={generateConfig}
|
|
|
|
mode={mergedMode}
|
|
|
|
fullscreen={fullscreen}
|
|
|
|
locale={contextLocale?.lang}
|
|
|
|
validRange={validRange}
|
|
|
|
onChange={onInternalSelect}
|
|
|
|
onModeChange={triggerModeChange}
|
|
|
|
/>
|
2020-12-09 17:12:32 +08:00
|
|
|
)}
|
2023-02-22 18:18:26 +08:00
|
|
|
<RCPickerPanel
|
|
|
|
value={mergedValue}
|
|
|
|
prefixCls={prefixCls}
|
|
|
|
locale={contextLocale?.lang}
|
|
|
|
generateConfig={generateConfig}
|
2023-04-03 11:21:24 +08:00
|
|
|
cellRender={mergedCellRender}
|
2023-05-17 21:18:51 +08:00
|
|
|
onSelect={(nextDate) => {
|
2023-05-22 18:48:28 +08:00
|
|
|
onInternalSelect(nextDate, panelMode);
|
2023-05-17 21:18:51 +08:00
|
|
|
}}
|
2023-02-22 18:18:26 +08:00
|
|
|
mode={panelMode}
|
|
|
|
picker={panelMode}
|
|
|
|
disabledDate={mergedDisabledDate}
|
|
|
|
hideHeader
|
|
|
|
/>
|
|
|
|
</div>,
|
2019-12-11 23:32:19 +08:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2023-01-08 21:30:41 +08:00
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
|
|
Calendar.displayName = 'Calendar';
|
|
|
|
}
|
|
|
|
|
2019-12-11 23:32:19 +08:00
|
|
|
return Calendar;
|
|
|
|
}
|
|
|
|
|
|
|
|
export default generateCalendar;
|