From cefb035cbc6f83bef160618834d2bd60e8d512b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?St=C3=A9phane=20S?= Date: Wed, 1 Apr 2020 20:28:55 +0200 Subject: [PATCH] [react-calendar] Init typings (#43540) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Stéphane Saquet --- types/react-calendar/index.d.ts | 91 +++++++++++++++++++ types/react-calendar/react-calendar-tests.tsx | 37 ++++++++ types/react-calendar/tsconfig.json | 25 +++++ types/react-calendar/tslint.json | 1 + 4 files changed, 154 insertions(+) create mode 100644 types/react-calendar/index.d.ts create mode 100644 types/react-calendar/react-calendar-tests.tsx create mode 100644 types/react-calendar/tsconfig.json create mode 100644 types/react-calendar/tslint.json diff --git a/types/react-calendar/index.d.ts b/types/react-calendar/index.d.ts new file mode 100644 index 0000000000..8b3733465c --- /dev/null +++ b/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 +// 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[]; +} diff --git a/types/react-calendar/react-calendar-tests.tsx b/types/react-calendar/react-calendar-tests.tsx new file mode 100644 index 0000000000..93b0f1be7b --- /dev/null +++ b/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 ( +
+
+

react-calendar sample

+
+
+
+ +
+
+
+ ); + } +} diff --git a/types/react-calendar/tsconfig.json b/types/react-calendar/tsconfig.json new file mode 100644 index 0000000000..84de2a7099 --- /dev/null +++ b/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" + ] +} \ No newline at end of file diff --git a/types/react-calendar/tslint.json b/types/react-calendar/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/react-calendar/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" }