@etsoo/materialui 1.2.48 → 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/lib/LineChart.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import type { ChartData, LineControllerChartOptions } from "chart.js";
+/**
+ * Line chart
+ */
+export type LineChartProps = {
+    /**
+     * Chart data
+     */
+    data: ChartData<"line">;
+    /**
+     * Options
+     */
+    options?: LineControllerChartOptions;
+    /**
+     * Subtitle
+     */
+    subtitle?: string;
+    /**
+     * Title
+     */
+    title?: string;
+};
+/**
+ * Line chart
+ * @param props Props
+ * @returns Component
+ */
+export declare function LineChart(props: LineChartProps): React.JSX.Element;

package/lib/LineChart.js

@@ -0,0 +1,51 @@
+import { LinearProgress } from "@mui/material";
+import React from "react";
+/**
+ * Line chart
+ * @param props Props
+ * @returns Component
+ */
+export function LineChart(props) {
+    // Destruct
+    const { data, options, subtitle, title } = props;
+    // State
+    const [LineType, setLineType] = React.useState();
+    React.useEffect(() => {
+        Promise.all([
+            import("react-chartjs-2"),
+            import("chart.js"),
+            import("chartjs-plugin-datalabels")
+        ]).then(([{ Line }, { Chart: ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend }, ChartDataLabels]) => {
+            // https://www.chartjs.org/docs/latest/getting-started/
+            ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, ChartDataLabels);
+            setLineType(Line);
+        });
+    }, []);
+    return LineType == null ? (React.createElement(LinearProgress, null)) : (React.createElement(LineType, { options: {
+            scales: {
+                x: {
+                    ticks: {
+                        display: false //this will remove only the label
+                    }
+                }
+            },
+            responsive: true,
+            plugins: {
+                datalabels: {
+                    display: (context) => context.dataset.data.length <= 31,
+                    align: "end"
+                },
+                legend: {
+                    position: "top"
+                },
+                subtitle: subtitle ? { text: subtitle, display: true } : undefined,
+                title: title
+                    ? {
+                        text: title,
+                        display: true
+                    }
+                    : undefined
+            },
+            ...options
+        }, data: data }));
+}

package/lib/index.d.ts

@@ -56,6 +56,7 @@ export * from "./InputField";
 export * from "./InputTipField";
 export * from "./IntInputField";
 export * from "./ItemList";
+export * from "./LineChart";
 export * from "./ListChooser";
 export * from "./ListItemRightIcon";
 export * from "./ListMoreDisplay";

package/lib/index.js

@@ -56,6 +56,7 @@ export * from "./InputField";
 export * from "./InputTipField";
 export * from "./IntInputField";
 export * from "./ItemList";
+export * from "./LineChart";
 export * from "./ListChooser";
 export * from "./ListItemRightIcon";
 export * from "./ListMoreDisplay";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.2.48",
+  "version": "1.2.50",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -63,10 +63,13 @@
     "@types/react-avatar-editor": "^13.0.0",
     "@types/react-dom": "^18.2.4",
     "@types/react-input-mask": "^3.0.2",
+    "chart.js": "^4.3.0",
+    "chartjs-plugin-datalabels": "^2.2.0",
     "pica": "^9.0.1",
     "pulltorefreshjs": "^0.1.22",
     "react": "^18.2.0",
     "react-avatar-editor": "^13.0.0",
+    "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.5",
     "react-imask": "^6.6.1"

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) {

package/src/LineChart.tsx

@@ -0,0 +1,115 @@
+import { LinearProgress } from "@mui/material";
+import React from "react";
+import type { ChartData, LineControllerChartOptions } from "chart.js";
+import type { Line } from "react-chartjs-2";
+
+/**
+ * Line chart
+ */
+export type LineChartProps = {
+  /**
+   * Chart data
+   */
+  data: ChartData<"line">;
+
+  /**
+   * Options
+   */
+  options?: LineControllerChartOptions;
+
+  /**
+   * Subtitle
+   */
+  subtitle?: string;
+
+  /**
+   * Title
+   */
+  title?: string;
+};
+
+/**
+ * Line chart
+ * @param props Props
+ * @returns Component
+ */
+export function LineChart(props: LineChartProps) {
+  // Destruct
+  const { data, options, subtitle, title } = props;
+
+  // State
+  const [LineType, setLineType] = React.useState<typeof Line>();
+
+  React.useEffect(() => {
+    Promise.all([
+      import("react-chartjs-2"),
+      import("chart.js"),
+      import("chartjs-plugin-datalabels")
+    ]).then(
+      ([
+        { Line },
+        {
+          Chart: ChartJS,
+          CategoryScale,
+          LinearScale,
+          PointElement,
+          LineElement,
+          Title,
+          Tooltip,
+          Legend
+        },
+        ChartDataLabels
+      ]) => {
+        // https://www.chartjs.org/docs/latest/getting-started/
+        ChartJS.register(
+          CategoryScale,
+          LinearScale,
+          PointElement,
+          LineElement,
+          Title,
+          Tooltip,
+          Legend,
+
+          ChartDataLabels
+        );
+
+        setLineType(Line);
+      }
+    );
+  }, []);
+
+  return LineType == null ? (
+    <LinearProgress />
+  ) : (
+    <LineType
+      options={{
+        scales: {
+          x: {
+            ticks: {
+              display: false //this will remove only the label
+            }
+          }
+        },
+        responsive: true,
+        plugins: {
+          datalabels: {
+            display: (context) => context.dataset.data.length <= 31,
+            align: "end"
+          },
+          legend: {
+            position: "top" as const
+          },
+          subtitle: subtitle ? { text: subtitle, display: true } : undefined,
+          title: title
+            ? {
+                text: title,
+                display: true
+              }
+            : undefined
+        },
+        ...options
+      }}
+      data={data}
+    />
+  );
+}

package/src/index.ts

@@ -59,6 +59,7 @@ export * from "./InputField";
 export * from "./InputTipField";
 export * from "./IntInputField";
 export * from "./ItemList";
+export * from "./LineChart";
 export * from "./ListChooser";
 export * from "./ListItemRightIcon";
 export * from "./ListMoreDisplay";