From 709070b1fb092569856cc0ddc0d80ec8fb9cdcec Mon Sep 17 00:00:00 2001 From: Junbong Lee Date: Fri, 5 Jan 2018 02:26:45 +0900 Subject: [PATCH] Add new type definition for react-date-range. (#22638) * Add new type definition for react-date-range. * Fix CI build fails. * Fix type of properties of Range interface. --- types/react-date-range/index.d.ts | 113 ++++++++++++++++++ .../react-date-range-tests.tsx | 29 +++++ types/react-date-range/tsconfig.json | 25 ++++ types/react-date-range/tslint.json | 1 + 4 files changed, 168 insertions(+) create mode 100644 types/react-date-range/index.d.ts create mode 100644 types/react-date-range/react-date-range-tests.tsx create mode 100644 types/react-date-range/tsconfig.json create mode 100644 types/react-date-range/tslint.json diff --git a/types/react-date-range/index.d.ts b/types/react-date-range/index.d.ts new file mode 100644 index 0000000000..cac50eb39a --- /dev/null +++ b/types/react-date-range/index.d.ts @@ -0,0 +1,113 @@ +// Type definitions for react-date-range 0.94 +// Project: https://github.com/Adphorus/react-date-range/ +// Definitions by: Junbong Lee +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.4 + +import * as React from 'react'; +import * as moment from "moment-timezone"; + +declare namespace reactDateRange { + type AnyDate = string | moment.Moment; + type DateFunc = (now: moment.Moment) => AnyDate; + type DateInputType = AnyDate | DateFunc; + type LanguageType = "cn" | "jp" | "fr" | "it" | "de" | "ko" | "es" | "ru" | "tr"; + type SizeType = number; + + interface DateContainerType { + date: moment.Moment; + } + + interface CalendarTheme { + DateRange?: React.CSSProperties; + Calendar?: React.CSSProperties; + Day?: React.CSSProperties; + DayPassive?: React.CSSProperties; + DayHover?: React.CSSProperties; + DayToday?: React.CSSProperties; + DaySunday?: React.CSSProperties; + DaySpecialDay?: React.CSSProperties; + DayActive?: React.CSSProperties; + DaySelected?: React.CSSProperties; + DayStartEdge?: React.CSSProperties; + DayEndEdge?: React.CSSProperties; + DayInRange?: React.CSSProperties; + Weekday?: React.CSSProperties; + MonthAndYear?: React.CSSProperties; + MonthButton?: React.CSSProperties; + MonthArrow?: React.CSSProperties; + MonthArrowPrev?: React.CSSProperties; + MonthArrowNext?: React.CSSProperties; + PredefinedRanges?: React.CSSProperties; + PredefinedRangesItem?: React.CSSProperties; + PredefinedRangesItemActive?: React.CSSProperties; + } + + interface Range { + /** default: today */ + startDate?: moment.Moment; + /** default: today */ + endDate?: moment.Moment; + } + + interface CommonCalendarProps { + /** default: DD/MM/YYY */ + format?: string; + /** default: moment.localeData().firstDayOfWeek() */ + firstDayOfWeek?: number; + theme?: CalendarTheme; + /** default: none */ + onInit?: (range: Range) => void; + /** default: none */ + onChange?: (range: Range) => void; + /** default: none */ + minDate?: DateInputType; + /** default: none */ + maxDate?: DateInputType; + /** + * Calendar languages. + * ('cn' - Chinese, 'jp' - Japanese, + * 'fr' - French, 'it' - Italian, + * 'de' - German, 'ko' - Korean, + * 'es' - Spanish, 'ru' - Russian, + * 'tr' - Turkish) default: none + */ + lang?: LanguageType; + } + + interface CalendarProps extends CommonCalendarProps { + /** default: today */ + date: DateInputType; + } + + class Calendar extends React.Component { } + + interface DateRangeProps extends Range, CommonCalendarProps { + /** default: false */ + linkedCalendars?: boolean; + /** default: 2 */ + calendars?: number; + /** default: none */ + ranges?: object; + /** default: false */ + twoStepChange?: boolean; + /** default: false */ + rangedCalendars?: boolean; + /** default: none */ + specialDays?: DateContainerType[]; + } + + class DateRange extends React.Component { } + + type DateRangeIndex = "Today" | "Yesterday" | "Last 7 Days" | "Last 30 Days"; + + interface DateRangeObject { + startDate: (now: moment.Moment) => moment.Moment; + endDate: (now: moment.Moment) => moment.Moment; + } + const defaultRanges: { + [measure: string]: DateRangeObject; + }; +} + +export = reactDateRange; diff --git a/types/react-date-range/react-date-range-tests.tsx b/types/react-date-range/react-date-range-tests.tsx new file mode 100644 index 0000000000..d12e99b4ab --- /dev/null +++ b/types/react-date-range/react-date-range-tests.tsx @@ -0,0 +1,29 @@ +import * as React from 'react'; +import { defaultRanges, DateRange, Range } from "react-date-range"; + +class ReactDatePicker extends React.Component { + constructor(props: {}) { + super(props); + } + + handleChange(range: Range) { + console.log(range); + } + + render() { + return ( +
+ +
+ ); + } +} diff --git a/types/react-date-range/tsconfig.json b/types/react-date-range/tsconfig.json new file mode 100644 index 0000000000..91979c462d --- /dev/null +++ b/types/react-date-range/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-date-range-tests.tsx" + ] +} \ No newline at end of file diff --git a/types/react-date-range/tslint.json b/types/react-date-range/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/react-date-range/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" }