mirror of
https://github.com/FlipsideCrypto/DefinitelyTyped.git
synced 2026-02-06 10:56:53 +00:00
[react-calendar-timeline] Updated types to version 0.24.6 (#38446)
* [react-calendar-timeline] Updated types to version 0.24.6 - Added absent types - More test cases - removed old non existent now props * - few changes after review * - few changes after review * - test fix * - fixes to header * - fixes to labelFormat typings * - fixes to labelFormat typings * - fixes to typings
This commit is contained in:
Andrey Los
Ben Lichtman
parent
a3dba724ab
commit
a618db32ef
469
types/react-calendar-timeline/index.d.ts
vendored
469
types/react-calendar-timeline/index.d.ts
vendored
@ -1,131 +1,366 @@
|
||||
// Type definitions for react-calendar-timeline v0.16.3
|
||||
// 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>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.8
|
||||
// TypeScript Version: 3.5
|
||||
|
||||
/// <reference types="react"/>
|
||||
import * as React from 'react';
|
||||
import { Moment } from 'moment';
|
||||
|
||||
declare module "react-calendar-timeline" {
|
||||
|
||||
export interface TimelineGroup {
|
||||
id: number;
|
||||
title: React.ReactNode;
|
||||
rightTitle?: React.ReactNode;
|
||||
}
|
||||
declare module 'react-calendar-timeline' {
|
||||
export interface TimelineGroupBase {
|
||||
id: number;
|
||||
title: React.ReactNode;
|
||||
rightTitle?: React.ReactNode;
|
||||
}
|
||||
|
||||
export interface TimelineItem {
|
||||
id: number;
|
||||
group: number;
|
||||
title?: React.ReactNode;
|
||||
start_time: any;
|
||||
end_time: any;
|
||||
canMove?: boolean;
|
||||
canResize?: boolean | "left" | "right" | "both";
|
||||
canChangeGroup?: boolean;
|
||||
className?: string;
|
||||
itemProps?: {};
|
||||
}
|
||||
export interface TimelineItemBase<DateType> {
|
||||
id: number;
|
||||
group: number;
|
||||
title?: React.ReactNode;
|
||||
start_time: DateType;
|
||||
end_time: DateType;
|
||||
canMove?: boolean;
|
||||
canResize?: boolean | 'left' | 'right' | 'both';
|
||||
canChangeGroup?: boolean;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
itemProps?: React.HTMLAttributes<HTMLDivElement>;
|
||||
}
|
||||
|
||||
export interface TimelineContext {
|
||||
visibletimeStart: number,
|
||||
visibleTimeEnd: number,
|
||||
timelineWidth: number
|
||||
}
|
||||
export type TimelineItem<CustomItemFields, DateType = number> = TimelineItemBase<DateType> & CustomItemFields;
|
||||
export type TimelineGroup<CustomGroupFields> = TimelineGroupBase & CustomGroupFields;
|
||||
|
||||
export interface TimelineTimeSteps {
|
||||
second: number,
|
||||
minute: number,
|
||||
hour: number,
|
||||
day: number,
|
||||
month: number,
|
||||
year: number
|
||||
}
|
||||
export interface TimelineContext {
|
||||
timelineWidth: number;
|
||||
visibleTimeStart: number;
|
||||
visibleTimeEnd: number;
|
||||
canvasTimeStart: number;
|
||||
canvasTimeEnd: number;
|
||||
}
|
||||
|
||||
export interface TimelineHeaderLabelFormat {
|
||||
yearShort: string,
|
||||
yearLong: string,
|
||||
monthShort: string,
|
||||
monthMedium: string,
|
||||
monthMediumLong: string,
|
||||
monthLong: string,
|
||||
dayShort: string,
|
||||
dayLong: string,
|
||||
hourShort: string,
|
||||
hourMedium: string,
|
||||
hourMediumLong: string,
|
||||
hourLong: string,
|
||||
time: string
|
||||
}
|
||||
export interface ItemContext {
|
||||
dimensions: {
|
||||
collisionLeft: number;
|
||||
collisionWidth: number;
|
||||
height: number;
|
||||
isDragging: boolean;
|
||||
left: number;
|
||||
order: {
|
||||
group: {
|
||||
id: string;
|
||||
};
|
||||
index: number;
|
||||
};
|
||||
originalLeft: number;
|
||||
stack: boolean;
|
||||
top: number | null;
|
||||
width: number;
|
||||
};
|
||||
useResizeHandle: boolean;
|
||||
title: string;
|
||||
canMove: boolean;
|
||||
canResizeLeft: boolean;
|
||||
canResizeRight: boolean;
|
||||
selected: boolean;
|
||||
dragging: boolean;
|
||||
dragStart: {
|
||||
x: number;
|
||||
y: number;
|
||||
};
|
||||
dragTime: number;
|
||||
dragGroupDelta: number;
|
||||
resizing: boolean;
|
||||
resizeEdge: 'left' | 'right';
|
||||
resizeStart: number;
|
||||
resizeTime: number;
|
||||
width: boolean;
|
||||
}
|
||||
|
||||
export interface ReactCalendarTimelineProps {
|
||||
groups: TimelineGroup[];
|
||||
items: TimelineItem[];
|
||||
keys?:{
|
||||
groupIdKey: string;
|
||||
groupTitleKey: string;
|
||||
itemIdKey: string;
|
||||
itemTitleKey: string;
|
||||
itemGroupKey: string;
|
||||
itemTimeStartKey: string;
|
||||
itemTimeEndKey: string;
|
||||
};
|
||||
defaultTimeStart?: any;
|
||||
defaultTimeEnd?: any;
|
||||
visibleTimeStart?: any;
|
||||
visibleTimeEnd?: any;
|
||||
selected?: number[];
|
||||
sidebarWidth?: number;
|
||||
sidebarContent?: React.ReactNode;
|
||||
rightSidebarWidth?: number;
|
||||
rightSidebarContent?: React.ReactNode;
|
||||
dragSnap?: number;
|
||||
minResizeWidth?: number;
|
||||
stickyOffset?: number;
|
||||
stickyHeader?: boolean;
|
||||
headerRef?: any;
|
||||
lineHeight?: number;
|
||||
headerLabelGroupHeight?: number;
|
||||
headerLabelHeight?: number;
|
||||
itemHeightRatio?: number;
|
||||
minZoom?: number;
|
||||
maxZoom?: number;
|
||||
clickTolerance?: number;
|
||||
canMove?: boolean;
|
||||
canChangeGroup?: boolean;
|
||||
canResize?: boolean | "left" | "right" | "both";
|
||||
useResizeHandle?: boolean;
|
||||
showCursorLine?: boolean;
|
||||
stackItems?: boolean;
|
||||
traditionalZoom?: boolean;
|
||||
itemTouchSendsClick?: boolean;
|
||||
timeSteps?: TimelineTimeSteps,
|
||||
onItemMove?(itemId: number, dragTime: number, newGroupOrder: number): any;
|
||||
onItemResize?(itemId: number, newResizeEnd: number, edge: "left" | "right"): any;
|
||||
onItemSelect?(itemId: number, e: any, time: number): any;
|
||||
onItemClick?(itemId: number, e: any, time: number): any;
|
||||
onItemDoubleClick?(itemId: number, e: any, time: number): any;
|
||||
onCanvasClick?(groupId:number, time:number, e:any): any;
|
||||
onCanvasDoubleClick?(group: TimelineGroup, time: number, e: any): any;
|
||||
onCanvasContextMenu?(group: TimelineGroup, time: number, e: any): any;
|
||||
onZoom?(timelineContext: TimelineContext): any;
|
||||
moveResizeValidator?(action:"move" | "resize", itemId: number, time: number, resizeEdge: "left" | "right"): any;
|
||||
headerLabelFormats?: TimelineHeaderLabelFormat,
|
||||
subHeaderLabelFormats?: TimelineHeaderLabelFormat,
|
||||
onTimeChange?(visibleTimeStart: number, visibleTimeEnd: number, updateScrollCanvas: (start: number, end: number) => void): any;
|
||||
onTimeInit?(canvasTimeStart: number, canvasTimeEnd: number): any;
|
||||
onBoundsChange?(canvasTimeStart: number, canvasTimeEnd: number): any;
|
||||
itemRenderer?: (props: {item: TimelineItem, context: TimelineContext}) => React.ReactElement<{}>;
|
||||
groupRenderer?: (props: {group: TimelineGroup, isRightSidebar: boolean}) => React.ReactElement<{}>;
|
||||
minimumWidthForItemContentVisibility?: number;
|
||||
children?: any;
|
||||
}
|
||||
export interface TimeFormat {
|
||||
long: string;
|
||||
mediumLong: string;
|
||||
medium: string;
|
||||
short: string;
|
||||
}
|
||||
|
||||
export const defaultHeaderLabelFormats: TimelineHeaderLabelFormat;
|
||||
export const defaultSubHeaderLabelFormats: TimelineHeaderLabelFormat;
|
||||
export interface LabelFormat {
|
||||
year: TimeFormat;
|
||||
month: TimeFormat;
|
||||
week: TimeFormat;
|
||||
day: TimeFormat;
|
||||
hour: TimeFormat;
|
||||
minute: TimeFormat;
|
||||
}
|
||||
|
||||
let ReactCalendarTimeline : React.ClassicComponentClass<ReactCalendarTimelineProps>;
|
||||
export default ReactCalendarTimeline;
|
||||
|
||||
export interface ItemRendererGetItemPropsReturnType {
|
||||
key: number;
|
||||
ref: React.Ref<any>;
|
||||
className: string;
|
||||
onMouseDown: React.MouseEventHandler;
|
||||
onMouseUp: React.MouseEventHandler;
|
||||
onTouchStart: React.TouchEventHandler;
|
||||
onTouchEnd: React.TouchEventHandler;
|
||||
onDoubleClick: React.MouseEventHandler;
|
||||
onContextMenu: React.ReactEventHandler;
|
||||
style: React.CSSProperties;
|
||||
}
|
||||
|
||||
export type GetItemsProps = Partial<Omit<ItemRendererGetItemPropsReturnType, 'key' | 'ref'>>;
|
||||
|
||||
export interface ItemRendererGetResizePropsReturnType {
|
||||
left?: {
|
||||
key: number;
|
||||
ref: React.Ref<any>;
|
||||
className: string;
|
||||
};
|
||||
right?: {
|
||||
key: number;
|
||||
ref: React.Ref<any>;
|
||||
className: string;
|
||||
};
|
||||
}
|
||||
|
||||
export type GetResizeProps = {
|
||||
leftStyle?: React.CSSProperties;
|
||||
rightStyle?: React.CSSProperties;
|
||||
leftClassName?: string;
|
||||
rightClassName?: string;
|
||||
};
|
||||
|
||||
export interface ReactCalendarItemRendererProps<
|
||||
CustomItem extends TimelineItemBase<any> = TimelineItemBase<number>
|
||||
> {
|
||||
item: CustomItem;
|
||||
itemContext: ItemContext;
|
||||
getItemProps: (
|
||||
props: GetItemsProps,
|
||||
) => {
|
||||
key: number;
|
||||
ref: React.Ref<any>;
|
||||
className: string;
|
||||
onMouseDown: React.MouseEventHandler;
|
||||
onMouseUp: React.MouseEventHandler;
|
||||
onTouchStart: React.TouchEventHandler;
|
||||
onTouchEnd: React.TouchEventHandler;
|
||||
onDoubleClick: React.MouseEventHandler;
|
||||
onContextMenu: React.ReactEventHandler;
|
||||
style: React.CSSProperties;
|
||||
};
|
||||
getResizeProps: (propsOverride?: GetResizeProps) => ItemRendererGetResizePropsReturnType;
|
||||
}
|
||||
|
||||
export interface ReactCalendarGroupRendererProps<CustomGroup extends TimelineGroupBase = TimelineGroupBase> {
|
||||
group: CustomGroup;
|
||||
isRightSidebar?: boolean;
|
||||
}
|
||||
|
||||
export interface OnItemDragObjectBase {
|
||||
eventType: 'move' | 'resize';
|
||||
itemId: number;
|
||||
time: number;
|
||||
}
|
||||
|
||||
export interface OnItemDragObjectMove extends OnItemDragObjectBase {
|
||||
eventType: 'move';
|
||||
newGroupOrder: number;
|
||||
}
|
||||
|
||||
export interface OnItemDragObjectResize extends OnItemDragObjectBase {
|
||||
eventType: 'resize';
|
||||
edge?: 'left' | 'right';
|
||||
}
|
||||
|
||||
export interface TimelineKeys {
|
||||
groupIdKey: string;
|
||||
groupTitleKey: string;
|
||||
groupRightTitleKey: string;
|
||||
itemIdKey: string;
|
||||
itemTitleKey: string;
|
||||
itemDivTitleKey: string;
|
||||
itemGroupKey: string;
|
||||
itemTimeStartKey: string;
|
||||
itemTimeEndKey: string;
|
||||
}
|
||||
|
||||
export interface ReactCalendarTimelineProps<
|
||||
CustomItem extends TimelineItemBase<any> = TimelineItemBase<number>,
|
||||
CustomGroup extends TimelineGroupBase = TimelineGroupBase
|
||||
> {
|
||||
groups: CustomGroup[];
|
||||
items: CustomItem[];
|
||||
keys?: TimelineKeys;
|
||||
defaultTimeStart?: Date | Moment;
|
||||
defaultTimeEnd?: Date | Moment;
|
||||
visibleTimeStart?: Date | Moment;
|
||||
visibleTimeEnd?: Date | Moment;
|
||||
selected?: number[];
|
||||
sidebarWidth?: number;
|
||||
sidebarContent?: React.ReactNode;
|
||||
rightSidebarWidth?: number;
|
||||
rightSidebarContent?: React.ReactNode;
|
||||
dragSnap?: number;
|
||||
minResizeWidth?: number;
|
||||
lineHeight?: number;
|
||||
itemHeightRatio?: number;
|
||||
minZoom?: number;
|
||||
maxZoom?: number;
|
||||
clickTolerance?: number;
|
||||
canMove?: boolean;
|
||||
canChangeGroup?: boolean;
|
||||
canResize?: false | true | 'left' | 'right' | 'both';
|
||||
useResizeHandle?: boolean;
|
||||
stackItems?: boolean;
|
||||
traditionalZoom?: boolean;
|
||||
itemTouchSendsClick?: boolean;
|
||||
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;
|
||||
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;
|
||||
onZoom?(timelineContext: TimelineContext): void;
|
||||
moveResizeValidator?(
|
||||
action: 'move' | 'resize',
|
||||
itemId: number,
|
||||
time: number,
|
||||
resizeEdge: 'left' | 'right',
|
||||
): number;
|
||||
onTimeChange?(
|
||||
visibleTimeStart: number,
|
||||
visibleTimeEnd: number,
|
||||
updateScrollCanvas: (start: number, end: number) => void,
|
||||
): any;
|
||||
onBoundsChange?(canvasTimeStart: number, canvasTimeEnd: number): any;
|
||||
itemRenderer?: (props: ReactCalendarItemRendererProps<CustomItem>) => React.ReactNode;
|
||||
groupRenderer?: (props: ReactCalendarGroupRendererProps<CustomGroup>) => React.ReactNode;
|
||||
resizeDetector?: (containerResizeDetector: any) => void;
|
||||
verticalLineClassNamesForTime?: (start: number, end: number) => string[] | undefined;
|
||||
horizontalLineClassNamesForGroup?: (group: CustomGroup) => string[];
|
||||
|
||||
// Fields that are in propTypes but not documented
|
||||
headerRef?: React.Ref<any>;
|
||||
}
|
||||
|
||||
export interface TimelineTimeSteps {
|
||||
second: number;
|
||||
minute: number;
|
||||
hour: number;
|
||||
day: number;
|
||||
month: number;
|
||||
year: number;
|
||||
}
|
||||
|
||||
export class TimelineMarkers extends React.Component {}
|
||||
|
||||
export interface CustomMarkerChildrenProps {
|
||||
styles: React.CSSProperties;
|
||||
date: number;
|
||||
}
|
||||
export interface MarkerProps {
|
||||
date: Date | number;
|
||||
children?: (props: CustomMarkerChildrenProps) => React.ReactNode;
|
||||
}
|
||||
|
||||
export class CustomMarker extends React.Component<MarkerProps> {}
|
||||
|
||||
export interface TodayMarkerProps extends MarkerProps {
|
||||
interval?: number;
|
||||
}
|
||||
export class TodayMarker extends React.Component<TodayMarkerProps> {}
|
||||
|
||||
export type CursorMarkerProps = Omit<MarkerProps, 'date'>;
|
||||
export class CursorMarker extends React.Component<CursorMarkerProps> {}
|
||||
|
||||
export class TimelineHeaders extends React.Component<React.HTMLAttributes<Element>> {}
|
||||
|
||||
export interface TimelineHeaderProps {
|
||||
style?: React.CSSProperties;
|
||||
className?: string;
|
||||
calendarHeaderStyle?: React.CSSProperties;
|
||||
calendarHeaderClassName?: string;
|
||||
headerRef?: React.Ref<any>;
|
||||
}
|
||||
export class TimelineHeader extends React.Component<TimelineHeaderProps> {}
|
||||
|
||||
export interface SidebarHeaderChildrenFnProps<Data> {
|
||||
getRootProps: (propsToOverride?: { style: React.CSSProperties }) => { style: React.CSSProperties };
|
||||
data: Data;
|
||||
}
|
||||
|
||||
export interface SidebarHeaderProps<Data> {
|
||||
variant?: 'left' | 'right';
|
||||
headerData?: Data;
|
||||
children: (props: SidebarHeaderChildrenFnProps<Data>) => React.ReactNode;
|
||||
}
|
||||
export class SidebarHeader<Data = any> extends React.Component<SidebarHeaderProps<Data>> {}
|
||||
|
||||
export type Unit = 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year';
|
||||
|
||||
export interface IntervalContext {
|
||||
interval: { startTime: number; endTime: number; labelWidth: number; left: number };
|
||||
intervalText: string;
|
||||
}
|
||||
export interface GetIntervalProps {
|
||||
interval?: Interval;
|
||||
style?: React.CSSProperties;
|
||||
onClick?: React.MouseEventHandler;
|
||||
}
|
||||
export interface IntervalRenderer<Data> {
|
||||
intervalContext: IntervalContext;
|
||||
getIntervalProps: (props?: GetIntervalProps) => Required<GetIntervalProps> & { key: string | number };
|
||||
data?: Data;
|
||||
}
|
||||
export interface DateHeaderProps<Data> {
|
||||
style?: React.CSSProperties;
|
||||
className?: string;
|
||||
unit?: Unit | 'primaryHeader';
|
||||
labelFormat?: string | (([startTime, endTime]: [Moment, Moment], unit: Unit, labelWidth: number) => string);
|
||||
intervalRenderer?: (props?: IntervalRenderer<Data>) => React.ReactNode;
|
||||
headerData?: Data;
|
||||
children?: (props: SidebarHeaderChildrenFnProps<Data>) => React.ReactNode;
|
||||
height?: number;
|
||||
}
|
||||
export class DateHeader<Data = any> extends React.Component<DateHeaderProps<Data>> {}
|
||||
export interface Interval {
|
||||
startTime: Moment;
|
||||
endTime: Moment;
|
||||
}
|
||||
export interface HeaderContext {
|
||||
intervals: { startTime: Moment; endTime: Moment }[];
|
||||
unit: string;
|
||||
}
|
||||
export interface CustomHeaderPropsChildrenFnProps<Data> {
|
||||
timelineContext: TimelineContext;
|
||||
headerContext: HeaderContext;
|
||||
getIntervalProps: (props?: GetIntervalProps) => Required<GetIntervalProps> & { key: string | number };
|
||||
getRootProps: (propsToOverride?: { style: React.CSSProperties }) => { style: React.CSSProperties };
|
||||
showPeriod: (startDate: Moment | number, endDate: Moment | number) => void;
|
||||
data: Data;
|
||||
}
|
||||
export interface CustomHeaderProps<Data> {
|
||||
unit?: Unit;
|
||||
headerData?: Data;
|
||||
height?: number;
|
||||
children: (props?: CustomHeaderPropsChildrenFnProps<Data>) => React.ReactNode;
|
||||
}
|
||||
export class CustomHeader<Data = any> extends React.Component<CustomHeaderProps<Data>> {}
|
||||
|
||||
export const defaultKeys: TimelineKeys;
|
||||
export const defaultTimeSteps: TimelineTimeSteps;
|
||||
export const defaultHeaderFormats: LabelFormat;
|
||||
|
||||
export default class ReactCalendarTimeline<
|
||||
CustomItem extends TimelineItemBase<any> = TimelineItemBase<number>,
|
||||
CustomGroup extends TimelineGroupBase = TimelineGroupBase
|
||||
> extends React.Component<ReactCalendarTimelineProps<CustomItem, CustomGroup>> {}
|
||||
}
|
||||
|
||||
6
types/react-calendar-timeline/package.json
Normal file
6
types/react-calendar-timeline/package.json
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"moment": "^2.0.0"
|
||||
}
|
||||
}
|
||||
@ -1,30 +1,314 @@
|
||||
import * as React from "react";
|
||||
import ReactCalendarTimeline from 'react-calendar-timeline';
|
||||
// Don't want to add this as a dependency, because it is only used for tests.
|
||||
declare const moment: any;
|
||||
import * as React from 'react';
|
||||
import { useState } from 'react';
|
||||
import Timeline, {
|
||||
TimelineGroupBase,
|
||||
TimelineItemBase,
|
||||
TimelineItem,
|
||||
TimelineGroup,
|
||||
TimelineHeaders,
|
||||
SidebarHeader,
|
||||
DateHeader,
|
||||
CustomHeader,
|
||||
} from 'react-calendar-timeline';
|
||||
import * as moment from 'moment';
|
||||
import { Moment } from 'moment';
|
||||
|
||||
const groups = [
|
||||
{id: 1, title: 'group 1'},
|
||||
{id: 2, title: 'group 2'}
|
||||
]
|
||||
const groups1 = [{ id: 1, title: 'group 1' }, { id: 2, title: 'group 2' }] as TimelineGroupBase[];
|
||||
|
||||
const items = [
|
||||
{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')}
|
||||
]
|
||||
const items1 = [
|
||||
{ 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>[];
|
||||
|
||||
class ExampleOfUsingReactCalendarTimeline extends React.Component {
|
||||
render(){
|
||||
return(
|
||||
<div>
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
Rendered by react!
|
||||
<ReactCalendarTimeline groups={groups}
|
||||
items={items}
|
||||
defaultTimeStart={moment().add(-12, 'hour')}
|
||||
defaultTimeEnd={moment().add(12, 'hour')}
|
||||
/>
|
||||
<Timeline<TimelineItemBase<Moment>>
|
||||
groups={groups1}
|
||||
items={items1}
|
||||
defaultTimeStart={moment().add(-12, 'hour')}
|
||||
defaultTimeEnd={moment().add(12, 'hour')}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
type TimelineGroupCustom = TimelineGroup<{ data: string }>;
|
||||
type TimelineItemCustom = TimelineItem<{ data: string }, Moment>;
|
||||
|
||||
const groups2 = [
|
||||
{ id: 1, title: 'group 1', data: '1' },
|
||||
{ id: 2, title: 'group 2', data: '1' },
|
||||
] as TimelineGroupCustom[];
|
||||
|
||||
const items2 = [
|
||||
{ id: 1, group: 1, title: 'item 1', start_time: moment(), end_time: moment().add(1, 'hour'), data: '1' },
|
||||
{
|
||||
id: 2,
|
||||
group: 2,
|
||||
title: 'item 2',
|
||||
start_time: moment().add(-0.5, 'hour'),
|
||||
end_time: moment().add(0.5, 'hour'),
|
||||
data: '1',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
group: 1,
|
||||
title: 'item 3',
|
||||
start_time: moment().add(2, 'hour'),
|
||||
end_time: moment().add(3, 'hour'),
|
||||
data: '1',
|
||||
},
|
||||
] as TimelineItemCustom[];
|
||||
|
||||
class ExampleOfUsingReactCalendarTimelineWithCustomGroupAndItemExtension extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
Rendered by react!
|
||||
<Timeline<TimelineItemCustom, TimelineGroupCustom>
|
||||
groups={groups2}
|
||||
items={items2}
|
||||
defaultTimeStart={moment().add(-12, 'hour')}
|
||||
defaultTimeEnd={moment().add(12, 'hour')}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const Example: React.FC = () => (
|
||||
<Timeline groups={groups2} items={items2}>
|
||||
<TimelineHeaders>
|
||||
<SidebarHeader>
|
||||
{({ getRootProps }) => {
|
||||
return <div {...getRootProps()}>Left</div>;
|
||||
}}
|
||||
</SidebarHeader>
|
||||
<DateHeader unit="primaryHeader" />
|
||||
<DateHeader />
|
||||
<CustomHeader height={50} headerData={{ someData: 'data' }} unit="year">
|
||||
{({ headerContext: { intervals }, getRootProps, getIntervalProps, showPeriod, data }) => {
|
||||
return (
|
||||
<div {...getRootProps()}>
|
||||
{intervals.map(interval => {
|
||||
const intervalStyle = {
|
||||
lineHeight: '30px',
|
||||
textAlign: 'center',
|
||||
borderLeft: '1px solid black',
|
||||
cursor: 'pointer',
|
||||
backgroundColor: 'Turquoise',
|
||||
color: 'white',
|
||||
} as React.CSSProperties;
|
||||
return (
|
||||
<div
|
||||
onClick={() => {
|
||||
showPeriod(interval.startTime, interval.endTime);
|
||||
}}
|
||||
{...getIntervalProps({
|
||||
interval,
|
||||
style: intervalStyle,
|
||||
})}
|
||||
>
|
||||
<div className="sticky">{interval.startTime.format('YYYY')}</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</CustomHeader>
|
||||
</TimelineHeaders>
|
||||
</Timeline>
|
||||
);
|
||||
|
||||
const groups = [{ id: 1, title: 'group 1' }, { id: 2, title: 'group 2' }] as TimelineGroupBase[];
|
||||
|
||||
const items = [
|
||||
{ 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')
|
||||
.toDate();
|
||||
const defaultTimeEnd = moment()
|
||||
.startOf('day')
|
||||
.add(1, 'day')
|
||||
.toDate();
|
||||
|
||||
const Resize = () => {
|
||||
const [itemsState, setItems] = useState(items);
|
||||
|
||||
return (
|
||||
<Timeline
|
||||
groups={groups}
|
||||
items={items}
|
||||
itemTouchSendsClick={false}
|
||||
stackItems
|
||||
itemHeightRatio={0.75}
|
||||
canMove={true}
|
||||
canResize={'both'}
|
||||
defaultTimeStart={defaultTimeStart}
|
||||
defaultTimeEnd={defaultTimeEnd}
|
||||
onItemMove={(itemId, dragTime, newGroupOrder) => {
|
||||
const group = groups[newGroupOrder];
|
||||
|
||||
setItems(
|
||||
itemsState.map(item =>
|
||||
item.id === itemId
|
||||
? {
|
||||
...item,
|
||||
...{
|
||||
start_time: dragTime,
|
||||
end_time: dragTime + (item.end_time - item.start_time),
|
||||
group: group.id,
|
||||
},
|
||||
}
|
||||
: item,
|
||||
),
|
||||
);
|
||||
|
||||
console.log('Moved', itemId, dragTime, newGroupOrder);
|
||||
}}
|
||||
onItemResize={(itemId, time, edge) => {
|
||||
setItems(
|
||||
itemsState.map(item =>
|
||||
item.id === itemId
|
||||
? {
|
||||
...item,
|
||||
...{
|
||||
start_time: edge === 'left' ? time : item.start_time,
|
||||
end_time: edge === 'left' ? item.end_time : time,
|
||||
},
|
||||
}
|
||||
: item,
|
||||
),
|
||||
);
|
||||
|
||||
console.log('Resized', itemId, time, edge);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const TimelineDragTest = () => {
|
||||
const [itemsState, setItems] = useState(items);
|
||||
const [draggedItem, setDraggedItem] = useState<
|
||||
{ item: TimelineItemBase<number>; group: TimelineGroupBase; time: number } | undefined
|
||||
>(undefined);
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Timeline
|
||||
groups={groups}
|
||||
items={items}
|
||||
itemTouchSendsClick={false}
|
||||
stackItems
|
||||
itemHeightRatio={0.75}
|
||||
canMove={true}
|
||||
canResize={'both'}
|
||||
defaultTimeStart={defaultTimeStart}
|
||||
defaultTimeEnd={defaultTimeEnd}
|
||||
onItemMove={(itemId, dragTime, newGroupOrder) => {
|
||||
const group = groups[newGroupOrder];
|
||||
|
||||
setItems(
|
||||
itemsState.map(item =>
|
||||
item.id === itemId
|
||||
? {
|
||||
...item,
|
||||
...{
|
||||
start_time: dragTime,
|
||||
end_time: dragTime + (item.end_time - item.start_time),
|
||||
group: group.id,
|
||||
},
|
||||
}
|
||||
: item,
|
||||
),
|
||||
);
|
||||
setDraggedItem(undefined);
|
||||
console.log('Moved', itemId, dragTime, newGroupOrder);
|
||||
}}
|
||||
onItemResize={(itemId, time, edge) => {
|
||||
setItems(
|
||||
itemsState.map(item =>
|
||||
item.id === itemId
|
||||
? {
|
||||
...item,
|
||||
...{
|
||||
start_time: edge === 'left' ? time : item.start_time,
|
||||
end_time: edge === 'left' ? item.end_time : time,
|
||||
},
|
||||
}
|
||||
: item,
|
||||
),
|
||||
);
|
||||
setDraggedItem(undefined);
|
||||
|
||||
console.log('Resized', itemId, time, edge);
|
||||
}}
|
||||
onItemDrag={itemDragObject => {
|
||||
if (itemDragObject.eventType === 'move') {
|
||||
const { itemId, newGroupOrder, time } = itemDragObject;
|
||||
let item = draggedItem ? draggedItem.item : undefined;
|
||||
if (!item) {
|
||||
item = itemsState.find(i => i.id === itemId);
|
||||
}
|
||||
setDraggedItem({ item: item, group: groups[newGroupOrder], time });
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{draggedItem && (
|
||||
<div
|
||||
style={{
|
||||
position: 'fixed',
|
||||
left: 100,
|
||||
bottom: 50,
|
||||
background: 'rgba(0, 0, 0, 0.5)',
|
||||
color: 'white',
|
||||
padding: 10,
|
||||
|
||||
fontSize: 20,
|
||||
borderRadius: 5,
|
||||
zIndex: 85,
|
||||
}}
|
||||
>
|
||||
{`${moment(draggedItem.time).format('LLL')}, ${draggedItem.group ? draggedItem.group.title : ''}`}
|
||||
</div>
|
||||
)}
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
const Basic: React.FC = () => {
|
||||
return (
|
||||
<Timeline
|
||||
groups={groups}
|
||||
items={items}
|
||||
sidebarContent={<div>Above The Left</div>}
|
||||
itemTouchSendsClick={false}
|
||||
stackItems
|
||||
itemHeightRatio={0.75}
|
||||
canMove={false}
|
||||
canResize={false}
|
||||
defaultTimeStart={defaultTimeStart}
|
||||
defaultTimeEnd={defaultTimeEnd}
|
||||
>
|
||||
<TimelineHeaders className="sticky">
|
||||
<SidebarHeader>
|
||||
{({ getRootProps }) => {
|
||||
return <div {...getRootProps()}>Left</div>;
|
||||
}}
|
||||
</SidebarHeader>
|
||||
<DateHeader unit="primaryHeader" />
|
||||
<DateHeader />
|
||||
</TimelineHeaders>
|
||||
</Timeline>
|
||||
);
|
||||
};
|
||||
|
||||
@ -22,4 +22,4 @@
|
||||
"index.d.ts",
|
||||
"react-calendar-timeline-tests.tsx"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user