diff --git a/README.md b/README.md index 79eed2bce..6a071668d 100644 --- a/README.md +++ b/README.md @@ -129,7 +129,7 @@ render(, mountNode); | selectable | [Boolean, Boolean] | | whether to selected picker | | disabled | Boolean | false | whether the range picker is disabled | | onChange | Function(value:[moment], formatString: [string, string]) | | a callback function, can be executed when the selected time is changing | -| onCalendarChange | Function(value:[moment], formatString: [string, string]) | | a callback function, can be executed when the start time or the end time of the range is changing | +| onCalendarChange | Function(value:[moment], formatString: [string, string], info: { range:'start'\|'end' }) | | a callback function, can be executed when the start time or the end time of the range is changing | | direction | String: ltr or rtl | | Layout direction of picker component, it supports RTL direction too. | | order | Boolean | true | (TimeRangePicker only) `false` to disable auto order | diff --git a/src/RangePicker.tsx b/src/RangePicker.tsx index 19378e8e4..3b232da18 100644 --- a/src/RangePicker.tsx +++ b/src/RangePicker.tsx @@ -62,12 +62,16 @@ function canValueTrigger( return false; } +export type RangeType = 'start' | 'end'; + +export interface RangeInfo { + range: RangeType; +} + export type RangeDateRender = ( currentDate: DateType, today: DateType, - info: { - range: 'start' | 'end'; - }, + info: RangeInfo, ) => React.ReactNode; export interface RangePickerSharedProps { @@ -77,7 +81,7 @@ export interface RangePickerSharedProps { defaultPickerValue?: [DateType, DateType]; placeholder?: [string, string]; disabled?: boolean | [boolean, boolean]; - disabledTime?: (date: EventValue, type: 'start' | 'end') => DisabledTimes; + disabledTime?: (date: EventValue, type: RangeType) => DisabledTimes; ranges?: Record< string, Exclude, null> | (() => Exclude, null>) @@ -86,7 +90,11 @@ export interface RangePickerSharedProps { allowEmpty?: [boolean, boolean]; mode?: [PanelMode, PanelMode]; onChange?: (values: RangeValue, formatString: [string, string]) => void; - onCalendarChange?: (values: RangeValue, formatString: [string, string]) => void; + onCalendarChange?: ( + values: RangeValue, + formatString: [string, string], + info: RangeInfo, + ) => void; onPanelChange?: (values: RangeValue, modes: [PanelMode, PanelMode]) => void; onFocus?: React.FocusEventHandler; onBlur?: React.FocusEventHandler; @@ -436,7 +444,9 @@ function InnerRangePicker(props: RangePickerProps) { : ''; if (onCalendarChange) { - onCalendarChange(values, [startStr, endStr]); + const info: RangeInfo = { range: sourceIndex === 0 ? 'start' : 'end' }; + + onCalendarChange(values, [startStr, endStr], info); } // >>>>> Trigger `onChange` event diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx index bec2bd7b9..78919ce47 100644 --- a/tests/range.spec.tsx +++ b/tests/range.spec.tsx @@ -843,14 +843,29 @@ describe('Picker.Range', () => { // Not trigger when not value expect(wrapper.find('.rc-picker-ok button').props().disabled).toBeTruthy(); + expect(onCalendarChange).not.toHaveBeenCalled(); - // Trigger when valued + // Trigger when start Ok'd onCalendarChange.mockReset(); wrapper.selectCell(11); + expect(onCalendarChange).not.toHaveBeenCalled(); wrapper.find('.rc-picker-ok button').simulate('click'); expect(onCalendarChange).toHaveBeenCalledWith( [expect.anything(), null], ['1990-09-11 00:00:00', ''], + { range: 'start' }, + ); + expect(onOk).toHaveBeenCalled(); + + // Trigger when end Ok'd + onCalendarChange.mockReset(); + wrapper.selectCell(23); + expect(onCalendarChange).not.toHaveBeenCalled(); + wrapper.find('.rc-picker-ok button').simulate('click'); + expect(onCalendarChange).toHaveBeenCalledWith( + [expect.anything(), expect.anything()], + ['1990-09-11 00:00:00', '1990-09-23 00:00:00'], + { range: 'end' }, ); expect(onOk).toHaveBeenCalled(); }); @@ -1387,4 +1402,28 @@ describe('Picker.Range', () => { const wrapper = mount(

Light

} />); expect(wrapper.render()).toMatchSnapshot(); }); + + describe('Selection callbacks', () => { + it('selection provide info for onCalendarChange', () => { + const onCalendarChange = jest.fn(); + + const wrapper = mount(); + + wrapper.openPicker(); + + // Start date + wrapper.selectCell(11); + expect(onCalendarChange).toHaveBeenCalledWith([expect.anything(), null], ['1990-09-11', ''], { + range: 'start', + }); + + // End date + wrapper.selectCell(23); + expect(onCalendarChange).toHaveBeenCalledWith( + [expect.anything(), expect.anything()], + ['1990-09-11', '1990-09-23'], + { range: 'end' }, + ); + }); + }); });