react-kanban-kit
Version:
A flexible and customizable Kanban board component for React applications, built with TypeScript and modern drag-and-drop functionality powered by Atlassian's pragmatic-drag-and-drop.
31 lines (29 loc) • 998 B
TypeScript
import { BoardItem, DndState } from '../../components/types';
import { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
export type TColumnState = {
type: "idle";
} | {
type: "is-dragging";
} | {
type: "is-dragging-and-left-self";
} | {
type: "is-card-over";
isOverChildCard: boolean;
dragging: DOMRect;
} | {
type: "is-column-over";
closestEdge: Edge;
rect: DOMRect;
} | {
type: "preview";
container: HTMLElement;
dragging: DOMRect;
};
export declare const useColumnDnd: (data: BoardItem, index: number, items: BoardItem[], onColumnDndStateChange?: (info: DndState) => void, allowColumnDrag?: boolean, hasCustomPreview?: boolean) => {
headerRef: import('react').MutableRefObject<HTMLDivElement>;
outerFullHeightRef: import('react').MutableRefObject<HTMLDivElement>;
innerRef: import('react').MutableRefObject<HTMLDivElement>;
state: TColumnState;
cardOverShadowCount: number;
totalTasksCount: number;
};