[react-big-calendar] Update for version 0.22.0 (#36446)

This commit is contained in:
Paito Anderson
2019-06-27 09:20:41 -07:00
committed by Benjamin Lichtman
parent 0fffa9685f
commit 52909ba7eb
3 changed files with 66 additions and 56 deletions
+35 -41
View File
@@ -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 <https://github.com/piotrwitek>
// Austin Turner <https://github.com/paustint>
@@ -13,6 +13,7 @@
// Siarhey Belofost <https://github.com/SergeyBelofost>
// Mark Nelissen <https://github.com/marknelissen>
// Eric Kenney <https://github.com/KenneyE>
// Paito Anderson <https://github.com/PaitoAnderson>
// 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<TEvent extends object = Event> {
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<TEvent extends object = Event, TResource extends object = object>
extends React.Props<BigCalendar<TEvent, TResource>> {
export interface CalendarProps<TEvent extends object = Event, TResource extends object = object>
extends React.Props<Calendar<TEvent, TResource>> {
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<TEvent extends object = Event, TResource exten
onSelecting?: (range: { start: stringOrDate; end: stringOrDate }) => 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<TEvent extends object = Event, TResource exten
}
export interface ViewStatic {
navigate(date: Date, action: Navigate, props: any): Date;
navigate(date: Date, action: NavigateAction, props: any): Date;
}
export interface MoveOptions {
action: Navigate;
action: NavigateAction;
date: Date;
today: Date;
}
export default class BigCalendar<
export class Calendar<
TEvent extends object = Event,
TResource extends object = object
> extends React.Component<BigCalendarProps<TEvent, TResource>> {
components: {
dateCellWrapper: React.ComponentType;
dayWrapper: React.ComponentType;
eventWrapper: React.ComponentType<TEvent>;
};
/**
* 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<ViewKey, View>;
static move(View: ViewStatic | ViewKey, options: MoveOptions): Date;
> extends React.Component<CalendarProps<TEvent, TResource>> {}
export interface components {
dateCellWrapper: React.ComponentType;
dayWrapper: React.ComponentType;
eventWrapper: React.ComponentType<Event>;
}
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;
+3 -3
View File
@@ -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<TEvent> {
@@ -8,7 +8,7 @@ export interface withDragAndDropProps<TEvent> {
}
declare class DragAndDropCalendar<TEvent extends Event = Event, TResource extends object = object>
extends React.Component<BigCalendarProps<TEvent, TResource> & withDragAndDropProps<TEvent>> {}
extends React.Component<CalendarProps<TEvent, TResource> & withDragAndDropProps<TEvent>> {}
declare function withDragAndDrop(calendar: typeof BigCalendar): typeof DragAndDropCalendar;
declare function withDragAndDrop(calendar: typeof Calendar): typeof DragAndDropCalendar;
export default withDragAndDrop;
@@ -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) => (
<BigCalendar
<Calendar
events={getEvents()}
views={allViews}
step={60}
@@ -57,7 +73,7 @@ class CalendarResource {
/>
);
const localizer = BigCalendar.momentLocalizer(moment);
const localizer = momentLocalizer(moment);
ReactDOM.render(<Basic localizer={localizer} />, document.body);
}
@@ -67,7 +83,7 @@ class CalendarResource {
interface Props {
localizer: DateLocalizer;
}
const DragAndDropCalendar = withDragAndDrop(BigCalendar);
const DragAndDropCalendar = withDragAndDrop(Calendar);
const DnD = ({ localizer }: Props) => (
<DragAndDropCalendar
events={getEvents()}
@@ -81,7 +97,7 @@ class CalendarResource {
/>
);
const localizer = BigCalendar.momentLocalizer(moment);
const localizer = momentLocalizer(moment);
ReactDOM.render(<DnD localizer={localizer} />, 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(<BigCalendar
localizer={BigCalendar.momentLocalizer(moment)}
ReactDOM.render(<Calendar
localizer={momentLocalizer(moment)}
views={{
day: DaySFC,
work_week: true
@@ -102,15 +118,15 @@ class CalendarResource {
// optional 'views' prop
{
ReactDOM.render(<BigCalendar localizer={BigCalendar.momentLocalizer(moment)} />, document.body);
ReactDOM.render(<Calendar localizer={momentLocalizer(moment)} />, document.body);
}
{
class MyCalendar extends BigCalendar<CalendarEvent, CalendarResource> {}
class MyCalendar extends Calendar<CalendarEvent, CalendarResource> {}
// 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, CalendarResource>> {
class FullAPIExample extends React.Component<CalendarProps<CalendarEvent, CalendarResource>> {
render() {
return (
<MyCalendar
@@ -119,7 +135,7 @@ class CalendarResource {
getNow={() => 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(<FullAPIExample localizer={localizer} />, document.body);
}