From 75e87f578a3f700e0bb91fb8e1f396b494c2275a Mon Sep 17 00:00:00 2001 From: Nathan Holland Date: Fri, 25 May 2018 14:59:29 +1200 Subject: [PATCH 1/2] Add DayPickerSingleDateController Types --- types/react-dates/index.d.ts | 192 +++++++++++++++++++++++------------ 1 file changed, 125 insertions(+), 67 deletions(-) diff --git a/types/react-dates/index.d.ts b/types/react-dates/index.d.ts index 92fa68e8d7..4454f03154 100644 --- a/types/react-dates/index.d.ts +++ b/types/react-dates/index.d.ts @@ -1,6 +1,7 @@ // Type definitions for react-dates v16.0.0 // Project: https://github.com/airbnb/react-dates -// Definitions by: Artur Ampilogov +// Definitions by: Artur Ampilogov +// Nathan Holland // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.6 @@ -21,8 +22,69 @@ declare namespace ReactDates { type FocusedInputShape = 'startDate' | 'endDate'; type OrientationShape = 'horizontal' | 'vertical'; type ScrollableOrientationShape = 'horizontal' | 'vertical' | 'verticalScrollable'; + type CalendarInfoPositionShape = 'top' | 'bottom' | 'before' | 'after'; + //https://github.com/airbnb/react-dates/blob/v16.0.1/src/defaultPhrases.js + type SingleDatePickerPhrases = { + closeDatePicker: string, + clearDate: string, + jumpToPrevMonth: string, + jumpToNextMonth: string, + keyboardShortcuts: string, + showKeyboardShortcutsPanel: string, + hideKeyboardShortcutsPanel: string, + openThisPanel: string, + enterKey: string, + leftArrowRightArrow: string, + upArrowDownArrow: string, + pageUpPageDown: string, + homeEnd: string, + escape: string, + questionMark: string, + selectFocusedDate: string, + moveFocusByOneDay: string, + moveFocusByOneWeek: string, + moveFocusByOneMonth: string, + moveFocustoStartAndEndOfWeek: string, + returnFocusToInput: string, + keyboardNavigationInstructions: string, + chooseAvailableDate: (date: string) => string, + dateIsUnavailable: (date: string) => string, + }; + + //https://github.com/airbnb/react-dates/blob/v16.0.1/src/defaultPhrases.js + type DateRangePickerPhrases = { + closeDatePicker: string, + clearDates: string, + focusStartDate: string, + jumpToPrevMonth: string, + jumpToNextMonth: string, + keyboardShortcuts: string, + showKeyboardShortcutsPanel: string, + hideKeyboardShortcutsPanel: string, + openThisPanel: string, + enterKey: string, + leftArrowRightArrow: string, + upArrowDownArrow: string, + pageUpPageDown: string, + homeEnd: string, + escape: string, + questionMark: string, + selectFocusedDate: string, + moveFocusByOneDay: string, + moveFocusByOneWeek: string, + moveFocusByOneMonth: string, + moveFocustoStartAndEndOfWeek: string, + returnFocusToInput: string, + keyboardNavigationInstructions: string, + + chooseAvailableStartDate: (date: string) => string, + chooseAvailableEndDate: (date: string) => string, + dateIsUnavailable: (date: string) => string + }; + + //https://github.com/airbnb/react-dates/blob/v16.0.1/src/shapes/DateRangePickerShape.js interface DateRangePickerShape { // REQUIRED props startDate: momentPropTypes.momentObj | null, @@ -60,7 +122,7 @@ declare namespace ReactDates { withPortal?: boolean, withFullScreenPortal?: boolean, initialVisibleMonth?: () => momentPropTypes.momentObj, - firstDayOfWeek? : 0 | 1 | 2 | 3 | 4 | 5 | 6, + firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6, numberOfMonths?: number, keepOpenOnDateSelect?: boolean, reopenPickerOnClearDates?: boolean, @@ -91,40 +153,13 @@ declare namespace ReactDates { displayFormat?: (string | (() => string)), monthFormat?: string, weekDayFormat?: string, - phrases?: { - closeDatePicker: string, - clearDates: string, - focusStartDate: string, - jumpToPrevMonth: string, - jumpToNextMonth: string, - keyboardShortcuts: string, - showKeyboardShortcutsPanel: string, - hideKeyboardShortcutsPanel: string, - openThisPanel: string, - enterKey: string, - leftArrowRightArrow: string, - upArrowDownArrow: string, - pageUpPageDown: string, - homeEnd: string, - escape: string, - questionMark: string, - selectFocusedDate: string, - moveFocusByOneDay: string, - moveFocusByOneWeek: string, - moveFocusByOneMonth: string, - moveFocustoStartAndEndOfWeek: string, - returnFocusToInput: string, - keyboardNavigationInstructions: string, - - chooseAvailableStartDate: (date: string) => string, - chooseAvailableEndDate: (date: string) => string, - dateIsUnavailable: (date: string) => string - } + phrases?: DateRangePickerPhrases } type DateRangePicker = React.ClassicComponentClass; var DateRangePicker: React.ClassicComponentClass; + //https://github.com/airbnb/react-dates/blob/v16.0.1/src/shapes/SingleDatePickerShape.js interface SingleDatePickerShape { // REQUIRED props date: momentPropTypes.momentObj | null, @@ -158,7 +193,7 @@ declare namespace ReactDates { withPortal?: boolean, withFullScreenPortal?: boolean, initialVisibleMonth?: () => momentPropTypes.momentObj, - firstDayOfWeek? : 0 | 1 | 2 | 3 | 4 | 5 | 6, + firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6, numberOfMonths?: number, keepOpenOnDateSelect?: boolean, reopenPickerOnClearDates?: boolean, @@ -167,7 +202,7 @@ declare namespace ReactDates { daySize?: number, isRTL?: boolean, verticalSpacing?: number, - verticalHeight?: number| null, + verticalHeight?: number | null, // navigation related props navPrev?: string | JSX.Element, @@ -188,39 +223,12 @@ declare namespace ReactDates { // internationalization props displayFormat?: (string | (() => string)), monthFormat?: string, - phrases?: { - closeDatePicker: string, - clearDate: string, - jumpToPrevMonth: string, - jumpToNextMonth: string, - keyboardShortcuts: string, - showKeyboardShortcutsPanel: string, - hideKeyboardShortcutsPanel: string, - openThisPanel: string, - enterKey: string, - leftArrowRightArrow: string, - upArrowDownArrow: string, - pageUpPageDown: string, - homeEnd: string, - escape: string, - questionMark: string, - selectFocusedDate: string, - moveFocusByOneDay: string, - moveFocusByOneWeek: string, - moveFocusByOneMonth: string, - moveFocustoStartAndEndOfWeek: string, - returnFocusToInput: string, - keyboardNavigationInstructions: string, - - chooseAvailableDate: (date: string) => string, - dateIsUnavailable: (date: string) => string, - }, + phrases?: SingleDatePickerPhrases, } type SingleDatePicker = React.ClassicComponentClass; var SingleDatePicker: React.ClassicComponentClass; - - + //https://github.com/airbnb/react-dates/blob/v16.0.1/src/components/DayPickerRangeController.jsx interface DayPickerRangeControllerShape { // REQUIRED props startDate: momentPropTypes.momentObj | null, @@ -265,18 +273,68 @@ declare namespace ReactDates { // internationalization props monthFormat?: string, - phrases?: { - focusStartDate: string, - clearDates: string, - keyboardNavigationInstructions: string, - } + phrases?: DateRangePickerPhrases } type DayPickerRangeController = React.ClassicComponentClass; var DayPickerRangeController: React.ClassicComponentClass; + //https://github.com/airbnb/react-dates/blob/97bf16e72dbf5ce88f0181c49212080061a83f69/src/components/DayPickerSingleDateController.jsx + interface DayPickerSingleDateControllerShape { + date: momentPropTypes.momentObj | null, + onDateChange: (date: momentPropTypes.momentObj | null) => void, + focused: boolean, + onFocusChange: (arg: { focused: boolean | null }) => void, + onClose?: (final: { date: momentPropTypes.momentObj }) => void, + keepOpenOnDateSelect?: boolean, + isOutsideRange?: (day: any) => boolean, + isDayBlocked?: (day: any) => boolean, + isDayHighlighted?: (day: any) => boolean, + + // DayPicker props + renderMonth?: (day: momentPropTypes.momentObj) => (string | JSX.Element), + enableOutsideDays?: boolean, + numberOfMonths?: number, + orientation?: ScrollableOrientationShape, + withPortal?: boolean, + initialVisibleMonth?: () => momentPropTypes.momentObj, + firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6, + hideKeyboardShortcutsPanel?: boolean, + daySize?: number, + verticalHeight?: number, + noBorder?: boolean, + transitionDuration?: number, + + navPrev?: string | JSX.Element, + navNext?: string | JSX.Element, + + onPrevMonthClick?: (newCurrentMonth: momentPropTypes.momentObj) => void, + onNextMonthClick?: (newCurrentMonth: momentPropTypes.momentObj) => void, + onOutsideClick?: (e: any) => void, + renderCalendarDay?: (day: momentPropTypes.momentObj) => (string | JSX.Element), + renderDayContents?: (day: momentPropTypes.momentObj) => (string | JSX.Element), + renderCalendarInfo?: () => (string | JSX.Element), + calendarInfoPosition?: CalendarInfoPositionShape, + + // accessibility + onBlur?: () => void, + isFocused?: boolean, + showKeyboardShortcuts?: boolean, + + // i18n + monthFormat?: string, + weekDayFormat?: string, + phrases?: SingleDatePickerPhrases, + dayAriaLabelFormat?: string, + + isRTL?: boolean, + + } + + type DayPickerSingleDateController = React.ClassicComponentClass; + var DayPickerSingleDateController: React.ClassicComponentClass; var isInclusivelyAfterDay: (a: moment.Moment, b: moment.Moment) => boolean; var isInclusivelyBeforeDay: (a: moment.Moment, b: moment.Moment) => boolean; From 560c02952cafd766f2b01354b48ba75a53aa7cb8 Mon Sep 17 00:00:00 2001 From: Nathan Holland Date: Fri, 25 May 2018 15:00:31 +1200 Subject: [PATCH 2/2] Add test for DayPickerSingleDateController --- types/react-dates/react-dates-tests.tsx | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/types/react-dates/react-dates-tests.tsx b/types/react-dates/react-dates-tests.tsx index 6462a6ebd5..2d0aaae431 100644 --- a/types/react-dates/react-dates-tests.tsx +++ b/types/react-dates/react-dates-tests.tsx @@ -5,6 +5,7 @@ import { SingleDatePicker, DateRangePicker, DayPickerRangeController, + DayPickerSingleDateController, isInclusivelyAfterDay, isInclusivelyBeforeDay, isNextDay, @@ -137,16 +138,16 @@ class DayPickerRangeControllerMinimumTest extends React.Component { } } - - - - - - - - - - +class DayPickerSingleDateControllerMinimumTest extends React.Component { + render() { + return {}} + focused={true} + onFocusChange={(arg) => {}} + /> + } +} const isInclusivelyAfterDayResult: boolean = isInclusivelyAfterDay(moment(),moment()); const isInclusivelyBeforeDayResult: boolean = isInclusivelyBeforeDay(moment(),moment());