vhad/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/gosticks/DefinitelyTyped.git synced 2026-09-17 06:30:21 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #26025 from NathanNZ/react-dates-daypicker

Browse Source 
React Dates DayPickerSingleDate Support
This commit is contained in:
Benjamin Lichtman
2018-06-01 10:08:19 -07:00
committed by GitHub
parent e5ba2b3ffd 38c5fb084d
commit 68ba07d8e1
2 changed files with 133 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
types/react-dates/index.d.ts
Vendored
+122 -89
View File
@@ -1,6 +1,7 @@
// Type definitions for react-dates v16.0.0
// Project: https://github.com/airbnb/react-dates
// Definitions by: Artur Ampilogov <https://github.com/Artur-A>
// Definitions by: Artur Ampilogov <https://github.com/Artur-A>
// Nathan Holland <https://github.com/NathanNZ>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.6
@@ -21,8 +22,66 @@ 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 = {
calendarLabel?: 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,
chooseAvailableStartDate?: (date: string) => string,
chooseAvailableEndDate?: (date: string) => string,
chooseAvailableDate?: (date: string) => string,
dateIsUnavailable?: (date: string) => string,
dateIsSelected?: (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,
@@ -61,7 +120,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,
@@ -92,40 +151,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<DateRangePickerShape>;
var DateRangePicker: React.ClassicComponentClass<DateRangePickerShape>;
//https://github.com/airbnb/react-dates/blob/v16.0.1/src/shapes/SingleDatePickerShape.js
interface SingleDatePickerShape {
// REQUIRED props
date: momentPropTypes.momentObj | null,
@@ -159,7 +191,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,
@@ -168,7 +200,7 @@ declare namespace ReactDates {
daySize?: number,
isRTL?: boolean,
verticalSpacing?: number,
verticalHeight?: number| null,
verticalHeight?: number | null,
// navigation related props
navPrev?: string | JSX.Element,
@@ -189,39 +221,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<SingleDatePickerShape>;
var SingleDatePicker: React.ClassicComponentClass<SingleDatePickerShape>;
//https://github.com/airbnb/react-dates/blob/v16.0.1/src/components/DayPickerRangeController.jsx
interface DayPickerRangeControllerShape {
// REQUIRED props
startDate: momentPropTypes.momentObj | null,
@@ -266,40 +271,68 @@ declare namespace ReactDates {
// internationalization props
monthFormat?: string,
phrases?: {
calendarLabel?: 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,
chooseAvailableStartDate?: (date: string) => string,
chooseAvailableEndDate?: (date: string) => string,
chooseAvailableDate?: (date: string) => string,
dateIsUnavailable?: (date: string) => string,
dateIsSelected?: (date: string) => string,
}
phrases?: DateRangePickerPhrases
}
type DayPickerRangeController = React.ClassicComponentClass<DayPickerRangeControllerShape>;
var DayPickerRangeController: React.ClassicComponentClass<DayPickerRangeControllerShape>;
//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<DayPickerSingleDateControllerShape>;
var DayPickerSingleDateController: React.ClassicComponentClass<DayPickerSingleDateControllerShape>;
var isInclusivelyAfterDay: (a: moment.Moment, b: moment.Moment) => boolean;
var isInclusivelyBeforeDay: (a: moment.Moment, b: moment.Moment) => boolean;
types/react-dates/react-dates-tests.tsx
+11 -10
View File
@@ -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 <DayPickerSingleDateController
date={moment()}
onDateChange={(arg)=> {}}
focused={true}
onFocusChange={(arg) => {}}
/>
}
}
const isInclusivelyAfterDayResult: boolean = isInclusivelyAfterDay(moment(),moment());
const isInclusivelyBeforeDayResult: boolean = isInclusivelyBeforeDay(moment(),moment());