From a0b3d80a77fe1ad8f136388e17d117d70081911f Mon Sep 17 00:00:00 2001 From: Jan Bevers Date: Mon, 19 Nov 2018 08:54:51 +0100 Subject: [PATCH 1/2] [react-big-calendar] Added props declartion for Toolbar and Eventwrapper components --- types/react-big-calendar/index.d.ts | 62 +++++++++++++++---- .../react-big-calendar-tests.tsx | 28 ++++++++- 2 files changed, 77 insertions(+), 13 deletions(-) diff --git a/types/react-big-calendar/index.d.ts b/types/react-big-calendar/index.d.ts index bbfd7047ec..9d9b62881c 100644 --- a/types/react-big-calendar/index.d.ts +++ b/types/react-big-calendar/index.d.ts @@ -5,14 +5,23 @@ // Krzysztof Bezrąk // Sebastian Silbermann // Paul Potsides +// 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?: object }; +export type EventPropGetter = (event: T, start: stringOrDate, end: stringOrDate, isSelected: boolean) => { className?: string, style?: React.CSSProperties }; +export type SlotPropGetter = (date: Date) => { className?: string, style?: object }; 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.SFC | React.Component | React.ComponentClass | JSX.Element; 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; - toolbar?: React.SFC | React.Component | React.ComponentClass | JSX.Element; + toolbar?: React.SFC | React.Component | React.ComponentClass | JSX.Element; agenda?: { date?: React.SFC | React.Component | React.ComponentClass | JSX.Element; time?: React.SFC | React.Component | React.ComponentClass | JSX.Element; @@ -133,6 +142,41 @@ 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 { + style?: React.CSSProperties & { xOffset: number }; + className: string; + event: T; + isRtl: boolean; + getters: { + eventProp?: EventPropGetter; + slotProp?: SlotPropGetter; + dayProp?: DayPropGetter; + }; + onClick: (e: React.MouseEvent) => void; + onDoubleClick: (e: React.MouseEvent) => 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 +230,7 @@ export interface BigCalendarProps extends React.Props) => 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 +242,9 @@ export interface BigCalendarProps extends React.Props { className?: string, style?: React.CSSProperties }; - slotPropGetter?: (date: Date) => { className?: string, style?: object }; - dayPropGetter?: (date: Date) => { className?: string, style?: object }; + eventPropGetter?: EventPropGetter; + slotPropGetter?: SlotPropGetter; + dayPropGetter?: DayPropGetter; showMultiDayTimes?: boolean; min?: stringOrDate; max?: stringOrDate; diff --git a/types/react-big-calendar/react-big-calendar-tests.tsx b/types/react-big-calendar/react-big-calendar-tests.tsx index e1b561901e..321327e8e7 100644 --- a/types/react-big-calendar/react-big-calendar-tests.tsx +++ b/types/react-big-calendar/react-big-calendar-tests.tsx @@ -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) { ); } + +class EventWrapper extends React.Component { + render() { + const { continuesEarlier, label, accessors = {}, style } = this.props; + return ( +
+
{continuesEarlier}-{label}-{accessors.title && event && accessors.title(event)}}
+
+ ); + } +} + +class Toolbar extends React.Component { + render() { + const { date, label, view } = this.props; + return ( +
+
{date.toJSON()}-{label}-{view}}
+
+ ); + } +} From 52185a5dc8897b7c716020b7c39679e617edb712 Mon Sep 17 00:00:00 2001 From: Jan Bevers Date: Tue, 20 Nov 2018 15:10:31 +0100 Subject: [PATCH 2/2] [react-big-calendar] Improvements to toolbar and eventwrapper props --- types/react-big-calendar/index.d.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/types/react-big-calendar/index.d.ts b/types/react-big-calendar/index.d.ts index 9d9b62881c..790a5887cb 100644 --- a/types/react-big-calendar/index.d.ts +++ b/types/react-big-calendar/index.d.ts @@ -11,9 +11,9 @@ import { Validator } from 'prop-types'; import * as React from 'react'; -export type DayPropGetter = (date: Date) => { className?: string, style?: object }; +export type DayPropGetter = (date: Date) => { className?: string, style?: React.CSSProperties }; export type EventPropGetter = (event: T, start: stringOrDate, end: stringOrDate, isSelected: boolean) => { className?: string, style?: React.CSSProperties }; -export type SlotPropGetter = (date: Date) => { className?: string, style?: object }; +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'; @@ -114,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; 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; - toolbar?: React.SFC | React.Component | React.ComponentClass | JSX.Element; + toolbar?: React.ComponentType; agenda?: { date?: React.SFC | React.Component | React.ComponentClass | JSX.Element; time?: React.SFC | React.Component | React.ComponentClass | JSX.Element; @@ -154,6 +154,7 @@ export interface ToolbarProps { } export interface EventWrapperProps { + // https://github.com/intljusticemission/react-big-calendar/blob/27a2656b40ac8729634d24376dff8ea781a66d50/src/TimeGridEvent.js#L28 style?: React.CSSProperties & { xOffset: number }; className: string; event: T;