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 * as React from 'react'; import { forwardRef, useContext, useImperativeHandle } from 'react'; import type { PickerDateProps, PickerLocale, PickerProps, PickerTimeProps } from '.'; import { Components, getTimeProps } from '.'; import { ConfigContext } from '../../config-provider'; import DisabledContext from '../../config-provider/DisabledContext'; import SizeContext from '../../config-provider/SizeContext'; import { FormItemInputContext } from '../../form/context'; import LocaleReceiver from '../../locale-provider/LocaleReceiver'; import type { InputStatus } from '../../_util/statusUtils'; import { getMergedStatus, getStatusClassNames } from '../../_util/statusUtils'; import warning from '../../_util/warning'; import enUS from '../locale/en_US'; import { getPlaceholder, transPlacement2DropdownAlign } from '../util'; import type { CommonPickerMethods, DatePickRef, PickerComponentClass } from './interface'; import useStyle from '../style'; export default function generatePicker(generateConfig: GenerateConfig) { type DatePickerProps = PickerProps & { status?: InputStatus; hashId?: string; /** * @deprecated `dropdownClassName` is deprecated which will be removed in next major * version.Please use `popupClassName` instead. */ dropdownClassName?: string; popupClassName?: string; }; function getPicker( picker?: PickerMode, displayName?: string, ) { const Picker = forwardRef | CommonPickerMethods, InnerPickerProps>( (props, ref) => { const { prefixCls: customizePrefixCls, getPopupContainer: customizeGetPopupContainer, className, size: customizeSize, bordered = true, placement, placeholder, popupClassName, dropdownClassName, disabled: customDisabled, status: customStatus, ...restProps } = props; const { getPrefixCls, direction, getPopupContainer } = useContext(ConfigContext); const prefixCls = getPrefixCls('picker', customizePrefixCls); const innerRef = React.useRef>(null); const { format, showTime } = props as any; const [wrapSSR, hashId] = useStyle(prefixCls); 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 ===================== warning( picker !== 'quarter', displayName!, `DatePicker.${displayName} is legacy usage. Please use DatePicker[picker='${picker}'] directly.`, ); warning( !dropdownClassName, 'DatePicker', '`dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.', ); // ===================== Size ===================== const size = React.useContext(SizeContext); const mergedSize = customizeSize || size; // ===================== 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} ); return wrapSSR( {(contextLocale: PickerLocale) => { const locale = { ...contextLocale, ...props.locale }; return ( ref={innerRef} placeholder={getPlaceholder(mergedPicker, locale, placeholder)} suffixIcon={suffixNode} dropdownAlign={transPlacement2DropdownAlign(direction, placement)} clearIcon={} prevIcon={} nextIcon={} superPrevIcon={} superNextIcon={} allowClear transitionName={`${rootPrefixCls}-slide-up`} {...additionalProps} {...restProps} {...additionalOverrideProps} locale={locale!.lang} className={classNames( { [`${prefixCls}-${mergedSize}`]: mergedSize, [`${prefixCls}-borderless`]: !bordered, }, getStatusClassNames( prefixCls as string, getMergedStatus(contextStatus, customStatus), hasFeedback, ), hashId, className, )} prefixCls={prefixCls} getPopupContainer={customizeGetPopupContainer || getPopupContainer} generateConfig={generateConfig} components={Components} direction={direction} disabled={mergedDisabled} dropdownClassName={classNames(hashId, popupClassName || dropdownClassName)} /> ); }} , ); }, ); if (displayName) { Picker.displayName = displayName; } return Picker as unknown as PickerComponentClass; } const DatePicker = getPicker(); const WeekPicker = getPicker, 'picker'>>('week', 'WeekPicker'); const MonthPicker = getPicker, 'picker'>>('month', 'MonthPicker'); const YearPicker = getPicker, 'picker'>>('year', 'YearPicker'); const TimePicker = getPicker, 'picker'>>('time', 'TimePicker'); const QuarterPicker = getPicker, 'picker'>>( 'quarter', 'QuarterPicker', ); return { DatePicker, WeekPicker, MonthPicker, YearPicker, TimePicker, QuarterPicker }; }