React-Calendar types : add Navigation types (DefinitelyTyped#58864)

* add types for Navigation in prevision of exporting Navigation from 'react-calendar' module * update react-calendar version * fix test
smor · Mar 2, 2022 · fb0f14b · fb0f14b
1 parent 077d931
commit fb0f14b
Showing 1 changed file with 47 additions and 13 deletions.
diff --git a/types/react-calendar/index.d.ts b/types/react-calendar/index.d.ts
@@ -1,13 +1,13 @@
-// Type definitions for react-calendar 3.4
+// Type definitions for react-calendar 3.5
 // Project: https://github.com/wojtekmaj/react-calendar
 // Definitions by: Stéphane Saquet <https://github.com/Guymestef>
 //                 Katie Soldau <https://github.com/ksoldau>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 3.5
 
-import { MouseEvent, ChangeEvent, MutableRefObject, RefObject } from 'react';
+import { ReactNode, MouseEvent, ChangeEvent, MutableRefObject, RefObject } from 'react';
 
-export type CalendarType = "ISO 8601" | 'US' | 'Arabic' | 'Hebrew';
+export type CalendarType = 'ISO 8601' | 'US' | 'Arabic' | 'Hebrew';
 export type Detail = 'month' | 'year' | 'decade' | 'century';
 export type DateCallback = (value: Date, event: MouseEvent<HTMLButtonElement>) => void;
 export type ClickWeekNumberCallback = (weekNumber: number, date: Date, event: MouseEvent<HTMLButtonElement>) => void;
@@ -34,21 +34,20 @@ export interface CalendarProps {
     formatMonthYear?: FormatterCallback | undefined;
     formatShortWeekday?: FormatterCallback | undefined;
     formatYear?: FormatterCallback | undefined;
-    inputRef?: ((
-        ref: HTMLInputElement | null,
-    ) => void) | RefObject<HTMLInputElement> | MutableRefObject<HTMLInputElement | null> | undefined;
+    inputRef?:
+        | ((ref: HTMLInputElement | null) => void)
+        | RefObject<HTMLInputElement>
+        | MutableRefObject<HTMLInputElement | null>
+        | undefined;
     locale?: string | undefined;
     maxDate?: Date | undefined;
     maxDetail?: Detail | undefined;
     minDate?: Date | undefined;
     minDetail?: Detail | undefined;
     navigationAriaLabel?: string | undefined;
-    navigationLabel?: ((props: {
-        date: Date;
-        label: string;
-        locale: string;
-        view: Detail;
-    }) => string | JSX.Element | null) | undefined;
+    navigationLabel?:
+        | ((props: { date: Date; label: string; locale: string; view: Detail }) => string | JSX.Element | null)
+        | undefined;
     nextAriaLabel?: string | undefined;
     nextLabel?: string | JSX.Element | null | undefined;
     next2AriaLabel?: string | undefined;
@@ -67,7 +66,7 @@ export interface CalendarProps {
     prevLabel?: string | JSX.Element | null | undefined;
     prev2AriaLabel?: string | undefined;
     prev2Label?: string | JSX.Element | null | undefined;
-    returnValue?: "start" | "end" | "range" | undefined;
+    returnValue?: 'start' | 'end' | 'range' | undefined;
     showDoubleView?: boolean | undefined;
     showFixedNumberOfWeeks?: boolean | undefined;
     showNavigation?: boolean | undefined;
@@ -103,6 +102,7 @@ export function MonthView(props: DetailViewProps): JSX.Element;
 export function YearView(props: DetailViewProps): JSX.Element;
 export function DecadeView(props: DetailViewProps): JSX.Element;
 export function CenturyView(props: DetailViewProps): JSX.Element;
+export function Navigation(props: NavigationProps): JSX.Element;
 
 export interface DetailViewProps {
     activeStartDate: Date;
@@ -119,3 +119,37 @@ export interface DetailViewProps {
     tileDisabled?: ((props: CalendarTileProperties) => boolean) | undefined;
     value?: Date | Date[] | undefined;
 }
+
+export type ViewType = 'century' | 'decade' | 'year' | 'month';
+
+export interface NavigationLabelType {
+    date: Date;
+    label: string;
+    locale: string;
+    view: ViewType;
+}
+
+export interface NavigationProps {
+    activeStartDate: Date;
+    drillUp: () => void;
+    formatMonthYear?: (locale: string, date: Date) => void;
+    formatYear?: (locale: string, date: Date) => void;
+    locale?: string;
+    maxDate?: Date;
+    minDate?: Date;
+    navigationAriaLabel?: ReactNode;
+    navigationAriaLive?: ReactNode;
+    navigationLabel?: (props: NavigationLabelType) => string;
+    next2AriaLabel?: string;
+    next2Label?: ReactNode;
+    nextAriaLabel?: string;
+    nextLabel?: ReactNode;
+    prev2AriaLabel?: string;
+    prev2Label?: ReactNode;
+    prevAriaLabel?: ReactNode;
+    prevLabel?: ReactNode;
+    setActiveStartDate: (activeStartDate: Date) => void;
+    showDoubleView?: boolean;
+    view: ViewType;
+    views: ViewType[];
+}