fix: min/maxDate should also blocked by typing (#802)

* test: test driven * fix: not exceed boundary
react-component · Apr 23, 2024 · c4ffe36 · c4ffe36
1 parent 90f8619
commit c4ffe36
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 35 deletions.
diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx
@@ -45,10 +45,20 @@ const dateFnsSharedLocale = {
 export default () => {
   return (
     <div>
-      {/* <RangePicker {...sharedLocale} style={{ width: 400 }} showTime />
-      <RangePicker {...sharedLocale} style={{ width: 400 }} showTime showMinute={false} /> */}
-      <SinglePicker {...dateFnsSharedLocale} style={{ width: 400 }} multiple placeholder="good" />
-      <SinglePicker {...dateFnsSharedLocale} style={{ width: 400 }} placeholder="good" />
+      <input defaultValue="2000-01-01" />
+      <RangePicker
+        {...sharedLocale}
+        style={{ width: 400 }}
+        onChange={(val) => console.error('>>>>>>>', val)}
+      />
+      {/* <RangePicker {...sharedLocale} style={{ width: 400 }} showTime showMinute={false} /> */}
+      {/* <SinglePicker {...dateFnsSharedLocale} style={{ width: 400 }} multiple placeholder="good" /> */}
+      <SinglePicker
+        {...sharedLocale}
+        style={{ width: 400 }}
+        minDate={dayjs()}
+        onChange={(val) => console.error('>>>>>>>', val)}
+      />
     </div>
   );
 };
diff --git a/src/PickerInput/hooks/useDisabledBoundary.ts b/src/PickerInput/hooks/useDisabledBoundary.ts
@@ -43,35 +43,5 @@ export default function useDisabledBoundary<DateType extends object = any>(
     return false;
   });
 
-  // const isInValidBoundary: IsInvalidBoundary<DateType> = (date, type, from) => {
-  //   const toBoundaryDate = (boundary?: LimitDate<DateType>) =>
-  //     typeof boundary === 'function'
-  //       ? boundary({
-  //           from,
-  //         })
-  //       : boundary;
-
-  //   const mergedMinDate = toBoundaryDate(minDate);
-  //   const mergedMaxDate = toBoundaryDate(maxDate);
-
-  //   if (
-  //     mergedMinDate &&
-  //     generateConfig.isAfter(mergedMinDate, date) &&
-  //     !isSame(generateConfig, locale, mergedMinDate, date, type)
-  //   ) {
-  //     return true;
-  //   }
-
-  //   if (
-  //     mergedMaxDate &&
-  //     generateConfig.isAfter(date, mergedMaxDate) &&
-  //     !isSame(generateConfig, locale, mergedMaxDate, date, type)
-  //   ) {
-  //     return true;
-  //   }
-
-  //   return false;
-  // };
-
   return mergedDisabledDate;
 }
diff --git a/src/PickerInput/hooks/useFilledProps.ts b/src/PickerInput/hooks/useFilledProps.ts
@@ -198,7 +198,12 @@ export default function useFilledProps<
   );
 
   // ====================== Invalidate ======================
-  const isInvalidateDate = useInvalidate(generateConfig, picker, disabledDate, mergedShowTime);
+  const isInvalidateDate = useInvalidate(
+    generateConfig,
+    picker,
+    disabledBoundaryDate,
+    mergedShowTime,
+  );
 
   // ======================== Merged ========================
   const mergedProps = React.useMemo(

diff --git a/tests/new-range.spec.tsx b/tests/new-range.spec.tsx
@@ -9,6 +9,7 @@ import type { RangePickerProps } from '../src';
 import zh_CN from '../src/locale/zh_CN';
 import {
   closePicker,
+  DayPicker,
   DayRangePicker,
   findCell,
   getDay,
@@ -1212,6 +1213,36 @@ describe('NewPicker.Range', () => {
       openPicker(container);
       expect(document.querySelector('.rc-picker-header-view').textContent).toBe('1990年8月');
     });
+
+    it('typing should not exceed boundary', () => {
+      const onChange = jest.fn();
+      const { container } = render(
+        <DayPicker minDate={getDay('2024-01-01')} onChange={onChange} />,
+      );
+      const inputEle = container.querySelector('input');
+
+      // Out of range
+      fireEvent.change(inputEle, {
+        target: {
+          value: '2000-01-01',
+        },
+      });
+      fireEvent.keyDown(inputEle, {
+        key: 'Enter',
+      });
+      expect(onChange).not.toHaveBeenCalled();
+
+      // In range
+      fireEvent.change(inputEle, {
+        target: {
+          value: '2024-03-03',
+        },
+      });
+      fireEvent.keyDown(inputEle, {
+        key: 'Enter',
+      });
+      expect(onChange).toHaveBeenCalled();
+    });
   });
 
   it('double click now button', () => {