From 53db0897816810df904fbbbbda46fef65a1c1e1a Mon Sep 17 00:00:00 2001 From: Yann Normand Date: Fri, 9 Nov 2018 15:14:19 +1000 Subject: [PATCH 1/4] add a new generic for resource type --- types/react-big-calendar/index.d.ts | 28 +++++++-------- .../react-big-calendar-tests.tsx | 35 ++++++++++++++++--- 2 files changed, 44 insertions(+), 19 deletions(-) diff --git a/types/react-big-calendar/index.d.ts b/types/react-big-calendar/index.d.ts index bbfd7047ec..eba901bfc9 100644 --- a/types/react-big-calendar/index.d.ts +++ b/types/react-big-calendar/index.d.ts @@ -171,19 +171,19 @@ export class DateLocalizer { format(value: FormatInput, format: string, culture: Culture): string; } -export interface BigCalendarProps extends React.Props> { +export interface BigCalendarProps extends React.Props> { localizer: DateLocalizer; date?: stringOrDate; now?: Date; view?: View; - events?: T[]; + events?: TEvent[]; onNavigate?: (newDate: Date, action: Navigate) => void; onView?: (view: View) => void; onDrillDown?: (date: Date, view: View) => void; onSelectSlot?: (slotInfo: { start: stringOrDate, end: stringOrDate, slots: Date[] | string[], action: 'select' | 'click' | 'doubleClick' }) => void; - onDoubleClickEvent?: (event: T, e: React.SyntheticEvent) => void; - onSelectEvent?: (event: T, e: React.SyntheticEvent) => void; + onDoubleClickEvent?: (event: TEvent, e: React.SyntheticEvent) => void; + onSelectEvent?: (event: TEvent, e: React.SyntheticEvent) => void; onSelecting?: (range: { start: stringOrDate, end: stringOrDate }) => boolean | undefined | null; selected?: any; views?: View[] | { @@ -202,7 +202,7 @@ export interface BigCalendarProps extends React.Props { className?: string, style?: React.CSSProperties }; + eventPropGetter?: (event: TEvent, start: stringOrDate, end: stringOrDate, isSelected: boolean) => { className?: string, style?: React.CSSProperties }; slotPropGetter?: (date: Date) => { className?: string, style?: object }; dayPropGetter?: (date: Date) => { className?: string, style?: object }; showMultiDayTimes?: boolean; @@ -213,14 +213,14 @@ export interface BigCalendarProps extends React.Props string); - allDayAccessor?: keyof T | ((event: T) => boolean); - startAccessor?: keyof T | ((event: T) => Date); - endAccessor?: keyof T | ((event: T) => Date); - resourceAccessor?: keyof T | ((event: T) => any); - resources?: any[]; - resourceIdAccessor?: keyof T | ((event: T) => any); - resourceTitleAccessor?: keyof T | ((event: T) => string); + titleAccessor?: keyof TEvent | ((event: TEvent) => string); + allDayAccessor?: keyof TEvent | ((event: TEvent) => boolean); + startAccessor?: keyof TEvent | ((event: TEvent) => Date); + endAccessor?: keyof TEvent | ((event: TEvent) => Date); + resourceAccessor?: keyof TEvent | ((event: TEvent) => any); + resources?: TResource[]; + resourceIdAccessor?: keyof TResource | ((resource: TResource) => any); + resourceTitleAccessor?: keyof TResource | ((resource: TResource) => string); defaultView?: View; defaultDate?: Date; className?: string; @@ -237,7 +237,7 @@ export interface MoveOptions { today: Date; } -export default class BigCalendar extends React.Component> { +export default class BigCalendar extends React.Component> { components: { dateCellWrapper: React.ComponentType, dayWrapper: React.ComponentType, diff --git a/types/react-big-calendar/react-big-calendar-tests.tsx b/types/react-big-calendar/react-big-calendar-tests.tsx index e1b561901e..e50858c546 100644 --- a/types/react-big-calendar/react-big-calendar-tests.tsx +++ b/types/react-big-calendar/react-big-calendar-tests.tsx @@ -17,13 +17,25 @@ class CalendarEvent { start: Date; end: Date; desc: string; + resourceId?: string; - constructor(_title: string, _start: Date, _end: Date, _allDay?: boolean, _desc?: string) { + constructor(_title: string, _start: Date, _end: Date, _allDay?: boolean, _desc?: string, _resourceId?: string) { this.title = _title; this.allDay = _allDay || false; this.start = _start; this.end = _end; this.desc = _desc || ''; + this.resourceId = _resourceId; + } +} + +class CalendarResource { + title: string; + id: string; + + constructor(id: string, title: string) { + this.id = id; + this.title = title; } } @@ -51,10 +63,10 @@ class CalendarEvent { { // 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 ( - {...this.props} date={new Date()} view={'day'} @@ -81,9 +93,9 @@ class CalendarEvent { rtl={true} eventPropGetter={(event, start, end, isSelected) => ({ className: 'some-class' })} titleAccessor={'title'} - allDayAccessor={(event: any) => !!event.allDay} + allDayAccessor={(event: CalendarEvent) => !!event.allDay} startAccessor={'start'} - endAccessor={(event: any) => event.end || event.start} + endAccessor={(event: CalendarEvent) => event.end || event.start} min={new Date()} max={new Date()} scrollToTime={new Date()} @@ -106,6 +118,10 @@ class CalendarEvent { dayPropGetter={customDayPropGetter} slotPropGetter={customSlotPropGetter} defaultDate={new Date()} + resources={getResources()} + resourceAccessor={event => event.resourceId} + resourceIdAccessor={resource => resource.id} + resourceTitleAccessor={resource => resource.title} /> ); } @@ -130,10 +146,19 @@ function getEvents(): CalendarEvent[] { new CalendarEvent('Happy Hour', new Date(2015, 3, 12, 17, 0, 0, 0), new Date(2015, 3, 12, 17, 30, 0, 0), undefined, 'Most important meal of the day'), new CalendarEvent('Dinner', new Date(2015, 3, 12, 20, 0, 0, 0), new Date(2015, 3, 12, 21, 0, 0, 0)), new CalendarEvent('Birthday Party', new Date(2015, 3, 13, 7, 0, 0), new Date(2015, 3, 13, 10, 30, 0)), + new CalendarEvent('Alice\'s break', new Date(2015, 3, 14, 20, 0, 0, 0), new Date(2015, 3, 14, 21, 0, 0, 0), undefined, undefined, "alice"), + new CalendarEvent('Bob\'s break', new Date(2015, 3, 15, 7, 0, 0), new Date(2015, 3, 15, 10, 30, 0), undefined, undefined, "bob"), ]; return events; } +function getResources(): CalendarResource[] { + return [ + new CalendarResource('alice', 'Alice'), + new CalendarResource('bob', 'Bob') + ]; +} + class EventAgenda extends React.Component { render() { // const { label } = this.props; From fe1169f35d5b0b9f577674f6c1ea0e34f58871af Mon Sep 17 00:00:00 2001 From: Yann Normand Date: Fri, 9 Nov 2018 16:30:58 +1000 Subject: [PATCH 2/4] upgrade to TypeScript Version 2.9 --- types/react-big-calendar/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/react-big-calendar/index.d.ts b/types/react-big-calendar/index.d.ts index eba901bfc9..e7faf76ff4 100644 --- a/types/react-big-calendar/index.d.ts +++ b/types/react-big-calendar/index.d.ts @@ -6,7 +6,7 @@ // Sebastian Silbermann // Paul Potsides // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -// TypeScript Version: 2.8 +// TypeScript Version: 2.9 import { Validator } from 'prop-types'; import * as React from 'react'; From 6ffd9f2bc60165a597b34cc1ea55ee823fccc851 Mon Sep 17 00:00:00 2001 From: Yann Normand Date: Fri, 9 Nov 2018 16:33:24 +1000 Subject: [PATCH 3/4] fix onNavigate function --- types/react-big-calendar/index.d.ts | 2 +- types/react-big-calendar/react-big-calendar-tests.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/types/react-big-calendar/index.d.ts b/types/react-big-calendar/index.d.ts index e7faf76ff4..0e7da106c2 100644 --- a/types/react-big-calendar/index.d.ts +++ b/types/react-big-calendar/index.d.ts @@ -178,7 +178,7 @@ export interface BigCalendarProps void; + onNavigate?: (newDate: Date, view: View, action: Navigate) => void; onView?: (view: View) => void; onDrillDown?: (date: Date, view: View) => void; onSelectSlot?: (slotInfo: { start: stringOrDate, end: stringOrDate, slots: Date[] | string[], action: 'select' | 'click' | 'doubleClick' }) => void; diff --git a/types/react-big-calendar/react-big-calendar-tests.tsx b/types/react-big-calendar/react-big-calendar-tests.tsx index e50858c546..4b80e8a72c 100644 --- a/types/react-big-calendar/react-big-calendar-tests.tsx +++ b/types/react-big-calendar/react-big-calendar-tests.tsx @@ -71,7 +71,7 @@ class CalendarResource { date={new Date()} view={'day'} events={getEvents()} - onNavigate={(newDate: Date, action: Navigate) => { }} + onNavigate={(newDate: Date, view: View, action: Navigate) => { }} onView={(view: View) => { }} onSelectSlot={(slotInfo) => { const start = slotInfo.start; From d2dd41340a12ebef17e104a61309611a51cf1183 Mon Sep 17 00:00:00 2001 From: Yann Normand Date: Wed, 21 Nov 2018 10:25:41 +1000 Subject: [PATCH 4/4] downgrade to Typescript 2.8 --- types/react-big-calendar/index.d.ts | 2 +- .../react-big-calendar-tests.tsx | 118 +++++++++--------- 2 files changed, 60 insertions(+), 60 deletions(-) diff --git a/types/react-big-calendar/index.d.ts b/types/react-big-calendar/index.d.ts index 0d4da60aa4..89e6f0eead 100644 --- a/types/react-big-calendar/index.d.ts +++ b/types/react-big-calendar/index.d.ts @@ -7,7 +7,7 @@ // Paul Potsides // janb87 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -// TypeScript Version: 2.9 +// TypeScript Version: 2.8 import { Validator } from 'prop-types'; import * as React from 'react'; diff --git a/types/react-big-calendar/react-big-calendar-tests.tsx b/types/react-big-calendar/react-big-calendar-tests.tsx index 918c352e0c..fd1e70f929 100644 --- a/types/react-big-calendar/react-big-calendar-tests.tsx +++ b/types/react-big-calendar/react-big-calendar-tests.tsx @@ -61,70 +61,70 @@ class CalendarResource { } { + class MyCalendar extends BigCalendar {} + // Full API Example Test - based on API Documentation // http://intljusticemission.github.io/react-big-calendar/examples/index.html#api class FullAPIExample extends React.Component> { render() { return ( - - {...this.props} - date={new Date()} - view={'day'} - events={getEvents()} - onNavigate={(newDate: Date, view: View, action: Navigate) => { }} - onView={(view: View) => { }} - onSelectSlot={(slotInfo) => { - const start = slotInfo.start; - const end = slotInfo.end; - const slots = slotInfo.slots; - }} - onSelectEvent={(event) => { }} - onSelecting={(slotInfo) => { - const start = slotInfo.start; - const end = slotInfo.end; - return true; - }} - views={['day']} - toolbar={true} - popup={true} - popupOffset={20} - selectable={true} - step={20} - rtl={true} - eventPropGetter={(event, start, end, isSelected) => ({ className: 'some-class' })} - titleAccessor={'title'} - allDayAccessor={(event: CalendarEvent) => !!event.allDay} - startAccessor={'start'} - endAccessor={(event: CalendarEvent) => event.end || event.start} - min={new Date()} - max={new Date()} - scrollToTime={new Date()} - formats={{ - dateFormat: "h a", - agendaDateFormat: (date: Date, culture?: string, localizer?: object) => "some-format", - dayRangeHeaderFormat: (range: DateRange, culture?: string, localizer?: object) => "some-format" - }} - messages={{}} - timeslots={24} - defaultView={'month'} - className={'my-calendar'} - elementProps={{ id: 'myCalendar' }} - components={{ - event: Event, - agenda: { - event: EventAgenda - }, - toolbar: Toolbar, - eventWrapper: EventWrapper, - }} - dayPropGetter={customDayPropGetter} - slotPropGetter={customSlotPropGetter} - defaultDate={new Date()} - resources={getResources()} - resourceAccessor={event => event.resourceId} - resourceIdAccessor={resource => resource.id} - resourceTitleAccessor={resource => resource.title} - /> + { }} + onView={(view: View) => { }} + onSelectSlot={(slotInfo) => { + const start = slotInfo.start; + const end = slotInfo.end; + const slots = slotInfo.slots; + }} + onSelectEvent={(event) => { }} + onSelecting={(slotInfo) => { + const start = slotInfo.start; + const end = slotInfo.end; + return true; + }} + views={['day']} + toolbar={true} + popup={true} + popupOffset={20} + selectable={true} + step={20} + rtl={true} + eventPropGetter={(event, start, end, isSelected) => ({ className: 'some-class' })} + titleAccessor={'title'} + allDayAccessor={(event: CalendarEvent) => !!event.allDay} + startAccessor={'start'} + endAccessor={(event: CalendarEvent) => event.end || event.start} + min={new Date()} + max={new Date()} + scrollToTime={new Date()} + formats={{ + dateFormat: "h a", + agendaDateFormat: (date: Date, culture?: string, localizer?: object) => "some-format", + dayRangeHeaderFormat: (range: DateRange, culture?: string, localizer?: object) => "some-format" + }} + messages={{}} + timeslots={24} + defaultView={'month'} + className={'my-calendar'} + elementProps={{ id: 'myCalendar' }} + components={{ + event: Event, + agenda: { + event: EventAgenda + }, + toolbar: Toolbar, + eventWrapper: EventWrapper, + }} + dayPropGetter={customDayPropGetter} + slotPropGetter={customSlotPropGetter} + defaultDate={new Date()} + resources={getResources()} + resourceAccessor={event => event.resourceId} + resourceIdAccessor={resource => resource.id} + resourceTitleAccessor={resource => resource.title} /> ); } }