mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 05:05:48 +08:00
Code Issues Actions 43 Packages Projects Releases Wiki Activity

chore: improve ux of RangeCalendar, close: #4985

Browse Source
This commit is contained in:
Benjy Cui 2017-04-07 17:15:21 +08:00
parent 07e2c5e9c5
commit 360a657264
2 changed files with 25 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
components/date-picker/RangePicker.tsx
View File

@ -8,6 +8,24 @@ import Icon from '../icon';
import { getLocaleCode } from '../_util/getLocale'; import { getLocaleCode } from '../_util/getLocale';
import warning from '../_util/warning'; import warning from '../_util/warning';
function getShowDateFromValue(value: moment.Moment[]): moment.Moment[] {
const [ start, end ] = value;
const newEnd = end && end.isSame(start, 'month') ? end.clone().add(1, 'month') : end;
return [start, newEnd];
}
function formatValue(value: moment.Moment | undefined, format: string): string {
return (value && value.format(format)) || '';
}
function pickerValueAdapter(value?: moment.Moment | moment.Moment[]): moment.Moment[] | undefined {
if (!value) { return; }
if (Array.isArray(value)) {
return value;
}
return [value, value.clone().add(1, 'month')];
}
export default class RangePicker extends React.Component<any, any> { export default class RangePicker extends React.Component<any, any> {
static contextTypes = { static contextTypes = {
antLocale: React.PropTypes.object, antLocale: React.PropTypes.object,
@ -39,8 +57,7 @@ export default class RangePicker extends React.Component<any, any> {
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if ('value' in nextProps) { if ('value' in nextProps) {
const value = nextProps.value || []; const value = nextProps.value || [];
const showDate = value[0]; this.setState({ value, showDate: getShowDateFromValue(value) });
this.setState({ value, showDate });
} }
if ('open' in nextProps) { if ('open' in nextProps) {
this.setState({ this.setState({
@ -56,14 +73,14 @@ export default class RangePicker extends React.Component<any, any> {
this.handleChange([]); this.handleChange([]);
} }
handleChange = (value) => { handleChange = (value: moment.Moment[]) => {
const props = this.props; const props = this.props;
if (!('value' in props)) { if (!('value' in props)) {
this.setState({ value, showDate: value[0] }); this.setState({ value, showDate: getShowDateFromValue(value) });
} }
props.onChange(value, [ props.onChange(value, [
(value[0] && value[0].format(props.format)) || '', formatValue(value[0], props.format),
(value[1] && value[1].format(props.format)) || '', formatValue(value[1], props.format),
]); ]);
} }
@ -158,7 +175,7 @@ export default class RangePicker extends React.Component<any, any> {
dateInputPlaceholder={[startPlaceholder, endPlaceholder]} dateInputPlaceholder={[startPlaceholder, endPlaceholder]}
locale={locale.lang} locale={locale.lang}
onOk={onOk} onOk={onOk}
value={showDate || props.defaultPickerValue || moment()} value={showDate || pickerValueAdapter(props.defaultPickerValue) || pickerValueAdapter(moment())}
onValueChange={this.handleShowDateChange} onValueChange={this.handleShowDateChange}
showToday={showToday} showToday={showToday}
/> />

2
package.json
View File

@ -43,7 +43,7 @@
"object-assign": "~4.1.0", "object-assign": "~4.1.0",
"omit.js": "^0.1.0", "omit.js": "^0.1.0",
"rc-animate": "~2.3.0", "rc-animate": "~2.3.0",
"rc-calendar": "~7.8.0", "rc-calendar": "~8.0.0",
"rc-cascader": "~0.11.0", "rc-cascader": "~0.11.0",
"rc-checkbox": "~1.5.0", "rc-checkbox": "~1.5.0",
"rc-collapse": "~1.6.4", "rc-collapse": "~1.6.4",