mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2026-10-05 15:27:05 +00:00
Merge pull request #26416 from ArturAmpilogov/master
[react-dates] Updated Shapes, Phrases and overall structure
This commit is contained in:
Mine Starks
+343
-224
@@ -1,12 +1,14 @@
|
||||
// Type definitions for react-dates v16.0.0
|
||||
// Type definitions for react-dates v16.7.0
|
||||
// Project: https://github.com/airbnb/react-dates
|
||||
// Definitions by: Artur Ampilogov <https://github.com/Artur-A>
|
||||
// Definitions by: Artur Ampilogov <https://github.com/ArturAmpilogov>
|
||||
// Nathan Holland <https://github.com/NathanNZ>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.6
|
||||
|
||||
import * as React from "react";
|
||||
import * as moment from "moment";
|
||||
// Required fields are made according to 'minimum REQUIRED setup' in https://github.com/airbnb/react-dates/blob/master/README.md
|
||||
|
||||
import * as React from 'react';
|
||||
import * as moment from 'moment';
|
||||
|
||||
export = ReactDates;
|
||||
|
||||
@@ -18,42 +20,273 @@ declare namespace momentPropTypes {
|
||||
|
||||
|
||||
declare namespace ReactDates {
|
||||
// SHAPES
|
||||
//
|
||||
// shapes/AnchorDirectionShape.js
|
||||
type AnchorDirectionShape = 'left' | 'right';
|
||||
type FocusedInputShape = 'startDate' | 'endDate';
|
||||
type OrientationShape = 'horizontal' | 'vertical';
|
||||
type ScrollableOrientationShape = 'horizontal' | 'vertical' | 'verticalScrollable';
|
||||
|
||||
// shapes/CalendarInfoPositionShape.js
|
||||
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,
|
||||
|
||||
// shapes/DateRangePickerShape.js
|
||||
interface DateRangePickerShape {
|
||||
// required props for a functional interactive DateRangePicker
|
||||
startDate: momentPropTypes.momentObj | null,
|
||||
startDateId: string,
|
||||
endDate: momentPropTypes.momentObj | null,
|
||||
endDateId: string,
|
||||
focusedInput: FocusedInputShape | null,
|
||||
|
||||
onDatesChange: (arg: {
|
||||
startDate: momentPropTypes.momentObj | null,
|
||||
endDate: momentPropTypes.momentObj | null
|
||||
}) => void,
|
||||
onFocusChange: (arg: FocusedInputShape | null) => void,
|
||||
|
||||
onClose?: (final: { startDate: momentPropTypes.momentObj, endDate: momentPropTypes.momentObj }) => void,
|
||||
|
||||
// input related props
|
||||
startDatePlaceholderText?: string,
|
||||
endDatePlaceholderText?: string,
|
||||
disabled?: boolean,
|
||||
required?: boolean,
|
||||
readOnly?: boolean,
|
||||
screenReaderInputMessage?: string,
|
||||
showClearDates?: boolean,
|
||||
showDefaultInputIcon?: boolean,
|
||||
customInputIcon?: string | JSX.Element,
|
||||
customArrowIcon?: string | JSX.Element,
|
||||
customCloseIcon?: string | JSX.Element,
|
||||
noBorder?: boolean,
|
||||
block?: boolean,
|
||||
small?: boolean,
|
||||
regular?: boolean,
|
||||
keepFocusOnInput?: boolean,
|
||||
|
||||
// calendar presentation and interaction related props
|
||||
renderMonth?: (day: momentPropTypes.momentObj) => (string | JSX.Element),
|
||||
orientation?: OrientationShape,
|
||||
anchorDirection?: AnchorDirectionShape,
|
||||
openDirection?: OpenDirectionShape,
|
||||
horizontalMargin?: number,
|
||||
withPortal?: boolean,
|
||||
withFullScreenPortal?: boolean,
|
||||
appendToBody?: boolean,
|
||||
disableScroll?: boolean,
|
||||
daySize?: number,
|
||||
isRTL?: boolean,
|
||||
firstDayOfWeek?: DayOfWeekShape,
|
||||
initialVisibleMonth?: () => momentPropTypes.momentObj,
|
||||
numberOfMonths?: number,
|
||||
keepOpenOnDateSelect?: boolean,
|
||||
reopenPickerOnClearDates?: boolean,
|
||||
renderCalendarInfo?: () => (string | JSX.Element),
|
||||
calendarInfoPosition?: CalendarInfoPositionShape,
|
||||
hideKeyboardShortcutsPanel?: boolean,
|
||||
verticalHeight?: number,
|
||||
transitionDuration?: number,
|
||||
verticalSpacing?: number,
|
||||
|
||||
// navigation related props
|
||||
navPrev?: string | JSX.Element,
|
||||
navNext?: string | JSX.Element,
|
||||
onPrevMonthClick?: (newCurrentMonth: momentPropTypes.momentObj) => void,
|
||||
onNextMonthClick?: (newCurrentMonth: momentPropTypes.momentObj) => void,
|
||||
|
||||
// day presentation and interaction related props
|
||||
renderCalendarDay?: (day: momentPropTypes.momentObj) => (string | JSX.Element),
|
||||
renderDayContents?: (day: momentPropTypes.momentObj) => (string | JSX.Element),
|
||||
minimumNights?: number,
|
||||
enableOutsideDays?: boolean,
|
||||
isDayBlocked?: (day: any) => boolean,
|
||||
isOutsideRange?: (day: any) => boolean,
|
||||
isDayHighlighted?: (day: any) => boolean,
|
||||
|
||||
|
||||
// internationalization props
|
||||
displayFormat?: (string | (() => string)),
|
||||
monthFormat?: string,
|
||||
weekDayFormat?: string,
|
||||
phrases?: DateRangePickerPhrases,
|
||||
dayAriaLabelFormat?: string
|
||||
}
|
||||
|
||||
// shapes/DayOfWeekShape.js
|
||||
type DayOfWeekShape = 0 | 1 | 2 | 3 | 4 | 5 | 6;
|
||||
|
||||
// shapes/DisabledShape.js
|
||||
type DisabledShape = boolean | 'startDate' | 'endDate';
|
||||
|
||||
// shapes/FocusedInputShape.js
|
||||
type FocusedInputShape = 'startDate' | 'endDate';
|
||||
|
||||
// shape/IconPositionShape.js
|
||||
type IconPositionShape = 'before' | 'after';
|
||||
|
||||
// type/OpenDirectionShape.js
|
||||
type OpenDirectionShape = 'down' | 'up';
|
||||
|
||||
// shpae/OrientationShape.js
|
||||
type OrientationShape = 'horizontal' | 'vertical';
|
||||
|
||||
// shape/ScrollableOrientationShape.js
|
||||
type ScrollableOrientationShape = 'horizontal' | 'vertical' | 'verticalScrollable';
|
||||
|
||||
|
||||
// shapes/SingleDatePickerShape.js
|
||||
interface SingleDatePickerShape {
|
||||
id: string,
|
||||
|
||||
// required props for a functional interactive SingleDatePicker
|
||||
date: momentPropTypes.momentObj | null,
|
||||
focused: boolean,
|
||||
|
||||
onDateChange: (date: momentPropTypes.momentObj | null) => void,
|
||||
onFocusChange: (arg: { focused: boolean | null }) => void,
|
||||
|
||||
// input related props
|
||||
placeholder?: string,
|
||||
disabled?: boolean,
|
||||
required?: boolean,
|
||||
readOnly?: boolean,
|
||||
screenReaderInputMessage?: string,
|
||||
showClearDate?: boolean,
|
||||
customCloseIcon?: string | JSX.Element,
|
||||
showDefaultInputIcon?: boolean,
|
||||
inputIconPosition?: IconPositionShape,
|
||||
customInputIcon?: string | JSX.Element,
|
||||
noBorder?: boolean,
|
||||
block?: boolean,
|
||||
small?: boolean,
|
||||
regular?: boolean,
|
||||
verticalSpacing?: number,
|
||||
keepFocusOnInput?: boolean,
|
||||
|
||||
// calendar presentation and interaction related props
|
||||
renderMonth?: (day: momentPropTypes.momentObj) => (string | JSX.Element),
|
||||
orientation?: OrientationShape,
|
||||
anchorDirection?: AnchorDirectionShape,
|
||||
horizontalMargin?: number,
|
||||
withPortal?: boolean,
|
||||
withFullScreenPortal?: boolean,
|
||||
appendToBody?: boolean,
|
||||
disableScroll?: boolean,
|
||||
initialVisibleMonth?: () => momentPropTypes.momentObj,
|
||||
firstDayOfWeek?: DayOfWeekShape,
|
||||
numberOfMonths?: number,
|
||||
keepOpenOnDateSelect?: boolean,
|
||||
reopenPickerOnClearDates?: boolean,
|
||||
renderCalendarInfo?: () => (string | JSX.Element),
|
||||
calendarInfoPosition?: CalendarInfoPositionShape,
|
||||
hideKeyboardShortcutsPanel?: boolean,
|
||||
daySize?: number,
|
||||
isRTL?: boolean,
|
||||
verticalHeight?: number | null,
|
||||
transitionDuration?: number,
|
||||
|
||||
// navigation related props
|
||||
navPrev?: string | JSX.Element,
|
||||
navNext?: string | JSX.Element,
|
||||
onPrevMonthClick?: (newCurrentMonth: momentPropTypes.momentObj) => void,
|
||||
onNextMonthClick?: (newCurrentMonth: momentPropTypes.momentObj) => void,
|
||||
onClose?: (final: { startDate: momentPropTypes.momentObj, endDate: momentPropTypes.momentObj }) => void,
|
||||
|
||||
// day presentation and interaction related props
|
||||
renderCalendarDay?: (day: momentPropTypes.momentObj) => (string | JSX.Element),
|
||||
renderDayContents?: (day: momentPropTypes.momentObj) => (string | JSX.Element),
|
||||
enableOutsideDays?: boolean,
|
||||
isDayBlocked?: (day: any) => boolean,
|
||||
isOutsideRange?: (day: any) => boolean,
|
||||
isDayHighlighted?: (day: any) => boolean,
|
||||
|
||||
// internationalization props
|
||||
displayFormat?: (string | (() => string)),
|
||||
monthFormat?: string,
|
||||
weekDayFormat?: string,
|
||||
phrases?: SingleDatePickerPhrases,
|
||||
dayAriaLabelFormat?: string,
|
||||
}
|
||||
|
||||
// PHRASES
|
||||
//
|
||||
// defaultPhrases.js
|
||||
type DateRangePickerPhrases = {
|
||||
calendarLabel?: string,
|
||||
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,
|
||||
dateIsSelected?: (date: string) => string
|
||||
};
|
||||
|
||||
//https://github.com/airbnb/react-dates/blob/v16.0.1/src/defaultPhrases.js
|
||||
type DateRangePickerPhrases = {
|
||||
// defaultPhrases.js
|
||||
type DateRangePickerInputPhrases = {
|
||||
focusStartDate?: string,
|
||||
clearDates?: string,
|
||||
keyboardNavigationInstructions?: string,
|
||||
}
|
||||
|
||||
// defaultPhrases.js
|
||||
type SingleDatePickerPhrases = {
|
||||
calendarLabel?: string,
|
||||
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,
|
||||
dateIsSelected?: (date: string) => string,
|
||||
};
|
||||
|
||||
// defaultPhrases.js
|
||||
type SingleDatePickerInputPhrases = {
|
||||
clearDate?: string,
|
||||
keyboardNavigationInstructions?: string,
|
||||
}
|
||||
|
||||
// defaultPhrases.js
|
||||
type DayPickerPhrases = {
|
||||
calendarLabel?: string,
|
||||
jumpToPrevMonth?: string,
|
||||
jumpToNextMonth?: string,
|
||||
@@ -78,156 +311,52 @@ declare namespace ReactDates {
|
||||
chooseAvailableEndDate?: (date: string) => string,
|
||||
chooseAvailableDate?: (date: string) => string,
|
||||
dateIsUnavailable?: (date: string) => string,
|
||||
dateIsSelected?: (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,
|
||||
endDate: momentPropTypes.momentObj | null,
|
||||
onDatesChange: (arg: {
|
||||
startDate: momentPropTypes.momentObj | null,
|
||||
endDate: momentPropTypes.momentObj | null
|
||||
}
|
||||
) => void,
|
||||
focusedInput: FocusedInputShape | null,
|
||||
onFocusChange: (arg: FocusedInputShape | null) => void,
|
||||
|
||||
// input related props
|
||||
startDateId?: string,
|
||||
startDatePlaceholderText?: string,
|
||||
endDateId?: string,
|
||||
endDatePlaceholderText?: string,
|
||||
disabled?: boolean,
|
||||
keepFocusOnInput?: boolean,
|
||||
required?: boolean,
|
||||
readOnly?: boolean,
|
||||
screenReaderInputMessage?: string,
|
||||
showClearDates?: boolean,
|
||||
showDefaultInputIcon?: boolean,
|
||||
customInputIcon?: string | JSX.Element,
|
||||
customArrowIcon?: string | JSX.Element,
|
||||
customCloseIcon?: string | JSX.Element,
|
||||
noBorder?: boolean,
|
||||
block?: boolean,
|
||||
// defaultPhrases.js
|
||||
type DayPickerKeyboardShortcutsPhrases = {
|
||||
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,
|
||||
};
|
||||
|
||||
// calendar presentation and interaction related props
|
||||
renderMonth?: (day: momentPropTypes.momentObj) => (string | JSX.Element),
|
||||
orientation?: OrientationShape,
|
||||
anchorDirection?: AnchorDirectionShape,
|
||||
horizontalMargin?: number,
|
||||
withPortal?: boolean,
|
||||
withFullScreenPortal?: boolean,
|
||||
initialVisibleMonth?: () => momentPropTypes.momentObj,
|
||||
firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6,
|
||||
numberOfMonths?: number,
|
||||
keepOpenOnDateSelect?: boolean,
|
||||
reopenPickerOnClearDates?: boolean,
|
||||
renderCalendarInfo?: () => (string | JSX.Element),
|
||||
hideKeyboardShortcutsPanel?: boolean,
|
||||
daySize?: number,
|
||||
isRTL?: boolean,
|
||||
// defaultPhrases.js
|
||||
type DayPickerNavigationPhrases = {
|
||||
jumpToPrevMonth?: string,
|
||||
jumpToNextMonth?: string,
|
||||
};
|
||||
|
||||
// defaultPhrases.js
|
||||
type CalendarDayPhrases = {
|
||||
chooseAvailableDate: (date: string) => string,
|
||||
dateIsUnavailable: (date: string) => string,
|
||||
dateIsSelected: (date: string) => string,
|
||||
};
|
||||
|
||||
// navigation related props
|
||||
navPrev?: string | JSX.Element,
|
||||
navNext?: string | JSX.Element,
|
||||
onPrevMonthClick?: (newCurrentMonth: momentPropTypes.momentObj) => void,
|
||||
onNextMonthClick?: (newCurrentMonth: momentPropTypes.momentObj) => void,
|
||||
onClose?: (final: { startDate: momentPropTypes.momentObj, endDate: momentPropTypes.momentObj }) => void,
|
||||
transitionDuration?: number,
|
||||
|
||||
// day presentation and interaction related props
|
||||
renderCalendarDay?: (day: momentPropTypes.momentObj) => (string | JSX.Element),
|
||||
renderDayContents?: (day: momentPropTypes.momentObj) => (string | JSX.Element),
|
||||
minimumNights?: number,
|
||||
enableOutsideDays?: boolean,
|
||||
isDayBlocked?: (day: any) => boolean,
|
||||
isOutsideRange?: (day: any) => boolean,
|
||||
isDayHighlighted?: (day: any) => boolean,
|
||||
|
||||
|
||||
// internationalization props
|
||||
displayFormat?: (string | (() => string)),
|
||||
monthFormat?: string,
|
||||
weekDayFormat?: string,
|
||||
phrases?: DateRangePickerPhrases
|
||||
}
|
||||
// COMPONENTS
|
||||
//
|
||||
// components/DateRangePicker.js
|
||||
|
||||
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,
|
||||
onDateChange: (date: momentPropTypes.momentObj | null) => void,
|
||||
focused: boolean,
|
||||
onFocusChange: (arg: { focused: boolean | null }) => void,
|
||||
|
||||
id: string,
|
||||
|
||||
// input related props
|
||||
placeholder?: string,
|
||||
disabled?: boolean,
|
||||
required?: boolean,
|
||||
readOnly?: boolean,
|
||||
screenReaderInputMessage?: string,
|
||||
showClearDate?: boolean,
|
||||
customCloseIcon?: string | JSX.Element,
|
||||
showDefaultInputIcon?: boolean,
|
||||
customInputIcon?: string | JSX.Element,
|
||||
noBorder?: boolean,
|
||||
block?: boolean,
|
||||
small?: boolean,
|
||||
regular?: boolean,
|
||||
keepFocusOnInput?: boolean,
|
||||
|
||||
// calendar presentation and interaction related props
|
||||
renderMonth?: (day: momentPropTypes.momentObj) => (string | JSX.Element),
|
||||
orientation?: OrientationShape,
|
||||
anchorDirection?: AnchorDirectionShape,
|
||||
horizontalMargin?: number,
|
||||
withPortal?: boolean,
|
||||
withFullScreenPortal?: boolean,
|
||||
initialVisibleMonth?: () => momentPropTypes.momentObj,
|
||||
firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6,
|
||||
numberOfMonths?: number,
|
||||
keepOpenOnDateSelect?: boolean,
|
||||
reopenPickerOnClearDates?: boolean,
|
||||
renderCalendarInfo?: () => (string | JSX.Element),
|
||||
hideKeyboardShortcutsPanel?: boolean,
|
||||
daySize?: number,
|
||||
isRTL?: boolean,
|
||||
verticalSpacing?: number,
|
||||
verticalHeight?: number | null,
|
||||
|
||||
// navigation related props
|
||||
navPrev?: string | JSX.Element,
|
||||
navNext?: string | JSX.Element,
|
||||
onPrevMonthClick?: (newCurrentMonth: momentPropTypes.momentObj) => void,
|
||||
onNextMonthClick?: (newCurrentMonth: momentPropTypes.momentObj) => void,
|
||||
onClose?: (final: { startDate: momentPropTypes.momentObj, endDate: momentPropTypes.momentObj }) => void,
|
||||
transitionDuration?: number,
|
||||
|
||||
// day presentation and interaction related props
|
||||
renderCalendarDay?: (day: momentPropTypes.momentObj) => (string | JSX.Element),
|
||||
renderDayContents?: (day: momentPropTypes.momentObj) => (string | JSX.Element),
|
||||
enableOutsideDays?: boolean,
|
||||
isDayBlocked?: (day: any) => boolean,
|
||||
isOutsideRange?: (day: any) => boolean,
|
||||
isDayHighlighted?: (day: any) => boolean,
|
||||
|
||||
// internationalization props
|
||||
displayFormat?: (string | (() => string)),
|
||||
monthFormat?: 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 {
|
||||
// components/DayPickerRangeController.jsx
|
||||
interface DayPickerRangeControllerShape extends DayPickerShape{
|
||||
// REQUIRED props
|
||||
startDate: momentPropTypes.momentObj | null,
|
||||
endDate: momentPropTypes.momentObj | null,
|
||||
@@ -236,62 +365,27 @@ declare namespace ReactDates {
|
||||
endDate: momentPropTypes.momentObj | null
|
||||
}
|
||||
) => void,
|
||||
focusedInput: FocusedInputShape | null,
|
||||
focusedInput: FocusedInputShape,
|
||||
onFocusChange: (arg: FocusedInputShape | null) => void,
|
||||
|
||||
// calendar presentation and interaction related props
|
||||
enableOutsideDays?: boolean,
|
||||
numberOfMonths?: number,
|
||||
orientation?: ScrollableOrientationShape,
|
||||
withPortal?: boolean,
|
||||
initialVisibleMonth?: () => momentPropTypes.momentObj,
|
||||
renderCalendarInfo?: () => (string | JSX.Element),
|
||||
onOutsideClick?: (e: any) => void,
|
||||
startDateOffset?: (day: any) => any,
|
||||
endDateOffset?: (day: any) => any,
|
||||
|
||||
onClose?: (final: { startDate: momentPropTypes.momentObj, endDate: momentPropTypes.momentObj }) => void,
|
||||
|
||||
keepOpenOnDateSelect?: boolean,
|
||||
hideKeyboardShortcutsPanel?: boolean;
|
||||
noBorder?: boolean,
|
||||
verticalBorderSpacing?: number,
|
||||
firstDayOfWeek? : 0 | 1 | 2 | 3 | 4 | 5 | 6,
|
||||
|
||||
// navigation related props
|
||||
navPrev?: string | JSX.Element,
|
||||
navNext?: string | JSX.Element,
|
||||
onPrevMonthClick?: (newCurrentMonth: momentPropTypes.momentObj) => void,
|
||||
onNextMonthClick?: (newCurrentMonth: momentPropTypes.momentObj) => void,
|
||||
transitionDuration?: number,
|
||||
|
||||
// day presentation and interaction related props
|
||||
daySize?: number,
|
||||
renderCalendarDay?: (day: momentPropTypes.momentObj) => (string | JSX.Element),
|
||||
renderDayContents?: (day: momentPropTypes.momentObj) => (string | JSX.Element),
|
||||
minimumNights?: number,
|
||||
disabled?: DisabledShape,
|
||||
isOutsideRange?: (day: any) => boolean,
|
||||
isDayBlocked?: (day: any) => boolean,
|
||||
isDayHighlighted?: (day: any) => boolean,
|
||||
|
||||
// internationalization props
|
||||
monthFormat?: 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
|
||||
// components/DayPickerShape.jsx
|
||||
interface DayPickerShape {
|
||||
renderMonth?: (day: momentPropTypes.momentObj) => (string | JSX.Element),
|
||||
enableOutsideDays?: boolean,
|
||||
numberOfMonths?: number,
|
||||
@@ -327,20 +421,45 @@ declare namespace ReactDates {
|
||||
phrases?: SingleDatePickerPhrases,
|
||||
dayAriaLabelFormat?: string,
|
||||
|
||||
isRTL?: boolean,
|
||||
isRTL?: boolean
|
||||
}
|
||||
|
||||
// components/DayPickerSingleDateController.jsx
|
||||
interface DayPickerSingleDateControllerShape extends DayPickerShape {
|
||||
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,
|
||||
}
|
||||
|
||||
type DayPickerSingleDateController = React.ClassicComponentClass<DayPickerSingleDateControllerShape>;
|
||||
var DayPickerSingleDateController: React.ClassicComponentClass<DayPickerSingleDateControllerShape>;
|
||||
|
||||
// components/SingleDatePicker.js
|
||||
type SingleDatePicker = React.ClassicComponentClass<SingleDatePickerShape>;
|
||||
var SingleDatePicker: React.ClassicComponentClass<SingleDatePickerShape>;
|
||||
|
||||
// UTILS
|
||||
//
|
||||
// utils/isInclusivelyAfterDay.js
|
||||
var isInclusivelyAfterDay: (a: moment.Moment, b: moment.Moment) => boolean;
|
||||
// utils/isInclusivelyBeforeDay.js
|
||||
var isInclusivelyBeforeDay: (a: moment.Moment, b: moment.Moment) => boolean;
|
||||
// utils/isNextDay.js
|
||||
var isNextDay: (a: moment.Moment, b: moment.Moment) => boolean;
|
||||
// utils/isSameDay.js
|
||||
var isSameDay: (a: moment.Moment, b: moment.Moment) => boolean;
|
||||
|
||||
// utils/toISODateString.js
|
||||
var toISODateString: (date: moment.MomentInput, currentFormat: moment.MomentFormatSpecification) => string | null;
|
||||
// utils/toLocalizedDateString.js
|
||||
var toLocalizedDateString: (date: moment.MomentInput, currentFormat: moment.MomentFormatSpecification) => string | null;
|
||||
|
||||
// utils/toMomentObject.js
|
||||
var toMomentObject: (dateString: moment.MomentInput, customFormat: moment.MomentFormatSpecification) => moment.Moment | null;
|
||||
}
|
||||
|
||||
Regular → Executable
+6
-3
@@ -1,5 +1,5 @@
|
||||
import * as React from "react";
|
||||
import moment = require("moment");
|
||||
import * as React from 'react';
|
||||
import moment = require('moment');
|
||||
|
||||
import {
|
||||
SingleDatePicker,
|
||||
@@ -75,9 +75,11 @@ class DateRangePickerMinimumTest extends React.Component {
|
||||
render() {
|
||||
return <DateRangePicker
|
||||
startDate={moment()}
|
||||
startDateId='startDateId'
|
||||
endDate={moment()}
|
||||
onDatesChange={(arg)=> {}}
|
||||
endDateId='endDateId'
|
||||
focusedInput="startDate"
|
||||
onDatesChange={(arg) => {}}
|
||||
onFocusChange={(arg) => {}}
|
||||
/>
|
||||
}
|
||||
@@ -122,6 +124,7 @@ class DateRangePickerFullTest extends React.Component {
|
||||
orientation="horizontal"
|
||||
monthFormat="MM"
|
||||
renderDayContents={day => day.toString()}
|
||||
onClose={(final:any) =>{}}
|
||||
/>
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user