add a new generic for resource type

This commit is contained in:
Yann Normand
2018-11-09 15:14:19 +10:00
parent 84d66aa0df
commit 53db089781
2 changed files with 44 additions and 19 deletions
+14 -14
View File
@@ -171,19 +171,19 @@ export class DateLocalizer {
format(value: FormatInput, format: string, culture: Culture): string;
}
export interface BigCalendarProps<T extends Event = Event> extends React.Props<BigCalendar<T>> {
export interface BigCalendarProps<TEvent extends Event = Event, TResource extends object = object> extends React.Props<BigCalendar<TEvent, TResource>> {
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<HTMLElement>) => void;
onSelectEvent?: (event: T, e: React.SyntheticEvent<HTMLElement>) => void;
onDoubleClickEvent?: (event: TEvent, e: React.SyntheticEvent<HTMLElement>) => void;
onSelectEvent?: (event: TEvent, e: React.SyntheticEvent<HTMLElement>) => void;
onSelecting?: (range: { start: stringOrDate, end: stringOrDate }) => boolean | undefined | null;
selected?: any;
views?: View[] | {
@@ -202,7 +202,7 @@ export interface BigCalendarProps<T extends Event = Event> extends React.Props<B
step?: number;
timeslots?: number;
rtl?: boolean;
eventPropGetter?: (event: T, start: stringOrDate, end: stringOrDate, isSelected: boolean) => { 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<T extends Event = Event> extends React.Props<B
formats?: Formats;
components?: Components;
messages?: Messages;
titleAccessor?: keyof T | ((event: T) => 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<T extends Event = Event> extends React.Component<BigCalendarProps<T>> {
export default class BigCalendar<TEvent extends Event = Event, TResource extends object = object> extends React.Component<BigCalendarProps<TEvent, TResource>> {
components: {
dateCellWrapper: React.ComponentType,
dayWrapper: React.ComponentType,
@@ -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<BigCalendarProps<CalendarEvent>> {
class FullAPIExample extends React.Component<BigCalendarProps<CalendarEvent, CalendarResource>> {
render() {
return (
<BigCalendar
<BigCalendar<CalendarEvent, CalendarResource>
{...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<any, any> {
render() {
// const { label } = this.props;