2023-09-11 17:28:04 +08:00
|
|
|
import * as React from 'react';
|
|
|
|
import { forwardRef, useContext, useImperativeHandle } from 'react';
|
2020-04-02 15:46:07 +08:00
|
|
|
import CalendarOutlined from '@ant-design/icons/CalendarOutlined';
|
|
|
|
import ClockCircleOutlined from '@ant-design/icons/ClockCircleOutlined';
|
2022-06-22 14:57:09 +08:00
|
|
|
import classNames from 'classnames';
|
2024-04-08 14:04:08 +08:00
|
|
|
import RCPicker from 'rc-picker';
|
|
|
|
import type { PickerRef } from 'rc-picker';
|
2022-05-07 14:31:54 +08:00
|
|
|
import type { GenerateConfig } from 'rc-picker/lib/generate/index';
|
2022-06-22 14:57:09 +08:00
|
|
|
import type { PickerMode } from 'rc-picker/lib/interface';
|
2023-09-11 17:28:04 +08:00
|
|
|
|
2024-01-29 15:34:48 +08:00
|
|
|
import { useZIndex } from '../../_util/hooks/useZIndex';
|
2023-05-12 14:53:47 +08:00
|
|
|
import { getMergedStatus, getStatusClassNames } from '../../_util/statusUtils';
|
2024-01-29 15:34:48 +08:00
|
|
|
import type { AnyObject } from '../../_util/type';
|
2023-09-11 17:28:04 +08:00
|
|
|
import { devUseWarning } from '../../_util/warning';
|
2022-05-07 14:31:54 +08:00
|
|
|
import { ConfigContext } from '../../config-provider';
|
2022-04-29 20:48:10 +08:00
|
|
|
import DisabledContext from '../../config-provider/DisabledContext';
|
2024-01-29 15:34:48 +08:00
|
|
|
import useCSSVarCls from '../../config-provider/hooks/useCSSVarCls';
|
2023-05-12 14:53:47 +08:00
|
|
|
import useSize from '../../config-provider/hooks/useSize';
|
2022-03-24 21:54:20 +08:00
|
|
|
import { FormItemInputContext } from '../../form/context';
|
2024-01-29 15:34:48 +08:00
|
|
|
import useVariant from '../../form/hooks/useVariants';
|
2023-03-21 13:08:43 +08:00
|
|
|
import { useLocale } from '../../locale';
|
2024-01-16 14:02:31 +08:00
|
|
|
import { NoCompactStyle, useCompactItemContext } from '../../space/Compact';
|
2022-06-22 14:57:09 +08:00
|
|
|
import enUS from '../locale/en_US';
|
2023-05-12 14:53:47 +08:00
|
|
|
import useStyle from '../style';
|
2024-02-01 16:26:38 +08:00
|
|
|
import { getPlaceholder, transPlacement2DropdownAlign, useIcons } from '../util';
|
2024-03-14 21:06:08 +08:00
|
|
|
import type { GenericTimePickerProps, PickerProps, PickerPropsWithMultiple } from './interface';
|
2024-01-29 15:34:48 +08:00
|
|
|
import useComponents from './useComponents';
|
2020-04-02 15:46:07 +08:00
|
|
|
|
2024-01-29 15:34:48 +08:00
|
|
|
export default function generatePicker<DateType extends AnyObject>(
|
|
|
|
generateConfig: GenerateConfig<DateType>,
|
|
|
|
) {
|
|
|
|
type DatePickerProps = PickerProps<DateType>;
|
2024-03-14 21:06:08 +08:00
|
|
|
type TimePickerProps = GenericTimePickerProps<DateType>;
|
2022-11-01 12:00:16 +08:00
|
|
|
|
2020-04-02 15:46:07 +08:00
|
|
|
function getPicker<InnerPickerProps extends DatePickerProps>(
|
|
|
|
picker?: PickerMode,
|
|
|
|
displayName?: string,
|
|
|
|
) {
|
2023-07-07 19:02:55 +08:00
|
|
|
const consumerName = displayName === 'TimePicker' ? 'timePicker' : 'datePicker';
|
2024-01-29 15:34:48 +08:00
|
|
|
const Picker = forwardRef<PickerRef, InnerPickerProps>((props, ref) => {
|
|
|
|
const {
|
|
|
|
prefixCls: customizePrefixCls,
|
|
|
|
getPopupContainer: customizeGetPopupContainer,
|
|
|
|
components,
|
|
|
|
style,
|
|
|
|
className,
|
|
|
|
rootClassName,
|
|
|
|
size: customizeSize,
|
|
|
|
bordered,
|
|
|
|
placement,
|
|
|
|
placeholder,
|
|
|
|
popupClassName,
|
|
|
|
dropdownClassName,
|
|
|
|
disabled: customDisabled,
|
|
|
|
status: customStatus,
|
|
|
|
variant: customVariant,
|
2024-03-14 21:06:08 +08:00
|
|
|
onCalendarChange,
|
2024-01-29 15:34:48 +08:00
|
|
|
...restProps
|
|
|
|
} = props;
|
|
|
|
|
|
|
|
const {
|
|
|
|
getPrefixCls,
|
|
|
|
direction,
|
|
|
|
getPopupContainer,
|
|
|
|
// Consume different styles according to different names
|
|
|
|
[consumerName]: consumerStyle,
|
|
|
|
} = useContext(ConfigContext);
|
|
|
|
|
|
|
|
const prefixCls = getPrefixCls('picker', customizePrefixCls);
|
|
|
|
const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
|
|
|
|
const innerRef = React.useRef<PickerRef>(null);
|
|
|
|
|
2024-06-21 17:47:09 +08:00
|
|
|
const [variant, enableVariantCls] = useVariant('datePicker', customVariant, bordered);
|
2024-01-29 15:34:48 +08:00
|
|
|
|
|
|
|
const rootCls = useCSSVarCls(prefixCls);
|
|
|
|
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
|
|
|
|
|
|
|
|
useImperativeHandle(ref, () => innerRef.current!);
|
|
|
|
|
|
|
|
const additionalProps = {
|
|
|
|
showToday: true,
|
|
|
|
};
|
|
|
|
|
|
|
|
const mergedPicker = picker || props.picker;
|
|
|
|
|
|
|
|
const rootPrefixCls = getPrefixCls();
|
|
|
|
|
2024-03-14 21:06:08 +08:00
|
|
|
// ==================== Legacy =====================
|
|
|
|
const { onSelect, multiple } = restProps as TimePickerProps;
|
|
|
|
const hasLegacyOnSelect = onSelect && picker === 'time' && !multiple;
|
|
|
|
|
|
|
|
const onInternalCalendarChange: typeof onCalendarChange = (date, dateStr, info) => {
|
|
|
|
onCalendarChange?.(date, dateStr, info);
|
|
|
|
|
|
|
|
if (hasLegacyOnSelect) {
|
|
|
|
onSelect(date as any);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2024-01-29 15:34:48 +08:00
|
|
|
// =================== Warning =====================
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
|
|
const warning = devUseWarning(displayName! || 'DatePicker');
|
|
|
|
|
|
|
|
warning(
|
|
|
|
picker !== 'quarter',
|
|
|
|
'deprecated',
|
|
|
|
`DatePicker.${displayName} is legacy usage. Please use DatePicker[picker='${picker}'] directly.`,
|
2022-05-14 16:34:35 +08:00
|
|
|
);
|
|
|
|
|
2024-01-29 15:34:48 +08:00
|
|
|
warning.deprecated(!dropdownClassName, 'dropdownClassName', 'popupClassName');
|
|
|
|
|
|
|
|
warning.deprecated(!('bordered' in props), 'bordered', 'variant');
|
2024-03-14 21:06:08 +08:00
|
|
|
|
|
|
|
warning.deprecated(!hasLegacyOnSelect, 'onSelect', 'onCalendarChange');
|
2024-01-29 15:34:48 +08:00
|
|
|
}
|
|
|
|
|
2024-02-01 16:26:38 +08:00
|
|
|
// ===================== Icon =====================
|
|
|
|
const [mergedAllowClear, removeIcon] = useIcons(props, prefixCls);
|
|
|
|
|
2024-01-29 15:34:48 +08:00
|
|
|
// ================== components ==================
|
|
|
|
const mergedComponents = useComponents(components);
|
|
|
|
|
|
|
|
// ===================== Size =====================
|
|
|
|
const mergedSize = useSize((ctx) => customizeSize ?? compactSize ?? ctx);
|
|
|
|
|
|
|
|
// ===================== Disabled =====================
|
|
|
|
const disabled = React.useContext(DisabledContext);
|
|
|
|
const mergedDisabled = customDisabled ?? disabled;
|
|
|
|
|
|
|
|
// ===================== FormItemInput =====================
|
|
|
|
const formItemContext = useContext(FormItemInputContext);
|
|
|
|
const { hasFeedback, status: contextStatus, feedbackIcon } = formItemContext;
|
|
|
|
|
|
|
|
const suffixNode = (
|
|
|
|
<>
|
|
|
|
{mergedPicker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />}
|
|
|
|
{hasFeedback && feedbackIcon}
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
|
|
|
|
const [contextLocale] = useLocale('DatePicker', enUS);
|
|
|
|
|
|
|
|
const locale = { ...contextLocale, ...props.locale! };
|
|
|
|
// ============================ zIndex ============================
|
|
|
|
const [zIndex] = useZIndex('DatePicker', props.popupStyle?.zIndex as number);
|
|
|
|
|
|
|
|
return wrapCSSVar(
|
|
|
|
<NoCompactStyle>
|
|
|
|
<RCPicker<DateType>
|
|
|
|
ref={innerRef}
|
|
|
|
placeholder={getPlaceholder(locale, mergedPicker, placeholder)}
|
|
|
|
suffixIcon={suffixNode}
|
|
|
|
dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
|
2024-06-08 21:59:21 +08:00
|
|
|
placement={placement}
|
2024-01-29 15:34:48 +08:00
|
|
|
prevIcon={<span className={`${prefixCls}-prev-icon`} />}
|
|
|
|
nextIcon={<span className={`${prefixCls}-next-icon`} />}
|
|
|
|
superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
|
|
|
|
superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
|
|
|
|
transitionName={`${rootPrefixCls}-slide-up`}
|
|
|
|
picker={picker}
|
2024-03-14 21:06:08 +08:00
|
|
|
onCalendarChange={onInternalCalendarChange}
|
2024-01-29 15:34:48 +08:00
|
|
|
{...additionalProps}
|
|
|
|
{...restProps}
|
|
|
|
locale={locale!.lang}
|
|
|
|
className={classNames(
|
|
|
|
{
|
|
|
|
[`${prefixCls}-${mergedSize}`]: mergedSize,
|
|
|
|
[`${prefixCls}-${variant}`]: enableVariantCls,
|
|
|
|
},
|
|
|
|
getStatusClassNames(
|
|
|
|
prefixCls,
|
|
|
|
getMergedStatus(contextStatus, customStatus),
|
|
|
|
hasFeedback,
|
|
|
|
),
|
|
|
|
hashId,
|
|
|
|
compactItemClassnames,
|
|
|
|
consumerStyle?.className,
|
|
|
|
className,
|
|
|
|
cssVarCls,
|
|
|
|
rootCls,
|
|
|
|
rootClassName,
|
|
|
|
)}
|
|
|
|
style={{ ...consumerStyle?.style, ...style }}
|
|
|
|
prefixCls={prefixCls}
|
|
|
|
getPopupContainer={customizeGetPopupContainer || getPopupContainer}
|
|
|
|
generateConfig={generateConfig}
|
|
|
|
components={mergedComponents}
|
|
|
|
direction={direction}
|
|
|
|
disabled={mergedDisabled}
|
|
|
|
classNames={{
|
|
|
|
popup: classNames(
|
2024-01-16 14:02:31 +08:00
|
|
|
hashId,
|
|
|
|
cssVarCls,
|
|
|
|
rootCls,
|
|
|
|
rootClassName,
|
|
|
|
popupClassName || dropdownClassName,
|
2024-01-29 15:34:48 +08:00
|
|
|
),
|
|
|
|
}}
|
|
|
|
styles={{
|
|
|
|
popup: {
|
2024-01-16 14:02:31 +08:00
|
|
|
...props.popupStyle,
|
|
|
|
zIndex,
|
2024-01-29 15:34:48 +08:00
|
|
|
},
|
|
|
|
}}
|
2024-02-01 16:26:38 +08:00
|
|
|
allowClear={mergedAllowClear}
|
|
|
|
removeIcon={removeIcon}
|
2024-01-29 15:34:48 +08:00
|
|
|
/>
|
|
|
|
</NoCompactStyle>,
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
|
|
|
if (process.env.NODE_ENV !== 'production' && displayName) {
|
2022-05-09 10:34:10 +08:00
|
|
|
Picker.displayName = displayName;
|
2020-04-02 15:46:07 +08:00
|
|
|
}
|
|
|
|
|
2024-01-29 15:34:48 +08:00
|
|
|
return Picker as unknown as (<ValueType = DateType>(
|
|
|
|
props: PickerPropsWithMultiple<DateType, InnerPickerProps, ValueType>,
|
|
|
|
) => React.ReactElement) & { displayName?: string };
|
2020-04-02 15:46:07 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
const DatePicker = getPicker<DatePickerProps>();
|
2022-11-01 12:00:16 +08:00
|
|
|
const WeekPicker = getPicker<Omit<DatePickerProps, 'picker'>>('week', 'WeekPicker');
|
|
|
|
const MonthPicker = getPicker<Omit<DatePickerProps, 'picker'>>('month', 'MonthPicker');
|
|
|
|
const YearPicker = getPicker<Omit<DatePickerProps, 'picker'>>('year', 'YearPicker');
|
2024-03-14 21:06:08 +08:00
|
|
|
const QuarterPicker = getPicker<Omit<DatePickerProps, 'picker'>>('quarter', 'QuarterPicker');
|
2022-11-01 12:00:16 +08:00
|
|
|
const TimePicker = getPicker<Omit<TimePickerProps, 'picker'>>('time', 'TimePicker');
|
2020-04-02 15:46:07 +08:00
|
|
|
|
2020-07-23 11:25:17 +08:00
|
|
|
return { DatePicker, WeekPicker, MonthPicker, YearPicker, TimePicker, QuarterPicker };
|
2020-04-02 15:46:07 +08:00
|
|
|
}
|