react-calendar-timeline/dist/lib/items/Item.d.ts

react-calendar-timeline

import { Component, CSSProperties, HTMLAttributes, LegacyRef, MouseEvent, MouseEventHandler, ReactNode, TouchEvent, TouchEventHandler } from 'react';
import { defaultItemRenderer } from './defaultItemRenderer';
import { Id, ItemContext, TimelineItemBase, TimelineKeys } from '../types/main';
import { TimelineContextType } from '../timeline/TimelineStateContext';
export type ResizeEdge = 'left' | 'right';
type OnSelect = (itemId: string | null, clickType: 'click' | 'touch', event: MouseEvent<HTMLElement> | TouchEvent<HTMLElement>) => void;
export type ItemProps<CustomItem extends TimelineItemBase<number>> = {
    canvasTimeStart: number;
    canvasTimeEnd: number;
    canvasWidth: number;
    minResizeWidth?: number;
    order: {
        index: number;
    };
    dragSnap?: number;
    itemProps?: HTMLAttributes<HTMLDivElement>;
    onDrag: (itemId: string, dragTime: number, newGroupOrder: number) => void;
    onDrop: (itemId: string, dragTime: number, newGroupOrder: number) => void;
    onResizing: (itemId: string, time: number, resizeEdge: ResizeEdge | null) => void;
    onResized: (itemId: string, time: number, resizeEdge: ResizeEdge | null, delta: number) => void;
    moveResizeValidator?: (action: 'move' | 'resize', item: TimelineItemBase<any>, time: number, resizeEdge?: ResizeEdge | null) => number;
    itemRenderer?: (props: ItemRendererProps<CustomItem>) => ReactNode;
    selected: boolean;
    canChangeGroup?: boolean;
    canMove?: boolean;
    canSelect?: boolean;
    dimensions?: ItemContext['dimensions'];
    useResizeHandle?: boolean;
    canResizeLeft: any;
    canResizeRight: any;
    keys: TimelineKeys;
    item: CustomItem;
    onSelect: OnSelect;
    onContextMenu?: (i: Id, e: MouseEvent<HTMLDivElement>) => void;
    groupTops: any;
    onItemDoubleClick: (i: Id, e: MouseEvent<HTMLDivElement>) => void;
    scrollRef: HTMLElement | null;
};
type DragProps = {
    offset: number;
    x: number;
    y: number;
};
interface ItemState {
    interactMounted: boolean;
    dragging: boolean;
    dragStart: null | DragProps;
    preDragPosition: {
        x: number;
        y: number;
    } | null;
    dragTime: null | number;
    dragGroupDelta: null | number;
    resizing: boolean;
    resizeEdge: null | 'left' | 'right';
    resizeStart: null | number;
    resizeTime: null | number;
}
export type GetItemPropsParams = HTMLAttributes<HTMLDivElement> & {
    leftClassName?: string;
    rightClassName?: string;
    leftStyle?: CSSProperties;
    rightStyle?: CSSProperties;
};
export interface ItemRendererProps<CustomItem extends TimelineItemBase<number>> {
    item: CustomItem;
    timelineContext: TimelineContextType;
    itemContext: ItemContext;
    getItemProps: (params: GetItemPropsParams) => HTMLAttributes<HTMLDivElement> & {
        key: string;
        ref: LegacyRef<HTMLDivElement>;
    };
    getResizeProps: GetResizeProps;
}
type GetResizePropsDirection = {
    ref: LegacyRef<HTMLDivElement>;
    className: string;
    style: CSSProperties;
};
export type GetResizeProps = (params?: GetItemPropsParams) => {
    right: GetResizePropsDirection;
    left: GetResizePropsDirection;
};
export default class Item<CustomItem extends TimelineItemBase<number>> extends Component<ItemProps<CustomItem>, ItemState> {
    static defaultProps: {
        selected: boolean;
        itemRenderer: typeof defaultItemRenderer;
    };
    context: TimelineContextType;
    static contextType: import("react").Context<TimelineContextType>;
    state: ItemState;
    private itemId;
    private itemTitle;
    private itemDivTitle?;
    private itemTimeStart?;
    private itemTimeEnd?;
    private itemRef;
    private dragLeft?;
    private dragRight?;
    private startedClicking;
    private startedTouching;
    private dragInProgress;
    constructor(props: ItemProps<CustomItem>);
    shouldComponentUpdate(nextProps: ItemProps<CustomItem>, nextState: ItemState): boolean;
    cacheDataFromProps(props: ItemProps<CustomItem>): void;
    getTimeRatio(): number;
    dragTimeSnap(dragTime: number, considerOffset?: boolean): number;
    resizeTimeSnap(dragTime: number): number;
    dragTime(e: MouseEvent): number;
    timeFor(e: MouseEvent): number;
    dragGroupDelta(e: MouseEvent): number;
    resizeTimeDelta(e: MouseEvent, resizeEdge: ResizeEdge | null): number;
    mountInteract(): void;
    canResizeLeft(props?: Readonly<ItemProps<CustomItem>>): boolean;
    canResizeRight(props?: Readonly<ItemProps<CustomItem>>): boolean;
    canMove(props?: Readonly<ItemProps<CustomItem>>): boolean;
    fireInteractEvent: (itemInteraction: boolean) => void;
    componentDidUpdate(prevProps: ItemProps<CustomItem>): void;
    onMouseDown: MouseEventHandler<HTMLDivElement>;
    onMouseUp: MouseEventHandler<HTMLDivElement>;
    onTouchStart: TouchEventHandler<HTMLDivElement>;
    onTouchEnd: TouchEventHandler<HTMLDivElement>;
    handleDoubleClick: MouseEventHandler<HTMLDivElement>;
    handleContextMenu: MouseEventHandler<HTMLDivElement>;
    actualClick(e: MouseEvent<HTMLElement> | TouchEvent<HTMLElement>, clickType: 'click' | 'touch'): void;
    getDragLeftRef: (el: HTMLElement) => HTMLElement;
    getDragRightRef: (el: HTMLElement) => HTMLElement;
    getItemProps: (props?: GetItemPropsParams) => {
        key: string;
        ref: import("react").RefObject<HTMLDivElement>;
        title: string | undefined;
        className: string;
        onMouseDown: (event: MouseEvent<HTMLDivElement, globalThis.MouseEvent>, ...args: any) => void;
        onMouseUp: (event: MouseEvent<HTMLDivElement, globalThis.MouseEvent>, ...args: any) => void;
        onTouchStart: (event: TouchEvent<HTMLDivElement>, ...args: any) => void;
        onTouchEnd: (event: TouchEvent<HTMLDivElement>, ...args: any) => void;
        onDoubleClick: (event: MouseEvent<HTMLDivElement, globalThis.MouseEvent>, ...args: any) => void;
        onContextMenu: (event: MouseEvent<HTMLDivElement, globalThis.MouseEvent>, ...args: any) => void;
        style: any;
    };
    getResizeProps: (props?: GetItemPropsParams) => ReturnType<GetResizeProps>;
    getItemStyle(props: GetItemPropsParams): any;
    render(): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
}
export {};