diff --git a/components/date-picker/RangePicker.tsx b/components/date-picker/RangePicker.tsx index 703522308e..e2f257e29b 100644 --- a/components/date-picker/RangePicker.tsx +++ b/components/date-picker/RangePicker.tsx @@ -33,7 +33,7 @@ function pickerValueAdapter(value?: moment.Moment | moment.Moment[]): moment.Mom export default class RangePicker extends React.Component { static contextTypes = { - antLocale: PropTypes.object, + antLocale: PropTypes.object, }; static defaultProps = { prefixCls: 'ant-calendar', @@ -56,6 +56,7 @@ export default class RangePicker extends React.Component { this.state = { value, open: props.open, + hoverValue: [], }; } @@ -78,6 +79,8 @@ export default class RangePicker extends React.Component { this.handleChange([]); } + clearHoverValue = () => this.setState({ hoverValue: [] }); + handleChange = (value: moment.Moment[]) => { const props = this.props; if (!('value' in props)) { @@ -100,6 +103,8 @@ export default class RangePicker extends React.Component { handleShowDateChange = showDate => this.setState({ showDate }); + handleHoverChange = hoverValue => this.setState({ hoverValue }); + setValue(value) { this.handleChange(value); if (!this.props.showTime) { @@ -115,7 +120,16 @@ export default class RangePicker extends React.Component { const operations = Object.keys(ranges).map((range) => { const value = ranges[range]; - return this.setValue(value)}>{range}; + return ( + this.setValue(value)} + onMouseEnter={() => this.setState({ hoverValue: value })} + onMouseLeave={this.clearHoverValue} + > + {range} + + ); }); return (
@@ -126,7 +140,7 @@ export default class RangePicker extends React.Component { render() { const { state, props, context } = this; - const { value, showDate, open } = state; + const { value, showDate, hoverValue, open } = state; const localeCode = getLocaleCode(context); if (value && localeCode) { if (value[0]) { @@ -138,9 +152,10 @@ export default class RangePicker extends React.Component { } const { - disabledDate, disabledTime, showTime, showToday, - ranges, prefixCls, popupStyle, - style, onOk, locale, format, + prefixCls, popupStyle, style, + disabledDate, disabledTime, + showTime, showToday, + ranges, onOk, locale, format, } = props; warning(!('onOK' in props), 'It should be `RangePicker[onOk]`, instead of `onOK`!'); @@ -182,6 +197,8 @@ export default class RangePicker extends React.Component { onOk={onOk} value={showDate || pickerValueAdapter(props.defaultPickerValue) || pickerValueAdapter(moment())} onValueChange={this.handleShowDateChange} + hoverValue={hoverValue} + onHoverChange={this.handleHoverChange} showToday={showToday} /> ); diff --git a/components/date-picker/__tests__/RangePicker.test.js b/components/date-picker/__tests__/RangePicker.test.js index e6a518f4ae..7411bc2c0e 100644 --- a/components/date-picker/__tests__/RangePicker.test.js +++ b/components/date-picker/__tests__/RangePicker.test.js @@ -41,6 +41,25 @@ describe('RangePicker', () => { .toMatchSnapshot(); }); + it('highlight range when hover presetted range', () => { + const wrapper = mount( + trigger} + format="YYYY/MM/DD" + open + /> + ); + + let rangeCalendarWrapper = mount(wrapper.find('Trigger').node.getComponent()); + rangeCalendarWrapper.find('.ant-calendar-range-quick-selector a') + .simulate('mouseEnter'); + rangeCalendarWrapper = mount(wrapper.find('Trigger').node.getComponent()); + expect(rangeCalendarWrapper.find('.ant-calendar-selected-day').length).toBe(2); + }); + // issue: https://github.com/ant-design/ant-design/issues/5872 it('should not throw error when value is reset to `[]`', () => { const birthday = moment('2000-01-01', 'YYYY-MM-DD'); diff --git a/components/date-picker/__tests__/showTime.test.js b/components/date-picker/__tests__/showTime.test.js index f8a2752c41..dc60a4608c 100644 --- a/components/date-picker/__tests__/showTime.test.js +++ b/components/date-picker/__tests__/showTime.test.js @@ -65,11 +65,13 @@ describe('RangePicker with showTime', () => { ); - const calendarWrapper = mount(wrapper.find('Trigger').node.getComponent()); + let calendarWrapper = mount(wrapper.find('Trigger').node.getComponent()); expect(calendarWrapper.find('.ant-calendar-time-picker-btn').hasClass('ant-calendar-time-picker-btn-disabled')).toBe(true); expect(calendarWrapper.find('.ant-calendar-ok-btn').hasClass('ant-calendar-ok-btn-disabled')).toBe(true); calendarWrapper.find('.ant-calendar-date').at(10).simulate('click'); + calendarWrapper = mount(wrapper.find('Trigger').node.getComponent()); // !!! TODO: calendarWrapper cannot get the latest state from wrapper calendarWrapper.find('.ant-calendar-date').at(11).simulate('click'); + calendarWrapper = mount(wrapper.find('Trigger').node.getComponent()); // !!! expect(calendarWrapper.find('.ant-calendar-time-picker-btn').hasClass('ant-calendar-time-picker-btn-disabled')).toBe(false); expect(calendarWrapper.find('.ant-calendar-ok-btn').hasClass('ant-calendar-ok-btn-disabled')).toBe(false); expect(onChangeFn).toHaveBeenCalled(); @@ -84,9 +86,11 @@ describe('RangePicker with showTime', () => { ); - const calendarWrapper = mount(wrapper.find('Trigger').node.getComponent()); + let calendarWrapper = mount(wrapper.find('Trigger').node.getComponent()); calendarWrapper.find('.ant-calendar-date').at(10).simulate('click'); + calendarWrapper = mount(wrapper.find('Trigger').node.getComponent()); // !!! calendarWrapper.find('.ant-calendar-date').at(11).simulate('click'); + calendarWrapper = mount(wrapper.find('Trigger').node.getComponent()); // !!! onChangeFn.mockClear(); calendarWrapper.find('.ant-calendar-ok-btn').simulate('click'); expect(onOkFn).toHaveBeenCalled(); diff --git a/package.json b/package.json index 6749d990d4..26547543e4 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,7 @@ "omit.js": "^0.1.0", "prop-types": "^15.5.7", "rc-animate": "~2.3.0", - "rc-calendar": "~8.2.0", + "rc-calendar": "~8.3.0", "rc-cascader": "~0.11.0", "rc-checkbox": "~2.0.0", "rc-collapse": "~1.7.0",