[react-calendar] Init typings (#43540)

Co-authored-by: Stéphane Saquet <stephane.saquet@wadane.com>

types/react-calendar/index.d.ts

@@ -0,0 +1,91 @@
+// Type definitions for react-calendar 3.0
+// Project: https://github.com/wojtekmaj/react-calendar
+// Definitions by: Stéphane Saquet <https://github.com/Guymestef>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 3.5
+
+export type CalendarType = "ISO 8601" | "US" | "Arabic" | "Hebrew";
+export type Detail = "month" | "year" | "decade" | "century";
+export type DateCallback = (date: Date) => void;
+export type ClickWeekNumberCallback = (weekNumber: number, date: Date) => void;
+export type OnChangeDateCallback = (date: Date | Date[]) => void;
+export type FormatterCallback = (locale: string, date: Date) => string;
+export type ViewCallback = (props: ViewCallbackProperties) => void;
+
+export default function Calendar(props: CalendarProps): JSX.Element;
+
+export interface CalendarProps {
+  activeStartDate?: Date;
+  calendarType?: CalendarType;
+  className?: string | string[];
+  formatMonth?: FormatterCallback;
+  formatMonthYear?: FormatterCallback;
+  formatShortWeekday?: FormatterCallback;
+  formatYear?: FormatterCallback;
+  locale?: string;
+  maxDate?: Date;
+  maxDetail?: Detail;
+  minDate?: Date;
+  minDetail?: Detail;
+  navigationLabel?: (props: { date: Date, view: Detail, label: string }) => string | JSX.Element | null;
+  next2AriaLabel?: string;
+  next2Label?: string | JSX.Element | null;
+  nextAriaLabel?: string;
+  nextLabel?: string | JSX.Element;
+  onActiveStartDateChange?: ViewCallback;
+  onChange?: OnChangeDateCallback;
+  onClickDay?: DateCallback;
+  onClickDecade?: DateCallback;
+  onClickMonth?: DateCallback;
+  onClickWeekNumber?: ClickWeekNumberCallback;
+  onClickYear?: DateCallback;
+  onDrillDown?: ViewCallback;
+  onDrillUp?: ViewCallback;
+  prev2AriaLabel?: string;
+  prev2Label?: string | JSX.Element | null;
+  prevAriaLabel?: string;
+  prevLabel?: string | JSX.Element;
+  renderChildren?: (props: CalendarTileProperties) => JSX.Element | null; // For backwards compatibility
+  returnValue?: "start" | "end" | "range";
+  selectRange?: boolean;
+  showFixedNumberOfWeeks?: boolean;
+  showNavigation?: boolean;
+  showNeighboringMonth?: boolean;
+  showWeekNumbers?: boolean;
+  tileClassName?: string | string[] | ((props: CalendarTileProperties) => string | string[] | null);
+  tileContent?: JSX.Element | ((props: CalendarTileProperties) => JSX.Element | null);
+  tileDisabled?: (props: CalendarTileProperties & { activeStartDate: Date }) => boolean;
+  value?: Date | Date[];
+  view?: Detail;
+}
+
+export interface CalendarTileProperties {
+  date: Date;
+  view: Detail;
+}
+
+export interface ViewCallbackProperties {
+  activeStartDate: Date;
+  view: Detail;
+}
+
+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 interface DetailViewProps {
+  activeStartDate: Date;
+  calendarType?: CalendarType;
+  locale?: string;
+  hover?: Date;
+  maxDate?: Date;
+  minDate?: Date;
+  onClick?: DateCallback;
+  onMouseOver?: DateCallback;
+  renderChildren?: (props: CalendarTileProperties) => JSX.Element | null; // For backwards compatibility
+  tileClassName?: string | string[] | ((props: CalendarTileProperties) => string | string[] | null);
+  tileContent?: JSX.Element | ((props: CalendarTileProperties) => JSX.Element | null);
+  tileDisabled?: (props: CalendarTileProperties) => boolean;
+  value?: Date | Date[];
+}

types/react-calendar/react-calendar-tests.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import Calendar from 'react-calendar';
+
+interface State {
+  value: Date | Date[];
+}
+
+export default class Sample extends React.Component<{}, State> {
+  state = {
+    value: new Date(),
+  };
+
+  onChange = (value: Date | Date[]) => {
+    this.setState({ value });
+  }
+
+  render() {
+    const { value } = this.state;
+
+    return (
+      <div className="Sample">
+        <header>
+          <h1>react-calendar sample</h1>
+        </header>
+        <div className="Sample__container">
+          <main className="Sample__container__content">
+            <Calendar
+              onChange={this.onChange}
+              showWeekNumbers
+              value={value}
+            />
+          </main>
+        </div>
+      </div>
+    );
+  }
+}

types/react-calendar/tsconfig.json

@@ -0,0 +1,25 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true,
+        "jsx": "react"
+    },
+    "files": [
+        "index.d.ts",
+        "react-calendar-tests.tsx"
+    ]
+}

types/react-calendar/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }