vhad/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/gosticks/DefinitelyTyped.git synced 2026-10-06 07:47:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #30652 from janb87/master

Browse Source 
[react-big-calendar] Added props declartion for Toolbar and Eventwrap…
This commit is contained in:
Benjamin Lichtman
2018-11-20 13:06:14 -08:00
committed by GitHub
parent c14cfb1c5f 52185a5dc8
commit b059d515cc
2 changed files with 78 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
types/react-big-calendar/index.d.ts
Vendored
+52 -11
View File
@@ -5,14 +5,23 @@
// Krzysztof Bezrąk <https://github.com/pikpok>
// Sebastian Silbermann <https://github.com/eps1lon>
// Paul Potsides <https://github.com/strongpauly>
// janb87 <https://github.com/janb87>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.8
import { Validator } from 'prop-types';
import * as React from 'react';
export type DayPropGetter = (date: Date) => { className?: string, style?: React.CSSProperties };
export type EventPropGetter<T> = (event: T, start: stringOrDate, end: stringOrDate, isSelected: boolean) => { className?: string, style?: React.CSSProperties };
export type SlotPropGetter = (date: Date) => { className?: string, style?: React.CSSProperties };
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[] | {
month: boolean | React.SFC | React.Component,
week: boolean | React.SFC | React.Component,
myweek: boolean | React.SFC | React.Component,
};
export type Navigate = 'PREV' | 'NEXT' | 'TODAY' | 'DATE';
export type Event = object;
@@ -70,7 +79,7 @@ export interface Formats {
/**
* Toolbar header format for the Agenda view, e.g. "4/1/2015 — 5/1/2015"
*/
agendaHeaderFormat?: DateFormat;
agendaHeaderFormat?: DateRangeFormatFunction;
/**
* A time range format for selecting time slots, e.g "8:00am — 2:00pm"
@@ -105,14 +114,14 @@ export interface HeaderProps {
export interface Components {
event?: React.SFC | React.Component | React.ComponentClass | JSX.Element;
eventWrapper?: React.SFC | React.Component | React.ComponentClass | JSX.Element;
eventWrapper?: React.ComponentType<EventWrapperProps>;
dayWrapper?: React.SFC | React.Component | React.ComponentClass | JSX.Element;
dateCellWrapper?: React.SFC | React.Component | React.ComponentClass | JSX.Element;
/**
* component used as a header for each column in the TimeGridHeader
*/
header?: React.ComponentType<HeaderProps>;
toolbar?: React.SFC | React.Component | React.ComponentClass | JSX.Element;
toolbar?: React.ComponentType<ToolbarProps>;
agenda?: {
date?: React.SFC | React.Component | React.ComponentClass | JSX.Element;
time?: React.SFC | React.Component | React.ComponentClass | JSX.Element;
@@ -133,6 +142,42 @@ export interface Components {
};
}
export interface ToolbarProps {
date: Date;
view: View;
views: Views;
label: string;
localizer: { messages: Messages };
onNavigate: (navigate: Navigate, date?: Date) => void;
onView: (view: View) => void;
children?: React.ReactNode;
}
export interface EventWrapperProps<T extends Event = Event> {
// https://github.com/intljusticemission/react-big-calendar/blob/27a2656b40ac8729634d24376dff8ea781a66d50/src/TimeGridEvent.js#L28
style?: React.CSSProperties & { xOffset: number };
className: string;
event: T;
isRtl: boolean;
getters: {
eventProp?: EventPropGetter<T>;
slotProp?: SlotPropGetter;
dayProp?: DayPropGetter;
};
onClick: (e: React.MouseEvent<HTMLElement>) => void;
onDoubleClick: (e: React.MouseEvent<HTMLElement>) => void;
accessors: {
title?: (event: T) => string;
tooltip?: (event: T) => string;
end?: (event: T) => Date;
start?: (event: T) => Date;
};
selected: boolean;
label: string;
continuesEarlier: boolean;
continuesLater: boolean;
}
export interface Messages {
date?: string;
time?: string;
@@ -186,11 +231,7 @@ export interface BigCalendarProps<T extends Event = Event> extends React.Props<B
onSelectEvent?: (event: T, e: React.SyntheticEvent<HTMLElement>) => void;
onSelecting?: (range: { start: stringOrDate, end: stringOrDate }) => boolean | undefined | null;
selected?: any;
views?: View[] | {
month: boolean | React.SFC | React.Component,
week: boolean | React.SFC | React.Component,
myweek: boolean | React.SFC | React.Component,
};
views?: Views;
drilldownView?: View | null;
getDrilldownView?: ((targetDate: Date, currentViewName: View, configuredViewNames: View[]) => void) | null;
length?: number;
@@ -202,9 +243,9 @@ 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 };
slotPropGetter?: (date: Date) => { className?: string, style?: object };
dayPropGetter?: (date: Date) => { className?: string, style?: object };
eventPropGetter?: EventPropGetter<T>;
slotPropGetter?: SlotPropGetter;
dayPropGetter?: DayPropGetter;
showMultiDayTimes?: boolean;
min?: stringOrDate;
max?: stringOrDate;
types/react-big-calendar/react-big-calendar-tests.tsx
+26 -2
View File
@@ -1,6 +1,6 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
import BigCalendar, { BigCalendarProps, Navigate, View, DateRange, DateLocalizer } from "react-big-calendar";
import BigCalendar, { BigCalendarProps, Navigate, View, DateRange, DateLocalizer, ToolbarProps, EventWrapperProps } from "react-big-calendar";
// Don't want to add this as a dependency, because it is only used for tests.
declare const globalize: any;
@@ -101,7 +101,9 @@ class CalendarEvent {
event: Event,
agenda: {
event: EventAgenda
}
},
toolbar: Toolbar,
eventWrapper: EventWrapper,
}}
dayPropGetter={customDayPropGetter}
slotPropGetter={customSlotPropGetter}
@@ -172,3 +174,25 @@ function Event(event: any) {
</span>
);
}
class EventWrapper extends React.Component<EventWrapperProps> {
render() {
const { continuesEarlier, label, accessors = {}, style } = this.props;
return (
<div style={style}>
<div>{continuesEarlier}-{label}-{accessors.title && event && accessors.title(event)}}</div>
</div>
);
}
}
class Toolbar extends React.Component<ToolbarProps> {
render() {
const { date, label, view } = this.props;
return (
<div>
<div>{date.toJSON()}-{label}-{view}}</div>
</div>
);
}
}