react-kanban-kit/dist/components/types.d.ts

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.

import { TaskCardState } from '../global/dnd/useCardDnd';
import { TColumnState } from '../global/dnd/useColumnDnd';
import { CSSProperties, ReactNode } from 'react';

export interface DndState {
    state: TaskCardState | TColumnState;
    column?: BoardItem;
    card?: BoardItem;
}
export interface ScrollEvent {
    target: {
        scrollTop: number;
        scrollHeight: number;
        clientHeight: number;
    };
}
export type CardRenderProps = {
    data: BoardItem;
    column: BoardItem;
    index: number;
    isDraggable: boolean;
};
export type ConfigMap = {
    [type: string]: {
        render: (props: CardRenderProps) => React.ReactNode;
        isDraggable?: boolean;
    };
};
export interface BoardItem {
    id: string;
    title: string;
    parentId: string | null;
    children: string[];
    content?: any;
    type?: keyof ConfigMap;
    totalItems?: number;
    totalChildrenCount: number;
    totalItemsCount?: number;
    isDraggable?: boolean;
}
export interface BoardData {
    root: BoardItem;
    [key: string]: BoardItem;
}
export interface DropColumnParams {
    columnId: string;
    fromIndex: number;
    toIndex: number;
}
export interface DropCardParams {
    cardId: string;
    fromColumnId: string;
    toColumnId: string;
    taskAbove: string | null;
    taskBelow: string | null;
    position: number;
}
export interface BoardProps {
    dataSource: BoardData;
    configMap: ConfigMap;
    viewOnly?: boolean;
    loadMore?: (groupsId: string) => void;
    renderSkeletonCard?: ({ index, column, }: {
        index: number;
        column: BoardItem;
    }) => ReactNode;
    renderColumnHeader?: (column: BoardItem) => ReactNode;
    renderCardDragIndicator?: (card: BoardItem, info: any) => ReactNode;
    renderCardDragPreview?: (card: BoardItem, info: any) => ReactNode;
    renderColumnDragIndicator?: (column: BoardItem, info: {
        width: number;
        height: number;
        edge: "left" | "right";
    }) => ReactNode;
    renderColumnDragPreview?: (column: BoardItem, info: any) => ReactNode;
    renderListFooter?: (column: BoardItem) => ReactNode;
    allowListFooter?: (column: BoardItem) => boolean;
    renderColumnAdder?: () => ReactNode;
    allowColumnAdder?: boolean;
    allowColumnDrag?: boolean;
    renderColumnWrapper?: (column: BoardItem, { children, className, style, }: {
        children: ReactNode;
        className?: string;
        style?: CSSProperties;
    }) => ReactNode;
    columnWrapperStyle?: (column: BoardItem) => CSSProperties;
    columnHeaderStyle?: (column: BoardItem) => CSSProperties;
    columnListContentStyle?: (column: BoardItem) => CSSProperties;
    columnListContentClassName?: (column: BoardItem) => string;
    columnWrapperClassName?: (column: BoardItem) => string;
    columnHeaderClassName?: (column: BoardItem) => string;
    columnClassName?: (column: BoardItem) => string;
    columnStyle?: (column: BoardItem) => CSSProperties;
    rootStyle?: CSSProperties;
    rootClassName?: string;
    cardWrapperStyle?: (card: BoardItem, column: BoardItem) => CSSProperties;
    cardWrapperClassName?: string;
    virtualization?: boolean;
    cardsGap?: number;
    onScroll?: (e: ScrollEvent, column: BoardItem) => void;
    onColumnMove?: ({ columnId, fromIndex, toIndex }: DropColumnParams) => void;
    onCardMove?: ({ cardId, fromColumnId, toColumnId, taskAbove, taskBelow, position, }: DropCardParams) => void;
    renderColumnFooter?: (column: BoardItem) => ReactNode;
    onColumnClick?: (e: React.MouseEvent<HTMLDivElement>, column: BoardItem) => void;
    onCardClick?: (e: React.MouseEvent<HTMLDivElement>, card: BoardItem) => void;
    onCardDndStateChange?: (info: DndState) => void;
    onColumnDndStateChange?: (info: DndState) => void;
}
export interface DropParams {
    source: {
        id: string;
        data: any;
    };
    location: {
        current: {
            dropTargets: Array<{
                data: any;
            }>;
        };
    };
    columns: BoardItem[];
    dataSource: BoardData;
    onCardMove?: BoardProps["onCardMove"];
    onColumnMove?: BoardProps["onColumnMove"];
}