mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-12 07:09:55 +08:00
ecf025548b
* adjust range color * fix lint * update color * update dark logic * adjust little of arrow * use icon * update font size * update snashot
122 lines
4.1 KiB
TypeScript
122 lines
4.1 KiB
TypeScript
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 SwapRightOutlined from '@ant-design/icons/SwapRightOutlined';
|
|
import { RangePicker as RCRangePicker } from 'rc-picker';
|
|
import { GenerateConfig } from 'rc-picker/lib/generate/index';
|
|
import enUS from '../locale/en_US';
|
|
import { ConfigContext, ConfigConsumerProps } from '../../config-provider';
|
|
import SizeContext from '../../config-provider/SizeContext';
|
|
import LocaleReceiver from '../../locale-provider/LocaleReceiver';
|
|
import { getRangePlaceholder } from '../util';
|
|
import { RangePickerProps, PickerLocale, getTimeProps, Components } from '.';
|
|
|
|
export default function generateRangePicker<DateType>(
|
|
generateConfig: GenerateConfig<DateType>,
|
|
): React.ComponentClass<RangePickerProps<DateType>> {
|
|
class RangePicker extends React.Component<RangePickerProps<DateType>> {
|
|
static contextType = ConfigContext;
|
|
|
|
context: ConfigConsumerProps;
|
|
|
|
pickerRef = React.createRef<RCRangePicker<DateType>>();
|
|
|
|
focus = () => {
|
|
if (this.pickerRef.current) {
|
|
this.pickerRef.current.focus();
|
|
}
|
|
};
|
|
|
|
blur = () => {
|
|
if (this.pickerRef.current) {
|
|
this.pickerRef.current.blur();
|
|
}
|
|
};
|
|
|
|
getDefaultLocale = () => {
|
|
const { locale } = this.props;
|
|
const result = {
|
|
...enUS,
|
|
...locale,
|
|
};
|
|
result.lang = {
|
|
...result.lang,
|
|
...((locale || {}) as PickerLocale).lang,
|
|
};
|
|
return result;
|
|
};
|
|
|
|
renderPicker = (locale: PickerLocale) => {
|
|
const { getPrefixCls, direction } = this.context;
|
|
const {
|
|
prefixCls: customizePrefixCls,
|
|
className,
|
|
size: customizeSize,
|
|
bordered = true,
|
|
...restProps
|
|
} = this.props;
|
|
const { format, showTime, picker } = this.props as any;
|
|
const prefixCls = getPrefixCls('picker', customizePrefixCls);
|
|
|
|
let additionalOverrideProps: any = {};
|
|
|
|
additionalOverrideProps = {
|
|
...additionalOverrideProps,
|
|
...(showTime ? getTimeProps({ format, picker, ...showTime }) : {}),
|
|
...(picker === 'time' ? getTimeProps({ format, ...this.props, picker }) : {}),
|
|
};
|
|
|
|
return (
|
|
<SizeContext.Consumer>
|
|
{size => {
|
|
const mergedSize = customizeSize || size;
|
|
|
|
return (
|
|
<RCRangePicker<DateType>
|
|
separator={
|
|
<span aria-label="to" className={`${prefixCls}-separator`}>
|
|
<SwapRightOutlined />
|
|
</span>
|
|
}
|
|
ref={this.pickerRef}
|
|
placeholder={getRangePlaceholder(picker, locale)}
|
|
suffixIcon={picker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />}
|
|
clearIcon={<CloseCircleFilled />}
|
|
allowClear
|
|
transitionName="slide-up"
|
|
{...restProps}
|
|
className={classNames(className, {
|
|
[`${prefixCls}-${mergedSize}`]: mergedSize,
|
|
[`${prefixCls}-borderless`]: !bordered,
|
|
})}
|
|
{...additionalOverrideProps}
|
|
locale={locale!.lang}
|
|
prefixCls={prefixCls}
|
|
generateConfig={generateConfig}
|
|
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`} />}
|
|
components={Components}
|
|
direction={direction}
|
|
/>
|
|
);
|
|
}}
|
|
</SizeContext.Consumer>
|
|
);
|
|
};
|
|
|
|
render() {
|
|
return (
|
|
<LocaleReceiver componentName="DatePicker" defaultLocale={this.getDefaultLocale}>
|
|
{this.renderPicker}
|
|
</LocaleReceiver>
|
|
);
|
|
}
|
|
}
|
|
|
|
return RangePicker;
|
|
}
|