From 65e927604277f0cdaaa67664225f322c621c4ce6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Nore=C3=B1a?= Date: Sun, 12 Aug 2018 18:15:44 -0500 Subject: [PATCH 1/3] fix wrong and missing properties in the 3 components, add localeconfig --- types/react-native-calendars/index.d.ts | 617 ++++++++++-------- .../react-native-calendars-tests.tsx | 62 +- 2 files changed, 379 insertions(+), 300 deletions(-) diff --git a/types/react-native-calendars/index.d.ts b/types/react-native-calendars/index.d.ts index 3784c1f628..449085303a 100644 --- a/types/react-native-calendars/index.d.ts +++ b/types/react-native-calendars/index.d.ts @@ -1,170 +1,92 @@ -// Type definitions for react-native-calendars 1.20 +// Type definitions for react-native-calendarss 1.20 // Project: https://github.com/wix/react-native-calendars#readme // Definitions by: Tyler Zhang +// David Noreña // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.8 import * as React from 'react'; -import { ViewProps, StyleProp } from 'react-native'; +import { StyleProp, TextStyle, ViewStyle } from 'react-native'; +export import LocaleConfig = require('xdate'); export interface DateObject { - year: number; - month: number; day: number; - timestamp: number; dateString: string; + month: number; + timestamp: number; + year: number; } -export interface CalendarTheme { - backgroundColor?: string; - calendarBackground?: string; - textSectionTitleColor?: string; - selectedDayBackgroundColor?: string; - selectedDayTextColor?: string; - todayTextColor?: string; - dayTextColor?: string; - textDisabledColor?: string; - dotColor?: string; - selectedDotColor?: string; - arrowColor?: string; - monthTextColor?: string; - textDayFontFamily?: string; - textMonthFontFamily?: string; - textDayHeaderFontFamily?: string; - textMonthFontWeight?: string; - textDayFontSize?: number; - textMonthFontSize?: number; - textDayHeaderFontSize?: number; -} - -export interface DayComponentProps { - state: '' | 'selected' | 'disabled' | 'today'; - theme: CalendarTheme; - onPress: () => any; - onLongPress: () => any; - date: DateObject; - marking: false | Marking[]; -} - -export interface CalendarBaseProps { - /** - * Styles for the view - */ - style?: StyleProp; - - /** - * Specify theme properties to override specific styles for calendar parts. Default = {} - */ - theme?: CalendarTheme; - - /** - * Initially visible month. Default = Date() - */ - current?: Date | string; - - /** - * Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined - */ - minDate?: Date | string; - - /** - * Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined - */ - maxDate?: Date | string; - - /** - * Handler which gets executed on day press. Default = undefined - */ - onDayPress?: (day: number) => void; - - /** - * Handler which gets executed on day long press. Default = undefined - */ - onDayLongPress?: (day: number) => void; - - /** - * Month format in calendar title. Formatting values: http://arshaw.com/xdate/#Formatting - */ - monthFormat?: string; - - /** - * Handler which gets executed when visible month changes in calendar. Default = undefined - */ - onMonthChange?: (month: number) => void; - - /** - * Hide month navigation arrows. Default = false - */ - hideArrows?: boolean; - - /** - * Replace default arrows with custom ones (direction can be 'left' or 'right') - */ - renderArrow?: (direction: 'left' | 'right') => React.ReactNode; - - /** - * Do not show days of other months in month page. Default = false - */ - hideExtraDays?: boolean; - - /** - * If hideArrows=false and hideExtraDays=false do not switch month when tapping on greyed out - * day from another month that is visible in calendar page. Default = false - */ - disableMonthChange?: boolean; - - /** - * If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday. - */ - firstDay?: number; - - /** - * Hide day names. Default = false - */ - hideDayNames?: boolean; - - /** - * Show week numbers to the left. Default = false - */ - showWeekNumbers?: boolean; - - /** - * Handler which gets executed when press arrow icon left. It receive a callback can go back month - */ - onPressArrowLeft?: (month: number) => void; - - /** - * Handler which gets executed when press arrow icon left. It receive a callback can go next month - */ - onPressArrowRight?: (month: number) => void; - - /** - * Custom day renderer - */ - dayComponent?: React.Component | React.SFC; -} - -export interface DotForMultiDot { +export interface CalendarDot { key: string; color: string; selectedDotColor?: string; } -export interface MultiDotMarking { - dots: DotForMultiDot[]; - selected?: boolean; - selectedColor?: string; - disabled?: boolean; +export interface CalendarTheme { + arrowColor?: string; + backgroundColor?: string; + calendarBackground?: string; + dayTextColor?: string; + dotColor?: string; + monthTextColor?: string; + selectedDayBackgroundColor?: string; + selectedDayTextColor?: string; + selectedDotColor?: string; + textDayFontFamily?: string; + textDayFontSize?: number; + textDayHeaderFontFamily?: string; + textDayHeaderFontSize?: number; + textDisabledColor?: string; + textMonthFontFamily?: string; + textMonthFontWeight?: string; + textMonthFontSize?: number; + textSectionTitleColor?: string; + todayTextColor?: string; +} + +export type DateCallbackHandler = (date: DateObject) => void; + +export type TCalendarDate = Date | DateObject | number | string | XDate; + +export interface MarkedDateCustomStyles { + container: StyleProp; + text: StyleProp; +} + +export interface CalendarDot { + key: string; + color: string; + selectedDotColor?: string; +} + +export interface CustomMarking { + customStyles: MarkedDateCustomStyles; } export interface DotMarking { - selected?: boolean; - marked?: boolean; - selectedColor?: string; - dotColor?: string; activeOpacity?: number; disabled?: boolean; disableTouchEvent?: boolean; + dotColor?: string; + marked?: boolean; + selected?: boolean; + selectedColor?: string; +} + +export interface MultiDotMarking { + disabled?: boolean; + dots: CalendarDot[]; + selected?: boolean; + selectedColor?: string; +} + +export interface MultiPeriodMarking { + periods: Array<{ + startingDay?: boolean; + endingDay?: boolean; + color?: string; + }>; } export interface PeriodMarking { @@ -176,29 +98,15 @@ export interface PeriodMarking { disabled?: boolean; } -export interface MultiPeriodMarking { - periods: Array<{ - startingDay?: boolean; - endingDay?: boolean; - color?: string; - }>; -} - -export interface CustomMarking { - customStyles: any; -} - export type Marking = - MultiDotMarking | - DotMarking | - PeriodMarking | - MultiPeriodMarking | - CustomMarking; + CustomMarking | DotMarking | + MultiDotMarking | MultiPeriodMarking | + PeriodMarking; -export interface MultiDotMarkingProps { - markingType: 'multi-dot'; +export interface CustomMarkingProps { + markingType: 'custom'; markedDates: { - [date: string]: MultiDotMarking; + [date: string]: CustomMarking; }; } @@ -209,17 +117,10 @@ export interface DotMarkingProps { }; } -export interface PeriodMarkingProps { - markingType: 'period'; +export interface MultiDotMarkingProps { + markingType: 'multi-dot'; markedDates: { - [date: string]: PeriodMarking; - }; -} - -export interface CustomMarkingProps { - markingType: 'custom'; - markedDates: { - [date: string]: CustomMarking; + [date: string]: MultiDotMarking; }; } @@ -234,6 +135,13 @@ export interface MultiPeriodMarkingProps { }; } +export interface PeriodMarkingProps { + markingType: 'period'; + markedDates: { + [date: string]: PeriodMarking; + }; +} + export type CalendarMarkingProps = MultiDotMarkingProps | DotMarkingProps | @@ -242,61 +150,217 @@ export type CalendarMarkingProps = CustomMarkingProps | {}; -export class Calendar extends React.Component {} +export interface DayComponentProps { + date: DateObject; + marking: false | Marking[]; + onPress: () => any; + onLongPress: () => any; + state: '' | 'selected' | 'disabled' | 'today'; + theme: CalendarTheme; +} + +export interface CalendarBaseProps { + /** + * Initially visible month. Default = Date() + */ + current?: TCalendarDate; + + /** + * Provide custom day rendering component. + */ + dayComponent?: React.Component | React.SFC; + + /** + * Disable days by default. Default = false + */ + disabledByDefault?: boolean; + + /** + * If hideArrows=false and hideExtraDays=false do not switch month when tapping on greyed out + * day from another month that is visible in calendar page. Default = false + */ + disableMonthChange?: boolean; + + /** + * Display loading indicator. Default = false + */ + displayLoadingIndicator?: boolean; + + /** + * If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday. + */ + firstDay?: number; + + /** + * Hide month navigation arrows. Default = false + */ + hideArrows?: boolean; + + /** + * Hide day names. Default = false + */ + hideDayNames?: boolean; + + /** + * Do not show days of other months in month page. Default = false + */ + hideExtraDays?: boolean; + + /** + * Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined + */ + maxDate?: TCalendarDate; + + /** + * Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined + */ + minDate?: TCalendarDate; + + /** + * Month format in calendar title. Formatting values: http://arshaw.com/xdate/#Formatting + */ + monthFormat?: string; + + /** + * Handler which gets executed on day press. Default = undefined + */ + onDayPress?: DateCallbackHandler; + + /** + * Handler which gets executed on day long press. Default = undefined + */ + onDayLongPress?: DateCallbackHandler; + + /** + * Handler which gets executed when press arrow icon left. It receive a callback can go back month + */ + onPressArrowLeft?: (substractMonth: () => void) => void; + + /** + * Handler which gets executed when press arrow icon left. It receive a callback can go next month + */ + onPressArrowRight?: (addMonth: () => void) => void; + + /** + * Handler which gets executed when visible month changes in calendar. Default = undefined + */ + onMonthChange?: DateCallbackHandler; -export interface CalendarListBaseProps extends CalendarBaseProps { /** * Callback which gets executed when visible months change in scroll view. Default = undefined */ - onVisibleMonthsChange?: (months: number) => void; + onVisibleMonthsChange?: (months: DateObject[]) => void; /** - * Max amount of months allowed to scroll to the past. Default = 50 + * Replace default arrows with custom ones (direction can be 'left' or 'right') */ - pastScrollRange?: number; + renderArrow?: (direction: 'left' | 'right') => React.ReactNode; + + /** + * Show week numbers to the left. Default = false + */ + showWeekNumbers?: boolean; + + /** + * Calendar container style. + */ + style?: StyleProp; + + /** + * Specify theme properties to override specific styles for calendar parts. Default = {} + */ + theme?: CalendarTheme; +} + +export class Calendar extends React.Component { } + +export interface CalendarListBaseProps extends CalendarBaseProps { + /** + * Set custom calendar heigth. + */ + calendarHeight?: number; + + /** + * Set custom calendar width. + */ + calendarWidth?: number; /** * Max amount of months allowed to scroll to the future. Default = 50 */ futureScrollRange?: number; + /** + * Enable horizontal scrolling, default = false + */ + horizontal?: boolean; + + /** + * Enable paging on horizontal, default = false + */ + pagingEnabled?: boolean; + + /** + * Max amount of months allowed to scroll to the past. Default = 50 + */ + pastScrollRange?: number; + /** * Enable or disable scrolling of calendar list */ scrollEnabled?: boolean; + /** + * When true, the calendar list scrolls to top when the status bar is tapped. Default = true + */ + scrollsToTop?: boolean; + /** * Enable or disable vertical scroll indicator. Default = false */ showScrollIndicator?: boolean; - - /** - * Enable horizontal scrolling, default = false - */ - horizontal?: boolean; - - /** - * Enable paging on horizontal, default = false - */ - pagingEnabled?: boolean; - - /** - * Set custom calendarWidth. - */ - calendarWidth?: boolean; } -export class CalendarList extends React.Component {} +export class CalendarList extends React.Component { } -export interface AgendaProps { +export interface AgendaThemeStyle extends CalendarTheme { + agendaDayNumColor?: string; + agendaDayTextColor?: string; + agendaKnobColor?: string; + agendaTodayColor?: string; +} + +export interface AgendaItemsMap { + [date: string]: TItem[]; +} + +export interface AgendaProps { /** - * the list of items that have to be displayed in agenda. If you want to render item as empty date - * the value of date key kas to be an empty array []. If there exists no value for date key it is - * considered that the date in question is not yet loaded + * Display loading indicator. Default = false */ - items: { - [key: string]: T[]; - }; + displayLoadingIndicator?: boolean; + + /** + * If firstDay = 1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday. + */ + firstDay?: number; + + /** + * Max amount of months allowed to scroll to the future. Default = 50 + */ + futureScrollRange?: number; + + /** + * Hide knob button. Default = false + */ + hideKnob?: boolean; + + /** + * The list of items that have to be displayed in agenda. If you want to render item as empty date + * the value of date key kas to be an empty array []. If there exists no value for date key it is + * considered that the date in question is not yet loaded + */ + items?: AgendaItemsMap; /** * callback that gets called when items for a certain month should be loaded (month became visible) @@ -304,115 +368,100 @@ export interface AgendaProps { loadItemsForMonth?: (date: DateObject) => void; /** - * callback that fires when the calendar is opened or closed + * Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined */ - onCalendarToggled?: (calendarOpened: boolean) => void; - - /** - * callback that gets called on day press - */ - onDayPress?: (day: number) => void; - - /** - * callback that gets called when day changes while scrolling agenda list - */ - onDayChange?: (day: number) => void; - - /** - * initially selected day - */ - selected?: Date | string; + maxDate?: TCalendarDate; /** * Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined */ - minDate?: Date | string; + minDate?: TCalendarDate; /** - * Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined + * Month format in calendar title. Formatting values: http://arshaw.com/xdate/#Formatting */ - maxDate?: Date | string; + monthFormat?: string; /** - * Max amount of months allowed to scroll to the past. Default = 50 + * Handler which gets executed on day press. Default = undefined + */ + onDayPress?: DateCallbackHandler; + + /** + * Handler which gets executed when the calendar is opened or closed. Default = undefined + */ + onCalendarToggled?: (calendarOpened: boolean) => void; + + /** + * Handler that gets called when day changes while scrolling agenda list. Default = undefined + */ + onDayChange?: DateCallbackHandler; + + /** + * If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. + * Make sure to also set the refreshing prop correctly. Default = undefined + */ + onRefresh?: () => void; + + /** + * Max amount of months allowed to scroll to the past. Default = 50 */ pastScrollRange?: number; /** - * Max amount of months allowed to scroll to the future. Default = 50 - */ - futureScrollRange?: number; - - /** - * specify how each item should be rendered in agenda - */ - renderItem: (item: T, firstItemInDay?: T) => React.ReactNode; - - /** - * specify how each date should be rendered. day can be undefined if the item is not first in that day. - */ - renderDay?: (day: DateObject | undefined, item: T) => React.ReactNode; - - /** - * specify how empty date content with no items should be rendered - */ - renderEmptyDate?: () => React.ReactNode; - - /** - * specify how agenda knob should look like - */ - renderKnob?: () => React.ReactNode; - - /** - * specify what should be rendered instead of ActivityIndicator - */ - renderEmptyData?: () => React.ReactNode; - - /** - * specify your item comparison function for increased performance - */ - rowHasChanged?: (r1: any, r2: any) => boolean; - - /** - * Hide knob button. Default = false - */ - hideKnob?: boolean; - - /** - * A RefreshControl component, used to provide pull-to-refresh funtionality for the ScrollView + * A RefreshControl component, used to provide pull-to-refresh funtionality for the ScrollView. */ refreshControl?: React.ReactNode; /** - * If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. - * Make sure to also set the refreshing prop correctly. - */ - onRefresh?: () => any; - - /** - * Set this true while waiting for new data from a refresh + * Set this true while waiting for new data from a refresh. */ refreshing?: boolean; /** - * Display loading indicator. Default = false + * Specify how each day should be rendered. + * Date can be undefined if the item has not property date. */ - displayLoadingIndicator?: boolean; + renderDay?: (date: DateObject | undefined, item: TItem) => React.ReactNode; /** - * agenda theme + * Specify what should be rendered instead of ActivityIndicator */ - theme?: { - agendaDayTextColor?: string; - agendaDayNumColor?: string; - agendaTodayColor?: string; - agendaKnobColor?: string; - } & CalendarTheme; + renderEmptyData?: () => React.ReactNode; /** - * agenda container style + * Specify how empty date content with no items should be rendered. */ - style?: StyleProp; + renderEmptyDate: () => React.ReactNode; + + /** + * Specify how each item should be rendered in agenda. + */ + renderItem: (item: TItem, firstDayInDay: boolean) => React.ReactNode; + + /** + * Specify how agenda knob should look like. + */ + renderKnob?: () => React.ReactNode; + + /** + * specify your item comparison function for increased performance + */ + rowHasChanged: (r1: TItem, r2: TItem) => boolean; + + /** + * Initially visible month. Default = Date() + */ + selected?: TCalendarDate; + + /** + * Agenda container style. + */ + style?: StyleProp; + + /** + * Specify theme properties to override specific styles for agenda parts. Default = {} + */ + theme?: AgendaThemeStyle; } - -export class Agenda extends React.Component & CalendarMarkingProps> {} +export class Agenda extends React.Component & CalendarMarkingProps> { } diff --git a/types/react-native-calendars/react-native-calendars-tests.tsx b/types/react-native-calendars/react-native-calendars-tests.tsx index 5b438937e1..3a095a597e 100644 --- a/types/react-native-calendars/react-native-calendars-tests.tsx +++ b/types/react-native-calendars/react-native-calendars-tests.tsx @@ -10,23 +10,23 @@ import { Calendar, CalendarList, Agenda } from "react-native-calendars"; // Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined maxDate={"2012-05-30"} // Handler which gets executed on day press. Default = undefined - onDayPress={day => { - console.log("selected day", day); + onDayPress={date => { + console.log("selected day", date.day); }} // Handler which gets executed on day long press. Default = undefined - onDayLongPress={day => { - console.log("selected day", day); + onDayLongPress={date => { + console.log("selected day", date.day); }} // Month format in calendar title. Formatting values: http://arshaw.com/xdate/#Formatting monthFormat={"yyyy MM"} // Handler which gets executed when visible month changes in calendar. Default = undefined - onMonthChange={month => { - console.log("month changed", month); + onMonthChange={date => { + console.log("month changed", date.month); }} // Hide month navigation arrows. Default = false hideArrows={true} // Replace default arrows with custom ones (direction can be 'left' or 'right') - renderArrow={direction =>
} + renderArrow={direction => } // Do not show days of other months in month page. Default = false hideExtraDays={true} // If hideArrows=false and hideExtraDays=false do not switch month when tapping on greyed out @@ -42,6 +42,7 @@ import { Calendar, CalendarList, Agenda } from "react-native-calendars"; onPressArrowLeft={substractMonth => console.log(substractMonth)} // Handler which gets executed when press arrow icon left. It receive a callback can go next month onPressArrowRight={addMonth => console.log(addMonth)} + disabledByDefault={true} />; { - console.log("selected day", day); + onDayPress={date => { + console.log("selected day", date.day); }} // Handler which gets executed on day long press. Default = undefined - onDayLongPress={day => { - console.log("selected day", day); + onDayLongPress={date => { + console.log("selected day", date.day); }} // Month format in calendar title. Formatting values: http://arshaw.com/xdate/#Formatting monthFormat={"yyyy MM"} // Handler which gets executed when visible month changes in calendar. Default = undefined - onMonthChange={month => { - console.log("month changed", month); + onMonthChange={date => { + console.log("month changed", date.month); }} // Hide month navigation arrows. Default = false hideArrows={true} // Replace default arrows with custom ones (direction can be 'left' or 'right') - renderArrow={direction =>
} + renderArrow={direction => } // Do not show days of other months in month page. Default = false hideExtraDays={true} // If hideArrows=false and hideExtraDays=false do not switch month when tapping on greyed out @@ -267,7 +268,7 @@ const workout = { key: "workout", color: "green" }; // Hide month navigation arrows. Default = false hideArrows={true} // Replace default arrows with custom ones (direction can be 'left' or 'right') - renderArrow={direction =>
} + renderArrow={direction => } // Do not show days of other months in month page. Default = false hideExtraDays={true} // If hideArrows=false and hideExtraDays=false do not switch month when tapping on greyed out @@ -283,6 +284,29 @@ const workout = { key: "workout", color: "green" }; onPressArrowLeft={substractMonth => console.log(substractMonth)} // Handler which gets executed when press arrow icon left. It receive a callback can go next month onPressArrowRight={addMonth => console.log(addMonth)} + // Disable days by default. Default = false + disabledByDefault={true} + // Display loading indicator. Default = false + displayLoadingIndicator={true} + // When true, the calendar list scrolls to top when the status bar is tapped. Default = true + scrollsToTop={true} + // Enable paging on horizontal, default = false + pagingEnabled={true} + // Provide custom day rendering component. + dayComponent={({ date, state }) => { + return ( + + + {date.day} + + + ); + }} />; { - return ; + return firstItemInDay ? : ; }} // specify how each date should be rendered. day can be undefined if the item is not first in that day. renderDay={(day, item) => { @@ -371,4 +395,10 @@ const workout = { key: "workout", color: "green" }; }} // agenda container style style={{}} + // Display loading indicator. Default = false + displayLoadingIndicator={true} + // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday. + firstDay={1} + // Month format in calendar title. Formatting values: http://arshaw.com/xdate/#Formatting + monthFormat={"yyyy MM"} />; From 948f0f47bd7c5060a1631edcd0175cf1f665b8e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Nore=C3=B1a?= Date: Sun, 12 Aug 2018 18:25:49 -0500 Subject: [PATCH 2/3] fix for --- types/react-native-calendars/tslint.json | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/types/react-native-calendars/tslint.json b/types/react-native-calendars/tslint.json index 3db14f85ea..82403bc9ec 100644 --- a/types/react-native-calendars/tslint.json +++ b/types/react-native-calendars/tslint.json @@ -1 +1,6 @@ -{ "extends": "dtslint/dt.json" } +{ + "extends": "dtslint/dt.json", + "rules": { + "file-name-casing": [true, "kebab-case"] + } +} From 255979639d96d507a9c8ee6ce7dc712ee2019f12 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Nore=C3=B1a?= Date: Sun, 12 Aug 2018 18:29:40 -0500 Subject: [PATCH 3/3] fix comments --- types/react-native-calendars/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/react-native-calendars/index.d.ts b/types/react-native-calendars/index.d.ts index 449085303a..b7a1736d2a 100644 --- a/types/react-native-calendars/index.d.ts +++ b/types/react-native-calendars/index.d.ts @@ -1,4 +1,4 @@ -// Type definitions for react-native-calendarss 1.20 +// Type definitions for react-native-calendars 1.20 // Project: https://github.com/wix/react-native-calendars#readme // Definitions by: Tyler Zhang // David Noreña