2020-04-02 15:46:07 +08:00
|
|
|
import * as React from 'react';
|
|
|
|
import classNames from 'classnames';
|
|
|
|
import CalendarOutlined from '@ant-design/icons/CalendarOutlined';
|
|
|
|
import ClockCircleOutlined from '@ant-design/icons/ClockCircleOutlined';
|
|
|
|
import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
|
|
|
|
import RCPicker from 'rc-picker';
|
|
|
|
import { PickerMode } from 'rc-picker/lib/interface';
|
|
|
|
import { GenerateConfig } from 'rc-picker/lib/generate/index';
|
2022-04-15 10:45:20 +08:00
|
|
|
import { forwardRef, useContext } from 'react';
|
2020-04-02 15:46:07 +08:00
|
|
|
import enUS from '../locale/en_US';
|
2022-01-20 16:54:47 +08:00
|
|
|
import { getPlaceholder, transPlacement2DropdownAlign } from '../util';
|
2020-07-23 11:25:17 +08:00
|
|
|
import devWarning from '../../_util/devWarning';
|
2020-04-02 15:46:07 +08:00
|
|
|
import { ConfigContext, ConfigConsumerProps } from '../../config-provider';
|
|
|
|
import LocaleReceiver from '../../locale-provider/LocaleReceiver';
|
|
|
|
import SizeContext from '../../config-provider/SizeContext';
|
|
|
|
import {
|
|
|
|
PickerProps,
|
|
|
|
PickerLocale,
|
|
|
|
PickerDateProps,
|
|
|
|
PickerTimeProps,
|
|
|
|
getTimeProps,
|
|
|
|
Components,
|
|
|
|
} from '.';
|
2022-03-24 21:54:20 +08:00
|
|
|
import { FormItemInputContext } from '../../form/context';
|
2022-03-25 17:48:12 +08:00
|
|
|
import { getMergedStatus, getStatusClassNames, InputStatus } from '../../_util/statusUtils';
|
2022-04-15 10:45:20 +08:00
|
|
|
import { DatePickRef, PickerComponentClass } from './interface';
|
2022-04-19 16:54:52 +08:00
|
|
|
import useStyle from '../style';
|
2020-04-02 15:46:07 +08:00
|
|
|
|
|
|
|
export default function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
|
2022-02-16 21:14:51 +08:00
|
|
|
type DatePickerProps = PickerProps<DateType> & {
|
|
|
|
status?: InputStatus;
|
2022-04-19 16:54:52 +08:00
|
|
|
hashId?: string;
|
2022-02-16 21:14:51 +08:00
|
|
|
};
|
2020-04-02 15:46:07 +08:00
|
|
|
|
|
|
|
function getPicker<InnerPickerProps extends DatePickerProps>(
|
|
|
|
picker?: PickerMode,
|
|
|
|
displayName?: string,
|
|
|
|
) {
|
2022-04-19 16:54:52 +08:00
|
|
|
type InternalPickerProps = InnerPickerProps & { hashId?: string };
|
|
|
|
|
|
|
|
class Picker extends React.Component<InternalPickerProps> {
|
2020-04-02 15:46:07 +08:00
|
|
|
static contextType = ConfigContext;
|
|
|
|
|
|
|
|
static displayName: string;
|
|
|
|
|
|
|
|
context: ConfigConsumerProps;
|
|
|
|
|
|
|
|
pickerRef = React.createRef<RCPicker<DateType>>();
|
|
|
|
|
2020-07-23 11:25:17 +08:00
|
|
|
constructor(props: InnerPickerProps) {
|
|
|
|
super(props);
|
|
|
|
devWarning(
|
|
|
|
picker !== 'quarter',
|
|
|
|
displayName!,
|
|
|
|
`DatePicker.${displayName} is legacy usage. Please use DatePicker[picker='${picker}'] directly.`,
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-04-02 15:46:07 +08:00
|
|
|
focus = () => {
|
|
|
|
if (this.pickerRef.current) {
|
|
|
|
this.pickerRef.current.focus();
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
blur = () => {
|
|
|
|
if (this.pickerRef.current) {
|
|
|
|
this.pickerRef.current.blur();
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2021-05-05 22:28:56 +08:00
|
|
|
renderPicker = (contextLocale: PickerLocale) => {
|
|
|
|
const locale = { ...contextLocale, ...this.props.locale };
|
2020-04-25 22:46:21 +08:00
|
|
|
const { getPrefixCls, direction, getPopupContainer } = this.context;
|
2020-04-02 15:46:07 +08:00
|
|
|
const {
|
2022-04-15 10:45:20 +08:00
|
|
|
prefixCls,
|
2020-04-25 22:46:21 +08:00
|
|
|
getPopupContainer: customizeGetPopupContainer,
|
2020-04-02 15:46:07 +08:00
|
|
|
className,
|
|
|
|
size: customizeSize,
|
|
|
|
bordered = true,
|
2022-01-20 16:54:47 +08:00
|
|
|
placement,
|
2020-05-02 21:55:23 +08:00
|
|
|
placeholder,
|
2022-02-16 21:14:51 +08:00
|
|
|
status: customStatus,
|
2022-04-19 16:54:52 +08:00
|
|
|
dropdownClassName,
|
|
|
|
hashId,
|
2020-04-02 15:46:07 +08:00
|
|
|
...restProps
|
|
|
|
} = this.props;
|
|
|
|
const { format, showTime } = this.props as any;
|
|
|
|
|
|
|
|
const additionalProps = {
|
|
|
|
showToday: true,
|
|
|
|
};
|
|
|
|
|
|
|
|
let additionalOverrideProps: any = {};
|
|
|
|
if (picker) {
|
|
|
|
additionalOverrideProps.picker = picker;
|
|
|
|
}
|
|
|
|
const mergedPicker = picker || this.props.picker;
|
|
|
|
|
|
|
|
additionalOverrideProps = {
|
|
|
|
...additionalOverrideProps,
|
|
|
|
...(showTime ? getTimeProps({ format, picker: mergedPicker, ...showTime }) : {}),
|
|
|
|
...(mergedPicker === 'time'
|
|
|
|
? getTimeProps({ format, ...this.props, picker: mergedPicker })
|
|
|
|
: {}),
|
|
|
|
};
|
2021-02-08 17:09:13 +08:00
|
|
|
const rootPrefixCls = getPrefixCls();
|
2020-04-02 15:46:07 +08:00
|
|
|
|
|
|
|
return (
|
|
|
|
<SizeContext.Consumer>
|
|
|
|
{size => {
|
|
|
|
const mergedSize = customizeSize || size;
|
|
|
|
|
|
|
|
return (
|
2022-03-24 21:54:20 +08:00
|
|
|
<FormItemInputContext.Consumer>
|
2022-03-25 17:48:12 +08:00
|
|
|
{({ hasFeedback, status: contextStatus, feedbackIcon }) => {
|
|
|
|
const suffixNode = (
|
|
|
|
<>
|
|
|
|
{mergedPicker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />}
|
|
|
|
{hasFeedback && feedbackIcon}
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<RCPicker<DateType>
|
|
|
|
ref={this.pickerRef}
|
|
|
|
placeholder={getPlaceholder(mergedPicker, locale, placeholder)}
|
|
|
|
suffixIcon={suffixNode}
|
|
|
|
dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
|
|
|
|
clearIcon={<CloseCircleFilled />}
|
|
|
|
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`} />}
|
|
|
|
allowClear
|
|
|
|
transitionName={`${rootPrefixCls}-slide-up`}
|
|
|
|
{...additionalProps}
|
|
|
|
{...restProps}
|
|
|
|
{...additionalOverrideProps}
|
|
|
|
locale={locale!.lang}
|
|
|
|
className={classNames(
|
|
|
|
{
|
|
|
|
[`${prefixCls}-${mergedSize}`]: mergedSize,
|
|
|
|
[`${prefixCls}-borderless`]: !bordered,
|
|
|
|
},
|
|
|
|
getStatusClassNames(
|
2022-04-15 10:45:20 +08:00
|
|
|
prefixCls as string,
|
2022-03-25 17:48:12 +08:00
|
|
|
getMergedStatus(contextStatus, customStatus),
|
|
|
|
hasFeedback,
|
|
|
|
),
|
2022-04-19 16:54:52 +08:00
|
|
|
hashId,
|
2022-03-25 17:48:12 +08:00
|
|
|
className,
|
|
|
|
)}
|
|
|
|
prefixCls={prefixCls}
|
|
|
|
getPopupContainer={customizeGetPopupContainer || getPopupContainer}
|
|
|
|
generateConfig={generateConfig}
|
|
|
|
components={Components}
|
|
|
|
direction={direction}
|
2022-04-19 16:54:52 +08:00
|
|
|
dropdownClassName={classNames(hashId, dropdownClassName)}
|
2022-03-25 17:48:12 +08:00
|
|
|
/>
|
|
|
|
);
|
|
|
|
}}
|
2022-03-24 21:54:20 +08:00
|
|
|
</FormItemInputContext.Consumer>
|
2020-04-02 15:46:07 +08:00
|
|
|
);
|
|
|
|
}}
|
|
|
|
</SizeContext.Consumer>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
render() {
|
|
|
|
return (
|
2021-05-05 22:28:56 +08:00
|
|
|
<LocaleReceiver componentName="DatePicker" defaultLocale={enUS}>
|
2020-04-02 15:46:07 +08:00
|
|
|
{this.renderPicker}
|
|
|
|
</LocaleReceiver>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-04-15 10:45:20 +08:00
|
|
|
const PickerWrapper = forwardRef<DatePickRef<DateType>, InnerPickerProps>((props, ref) => {
|
|
|
|
const { prefixCls: customizePrefixCls } = props;
|
|
|
|
|
|
|
|
const { getPrefixCls } = useContext(ConfigContext);
|
|
|
|
const prefixCls = getPrefixCls('picker', customizePrefixCls);
|
2022-04-19 16:54:52 +08:00
|
|
|
const [wrapSSR, hashId] = useStyle(prefixCls);
|
2022-04-15 10:45:20 +08:00
|
|
|
|
|
|
|
const pickerProps: InnerPickerProps = {
|
|
|
|
...props,
|
|
|
|
prefixCls,
|
|
|
|
ref,
|
2022-04-19 16:54:52 +08:00
|
|
|
hashId,
|
2022-04-15 10:45:20 +08:00
|
|
|
};
|
|
|
|
|
2022-04-19 16:54:52 +08:00
|
|
|
return wrapSSR(<Picker {...pickerProps} />);
|
2022-04-15 10:45:20 +08:00
|
|
|
});
|
|
|
|
|
2020-04-02 15:46:07 +08:00
|
|
|
if (displayName) {
|
2022-04-15 10:45:20 +08:00
|
|
|
PickerWrapper.displayName = displayName;
|
2020-04-02 15:46:07 +08:00
|
|
|
}
|
|
|
|
|
2022-04-15 10:45:20 +08:00
|
|
|
return PickerWrapper as unknown as PickerComponentClass<InnerPickerProps>;
|
2020-04-02 15:46:07 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
const DatePicker = getPicker<DatePickerProps>();
|
|
|
|
const WeekPicker = getPicker<Omit<PickerDateProps<DateType>, 'picker'>>('week', 'WeekPicker');
|
|
|
|
const MonthPicker = getPicker<Omit<PickerDateProps<DateType>, 'picker'>>('month', 'MonthPicker');
|
|
|
|
const YearPicker = getPicker<Omit<PickerDateProps<DateType>, 'picker'>>('year', 'YearPicker');
|
|
|
|
const TimePicker = getPicker<Omit<PickerTimeProps<DateType>, 'picker'>>('time', 'TimePicker');
|
2020-07-23 11:25:17 +08:00
|
|
|
const QuarterPicker = getPicker<Omit<PickerTimeProps<DateType>, 'picker'>>(
|
|
|
|
'quarter',
|
|
|
|
'QuarterPicker',
|
|
|
|
);
|
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
|
|
|
}
|