[@types/react-big-calendar] Add dayLayoutAlgorithm property added in https://github.com/jquense/react-big-calendar/pull/1473 , add slotGroupPropGetter added in https://github.com/jquense/react-big-calendar/pull/1510 , constrain Culture type to string instead of string | string[] (#42388)

This commit is contained in:
Felix Hessenberger 2020-02-20 19:30:09 +01:00 committed by GitHub
parent 4fccaa038e
commit 8d64d8cd4e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 11 deletions

View File

@ -1,5 +1,5 @@
// Type definitions for react-big-calendar 0.22
// Project: https://github.com/intljusticemission/react-big-calendar
// Type definitions for react-big-calendar 0.24
// Project: https://github.com/jquense/react-big-calendar
// Definitions by: Piotr Witek <https://github.com/piotrwitek>
// Austin Turner <https://github.com/paustint>
// Krzysztof Bezrąk <https://github.com/pikpok>
@ -15,14 +15,16 @@
// Eric Kenney <https://github.com/KenneyE>
// Paito Anderson <https://github.com/PaitoAnderson>
// Jan Michalak <https://github.com/michalak111>
// Felix Hessenberger <https://github.com/fhessenberger>
// 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 DayPropGetter = (date: Date, resourceId?: number | string) => React.HTMLAttributes<HTMLDivElement>;
export type EventPropGetter<T> = (event: T, start: stringOrDate, end: stringOrDate, isSelected: boolean) => React.HTMLAttributes<HTMLDivElement>;
export type SlotPropGetter = (date: Date, resourceId?: number | string) => React.HTMLAttributes<HTMLDivElement>;
export type SlotGroupPropGetter = () => React.HTMLAttributes<HTMLDivElement>;
export type stringOrDate = string | Date;
export type ViewKey = 'MONTH' | 'WEEK' | 'WORK_WEEK' | 'DAY' | 'AGENDA';
export type View = 'month' | 'week' | 'work_week' | 'day' | 'agenda';
@ -33,6 +35,7 @@ export type ViewsProps = View[] | {
month?: boolean | React.ComponentType<any> & ViewStatic,
week?: boolean | React.ComponentType<any> & ViewStatic
};
export type DayLayoutAlgorithm = 'overlap' | 'no-overlap';
export type NavigateAction = 'PREV' | 'NEXT' | 'TODAY' | 'DATE';
export interface Event {
allDay?: boolean;
@ -46,8 +49,8 @@ export interface DateRange {
end: Date;
}
export type DateFormatFunction = (date: Date, culture?: string, localizer?: object) => string;
export type DateRangeFormatFunction = (range: DateRange, culture?: string, localizer?: object) => string;
export type DateFormatFunction = (date: Date, culture?: Culture, localizer?: DateLocalizer) => string;
export type DateRangeFormatFunction = (range: DateRange, culture?: Culture, localizer?: DateLocalizer) => string;
export type DateFormat = string | DateFormatFunction;
export interface Formats {
@ -228,7 +231,7 @@ export interface Messages {
noEventsInRange?: string;
}
export type Culture = string | string[];
export type Culture = string;
export type FormatInput = number | string | Date;
export interface DateLocalizerSpec {
@ -284,6 +287,7 @@ export interface CalendarProps<TEvent extends object = Event, TResource extends
rtl?: boolean;
eventPropGetter?: EventPropGetter<TEvent>;
slotPropGetter?: SlotPropGetter;
slotGroupPropGetter?: SlotGroupPropGetter;
dayPropGetter?: DayPropGetter;
showMultiDayTimes?: boolean;
min?: stringOrDate;
@ -293,6 +297,7 @@ export interface CalendarProps<TEvent extends object = Event, TResource extends
formats?: Formats;
components?: Components<TEvent>;
messages?: Messages;
dayLayoutAlgorithm?: DayLayoutAlgorithm;
titleAccessor?: keyof TEvent | ((event: TEvent) => string);
tooltipAccessor?: keyof TEvent | ((event: TEvent) => string);
allDayAccessor?: keyof TEvent | ((event: TEvent) => boolean);

View File

@ -16,7 +16,8 @@ import {
ToolbarProps,
EventProps,
EventWrapperProps,
NavigateAction
NavigateAction,
Culture
} from "react-big-calendar";
import withDragAndDrop from "react-big-calendar/lib/addons/dragAndDrop";
@ -197,6 +198,7 @@ class CalendarResource {
const end = slotInfo.end;
return true;
}}
dayLayoutAlgorithm="overlap"
views={['day']}
toolbar={true}
popup={true}
@ -218,8 +220,8 @@ class CalendarResource {
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',
agendaDateFormat: (date: Date, culture?: Culture, localizer?: DateLocalizer) => 'some-format',
dayRangeHeaderFormat: (range: DateRange, culture?: Culture, localizer?: DateLocalizer) => 'some-format',
}}
messages={{
date: 'Date',
@ -253,6 +255,7 @@ class CalendarResource {
}}
dayPropGetter={customDayPropGetter}
slotPropGetter={customSlotPropGetter}
slotGroupPropGetter={customGroupSlotPropGetter}
defaultDate={new Date()}
resources={getResources()}
resourceAccessor={event => event.resourceId}
@ -325,6 +328,12 @@ const customSlotPropGetter = (date: Date) => {
else return {};
};
const customGroupSlotPropGetter = () => {
return {
className: 'slot-group'
};
};
function Event(props: EventProps<CalendarEvent>) {
return (
<span>