@etsoo/materialui/lib/cjs/DnDSortableList.d.ts

TypeScript Material-UI Implementation

import { DataTypes, IdType } from "@etsoo/shared";
import React from "react";
import { CSSProperties, Theme } from "@mui/material/styles";
import { useSortable } from "@dnd-kit/react/sortable";
import { DragDropEvents } from "@dnd-kit/react";
/**
 * DnD sortable item default style
 * @param index Item index
 * @param isDragging Is dragging
 * @param theme Theme
 * @returns Style
 */
export declare const DnDSortableItemStyle: (index: number, isDragging: boolean, theme: Theme) => {
    padding: string;
    transform: string;
    zIndex: string | number;
    boxShadow: string;
    background: string;
};
/**
 * DnD sortable list forward ref
 */
export interface DnDSortableListRef<D extends object> {
    /**
     * Add item
     * @param item New item
     */
    addItem(item: D): void;
    /**
     * Add items
     * @param items items
     */
    addItems(items: D[]): void;
    /**
     * Delete item
     * @param index Item index
     */
    deleteItem(index: number): void;
    /**
     * Edit item
     * @param newItem New item
     * @param index Index
     */
    editItem(newItem: D, index: number): boolean;
    /**
     * Get all items
     */
    getItems(): D[];
}
/**
 * DnD sortable list props
 */
export type DnDSortableListProps<D extends object, E extends React.ElementType = React.ElementType> = {
    /**
     * Component type to render the list into
     * Default is React.Fragment
     */
    component?: E;
    /**
     * Component props
     */
    componentProps?: React.ComponentProps<E>;
    /**
     * List items
     */
    items: D[];
    /**
     * Id field
     */
    idField?: DataTypes.Keys<D> | ((item: D) => IdType);
    /**
     * Label field
     */
    labelField: DataTypes.Keys<D, string> | ((item: D) => string);
    /**
     * Methods ref
     */
    mRef?: React.Ref<DnDSortableListRef<D>>;
    /**
     * Item renderer
     */
    itemRenderer: (data: D, style: CSSProperties, state: ReturnType<typeof useSortable<D>>) => React.ReactElement;
    /**
     * Get list item style callback
     */
    itemStyle?: (index: number, isDragging: boolean) => CSSProperties;
    /**
     * Data change handler
     */
    onChange?: (items: D[]) => void;
    /**
     * Drag start handler
     */
    onDragStart?: (items: D[], event: Parameters<DragDropEvents["dragstart"]>[0]) => void;
    /**
     * Drag end handler
     */
    onDragEnd?: (items: D[], ...args: Parameters<DragDropEvents["dragend"]>) => void;
};
/**
 * DnD sortable list component
 * @param props Props
 * @returns Component
 */
export declare function DnDSortableList<D extends object, E extends React.ElementType = React.ElementType>(props: DnDSortableListProps<D, E>): import("react/jsx-runtime").JSX.Element;