Add onSelect callback for range picker (#93)

* Add support for onSelect callback for RangePicker

* Correctly escape character in markdown

* Fix incorrect markdown separation

* Update onCalendarChange parameters instead of adding onSelect callback.

* Update onCalendarChange parameters instead of adding onSelect callback.

* Fix type of info

* Refactor info type and simplify change logic

Co-authored-by: Kim-Wing-Fung <[email protected]>

Author: Kim-Wing-Fung

README.md

@@ -129,7 +129,7 @@ render(<Picker />, 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 |
 

src/RangePicker.tsx

@@ -62,12 +62,16 @@ function canValueTrigger<DateType>(
   return false;
 }
 
+export type RangeType = 'start' | 'end';
+
+export interface RangeInfo {
+  range: RangeType;
+}
+
 export type RangeDateRender<DateType> = (
   currentDate: DateType,
   today: DateType,
-  info: {
-    range: 'start' | 'end';
-  },
+  info: RangeInfo,
 ) => React.ReactNode;
 
 export interface RangePickerSharedProps<DateType> {
@@ -77,7 +81,7 @@ export interface RangePickerSharedProps<DateType> {
   defaultPickerValue?: [DateType, DateType];
   placeholder?: [string, string];
   disabled?: boolean | [boolean, boolean];
-  disabledTime?: (date: EventValue<DateType>, type: 'start' | 'end') => DisabledTimes;
+  disabledTime?: (date: EventValue<DateType>, type: RangeType) => DisabledTimes;
   ranges?: Record<
     string,
     Exclude<RangeValue<DateType>, null> | (() => Exclude<RangeValue<DateType>, null>)
@@ -86,7 +90,11 @@ export interface RangePickerSharedProps<DateType> {
   allowEmpty?: [boolean, boolean];
   mode?: [PanelMode, PanelMode];
   onChange?: (values: RangeValue<DateType>, formatString: [string, string]) => void;
-  onCalendarChange?: (values: RangeValue<DateType>, formatString: [string, string]) => void;
+  onCalendarChange?: (
+    values: RangeValue<DateType>,
+    formatString: [string, string],
+    info: RangeInfo,
+  ) => void;
   onPanelChange?: (values: RangeValue<DateType>, modes: [PanelMode, PanelMode]) => void;
   onFocus?: React.FocusEventHandler<HTMLInputElement>;
   onBlur?: React.FocusEventHandler<HTMLInputElement>;
@@ -436,7 +444,9 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
         : '';
 
     if (onCalendarChange) {
-      onCalendarChange(values, [startStr, endStr]);
+      const info: RangeInfo = { range: sourceIndex === 0 ? 'start' : 'end' };
+
+      onCalendarChange(values, [startStr, endStr], info);
     }
 
     // >>>>> Trigger `onChange` event

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(<MomentRangePicker open panelRender={() => <h1>Light</h1>} />);
     expect(wrapper.render()).toMatchSnapshot();
   });
+
+  describe('Selection callbacks', () => {
+    it('selection provide info for onCalendarChange', () => {
+      const onCalendarChange = jest.fn();
+
+      const wrapper = mount(<MomentRangePicker onCalendarChange={onCalendarChange} />);
+
+      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' },
+      );
+    });
+  });
 });