Improve typescript support

hernansartorio · May 16, 2020 · d2c507d · d2c507d
1 parent 04ae9dc
commit d2c507d
Showing 1 changed file with 60 additions and 32 deletions.
diff --git a/index.d.ts b/index.d.ts
@@ -2,58 +2,86 @@ declare module "react-nice-dates" {
   import * as React from "react";
   import * as Locale from "date-fns";
 
+  type DateChangeCallBack = (date: Date | null) => void;
+
+  interface InputProps {
+    ref: React.MutableRefObject<any>;
+    placeholder: string;
+    type: string;
+    value: string;
+    onBlur: () => void;
+    onChange: () => void;
+    onFocus: () => void;
+  }
+
+  type DefaultModifiers = 'disabled' | 'selected' | 'today';
+  type ModifierMatcher = (date: Date) => boolean;
+
   interface CommonProps {
     locale: Locale;
-    minimumDate?: Date | undefined;
-    maximumDate?: Date | undefined;
-    modifiers?: { [modifier: string]: () => void };
-    modifiersClassNames?: { [modifier: string]: string };
+    minimumDate?: Date;
+    maximumDate?: Date;
+    modifiers?: { [key in DefaultModifiers | string]: ModifierMatcher };
+    modifiersClassNames?: { [key in DefaultModifiers | string]: string };
     weekdayFormat?: string;
   }
 
   interface CalendarProps extends CommonProps {
-    month?: Date | undefined;
-    onMonthChange?: (month: Date | undefined) => void;
-    onDayHover?: (day: Date | undefined) => void;
-    onDayClick?: (day: Date | undefined) => void;
+    month?: Date;
+    onMonthChange?: DateChangeCallBack;
+    onDayHover?: DateChangeCallBack;
+    onDayClick?: DateChangeCallBack;
+  }
+
+  interface DatePickerChildrenProps {
+    inputProps: InputProps;
+    focused: boolean;
   }
 
   interface DatePickerProps extends CommonProps {
-    children: JSX.Element;
-    date?: Date | undefined;
-    onDateChange?: (date: Date | undefined) => void;
+    children: (props: DatePickerChildrenProps) => React.ReactNode;
+    date?: Date;
+    onDateChange?: DateChangeCallBack;
     format?: string;
   }
 
+  type DateRangeFocus = 'startDate' | 'endDate';
+
+  interface DateRangePickerChildrenProps {
+    startDateInputProps: InputProps;
+    endDateInputProps: InputProps;
+    focus: DateRangeFocus;
+  }
+
   interface DateRangePickerProps extends CommonProps {
-    children: JSX.Element;
-    startDate?: Date | undefined;
-    endDate?: Date | undefined;
-    minimumLength?: number | undefined;
-    maximumLength?: number | undefined;
-    onStartDateChange?: (date: Date | undefined) => void;
-    onEndDateChange?: (date: Date | undefined) => void;
+    children: (props: DateRangePickerChildrenProps) => React.ReactNode;
+    startDate?: Date;
+    endDate?: Date;
+    minimumLength?: number;
+    maximumLength?: number;
+    onStartDateChange?: DateChangeCallBack;
+    onEndDateChange?: DateChangeCallBack;
     format?: string;
   }
 
   interface DatePickerCalendarProps extends CommonProps {
-    date?: Date | undefined;
-    month?: Date | undefined;
-    onDateChange?: (date: Date | undefined) => void;
-    onMonthChange?: (month: Date | undefined) => void;
+    date?: Date;
+    month?: Date;
+    onDateChange?: DateChangeCallBack;
+    onMonthChange?: DateChangeCallBack;
   }
 
   interface DateRangePickerCalendarProps extends CommonProps {
-    startDate?: Date | undefined;
-    endDate?: Date | undefined;
-    focus?: "startDate, endDate";
-    month?: Date | undefined;
-    minimumLength?: number | undefined;
-    maximumLength?: number | undefined;
-    onFocusChange: (focus: "startDate" | "endDate") => void;
-    onStartDateChange: (date: Date | undefined) => void;
-    onEndDateChange: (date: Date | undefined) => void;
-    onMonthChange?: (date: Date | undefined) => void;
+    startDate?: Date;
+    endDate?: Date;
+    focus?: DateRangeFocus;
+    month?: Date;
+    minimumLength?: number;
+    maximumLength?: number;
+    onFocusChange?: (focus: DateRangeFocus) => void;
+    onStartDateChange?: DateChangeCallBack;
+    onEndDateChange?: DateChangeCallBack;
+    onMonthChange?: DateChangeCallBack;
   }
 
   export function Calendar(props: CalendarProps): JSX.Element;