react-calendar-timeline

import React, { Component, MouseEvent } from 'react'; import { CanResize } from './items/Items'; import { RowClickEvent } from './row/GroupRows'; import { dateType, ElementWithSecret, Id, OnItemDragObjectMove, OnItemDragObjectResize, ReactCalendarGroupRendererProps, TimelineContext, TimelineGroupBase, TimelineItemBase, TimelineKeys, TimelineTimeSteps, Unit } from './types/main'; import { ItemDimension } from './types/dimension'; import dayjs, { Dayjs } from 'dayjs'; import { ItemProps, ResizeEdge } from './items/Item'; export interface ReactCalendarTimelineRef { getBoundingClientRect(): DOMRect; calculateDropCoordinatesToTimeAndGroup(x: number, y: number): { time: number; groupIndex: number; }; } export type OnTimeChange<CustomItem, CustomGroup> = (visibleTimeStart: number, visibleTimeEnd: number, updateScrollCanvas: (start: dateType, end: dateType, forceUpdateDimensions?: boolean, items?: CustomItem[], groups?: CustomGroup[]) => void, unit: Unit) => any; export type ReactCalendarTimelineProps<CustomItem extends TimelineItemBase<number>, CustomGroup extends TimelineGroupBase = TimelineGroupBase> = { children?: React.ReactNode; groups: CustomGroup[]; items: CustomItem[]; keys: TimelineKeys; defaultTimeStart: number; defaultTimeEnd: number; visibleTimeStart?: dateType; visibleTimeEnd?: dateType; selected?: Id[] | undefined; sidebarWidth: number; sidebarContent?: React.ReactNode | undefined; rightSidebarWidth: number; rightSidebarContent?: React.ReactNode | undefined; dragSnap?: number; minResizeWidth?: number | undefined; lineHeight: number; itemHeightRatio: number; /** * vertical gap (in pixels) added above and below each item. * Applies globally for consistent spacing between items. * If it's defined it will override `lineHeight`. */ itemVerticalGap?: number | undefined; minZoom: number; maxZoom: number; clickTolerance?: number | undefined; canMove?: boolean | undefined; canChangeGroup?: boolean | undefined; canResize?: CanResize; useResizeHandle?: boolean | undefined; canSelect?: boolean; stackItems: boolean; traditionalZoom?: boolean | undefined; itemTouchSendsClick?: boolean | undefined; timeSteps: TimelineTimeSteps; scrollRef?: (el: HTMLDivElement) => void; onItemDrag?(itemDragObject: OnItemDragObjectMove | OnItemDragObjectResize): void; onItemMove?(itemId: Id, dragTime: number, newGroupOrder: number): void; onItemResize?(itemId: Id, endTimeOrStartTime: number, edge: ResizeEdge): void; onItemSelect?(itemId: Id, e: React.SyntheticEvent, time: number): void; onItemDeselect?(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, unit: Unit): void; moveResizeValidator?: ItemProps<CustomItem>['moveResizeValidator']; onTimeChange?: OnTimeChange<CustomItem, CustomGroup>; onBoundsChange?(canvasTimeStart: number, canvasTimeEnd: number): any; itemRenderer?: ItemProps<CustomItem>['itemRenderer']; groupRenderer?: ((props: ReactCalendarGroupRendererProps<CustomGroup>) => React.ReactNode) | undefined; resizeDetector?: { addListener?: (x: any) => void; removeListener: (x: any) => void; } | undefined; verticalLineClassNamesForTime?: (start: number, end: number) => string[]; horizontalLineClassNamesForGroup?: ((group: CustomGroup) => string[]) | undefined; buffer?: number; headerRef?: (el: HTMLDivElement) => void; className?: string; style?: React.CSSProperties; ref?: React.Ref<ReactCalendarTimelineRef>; }; export type ReactCalendarTimelineState<CustomItem extends TimelineItemBase<any> = TimelineItemBase<number>, CustomGroup extends TimelineGroupBase = TimelineGroupBase> = { width: number; visibleTimeStart: number; visibleTimeEnd: number; canvasTimeStart: dateType; canvasTimeEnd: dateType; selectedItem: Id | null; dragTime: number | null; dragGroupTitle: string | null; resizeTime: number | null; resizingItem: Id | null; resizingEdge: 'left' | 'right' | null; items?: CustomItem[]; groups?: CustomGroup[]; draggingItem?: Id | null; newGroupOrder: number; dimensionItems: ItemDimension[]; height: number; groupHeights: number[]; groupTops: number[]; }; export default class ReactCalendarTimeline<CustomItem extends TimelineItemBase<any> = TimelineItemBase<number>, CustomGroup extends TimelineGroupBase = TimelineGroupBase> extends Component<ReactCalendarTimelineProps<CustomItem, CustomGroup>, ReactCalendarTimelineState<CustomItem, CustomGroup>> { static setDayjsLocale: typeof dayjs.locale; static defaultProps: { sidebarWidth: number; rightSidebarWidth: number; dragSnap: number; minResizeWidth: number; lineHeight: number; itemHeightRatio: number; buffer: number; minZoom: number; maxZoom: number; clickTolerance: number; canChangeGroup: boolean; canMove: boolean; canResize: string; useResizeHandle: boolean; canSelect: boolean; stackItems: boolean; traditionalZoom: boolean; horizontalLineClassNamesForGroup: null; onItemMove: null; onItemResize: null; onItemClick: null; onItemSelect: null; onItemDeselect: null; onItemDrag: null; onCanvasClick: null; onItemDoubleClick: null; onItemContextMenu: null; onZoom: null; verticalLineClassNamesForTime: null; moveResizeValidator: null; dayBackground: null; defaultTimeStart: null; defaultTimeEnd: null; itemTouchSendsClick: boolean; style: {}; className: string; keys: { groupIdKey: string; groupTitleKey: string; groupRightTitleKey: string; groupLabelKey: string; itemIdKey: string; itemTitleKey: string; itemDivTitleKey: string; itemGroupKey: string; itemTimeStartKey: string; itemTimeEndKey: string; }; timeSteps: { second: number; minute: number; hour: number; day: number; month: number; year: number; }; headerRef: () => void; scrollRef: () => void; visibleTimeStart: null; visibleTimeEnd: null; onTimeChange: (visibleTimeStart: dateType, visibleTimeEnd: dateType, updateScrollCanvas: (visibleTimeStart: dateType, visibleTimeEnd: dateType) => void) => void; onBoundsChange: null; children: null; selected: null; }; getTimelineContext: () => TimelineContext; getTimelineUnit: () => Unit; state: ReactCalendarTimelineState<CustomItem, CustomGroup>; constructor(props: ReactCalendarTimelineProps<CustomItem, CustomGroup>); componentDidMount(): void; componentWillUnmount(): void; static getDerivedStateFromProps(nextProps: ReactCalendarTimelineProps<any>, prevState: ReactCalendarTimelineState): { items: any[]; groups: TimelineGroupBase[]; }; scrollComponent: HTMLDivElement | null; scrollHeaderRef: HTMLDivElement | null; componentDidUpdate(_: ReactCalendarTimelineProps<CustomItem, CustomGroup>, prevState: ReactCalendarTimelineState): void; resize: (props?: Readonly<ReactCalendarTimelineProps<CustomItem, CustomGroup>>) => void; onScroll: (scrollX: number) => void; updateScrollCanvas: (visibleTimeStart: dateType, visibleTimeEnd: dateType, forceUpdateDimensions?: boolean, items?: CustomItem[], groups?: CustomGroup[]) => void; handleWheelZoom: (speed: number, xPosition: number, deltaY: number) => void; changeZoom: (scale: number, offset?: number) => void; showPeriod: (from: Dayjs, to: Dayjs) => void; selectItem: ItemProps<CustomItem>['onSelect']; doubleClickItem: ItemProps<CustomItem>['onItemDoubleClick']; contextMenuClickItem: ItemProps<CustomItem>['onContextMenu']; getTimeFromRowClickEvent: (e: MouseEvent<HTMLDivElement>) => number; timeFromItemEvent: (e: MouseEvent<HTMLDivElement>) => number; dragItem: ItemProps<CustomItem>['onDrag']; dropItem: ItemProps<CustomItem>['onDrop']; resizingItem: ItemProps<CustomItem>['onResizing']; resizedItem: ItemProps<CustomItem>['onResized']; updatingItem: ({ eventType, itemId, time, edge, newGroupOrder, }: { eventType: "move" | "resize"; itemId: Id; time: number; edge?: ResizeEdge; newGroupOrder?: number; }) => void; columns(canvasTimeStart: number, canvasTimeEnd: number, canvasWidth: number, minUnit: keyof TimelineTimeSteps, timeSteps: TimelineTimeSteps, height: number): import("react/jsx-runtime").JSX.Element; handleRowClick: RowClickEvent; handleRowDoubleClick: RowClickEvent; handleScrollContextMenu: RowClickEvent; rows(canvasWidth: number, groupHeights: number[], groups: typeof this.props.groups): import("react/jsx-runtime").JSX.Element; items({ canvasTimeStart, canvasTimeEnd, canvasWidth, dimensionItems, groupTops, }: { canvasTimeStart: number; canvasTimeEnd: number; canvasWidth: number; dimensionItems: ItemDimension[]; groupTops: number[]; }): import("react/jsx-runtime").JSX.Element; handleHeaderRef: (el: HTMLDivElement) => void; sidebar(height: number, groupHeights: number[]): 0 | import("react/jsx-runtime").JSX.Element; rightSidebar(height: number, groupHeights: number[]): 0 | import("react/jsx-runtime").JSX.Element; /** * check if child of type TimelineHeader * refer to for explanation https://github.com/gaearon/react-hot-loader#checking-element-types */ isTimelineHeader: (child: ElementWithSecret) => boolean; childrenWithProps(canvasTimeStart: number, canvasTimeEnd: number, canvasWidth: number, dimensionItems: any[], groupHeights: number[], groupTops: number[], height: number, visibleTimeStart: number, visibleTimeEnd: number, minUnit: keyof TimelineTimeSteps, timeSteps: TimelineTimeSteps): any; renderHeaders: () => import("react/jsx-runtime").JSX.Element; getSelected(): Id[]; hasSelectedItem(): boolean; isItemSelected(itemId: string | null): boolean; getScrollElementRef: (el: HTMLDivElement) => void; container: React.RefObject<HTMLDivElement>; getBoundingClientRect: () => DOMRect; calculateDropCoordinatesToTimeAndGroup: (x: number, y: number) => { time: number; groupIndex: number; }; render(): import("react/jsx-runtime").JSX.Element; }