Improve type accuracy for value prop and all callbacks

wojtekmaj · Apr 5, 2023 · 4246ea1 · 4246ea1
1 parent d0e4a3d
commit 4246ea1
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/src/DateRangePicker.spec.tsx b/src/DateRangePicker.spec.tsx
@@ -666,7 +666,7 @@ describe('DateRangePicker', () => {
       const onChange = vi.fn();
       const valueFrom = new Date(2018, 0, 1);
       const valueTo = new Date(2018, 6, 1);
-      const value = [valueFrom, valueTo];
+      const value = [valueFrom, valueTo] as [Date, Date];
 
       const { container } = render(<DateRangePicker onChange={onChange} value={value} />);
 
@@ -760,7 +760,7 @@ describe('DateRangePicker', () => {
       const onChange = vi.fn();
       const valueFrom = new Date(2018, 0, 1);
       const valueTo = new Date(2018, 6, 1);
-      const value = [valueFrom, valueTo];
+      const value = [valueFrom, valueTo] as [Date, Date];
 
       const { container } = render(<DateRangePicker onChange={onChange} value={value} />);
 

diff --git a/src/DateRangePicker.tsx b/src/DateRangePicker.tsx
@@ -10,7 +10,7 @@ import DateInput from 'react-date-picker/dist/cjs/DateInput';
 
 import { isMaxDate, isMinDate } from './shared/propTypes';
 
-import type { ClassName, Detail, LooseValue } from './shared/types';
+import type { ClassName, Detail, LooseValue, Value } from './shared/types';
 
 const baseClassName = 'react-daterange-picker';
 const outsideActionEvents = ['mousedown', 'focusin', 'touchstart'];
@@ -77,7 +77,7 @@ type DateRangePickerProps = {
   nativeInputAriaLabel?: string;
   onCalendarClose?: () => void;
   onCalendarOpen?: () => void;
-  onChange?: (value: Date | null | (Date | null)[]) => void;
+  onChange?: (value: Value) => void;
   onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
   openCalendarOnFocus?: boolean;
   portalContainer?: HTMLElement;

diff --git a/src/shared/types.ts b/src/shared/types.ts
@@ -2,6 +2,12 @@ export type ClassName = string | null | undefined | (string | null | undefined)[
 
 export type Detail = 'century' | 'decade' | 'year' | 'month';
 
-export type LooseValue = string | Date | null | (string | Date | null)[];
+type LooseValuePiece = string | Date | null;
+
+export type LooseValue = LooseValuePiece | [LooseValuePiece, LooseValuePiece];
 
 export type RangeType = 'century' | 'decade' | 'year' | 'month' | 'day';
+
+type ValuePiece = Date | null;
+
+export type Value = ValuePiece | ValuePiece[]; // TODO: Change to [ValuePiece, ValuePiece];