From 52909ba7ebdcd91a0fb4489abf802e11d4ac6a81 Mon Sep 17 00:00:00 2001 From: Paito Anderson Date: Thu, 27 Jun 2019 12:20:42 -0400 Subject: [PATCH] [react-big-calendar] Update for version 0.22.0 (#36446) --- types/react-big-calendar/index.d.ts | 76 +++++++++---------- .../lib/addons/dragAndDrop.d.ts | 6 +- .../react-big-calendar-tests.tsx | 40 +++++++--- 3 files changed, 66 insertions(+), 56 deletions(-) diff --git a/types/react-big-calendar/index.d.ts b/types/react-big-calendar/index.d.ts index df2179cdd6..5edc708424 100644 --- a/types/react-big-calendar/index.d.ts +++ b/types/react-big-calendar/index.d.ts @@ -1,4 +1,4 @@ -// Type definitions for react-big-calendar 0.20 +// Type definitions for react-big-calendar 0.22 // Project: https://github.com/intljusticemission/react-big-calendar // Definitions by: Piotr Witek // Austin Turner @@ -13,6 +13,7 @@ // Siarhey Belofost // Mark Nelissen // Eric Kenney +// Paito Anderson // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.8 import { Validator } from 'prop-types'; @@ -24,15 +25,14 @@ export type SlotPropGetter = (date: Date) => { className?: string, style?: React export type stringOrDate = string | Date; export type ViewKey = 'MONTH' | 'WEEK' | 'WORK_WEEK' | 'DAY' | 'AGENDA'; export type View = 'month' | 'week' | 'work_week' | 'day' | 'agenda'; -export type Views = View[] | { +export type ViewsProps = View[] | { work_week?: boolean | React.SFC | React.Component, day?: boolean | React.SFC | React.Component, agenda?: boolean | React.SFC | React.Component, month?: boolean | React.SFC | React.Component, week?: boolean | React.SFC | React.Component }; -export type Navigate = 'PREV' | 'NEXT' | 'TODAY' | 'DATE'; - +export type NavigateAction = 'PREV' | 'NEXT' | 'TODAY' | 'DATE'; export interface Event { allDay?: boolean; title?: string; @@ -171,10 +171,10 @@ export interface Components { export interface ToolbarProps { date: Date; view: View; - views: Views; + views: ViewsProps; label: string; localizer: { messages: Messages }; - onNavigate: (navigate: Navigate, date?: Date) => void; + onNavigate: (navigate: NavigateAction, date?: Date) => void; onView: (view: View) => void; children?: React.ReactNode; } @@ -248,15 +248,15 @@ export class DateLocalizer { format(value: FormatInput, format: string, culture: Culture): string; } -export interface BigCalendarProps - extends React.Props> { +export interface CalendarProps + extends React.Props> { localizer: DateLocalizer; date?: stringOrDate; getNow?: () => Date; view?: View; events?: TEvent[]; - onNavigate?: (newDate: Date, view: View, action: Navigate) => void; + onNavigate?: (newDate: Date, view: View, action: NavigateAction) => void; onView?: (view: View) => void; onDrillDown?: (date: Date, view: View) => void; onSelectSlot?: (slotInfo: { @@ -270,7 +270,7 @@ export interface BigCalendarProps boolean | undefined | null; onRangeChange?: (range: Date[] | { start: stringOrDate; end: stringOrDate }) => void; selected?: any; - views?: Views; + views?: ViewsProps; drilldownView?: View | null; getDrilldownView?: ((targetDate: Date, currentViewName: View, configuredViewNames: View[]) => void) | null; length?: number; @@ -310,44 +310,38 @@ export interface BigCalendarProps extends React.Component> { - components: { - dateCellWrapper: React.ComponentType; - dayWrapper: React.ComponentType; - eventWrapper: React.ComponentType; - }; - /** - * create DateLocalizer from globalize - */ - static globalizeLocalizer(globalizeInstance: object): DateLocalizer; - /** - * create DateLocalizer from a moment - */ - static momentLocalizer(momentInstance: object): DateLocalizer; - /** - * action constants for Navigate - */ - static Navigate: { - PREVIOUS: 'PREV'; - NEXT: 'NEXT'; - TODAY: 'TODAY'; - DATE: 'DATE'; - }; - /** - * action constants for View - */ - static Views: Record; - static move(View: ViewStatic | ViewKey, options: MoveOptions): Date; +> extends React.Component> {} + +export interface components { + dateCellWrapper: React.ComponentType; + dayWrapper: React.ComponentType; + eventWrapper: React.ComponentType; } +export function globalizeLocalizer(globalizeInstance: object): DateLocalizer; +export function momentLocalizer(momentInstance: object): DateLocalizer; +export interface Navigate { + PREVIOUS: 'PREV'; + NEXT: 'NEXT'; + TODAY: 'TODAY'; + DATE: 'DATE'; +} +export interface Views { + MONTH: 'month'; + WEEK: 'week'; + WORK_WEEK: 'work_week'; + DAY: 'day'; + AGENDA: 'agenda'; +} +export function move(View: ViewStatic | ViewKey, options: MoveOptions): Date; diff --git a/types/react-big-calendar/lib/addons/dragAndDrop.d.ts b/types/react-big-calendar/lib/addons/dragAndDrop.d.ts index ff17f4d74e..10ef0ccd86 100644 --- a/types/react-big-calendar/lib/addons/dragAndDrop.d.ts +++ b/types/react-big-calendar/lib/addons/dragAndDrop.d.ts @@ -1,4 +1,4 @@ -import BigCalendar, { BigCalendarProps, Event, stringOrDate } from '../../index'; +import { Calendar, CalendarProps, Event, stringOrDate } from '../../index'; import * as React from 'react'; export interface withDragAndDropProps { @@ -8,7 +8,7 @@ export interface withDragAndDropProps { } declare class DragAndDropCalendar - extends React.Component & withDragAndDropProps> {} + extends React.Component & withDragAndDropProps> {} -declare function withDragAndDrop(calendar: typeof BigCalendar): typeof DragAndDropCalendar; +declare function withDragAndDrop(calendar: typeof Calendar): typeof DragAndDropCalendar; export default withDragAndDrop; diff --git a/types/react-big-calendar/react-big-calendar-tests.tsx b/types/react-big-calendar/react-big-calendar-tests.tsx index 0c2272d808..42f832011f 100644 --- a/types/react-big-calendar/react-big-calendar-tests.tsx +++ b/types/react-big-calendar/react-big-calendar-tests.tsx @@ -1,6 +1,22 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; -import BigCalendar, { BigCalendarProps, Navigate, View, DateRange, DateLocalizer, ToolbarProps, EventProps, EventWrapperProps } from "react-big-calendar"; +import { + Calendar, + CalendarProps, + momentLocalizer, + globalizeLocalizer, + move, + Views, + components, + Navigate, + View, + DateRange, + DateLocalizer, + ToolbarProps, + EventProps, + EventWrapperProps, + NavigateAction +} from "react-big-calendar"; import withDragAndDrop from "react-big-calendar/lib/addons/dragAndDrop"; // Don't want to add this as a dependency, because it is only used for tests. @@ -47,7 +63,7 @@ class CalendarResource { localizer: DateLocalizer; } const Basic = ({ localizer }: Props) => ( - ); - const localizer = BigCalendar.momentLocalizer(moment); + const localizer = momentLocalizer(moment); ReactDOM.render(, document.body); } @@ -67,7 +83,7 @@ class CalendarResource { interface Props { localizer: DateLocalizer; } - const DragAndDropCalendar = withDragAndDrop(BigCalendar); + const DragAndDropCalendar = withDragAndDrop(Calendar); const DnD = ({ localizer }: Props) => ( ); - const localizer = BigCalendar.momentLocalizer(moment); + const localizer = momentLocalizer(moment); ReactDOM.render(, document.body); } @@ -91,8 +107,8 @@ class CalendarResource { const DaySFC: React.SFC = () => null; // supplying object to 'views' prop with only some of the supported views. // A view can be a boolean or an SFC - ReactDOM.render(, document.body); + ReactDOM.render(, document.body); } { - class MyCalendar extends BigCalendar {} + class MyCalendar extends Calendar {} // Full API Example Test - based on API Documentation // http://intljusticemission.github.io/react-big-calendar/examples/index.html#api - class FullAPIExample extends React.Component> { + class FullAPIExample extends React.Component> { render() { return ( new Date()} view={'day'} events={getEvents()} - onNavigate={(newDate: Date, view: View, action: Navigate) => {}} + onNavigate={(newDate: Date, view: View, action: NavigateAction) => {}} onView={(view: View) => {}} onSelectSlot={slotInfo => { const start = slotInfo.start; @@ -198,7 +214,7 @@ class CalendarResource { } } - const localizer = BigCalendar.globalizeLocalizer(globalize); + const localizer = globalizeLocalizer(globalize); ReactDOM.render(, document.body); }