@etsoo/materialui 1.6.11 → 1.6.13

package/src/DnDSortableList.tsx

@@ -0,0 +1,345 @@
+import { DataTypes, IdType } from "@etsoo/shared";
+import React from "react";
+import { CSSProperties, Theme, useTheme } from "@mui/material/styles";
+import { isSortableOperation, useSortable } from "@dnd-kit/react/sortable";
+import { DragDropEvents, DragDropProvider } from "@dnd-kit/react";
+
+/**
+ * DnD sortable item default style
+ * @param index Item index
+ * @param isDragging Is dragging
+ * @param theme Theme
+ * @returns Style
+ */
+export const DnDSortableItemStyle = (
+  index: number,
+  isDragging: boolean,
+  theme: Theme
+) => ({
+  padding: theme.spacing(1),
+  transform: isDragging ? "scale(1.03)" : "none",
+  zIndex: isDragging ? 1 : "auto",
+  boxShadow: isDragging
+    ? `-1px 0 8px 0 ${theme.palette.grey[400]}, 0px 8px 8px 0 ${theme.palette.grey[200]}`
+    : "none",
+  background: isDragging
+    ? theme.palette.primary.light
+    : index % 2 === 0
+      ? theme.palette.grey[100]
+      : theme.palette.grey[50]
+});
+
+/**
+ * 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;
+};
+
+type SortableItemProps<D extends object> = {
+  id: IdType;
+  index: number;
+  data: D;
+  itemStyle?: (index: number, isDragging: boolean) => CSSProperties;
+} & Pick<DnDSortableListProps<D>, "itemRenderer">;
+
+function SortableItem<D extends object>(props: SortableItemProps<D>) {
+  const theme = useTheme();
+  const {
+    id,
+    data,
+    index,
+    itemRenderer,
+    itemStyle = (index, isDragging) =>
+      DnDSortableItemStyle(index, isDragging, theme)
+  } = props;
+  const state = useSortable<D>({ id, data, index });
+  const style = itemStyle(index, state.isDragging);
+  return itemRenderer(data, style, state);
+}
+
+/**
+ * DnD sortable list component
+ * @param props Props
+ * @returns Component
+ */
+export function DnDSortableList<
+  D extends object,
+  E extends React.ElementType = React.ElementType
+>(props: DnDSortableListProps<D, E>) {
+  // Destruct
+  const Component = props.component || React.Fragment;
+  const {
+    componentProps,
+    idField,
+    itemRenderer,
+    itemStyle,
+    labelField,
+    mRef,
+    onChange,
+    onDragStart,
+    onDragEnd
+  } = props;
+
+  const idFn =
+    typeof idField === "function"
+      ? idField
+      : (item: D) =>
+          !idField
+            ? (Reflect.get(item, "id") as IdType)
+            : (item[idField] as IdType);
+
+  const labelFn = React.useCallback(
+    typeof labelField === "function"
+      ? labelField
+      : (item: D) => item[labelField] as string,
+    [labelField]
+  );
+
+  // States
+  const [items, setItems] = React.useState<D[]>([]);
+
+  React.useEffect(() => {
+    setItems(props.items);
+  }, [props.items]);
+
+  const changeItems = React.useCallback(
+    (newItems: D[]) => {
+      // Possible to alter items with the handler
+      onChange?.(newItems);
+
+      // Update state
+      setItems(newItems);
+    },
+    [onChange]
+  );
+
+  // Methods
+  React.useImperativeHandle(mRef, () => {
+    return {
+      addItem(newItem: D) {
+        // Existence check
+        if (items.some((item) => labelFn(item) === labelFn(newItem))) {
+          return false;
+        }
+
+        // Clone
+        const newItems = [newItem, ...items];
+
+        // Update the state
+        changeItems(newItems);
+
+        return true;
+      },
+
+      addItems(inputItems: D[]) {
+        // Clone
+        const newItems = [...items];
+
+        // Insert items
+        inputItems.forEach((newItem) => {
+          // Existence check
+          if (newItems.some((item) => labelFn(item) === labelFn(newItem))) {
+            return;
+          }
+
+          newItems.push(newItem);
+        });
+
+        // Update the state
+        changeItems(newItems);
+
+        return newItems.length - items.length;
+      },
+
+      editItem(newItem: D, index: number) {
+        // Existence check
+        const newIndex = items.findIndex(
+          (item) => labelFn(item) === labelFn(newItem)
+        );
+        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: number) {
+        // Clone
+        const newItems = [...items];
+
+        // Remove the item
+        newItems.splice(index, 1);
+
+        // Update the state
+        changeItems(newItems);
+      },
+
+      getItems() {
+        return items;
+      }
+    };
+  }, [items, labelFn, changeItems]);
+
+  function handleDragEnd(...args: Parameters<DragDropEvents["dragend"]>) {
+    // Event
+    const event = args[0];
+
+    // Cancelled
+    if (event.canceled) return;
+
+    if (isSortableOperation(event.operation) && event.operation.source) {
+      const { initialIndex, index } = event.operation.source;
+      if (initialIndex === index) return;
+
+      // Clone
+      const newItems = [...items];
+
+      // Removed item
+      const [removed] = newItems.splice(initialIndex, 1);
+
+      // Insert to the destination index
+      newItems.splice(index, 0, removed);
+
+      changeItems(newItems);
+
+      // Drag end handler
+      onDragEnd?.(newItems, ...args);
+    }
+  }
+
+  return (
+    <DragDropProvider
+      onDragStart={(event) => onDragStart?.(items, event)}
+      onDragEnd={(event, manager) => handleDragEnd(event, manager)}
+    >
+      <Component {...componentProps}>
+        {items.map((item, index) => {
+          const id = idFn(item);
+          return (
+            <SortableItem
+              key={id}
+              id={id}
+              index={index}
+              data={item}
+              itemRenderer={itemRenderer}
+              itemStyle={itemStyle}
+            />
+          );
+        })}
+      </Component>
+    </DragDropProvider>
+  );
+}

package/src/index.ts

@@ -60,7 +60,7 @@ export * from "./DataLoadField";
 export * from "./DataSteps";
 export * from "./DataTable";
 export * from "./DialogButton";
-export * from "./DnDList";
+export * from "./DnDSortableList";
 export * from "./DownUpButton";
 export * from "./DraggablePaperComponent";
 export * from "./EmailInput";

package/lib/cjs/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/cjs/DnDList.js

@@ -1,238 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DnDItemStyle = void 0;
-exports.DnDList = DnDList;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Skeleton_1 = __importDefault(require("@mui/material/Skeleton"));
-const styles_1 = require("@mui/material/styles");
-const react_1 = __importDefault(require("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
- */
-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]
-});
-exports.DnDItemStyle = DnDItemStyle;
-/**
- * DnD (Drag and Drop) sortable list
- * @param props Props
- * @returns Component
- */
-function DnDList(props) {
-    // Destruct
-    const { componentProps, height = 360, itemRenderer, labelField, mRef, sortingStrategy, onChange, onFormChange, onDragEnd } = props;
-    const Component = props.component || react_1.default.Fragment;
-    // Theme
-    const theme = (0, styles_1.useTheme)();
-    // States
-    const [items, setItems] = react_1.default.useState([]);
-    const [activeId, setActiveId] = react_1.default.useState();
-    react_1.default.useEffect(() => {
-        setItems(props.items);
-    }, [props.items]);
-    const doFormChange = react_1.default.useCallback((newItems) => {
-        if (onFormChange) {
-            const locals = Array.isArray(newItems) ? newItems : items;
-            onFormChange(locals);
-        }
-    }, [items, onFormChange]);
-    const changeItems = react_1.default.useCallback((newItems) => {
-        // Possible to alter items with the handler
-        if (onChange)
-            onChange(newItems);
-        doFormChange(newItems);
-        // Update state
-        setItems(newItems);
-    }, [onChange, doFormChange]);
-    // Methods
-    react_1.default.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_1.default.useState();
-    react_1.default.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_1.default.useRef(null);
-    if (dnd == null) {
-        return (0, jsx_runtime_1.jsx)(Skeleton_1.default, { 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) => (0, exports.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 = ((0, jsx_runtime_1.jsx)(DndContextType, { onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: (0, jsx_runtime_1.jsx)(SortableContextType, { items: items, strategy: strategy, children: (0, jsx_runtime_1.jsx)(Component, { ...componentProps, children: items.map((item, index) => {
-                    const id = item.id;
-                    return ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.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;
-}