import * as React from 'react'; import { forwardRef, useContext, useImperativeHandle } from 'react'; import CalendarOutlined from '@ant-design/icons/CalendarOutlined'; import ClockCircleOutlined from '@ant-design/icons/ClockCircleOutlined'; import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled'; import classNames from 'classnames'; import RCPicker from 'rc-picker'; import type { GenerateConfig } from 'rc-picker/lib/generate/index'; import type { PickerMode } from 'rc-picker/lib/interface'; import type { PickerProps, PickerTimeProps } from '.'; import type { InputStatus } from '../../_util/statusUtils'; import { getMergedStatus, getStatusClassNames } from '../../_util/statusUtils'; import { devUseWarning } from '../../_util/warning'; import { ConfigContext } from '../../config-provider'; import DisabledContext from '../../config-provider/DisabledContext'; import useSize from '../../config-provider/hooks/useSize'; import { FormItemInputContext } from '../../form/context'; import { useLocale } from '../../locale'; import { useCompactItemContext } from '../../space/Compact'; import enUS from '../locale/en_US'; import useStyle from '../style'; import { getPlaceholder, getTimeProps, mergeAllowClear, transPlacement2DropdownAlign, } from '../util'; import Components from './Components'; import type { CommonPickerMethods, DatePickRef, PickerComponentClass } from './interface'; import { useZIndex } from '../../_util/hooks/useZIndex'; import useCSSVarCls from '../../config-provider/hooks/useCSSVarCls'; export default function generatePicker(generateConfig: GenerateConfig) { type CustomPickerProps = { status?: InputStatus; hashId?: string; popupClassName?: string; rootClassName?: string; }; type DatePickerProps = PickerProps & CustomPickerProps; type TimePickerProps = PickerTimeProps & CustomPickerProps; function getPicker( picker?: PickerMode, displayName?: string, ) { const consumerName = displayName === 'TimePicker' ? 'timePicker' : 'datePicker'; const Picker = forwardRef | CommonPickerMethods, InnerPickerProps>( (props, ref) => { const { prefixCls: customizePrefixCls, getPopupContainer: customizeGetPopupContainer, style, className, rootClassName, size: customizeSize, bordered = true, placement, placeholder, popupClassName, dropdownClassName, disabled: customDisabled, status: customStatus, clearIcon, allowClear, ...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>(null); const { format, showTime } = props as any; const rootCls = useCSSVarCls(prefixCls); const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls); useImperativeHandle(ref, () => ({ focus: () => innerRef.current?.focus(), blur: () => innerRef.current?.blur(), })); const additionalProps = { showToday: true, }; let additionalOverrideProps: any = {}; if (picker) { additionalOverrideProps.picker = picker; } const mergedPicker = picker || props.picker; additionalOverrideProps = { ...additionalOverrideProps, ...(showTime ? getTimeProps({ format, picker: mergedPicker, ...showTime }) : {}), ...(mergedPicker === 'time' ? getTimeProps({ format, ...props, picker: mergedPicker }) : {}), }; const rootPrefixCls = getPrefixCls(); // =================== 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.`, ); warning.deprecated(!dropdownClassName, 'dropdownClassName', 'popupClassName'); } // ===================== 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' ? : } {hasFeedback && feedbackIcon} ); const [contextLocale] = useLocale('DatePicker', enUS); const locale = { ...contextLocale, ...props.locale! }; // ============================ zIndex ============================ const [zIndex] = useZIndex('DatePicker', props.popupStyle?.zIndex as number); return wrapCSSVar( ref={innerRef} placeholder={getPlaceholder(locale, mergedPicker, placeholder)} suffixIcon={suffixNode} dropdownAlign={transPlacement2DropdownAlign(direction, placement)} prevIcon={} nextIcon={} superPrevIcon={} superNextIcon={} transitionName={`${rootPrefixCls}-slide-up`} {...additionalProps} {...restProps} {...additionalOverrideProps} locale={locale!.lang} className={classNames( { [`${prefixCls}-${mergedSize}`]: mergedSize, [`${prefixCls}-borderless`]: !bordered, }, 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={Components} direction={direction} disabled={mergedDisabled} dropdownClassName={classNames( hashId, cssVarCls, rootClassName, popupClassName || dropdownClassName, )} popupStyle={{ ...props.popupStyle, zIndex, }} allowClear={mergeAllowClear(allowClear, clearIcon, )} />, ); }, ); if (displayName) { Picker.displayName = displayName; } return Picker as unknown as PickerComponentClass; } const DatePicker = getPicker(); const WeekPicker = getPicker>('week', 'WeekPicker'); const MonthPicker = getPicker>('month', 'MonthPicker'); const YearPicker = getPicker>('year', 'YearPicker'); const TimePicker = getPicker>('time', 'TimePicker'); const QuarterPicker = getPicker>('quarter', 'QuarterPicker'); return { DatePicker, WeekPicker, MonthPicker, YearPicker, TimePicker, QuarterPicker }; }