fix: Start can not after end (#95)

* fix: Start can not after end

* more test case

Author: zombieJ

src/RangePicker.tsx

@@ -387,7 +387,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
 
   function triggerChange(newValue: RangeValue<DateType>, sourceIndex: 0 | 1) {
     let values = newValue;
-    const startValue = getValue(values, 0);
+    let startValue = getValue(values, 0);
     let endValue = getValue(values, 1);
 
     // >>>>> Format start & end values
@@ -404,11 +404,18 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
           !isSameDate(generateConfig, startValue, endValue))
       ) {
         // Clean up end date when start date is after end date
-        values = [startValue, null];
-        endValue = null;
+        if (sourceIndex === 0) {
+          values = [startValue, null];
+          endValue = null;
+        } else {
+          startValue = null;
+          values = [null, endValue];
+        }
 
         // Clean up cache since invalidate
-        openRecordsRef.current = {};
+        openRecordsRef.current = {
+          [sourceIndex]: true,
+        };
       } else if (picker !== 'time' || order !== false) {
         // Reorder when in same date
         values = reorderValues(values, generateConfig);
@@ -954,7 +961,6 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
 
     if (type === 'submit' || (type !== 'key' && !needConfirmButton)) {
       // triggerChange will also update selected values
-      // triggerChangeOld(values);
       triggerChange(values, mergedActivePickerIndex);
     } else {
       setSelectedValue(values);

tests/range.spec.tsx

@@ -1247,19 +1247,36 @@ describe('Picker.Range', () => {
       expect(wrapper.isOpen()).toBeFalsy();
     });
 
-    it('valued: start -> end -> close', () => {
-      const wrapper = mount(
-        <MomentRangePicker defaultValue={[getMoment('1989-01-01'), getMoment('1990-01-01')]} />,
-      );
+    describe('valued: start -> end -> close', () => {
+      it('in range', () => {
+        const wrapper = mount(
+          <MomentRangePicker defaultValue={[getMoment('1989-01-01'), getMoment('1990-01-01')]} />,
+        );
 
-      wrapper.openPicker(0);
-      wrapper.inputValue('1990-11-28');
-      wrapper.closePicker(0);
-      expect(wrapper.isOpen()).toBeTruthy();
+        wrapper.openPicker(0);
+        wrapper.inputValue('1990-11-28');
+        wrapper.closePicker(0);
+        expect(wrapper.isOpen()).toBeTruthy();
 
-      wrapper.inputValue('1990-12-23');
-      wrapper.closePicker(1);
-      expect(wrapper.isOpen()).toBeFalsy();
+        wrapper.inputValue('1990-12-23');
+        wrapper.closePicker(1);
+        expect(wrapper.isOpen()).toBeFalsy();
+      });
+
+      it('new start is after end', () => {
+        const wrapper = mount(
+          <MomentRangePicker defaultValue={[getMoment('1989-01-10'), getMoment('1989-01-15')]} />,
+        );
+
+        wrapper.openPicker(0);
+        wrapper.inputValue('1989-01-20');
+        wrapper.closePicker(0);
+        expect(wrapper.isOpen()).toBeTruthy();
+
+        wrapper.inputValue('1989-01-25');
+        wrapper.closePicker(1);
+        expect(wrapper.isOpen()).toBeFalsy();
+      });
     });
 
     it('empty: end -> start -> close', () => {
@@ -1275,19 +1292,36 @@ describe('Picker.Range', () => {
       expect(wrapper.isOpen()).toBeFalsy();
     });
 
-    it('valued: end -> start -> close', () => {
-      const wrapper = mount(
-        <MomentRangePicker defaultValue={[getMoment('1989-01-01'), getMoment('1990-01-01')]} />,
-      );
+    describe('valued: end -> start -> close', () => {
+      it('in range', () => {
+        const wrapper = mount(
+          <MomentRangePicker defaultValue={[getMoment('1989-01-01'), getMoment('1990-01-01')]} />,
+        );
 
-      wrapper.openPicker(1);
-      wrapper.inputValue('1990-11-28', 1);
-      wrapper.closePicker(1);
-      expect(wrapper.isOpen()).toBeTruthy();
+        wrapper.openPicker(1);
+        wrapper.inputValue('1990-11-28', 1);
+        wrapper.closePicker(1);
+        expect(wrapper.isOpen()).toBeTruthy();
 
-      wrapper.inputValue('1989-01-01');
-      wrapper.closePicker(0);
-      expect(wrapper.isOpen()).toBeFalsy();
+        wrapper.inputValue('1989-01-01');
+        wrapper.closePicker(0);
+        expect(wrapper.isOpen()).toBeFalsy();
+      });
+
+      it('new end is before start', () => {
+        const wrapper = mount(
+          <MomentRangePicker defaultValue={[getMoment('1989-01-10'), getMoment('1989-01-15')]} />,
+        );
+
+        wrapper.openPicker(1);
+        wrapper.inputValue('1989-01-07', 1);
+        wrapper.closePicker(1);
+        expect(wrapper.isOpen()).toBeTruthy();
+
+        wrapper.inputValue('1989-01-01');
+        wrapper.closePicker(0);
+        expect(wrapper.isOpen()).toBeFalsy();
+      });
     });
 
     it('not change: start not to end', () => {