Fix overly restrictive types. (#41334)

This commit is contained in:
Jon Caruana 2020-01-07 15:21:26 -08:00 committed by Armando Aguirre
parent 8ae07ce306
commit 6a8e71b7e5
2 changed files with 37 additions and 34 deletions

View File

@ -1,8 +1,9 @@
// Type definitions for react-calendar-timeline v0.26.6
// Project: https://github.com/namespace-ee/react-calendar-timeline
// Definitions by: Rajab Shakirov <https://github.com/radziksh>
// Alex Maclean <https://github.com/acemac>
// Andrii Los <https://github.com/rip21>
// Alex Maclean <https://github.com/acemac>
// Andrii Los <https://github.com/rip21>
// Jon Caruana <https://github.com/joncar>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 3.5
@ -10,15 +11,17 @@ import * as React from 'react';
import { Moment } from 'moment';
declare module 'react-calendar-timeline' {
type Id = number | string;
export interface TimelineGroupBase {
id: number;
id: Id;
title: React.ReactNode;
rightTitle?: React.ReactNode;
}
export interface TimelineItemBase<DateType> {
id: number;
group: number;
id: Id;
group: Id;
title?: React.ReactNode;
start_time: DateType;
end_time: DateType;
@ -96,7 +99,7 @@ declare module 'react-calendar-timeline' {
}
export interface ItemRendererGetItemPropsReturnType {
key: number;
key: Id;
ref: React.Ref<any>;
className: string;
onMouseDown: React.MouseEventHandler;
@ -112,14 +115,14 @@ declare module 'react-calendar-timeline' {
export interface ItemRendererGetResizePropsReturnType {
left?: {
key: number;
ref: React.Ref<any>;
className: string;
style: React.CSSProperties;
};
right?: {
key: number;
ref: React.Ref<any>;
className: string;
style: React.CSSProperties;
};
}
@ -138,7 +141,7 @@ declare module 'react-calendar-timeline' {
getItemProps: (
props: GetItemsProps,
) => {
key: number;
key: Id;
ref: React.Ref<any>;
className: string;
onMouseDown: React.MouseEventHandler;
@ -159,7 +162,7 @@ declare module 'react-calendar-timeline' {
export interface OnItemDragObjectBase {
eventType: 'move' | 'resize';
itemId: number;
itemId: Id;
time: number;
}
@ -194,8 +197,8 @@ declare module 'react-calendar-timeline' {
keys?: TimelineKeys;
defaultTimeStart?: Date | Moment;
defaultTimeEnd?: Date | Moment;
visibleTimeStart?: Date | Moment;
visibleTimeEnd?: Date | Moment;
visibleTimeStart?: Date | Moment | number;
visibleTimeEnd?: Date | Moment | number;
selected?: number[];
sidebarWidth?: number;
sidebarContent?: React.ReactNode;
@ -218,20 +221,20 @@ declare module 'react-calendar-timeline' {
timeSteps?: TimelineTimeSteps;
scrollRef?: React.Ref<any>;
onItemDrag?(itemDragObject: OnItemDragObjectMove | OnItemDragObjectResize): void;
onItemMove?(itemId: number, dragTime: number, newGroupOrder: number): void;
onItemResize?(itemId: number, endTimeOrStartTime: number, edge: 'left' | 'right'): void;
onItemSelect?(itemId: number, e: any, time: number): void;
onItemMove?(itemId: Id, dragTime: number, newGroupOrder: number): void;
onItemResize?(itemId: Id, endTimeOrStartTime: number, edge: 'left' | 'right'): void;
onItemSelect?(itemId: Id, e: any, time: number): void;
onItemDeselect?(e: React.SyntheticEvent): void;
onItemClick?(itemId: number, e: React.SyntheticEvent, time: number): void;
onItemDoubleClick?(itemId: number, e: React.SyntheticEvent, time: number): void;
onItemContextMenu?(itemId: number, e: React.SyntheticEvent, time: number): void;
onCanvasClick?(groupId: number, time: number, e: React.SyntheticEvent): void;
onCanvasDoubleClick?(group: CustomGroup, time: number, e: React.SyntheticEvent): void;
onCanvasContextMenu?(group: CustomGroup, time: number, e: React.SyntheticEvent): void;
onItemClick?(itemId: Id, e: React.SyntheticEvent, time: number): void;
onItemDoubleClick?(itemId: Id, e: React.SyntheticEvent, time: number): void;
onItemContextMenu?(itemId: Id, e: React.SyntheticEvent, time: number): void;
onCanvasClick?(groupId: Id, time: number, e: React.SyntheticEvent): void;
onCanvasDoubleClick?(groupId: Id, time: number, e: React.SyntheticEvent): void;
onCanvasContextMenu?(groupId: Id, time: number, e: React.SyntheticEvent): void;
onZoom?(timelineContext: TimelineContext): void;
moveResizeValidator?(
action: 'move' | 'resize',
itemId: number,
itemId: Id,
time: number,
resizeEdge: 'left' | 'right',
): number;

View File

@ -13,13 +13,13 @@ import Timeline, {
import * as moment from 'moment';
import { Moment } from 'moment';
const groups1 = [{ id: 1, title: 'group 1' }, { id: 2, title: 'group 2' }] as TimelineGroupBase[];
const groups1: TimelineGroupBase[] = [{ id: 1, title: 'group 1' }, { id: 'two', title: 'group 2' }];
const items1 = [
const items1: TimelineItemBase<Moment>[] = [
{ id: 1, group: 1, title: 'item 1', start_time: moment(), end_time: moment().add(1, 'hour') },
{ id: 2, group: 2, title: 'item 2', start_time: moment().add(-0.5, 'hour'), end_time: moment().add(0.5, 'hour') },
{ id: 3, group: 1, title: 'item 3', start_time: moment().add(2, 'hour'), end_time: moment().add(3, 'hour') },
] as TimelineItemBase<Moment>[];
{ id: 2, group: 'two', title: 'item 2', start_time: moment().add(-0.5, 'hour'), end_time: moment().add(0.5, 'hour') },
{ id: 'three', group: 1, title: 'item 3', start_time: moment().add(2, 'hour'), end_time: moment().add(3, 'hour') },
];
class ExampleOfUsingReactCalendarTimeline extends React.Component {
render() {
@ -40,12 +40,12 @@ class ExampleOfUsingReactCalendarTimeline extends React.Component {
type TimelineGroupCustom = TimelineGroup<{ data: string }>;
type TimelineItemCustom = TimelineItem<{ data: string }, Moment>;
const groups2 = [
const groups2: TimelineGroupCustom[] = [
{ id: 1, title: 'group 1', data: '1' },
{ id: 2, title: 'group 2', data: '1' },
] as TimelineGroupCustom[];
];
const items2 = [
const items2: TimelineItemCustom[] = [
{ id: 1, group: 1, title: 'item 1', start_time: moment(), end_time: moment().add(1, 'hour'), data: '1' },
{
id: 2,
@ -63,7 +63,7 @@ const items2 = [
end_time: moment().add(3, 'hour'),
data: '1',
},
] as TimelineItemCustom[];
];
class ExampleOfUsingReactCalendarTimelineWithCustomGroupAndItemExtension extends React.Component {
render() {
@ -126,13 +126,13 @@ const Example: React.FC = () => (
</Timeline>
);
const groups = [{ id: 1, title: 'group 1' }, { id: 2, title: 'group 2' }] as TimelineGroupBase[];
const groups: TimelineGroupBase[] = [{ id: 1, title: 'group 1' }, { id: 2, title: 'group 2' }];
const items = [
const items: TimelineItemBase<number>[] = [
{ id: 1, group: 1, title: 'item 1', start_time: 1, end_time: 1 },
{ id: 2, group: 2, title: 'item 2', start_time: 1, end_time: 1 },
{ id: 3, group: 1, title: 'item 3', start_time: 1, end_time: 1 },
] as TimelineItemBase<number>[];
];
const defaultTimeStart = moment()
.startOf('day')