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

TypeScript Material-UI Implementation

import type { UniqueIdentifier } from "@dnd-kit/core";
import { SortingStrategy } from "@dnd-kit/sortable/dist/types/strategies";
import { DataTypes } from "@etsoo/shared";
import { Theme } from "@mui/material/styles";
import React, { CSSProperties } from "react";
/**
 * DnD item default style
 * @param index Item index
 * @param isDragging Is dragging
 * @param theme Theme
 * @returns Style
 */
export declare const DnDItemStyle: (index: number, isDragging: boolean, theme: Theme) => {
    padding: string;
    zIndex: string | number;
    background: string;
};
/**
 * DnD list forward ref
 */
export interface DnDListRef<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 properties
 */
export interface DnDListPros<D extends {
    id: UniqueIdentifier;
}, 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>;
    /**
     * Get list item style callback
     */
    getItemStyle?: (index: number, isDragging: boolean) => CSSProperties;
    /**
     * Item renderer
     */
    itemRenderer: (item: D, index: number, nodeRef: React.ComponentProps<any>, actionNodeRef: React.ComponentProps<any>) => React.ReactElement;
    /**
     * Height
     */
    height?: string | number;
    /**
     * List items
     */
    items: D[];
    /**
     * Label field
     */
    labelField: DataTypes.Keys<D>;
    /**
     * Methods ref
     */
    mRef?: React.Ref<DnDListRef<D>>;
    /**
     * Sorting strategy
     */
    sortingStrategy?: "rect" | "vertical" | "horizontal" | "rectSwapping" | (() => SortingStrategy);
    /**
     * Data change handler
     */
    onChange?: (items: D[]) => void;
    /**
     * Form data change handler
     */
    onFormChange?: (items: D[]) => void;
    /**
     * Drag end handler
     */
    onDragEnd?: (items: D[]) => void;
}
/**
 * DnD (Drag and Drop) sortable list
 * @param props Props
 * @returns Component
 */
export declare function DnDList<D extends {
    id: UniqueIdentifier;
}, E extends React.ElementType = React.ElementType>(props: DnDListPros<D, E>): import("react/jsx-runtime").JSX.Element;