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 | TouchEvent) => void;
export type ItemProps> = {
canvasTimeStart: number;
canvasTimeEnd: number;
canvasWidth: number;
minResizeWidth?: number;
order: {
index: number;
};
dragSnap?: number;
itemProps?: HTMLAttributes;
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, time: number, resizeEdge?: ResizeEdge | null) => number;
itemRenderer?: (props: ItemRendererProps) => 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) => void;
groupTops: any;
onItemDoubleClick: (i: Id, e: MouseEvent) => 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 & {
leftClassName?: string;
rightClassName?: string;
leftStyle?: CSSProperties;
rightStyle?: CSSProperties;
};
export interface ItemRendererProps> {
item: CustomItem;
timelineContext: TimelineContextType;
itemContext: ItemContext;
getItemProps: (params: GetItemPropsParams) => HTMLAttributes & {
key: string;
ref: LegacyRef;
};
getResizeProps: GetResizeProps;
}
type GetResizePropsDirection = {
ref: LegacyRef;
className: string;
style: CSSProperties;
};
export type GetResizeProps = (params?: GetItemPropsParams) => {
right: GetResizePropsDirection;
left: GetResizePropsDirection;
};
export default class Item> extends Component, ItemState> {
static defaultProps: {
selected: boolean;
itemRenderer: typeof defaultItemRenderer;
};
context: TimelineContextType;
static contextType: import("react").Context;
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);
shouldComponentUpdate(nextProps: ItemProps, nextState: ItemState): boolean;
cacheDataFromProps(props: ItemProps): 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>): boolean;
canResizeRight(props?: Readonly>): boolean;
canMove(props?: Readonly>): boolean;
fireInteractEvent: (itemInteraction: boolean) => void;
componentDidUpdate(prevProps: ItemProps): void;
onMouseDown: MouseEventHandler;
onMouseUp: MouseEventHandler;
onTouchStart: TouchEventHandler;
onTouchEnd: TouchEventHandler;
handleDoubleClick: MouseEventHandler;
handleContextMenu: MouseEventHandler;
actualClick(e: MouseEvent | TouchEvent, clickType: 'click' | 'touch'): void;
getDragLeftRef: (el: HTMLElement) => HTMLElement;
getDragRightRef: (el: HTMLElement) => HTMLElement;
getItemProps: (props?: GetItemPropsParams) => {
key: string;
ref: import("react").RefObject;
title: string | undefined;
className: string;
onMouseDown: (event: MouseEvent, ...args: any) => void;
onMouseUp: (event: MouseEvent, ...args: any) => void;
onTouchStart: (event: TouchEvent, ...args: any) => void;
onTouchEnd: (event: TouchEvent, ...args: any) => void;
onDoubleClick: (event: MouseEvent, ...args: any) => void;
onContextMenu: (event: MouseEvent, ...args: any) => void;
style: any;
};
getResizeProps: (props?: GetItemPropsParams) => ReturnType;
getItemStyle(props: GetItemPropsParams): any;
render(): string | number | boolean | Iterable | import("react/jsx-runtime").JSX.Element | null | undefined;
}
export {};