@etsoo/materialui 1.6.11 → 1.6.13

package/lib/mjs/DnDList.d.ts

@@ -1,111 +0,0 @@
-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;

package/lib/mjs/DnDList.js

@@ -1,230 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Skeleton from "@mui/material/Skeleton";
-import { useTheme } from "@mui/material/styles";
-import React from "react";
-function SortableItem(props) {
-    // Destruct
-    const { id, useSortableType, CSSType, itemRenderer, style = {} } = props;
-    // Use sortable
-    const { attributes, listeners, setNodeRef, transform, transition, setActivatorNodeRef } = useSortableType({ id });
-    const allStyle = {
-        ...style,
-        transform: CSSType.Transform.toString(transform),
-        transition
-    };
-    const nodeRef = {
-        style: allStyle,
-        ref: setNodeRef,
-        ...attributes
-    };
-    const actionNodeRef = {
-        ...listeners,
-        ref: setActivatorNodeRef
-    };
-    return itemRenderer(nodeRef, actionNodeRef);
-}
-/**
- * DnD item default style
- * @param index Item index
- * @param isDragging Is dragging
- * @param theme Theme
- * @returns Style
- */
-export const DnDItemStyle = (index, isDragging, theme) => ({
-    padding: theme.spacing(1),
-    zIndex: isDragging ? 1 : "auto",
-    background: isDragging
-        ? theme.palette.primary.light
-        : index % 2 === 0
-            ? theme.palette.grey[100]
-            : theme.palette.grey[50]
-});
-/**
- * DnD (Drag and Drop) sortable list
- * @param props Props
- * @returns Component
- */
-export function DnDList(props) {
-    // Destruct
-    const { componentProps, height = 360, itemRenderer, labelField, mRef, sortingStrategy, onChange, onFormChange, onDragEnd } = props;
-    const Component = props.component || React.Fragment;
-    // Theme
-    const theme = useTheme();
-    // States
-    const [items, setItems] = React.useState([]);
-    const [activeId, setActiveId] = React.useState();
-    React.useEffect(() => {
-        setItems(props.items);
-    }, [props.items]);
-    const doFormChange = React.useCallback((newItems) => {
-        if (onFormChange) {
-            const locals = Array.isArray(newItems) ? newItems : items;
-            onFormChange(locals);
-        }
-    }, [items, onFormChange]);
-    const changeItems = React.useCallback((newItems) => {
-        // Possible to alter items with the handler
-        if (onChange)
-            onChange(newItems);
-        doFormChange(newItems);
-        // Update state
-        setItems(newItems);
-    }, [onChange, doFormChange]);
-    // Methods
-    React.useImperativeHandle(mRef, () => {
-        return {
-            addItem(newItem) {
-                // Existence check
-                if (items.some((item) => item[labelField] === newItem[labelField])) {
-                    return false;
-                }
-                // Clone
-                const newItems = [newItem, ...items];
-                // Update the state
-                changeItems(newItems);
-                return true;
-            },
-            addItems(inputItems) {
-                // Clone
-                const newItems = [...items];
-                // Insert items
-                inputItems.forEach((newItem) => {
-                    // Existence check
-                    if (newItems.some((item) => item[labelField] === newItem[labelField])) {
-                        return;
-                    }
-                    newItems.push(newItem);
-                });
-                // Update the state
-                changeItems(newItems);
-                return newItems.length - items.length;
-            },
-            editItem(newItem, index) {
-                // Existence check
-                const newIndex = items.findIndex((item) => item[labelField] === newItem[labelField]);
-                if (newIndex >= 0 && newIndex !== index) {
-                    // Label field is the same with a different item
-                    return false;
-                }
-                // Clone
-                const newItems = [...items];
-                // Remove the item
-                newItems.splice(index, 1, newItem);
-                // Update the state
-                changeItems(newItems);
-                return true;
-            },
-            deleteItem(index) {
-                // Clone
-                const newItems = [...items];
-                // Remove the item
-                newItems.splice(index, 1);
-                // Update the state
-                changeItems(newItems);
-            },
-            getItems() {
-                return items;
-            }
-        };
-    }, [items, labelField, changeItems]);
-    // Dynamic import library
-    const [dnd, setDnd] = React.useState();
-    React.useEffect(() => {
-        Promise.all([
-            import("@dnd-kit/core"),
-            import("@dnd-kit/sortable"),
-            import("@dnd-kit/utilities")
-        ]).then(([{ DndContext }, { SortableContext, useSortable, rectSortingStrategy, rectSwappingStrategy, horizontalListSortingStrategy, verticalListSortingStrategy }, { CSS }]) => {
-            setDnd([
-                DndContext,
-                SortableContext,
-                useSortable,
-                rectSortingStrategy,
-                rectSwappingStrategy,
-                horizontalListSortingStrategy,
-                verticalListSortingStrategy,
-                CSS
-            ]);
-        });
-    }, []);
-    const setupDiv = (div, clearup = false) => {
-        // Inputs
-        div
-            .querySelectorAll("input")
-            .forEach((input) => clearup
-            ? input.removeEventListener("change", doFormChange)
-            : input.addEventListener("change", doFormChange));
-        // Textareas
-        div
-            .querySelectorAll("textarea")
-            .forEach((input) => clearup
-            ? input.removeEventListener("change", doFormChange)
-            : input.addEventListener("change", doFormChange));
-        // Select
-        div
-            .querySelectorAll("select")
-            .forEach((input) => clearup
-            ? input.removeEventListener("change", doFormChange)
-            : input.addEventListener("change", doFormChange));
-    };
-    const divRef = React.useRef(null);
-    if (dnd == null) {
-        return _jsx(Skeleton, { variant: "rectangular", width: "100%", height: height });
-    }
-    const [DndContextType, SortableContextType, useSortableType, rectSortingStrategyType, rectSwappingStrategyType, horizontalListSortingStrategyType, verticalListSortingStrategyType, CSSType] = dnd;
-    const strategy = typeof sortingStrategy === "function"
-        ? sortingStrategy()
-        : sortingStrategy === "rect"
-            ? rectSortingStrategyType
-            : sortingStrategy === "rectSwapping"
-                ? rectSwappingStrategyType
-                : sortingStrategy === "horizontal"
-                    ? horizontalListSortingStrategyType
-                    : sortingStrategy === "vertical"
-                        ? verticalListSortingStrategyType
-                        : undefined;
-    let getItemStyle = props.getItemStyle;
-    if (getItemStyle == null) {
-        getItemStyle = (index, isDragging) => DnDItemStyle(index, isDragging, theme);
-    }
-    // Drag event handlers
-    function handleDragStart(event) {
-        const { active } = event;
-        setActiveId(active.id);
-    }
-    function handleDragEnd(event) {
-        const { active, over } = event;
-        if (over && active.id !== over.id) {
-            // Indices
-            const oldIndex = items.findIndex((item) => item.id === active.id);
-            const newIndex = items.findIndex((item) => item.id === over.id);
-            // Clone
-            const newItems = [...items];
-            // Removed item
-            const [removed] = newItems.splice(oldIndex, 1);
-            // Insert to the destination index
-            newItems.splice(newIndex, 0, removed);
-            changeItems(newItems);
-            // Drag end handler
-            if (onDragEnd)
-                onDragEnd(newItems);
-        }
-        setActiveId(undefined);
-    }
-    const children = (_jsx(DndContextType, { onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: _jsx(SortableContextType, { items: items, strategy: strategy, children: _jsx(Component, { ...componentProps, children: items.map((item, index) => {
-                    const id = item.id;
-                    return (_jsx(SortableItem, { id: id, useSortableType: useSortableType, CSSType: CSSType, style: getItemStyle(index, id === activeId), itemRenderer: (nodeRef, actionNodeRef) => itemRenderer(item, index, nodeRef, actionNodeRef) }, id));
-                }) }) }) }));
-    if (onFormChange) {
-        return (_jsx("div", { style: { width: "100%" }, ref: (div) => {
-                if (div && divRef.current != div) {
-                    if (divRef.current) {
-                        setupDiv(divRef.current, true);
-                    }
-                    divRef.current = div;
-                    setupDiv(div);
-                }
-            }, children: children }));
-    }
-    return children;
-}