@etsoo/materialui 1.2.49 → 1.2.50

package/lib/DnDList.d.ts

@@ -1,4 +1,4 @@
-import { UniqueIdentifier } from "@dnd-kit/core";
+import type { UniqueIdentifier } from "@dnd-kit/core";
 import { DataTypes } from "@etsoo/shared";
 import { Theme } from "@mui/material";
 import React, { CSSProperties } from "react";
@@ -56,6 +56,10 @@ export interface DnDListPros<D extends object, K extends DataTypes.Keys<D>> {
      * Item renderer
      */
     itemRenderer: (item: D, index: number, nodeRef: React.ComponentProps<any>, actionNodeRef: React.ComponentProps<any>) => React.ReactElement;
+    /**
+     * Height
+     */
+    height?: string | number;
     /**
      * List items
      */

package/lib/DnDList.js

@@ -1,16 +1,13 @@
-import { DndContext } from "@dnd-kit/core";
-import { SortableContext, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import { useTheme } from "@mui/material";
+import { Skeleton, useTheme } from "@mui/material";
 import React from "react";
 function SortableItem(props) {
     // Destruct
-    const { id, itemRenderer, style = {} } = props;
+    const { id, useSortableType, CSSType, itemRenderer, style = {} } = props;
     // Use sortable
-    const { attributes, listeners, setNodeRef, transform, transition, setActivatorNodeRef } = useSortable({ id });
+    const { attributes, listeners, setNodeRef, transform, transition, setActivatorNodeRef } = useSortableType({ id });
     const allStyle = {
         ...style,
-        transform: CSS.Transform.toString(transform),
+        transform: CSSType.Transform.toString(transform),
         transition
     };
     const nodeRef = {
@@ -47,52 +44,27 @@ export const DnDItemStyle = (index, isDragging, theme) => ({
  */
 export function DnDList(props) {
     // Destruct
-    const { keyField, itemRenderer, labelField, mRef, onChange, onFormChange, onDragEnd } = props;
-    let getItemStyle = props.getItemStyle;
-    if (getItemStyle == null) {
-        // Theme
-        const theme = useTheme();
-        getItemStyle = (index, isDragging) => DnDItemStyle(index, isDragging, theme);
-    }
+    const { keyField, height = 360, itemRenderer, labelField, mRef, onChange, onFormChange, onDragEnd } = props;
+    // Theme
+    const theme = useTheme();
     // States
     const [items, setItems] = React.useState([]);
     const [activeId, setActiveId] = React.useState();
-    const doFormChange = (newItems) => {
+    React.useEffect(() => {
+        setItems(props.items);
+    }, [props.items]);
+    const doFormChange = React.useCallback((newItems) => {
         if (onFormChange)
             onFormChange(newItems !== null && newItems !== void 0 ? newItems : items);
-    };
-    const changeItems = (newItems) => {
+    }, [items, onFormChange]);
+    const changeItems = React.useCallback((newItems) => {
         // Possible to alter items with the handler
         if (onChange)
             onChange(newItems);
         doFormChange(newItems);
         // Update state
         setItems(newItems);
-    };
-    // 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);
-    }
+    }, [onChange, doFormChange]);
     // Methods
     React.useImperativeHandle(mRef, () => {
         return {
@@ -149,7 +121,56 @@ export function DnDList(props) {
                 return items;
             }
         };
-    }, [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, verticalListSortingStrategy }, { CSS }]) => {
+            setDnd([
+                DndContext,
+                SortableContext,
+                useSortable,
+                verticalListSortingStrategy,
+                CSS
+            ]);
+        });
+    }, []);
+    if (dnd == null) {
+        return React.createElement(Skeleton, { variant: "rectangular", width: "100%", height: height });
+    }
+    const [DndContextType, SortableContextType, useSortableType, verticalListSortingStrategyType, CSSType] = dnd;
+    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 setupDiv = (div) => {
         // Inputs
         div
@@ -164,13 +185,10 @@ export function DnDList(props) {
             .querySelectorAll("select")
             .forEach((input) => input.addEventListener("change", () => doFormChange()));
     };
-    React.useEffect(() => {
-        setItems(props.items);
-    }, [props.items]);
-    const children = (React.createElement(DndContext, { onDragStart: handleDragStart, onDragEnd: handleDragEnd },
-        React.createElement(SortableContext, { items: items, strategy: verticalListSortingStrategy }, items.map((item, index) => {
+    const children = (React.createElement(DndContextType, { onDragStart: handleDragStart, onDragEnd: handleDragEnd },
+        React.createElement(SortableContextType, { items: items, strategy: verticalListSortingStrategyType }, items.map((item, index) => {
             const id = item[keyField];
-            return (React.createElement(SortableItem, { id: id, key: id, style: getItemStyle(index, id === activeId), itemRenderer: (nodeRef, actionNodeRef) => itemRenderer(item, index, nodeRef, actionNodeRef) }));
+            return (React.createElement(SortableItem, { id: id, useSortableType: useSortableType, CSSType: CSSType, key: id, style: getItemStyle(index, id === activeId), itemRenderer: (nodeRef, actionNodeRef) => itemRenderer(item, index, nodeRef, actionNodeRef) }));
         }))));
     if (onFormChange) {
         return (React.createElement("div", { style: { width: "100%" }, ref: (div) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.2.49",
+  "version": "1.2.50",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/DnDList.tsx

@@ -1,21 +1,23 @@
-import {
+import type {
   DndContext,
   DragEndEvent,
   DragStartEvent,
   UniqueIdentifier
 } from "@dnd-kit/core";
-import {
+import type {
   SortableContext,
   useSortable,
   verticalListSortingStrategy
 } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
+import type { CSS } from "@dnd-kit/utilities";
 import { DataTypes } from "@etsoo/shared";
-import { Theme, useTheme } from "@mui/material";
+import { Skeleton, Theme, useTheme } from "@mui/material";
 import React, { CSSProperties } from "react";
 
 function SortableItem(props: {
   id: UniqueIdentifier;
+  useSortableType: typeof useSortable;
+  CSSType: typeof CSS;
   itemRenderer: (
     nodeRef: React.ComponentProps<any>,
     actionNodeRef: React.ComponentProps<any>
@@ -23,7 +25,7 @@ function SortableItem(props: {
   style?: React.CSSProperties;
 }) {
   // Destruct
-  const { id, itemRenderer, style = {} } = props;
+  const { id, useSortableType, CSSType, itemRenderer, style = {} } = props;
 
   // Use sortable
   const {
@@ -33,11 +35,11 @@ function SortableItem(props: {
     transform,
     transition,
     setActivatorNodeRef
-  } = useSortable({ id });
+  } = useSortableType({ id });
 
   const allStyle = {
     ...style,
-    transform: CSS.Transform.toString(transform),
+    transform: CSSType.Transform.toString(transform),
     transition
   };
 
@@ -130,6 +132,11 @@ export interface DnDListPros<D extends object, K extends DataTypes.Keys<D>> {
     actionNodeRef: React.ComponentProps<any>
   ) => React.ReactElement;
 
+  /**
+   * Height
+   */
+  height?: string | number;
+
   /**
    * List items
    */
@@ -181,6 +188,7 @@ export function DnDList<
   // Destruct
   const {
     keyField,
+    height = 360,
     itemRenderer,
     labelField,
     mRef,
@@ -189,63 +197,36 @@ export function DnDList<
     onDragEnd
   } = props;
 
-  let getItemStyle = props.getItemStyle;
-  if (getItemStyle == null) {
-    // Theme
-    const theme = useTheme();
-    getItemStyle = (index, isDragging) =>
-      DnDItemStyle(index, isDragging, theme);
-  }
+  // Theme
+  const theme = useTheme();
 
   // States
   const [items, setItems] = React.useState<D[]>([]);
   const [activeId, setActiveId] = React.useState<UniqueIdentifier>();
 
-  const doFormChange = (newItems?: D[]) => {
-    if (onFormChange) onFormChange(newItems ?? items);
-  };
-
-  const changeItems = (newItems: D[]) => {
-    // Possible to alter items with the handler
-    if (onChange) onChange(newItems);
-
-    doFormChange(newItems);
-
-    // Update state
-    setItems(newItems);
-  };
-
-  // Drag event handlers
-  function handleDragStart(event: DragStartEvent) {
-    const { active } = event;
-    setActiveId(active.id);
-  }
-
-  function handleDragEnd(event: DragEndEvent) {
-    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);
+  React.useEffect(() => {
+    setItems(props.items);
+  }, [props.items]);
 
-      // Insert to the destination index
-      newItems.splice(newIndex, 0, removed);
+  const doFormChange = React.useCallback(
+    (newItems?: D[]) => {
+      if (onFormChange) onFormChange(newItems ?? items);
+    },
+    [items, onFormChange]
+  );
 
-      changeItems(newItems);
+  const changeItems = React.useCallback(
+    (newItems: D[]) => {
+      // Possible to alter items with the handler
+      if (onChange) onChange(newItems);
 
-      // Drag end handler
-      if (onDragEnd) onDragEnd(newItems);
-    }
+      doFormChange(newItems);
 
-    setActiveId(undefined);
-  }
+      // Update state
+      setItems(newItems);
+    },
+    [onChange, doFormChange]
+  );
 
   // Methods
   React.useImperativeHandle(
@@ -327,9 +308,93 @@ export function DnDList<
         }
       };
     },
-    [items]
+    [items, labelField, changeItems]
   );
 
+  // Dynamic import library
+  const [dnd, setDnd] =
+    React.useState<
+      [
+        typeof DndContext,
+        typeof SortableContext,
+        typeof useSortable,
+        typeof verticalListSortingStrategy,
+        typeof CSS
+      ]
+    >();
+
+  React.useEffect(() => {
+    Promise.all([
+      import("@dnd-kit/core"),
+      import("@dnd-kit/sortable"),
+      import("@dnd-kit/utilities")
+    ]).then(
+      ([
+        { DndContext },
+        { SortableContext, useSortable, verticalListSortingStrategy },
+        { CSS }
+      ]) => {
+        setDnd([
+          DndContext,
+          SortableContext,
+          useSortable,
+          verticalListSortingStrategy,
+          CSS
+        ]);
+      }
+    );
+  }, []);
+
+  if (dnd == null) {
+    return <Skeleton variant="rectangular" width="100%" height={height} />;
+  }
+
+  const [
+    DndContextType,
+    SortableContextType,
+    useSortableType,
+    verticalListSortingStrategyType,
+    CSSType
+  ] = dnd;
+
+  let getItemStyle = props.getItemStyle;
+  if (getItemStyle == null) {
+    getItemStyle = (index, isDragging) =>
+      DnDItemStyle(index, isDragging, theme);
+  }
+
+  // Drag event handlers
+  function handleDragStart(event: DragStartEvent) {
+    const { active } = event;
+    setActiveId(active.id);
+  }
+
+  function handleDragEnd(event: DragEndEvent) {
+    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 setupDiv = (div: HTMLDivElement) => {
     // Inputs
     div
@@ -353,18 +418,19 @@ export function DnDList<
       );
   };
 
-  React.useEffect(() => {
-    setItems(props.items);
-  }, [props.items]);
-
   const children = (
-    <DndContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
-      <SortableContext items={items} strategy={verticalListSortingStrategy}>
+    <DndContextType onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
+      <SortableContextType
+        items={items}
+        strategy={verticalListSortingStrategyType}
+      >
         {items.map((item, index) => {
           const id = item[keyField] as unknown as UniqueIdentifier;
           return (
             <SortableItem
               id={id}
+              useSortableType={useSortableType}
+              CSSType={CSSType}
               key={id}
               style={getItemStyle!(index, id === activeId)}
               itemRenderer={(nodeRef, actionNodeRef) =>
@@ -373,8 +439,8 @@ export function DnDList<
             />
           );
         })}
-      </SortableContext>
-    </DndContext>
+      </SortableContextType>
+    </DndContextType>
   );
 
   if (onFormChange) {