ant-design/components/date-picker/RangePicker.tsx

369 lines
9.8 KiB
TypeScript
Raw Normal View History

/* tslint:disable jsx-no-multiline-js */
import * as React from 'react';
import * as moment from 'moment';
2015-12-11 11:11:24 +08:00
import RangeCalendar from 'rc-calendar/lib/RangeCalendar';
2016-03-31 20:42:35 +08:00
import RcDatePicker from 'rc-calendar/lib/Picker';
2015-12-11 11:11:24 +08:00
import classNames from 'classnames';
import Icon from '../icon';
import Tag from '../tag';
import warning from '../_util/warning';
2018-03-09 15:04:21 +08:00
import interopDefault from '../_util/interopDefault';
import { RangePickerValue, RangePickerPresetRange } from './interface';
2017-12-21 17:06:59 +08:00
export interface RangePickerState {
value?: RangePickerValue;
showDate?: RangePickerValue;
open?: boolean;
hoverValue?: RangePickerValue;
}
2018-01-19 19:06:19 +08:00
function getShowDateFromValue(value: RangePickerValue) {
2017-08-02 13:02:01 +08:00
const [start, end] = value;
// value could be an empty array, then we should not reset showDate
if (!start && !end) {
return;
}
const newEnd = end && end.isSame(start, 'month') ? end.clone().add(1, 'month') : end;
2018-01-19 19:06:19 +08:00
return [start, newEnd] as RangePickerValue;
}
function formatValue(value: moment.Moment | undefined, format: string): string {
return (value && value.format(format)) || '';
}
2018-01-19 19:06:19 +08:00
function pickerValueAdapter(value?: moment.Moment | RangePickerValue): RangePickerValue | undefined {
2017-08-02 13:02:01 +08:00
if (!value) {
return;
}
if (Array.isArray(value)) {
return value;
}
return [value, value.clone().add(1, 'month')];
}
2017-11-21 21:09:24 +08:00
function isEmptyArray(arr: any) {
2017-07-12 15:15:21 +08:00
if (Array.isArray(arr)) {
return arr.length === 0 || arr.every(i => !i);
}
return false;
}
function fixLocale(value: RangePickerValue | undefined, localeCode: string) {
if (!localeCode) {
return;
}
if (!value || value.length === 0) {
return;
}
if (value[0]) {
value[0]!.locale(localeCode);
}
if (value[1]) {
value[1]!.locale(localeCode);
}
}
2017-12-21 17:06:59 +08:00
export default class RangePicker extends React.Component<any, RangePickerState> {
2016-03-31 20:42:35 +08:00
static defaultProps = {
prefixCls: 'ant-calendar',
allowClear: true,
2016-11-15 17:16:20 +08:00
showToday: false,
2016-07-13 11:14:24 +08:00
};
2016-03-31 20:42:35 +08:00
private picker: HTMLSpanElement;
2017-11-21 21:09:24 +08:00
constructor(props: any) {
2016-03-31 20:42:35 +08:00
super(props);
const value = props.value || props.defaultValue || [];
if (
2018-03-09 15:04:21 +08:00
value[0] && !interopDefault(moment).isMoment(value[0]) ||
value[1] && !interopDefault(moment).isMoment(value[1])
) {
throw new Error(
'The value/defaultValue of RangePicker must be a moment object array after `antd@2.0`, ' +
'see: https://u.ant.design/date-picker-value',
);
}
2017-07-12 15:15:21 +08:00
const pickerValue = !value || isEmptyArray(value) ? props.defaultPickerValue : value;
2016-03-31 20:42:35 +08:00
this.state = {
value,
2018-03-09 15:04:21 +08:00
showDate: pickerValueAdapter(pickerValue || interopDefault(moment)()),
open: props.open,
hoverValue: [],
2015-12-11 11:11:24 +08:00
};
2016-03-31 20:42:35 +08:00
}
2017-11-21 21:09:24 +08:00
componentWillReceiveProps(nextProps: any) {
2015-12-11 11:11:24 +08:00
if ('value' in nextProps) {
2017-07-12 15:15:21 +08:00
const state = this.state;
const value = nextProps.value || [];
2017-07-12 15:15:21 +08:00
this.setState({
value,
showDate: getShowDateFromValue(value) || state.showDate,
});
2015-12-11 11:11:24 +08:00
}
if ('open' in nextProps) {
this.setState({
open: nextProps.open,
});
}
2016-03-31 20:42:35 +08:00
}
2017-11-21 21:09:24 +08:00
clearSelection = (e: React.MouseEvent<HTMLElement>) => {
e.preventDefault();
e.stopPropagation();
this.setState({ value: [] });
this.handleChange([]);
}
clearHoverValue = () => this.setState({ hoverValue: [] });
2018-01-19 19:06:19 +08:00
handleChange = (value: RangePickerValue) => {
2016-03-30 10:52:15 +08:00
const props = this.props;
if (!('value' in props)) {
2017-12-21 17:06:59 +08:00
this.setState(({ showDate }) => ({
value,
showDate: getShowDateFromValue(value) || showDate,
}));
}
props.onChange(value, [
formatValue(value[0], props.format),
formatValue(value[1], props.format),
]);
2016-03-31 20:42:35 +08:00
}
2017-11-21 21:09:24 +08:00
handleOpenChange = (open: boolean) => {
2017-10-17 21:29:26 +08:00
if (!('open' in this.props)) {
this.setState({ open });
}
if (open === false) {
this.clearHoverValue();
}
const { onOpenChange } = this.props;
if (onOpenChange) {
onOpenChange(open);
}
}
2017-12-21 17:06:59 +08:00
handleShowDateChange = (showDate: RangePickerValue) => this.setState({ showDate });
2017-11-21 21:09:24 +08:00
handleHoverChange = (hoverValue: any) => this.setState({ hoverValue });
handleRangeMouseLeave = () => {
if (this.state.open) {
this.clearHoverValue();
}
}
handleCalendarInputSelect = (value: RangePickerValue) => {
2018-02-07 14:22:35 +08:00
if (!value[0]) {
return;
}
this.setState(({ showDate }) => ({
value,
showDate: getShowDateFromValue(value) || showDate,
}));
}
handleRangeClick = (value: RangePickerPresetRange) => {
if (typeof value === 'function') {
value = value();
}
this.setValue(value, true);
const { onOk } = this.props;
if (onOk) {
onOk(value);
}
}
2018-01-19 19:06:19 +08:00
setValue(value: RangePickerValue, hidePanel?: boolean) {
2016-11-15 17:16:20 +08:00
this.handleChange(value);
2017-10-17 21:29:26 +08:00
if ((hidePanel || !this.props.showTime) && !('open' in this.props)) {
this.setState({ open: false });
}
}
focus() {
this.picker.focus();
}
blur() {
this.picker.blur();
}
savePicker = (node: HTMLSpanElement) => {
this.picker = node;
}
2017-11-21 21:09:24 +08:00
renderFooter = (...args: any[]) => {
const { prefixCls, ranges, renderExtraFooter } = this.props;
if (!ranges && !renderExtraFooter) {
return null;
}
const customFooter = renderExtraFooter ? (
<div className={`${prefixCls}-footer-extra`} key="extra">
{renderExtraFooter(...args)}
</div>
) : null;
const operations = Object.keys(ranges || {}).map((range) => {
const value = ranges[range];
return (
<Tag
key={range}
color="blue"
onClick={() => this.handleRangeClick(value)}
onMouseEnter={() => this.setState({ hoverValue: value })}
onMouseLeave={this.handleRangeMouseLeave}
>
{range}
</Tag>
);
});
const rangeNode = (
<div className={`${prefixCls}-footer-extra ${prefixCls}-range-quick-selector`} key="range">
{operations}
</div>
);
return [rangeNode, customFooter];
}
2015-12-11 11:11:24 +08:00
render() {
const { state, props } = this;
const { value, showDate, hoverValue, open } = state;
const {
prefixCls, popupStyle, style,
disabledDate, disabledTime,
showTime, showToday,
ranges, onOk, locale, localeCode, format,
dateRender, onCalendarChange,
} = props;
fixLocale(value, localeCode);
fixLocale(showDate, localeCode);
warning(!('onOK' in props), 'It should be `RangePicker[onOk]`, instead of `onOK`!');
2015-12-11 11:11:24 +08:00
const calendarClassName = classNames({
[`${prefixCls}-time`]: showTime,
[`${prefixCls}-range-with-ranges`]: ranges,
});
// 需要选择时间时,点击 ok 时才触发 onChange
2016-02-18 19:15:23 +08:00
let pickerChangeHandler = {
onChange: this.handleChange,
};
let calendarProps: any = {
2016-02-18 19:15:23 +08:00
onOk: this.handleChange,
};
2016-03-30 10:52:15 +08:00
if (props.timePicker) {
pickerChangeHandler.onChange = changedValue => this.handleChange(changedValue);
2016-02-18 19:15:23 +08:00
} else {
calendarProps = {};
}
if ('mode' in props) {
calendarProps.mode = props.mode;
2016-02-18 19:15:23 +08:00
}
const startPlaceholder = ('placeholder' in props)
? props.placeholder[0] : locale.lang.rangePlaceholder[0];
const endPlaceholder = ('placeholder' in props)
? props.placeholder[1] : locale.lang.rangePlaceholder[1];
const calendar = (
2016-02-18 19:15:23 +08:00
<RangeCalendar
{...calendarProps}
onChange={onCalendarChange}
format={format}
prefixCls={prefixCls}
className={calendarClassName}
renderFooter={this.renderFooter}
2016-03-30 10:52:15 +08:00
timePicker={props.timePicker}
disabledDate={disabledDate}
disabledTime={disabledTime}
dateInputPlaceholder={[startPlaceholder, endPlaceholder]}
locale={locale.lang}
2016-02-02 17:49:44 +08:00
onOk={onOk}
dateRender={dateRender}
2017-07-12 15:15:21 +08:00
value={showDate}
onValueChange={this.handleShowDateChange}
hoverValue={hoverValue}
onHoverChange={this.handleHoverChange}
onPanelChange={props.onPanelChange}
2016-11-15 17:16:20 +08:00
showToday={showToday}
onInputSelect={this.handleCalendarInputSelect}
2016-02-18 19:15:23 +08:00
/>
);
2015-12-11 11:11:24 +08:00
2016-12-11 13:59:06 +08:00
// default width for showTime
const pickerStyle = {} as any;
if (props.showTime) {
pickerStyle.width = (style && style.width) || 350;
2016-12-11 13:59:06 +08:00
}
const clearIcon = (!props.disabled && props.allowClear && value && (value[0] || value[1])) ? (
<Icon
type="cross-circle"
className={`${prefixCls}-picker-clear`}
onClick={this.clearSelection}
/>
) : null;
2017-11-21 21:09:24 +08:00
const input = ({ value: inputValue }: { value: any }) => {
const start = inputValue[0];
const end = inputValue[1];
return (
2017-07-12 14:23:47 +08:00
<span className={props.pickerInputClass}>
<input
disabled={props.disabled}
2017-05-31 15:48:11 +08:00
readOnly
value={(start && start.format(props.format)) || ''}
placeholder={startPlaceholder}
className={`${prefixCls}-range-picker-input`}
tabIndex={-1}
/>
<span className={`${prefixCls}-range-picker-separator`}> ~ </span>
<input
disabled={props.disabled}
2017-05-31 15:48:11 +08:00
readOnly
value={(end && end.format(props.format)) || ''}
placeholder={endPlaceholder}
className={`${prefixCls}-range-picker-input`}
tabIndex={-1}
/>
{clearIcon}
<span className={`${prefixCls}-picker-icon`} />
</span>
);
};
2016-12-11 13:59:06 +08:00
return (
<span
ref={this.savePicker}
id={props.id}
className={classNames(props.className, props.pickerClass)}
style={{ ...style, ...pickerStyle }}
tabIndex={props.disabled ? -1 : 0}
onFocus={props.onFocus}
onBlur={props.onBlur}
>
2016-12-11 13:59:06 +08:00
<RcDatePicker
{...props}
{...pickerChangeHandler}
calendar={calendar}
value={value}
open={open}
2016-12-11 13:59:06 +08:00
onOpenChange={this.handleOpenChange}
prefixCls={`${prefixCls}-picker-container`}
style={popupStyle}
>
{input}
</RcDatePicker>
</span>
);
2015-12-11 11:11:24 +08:00
}
2016-03-31 20:42:35 +08:00
}