@atlaskit/tree
Version:
A React Component for displaying expandable and sortable tree hierarchies
34 lines (33 loc) • 1.36 kB
TypeScript
/// <reference types="typings/react-beautiful-dnd-next" />
import { type ReactNode } from 'react';
import { type DraggableProvided, type DraggableStateSnapshot, type DraggableProvidedDragHandleProps, type DraggableProvidedDraggableProps, type DraggingStyle } from 'react-beautiful-dnd-next';
import { type ItemId, type Path, type TreeItem } from '../../types';
export type TreeDraggingStyle = DraggingStyle & {
paddingLeft: number;
transition: 'none' | string;
};
export type DragActionType = null | 'mouse' | 'key' | 'touch';
export type RenderItemParams = {
item: TreeItem;
depth: number;
onExpand: (itemId: ItemId) => void;
onCollapse: (itemId: ItemId) => void;
provided: TreeDraggableProvided;
snapshot: DraggableStateSnapshot;
};
export type TreeDraggableProvided = {
draggableProps: DraggableProvidedDraggableProps;
dragHandleProps: DraggableProvidedDragHandleProps | null;
innerRef: (el: HTMLElement | null) => void;
};
export type Props = {
item: TreeItem;
path: Path;
onExpand: (itemId: ItemId, path: Path) => void;
onCollapse: (itemId: ItemId, path: Path) => void;
renderItem: (item: RenderItemParams) => ReactNode;
provided: DraggableProvided;
snapshot: DraggableStateSnapshot;
itemRef: (itemId: ItemId, element: HTMLElement | null) => void;
offsetPerLevel: number;
};