@etsoo/react 1.8.46 → 1.8.48

package/lib/cjs/index.d.ts

@@ -2,7 +2,6 @@ export * from "./app/CoreConstants";
 export * from "./app/EventWatcher";
 export * from "./app/InputDialogProps";
 export * from "./app/ReactUtils";
-export * from "./components/DnDList";
 export * from "./components/DynamicRouter";
 export * from "./components/GridColumn";
 export * from "./components/GridLoader";

package/lib/cjs/index.js

@@ -20,7 +20,6 @@ __exportStar(require("./app/EventWatcher"), exports);
 __exportStar(require("./app/InputDialogProps"), exports);
 __exportStar(require("./app/ReactUtils"), exports);
 // components
-__exportStar(require("./components/DnDList"), exports);
 __exportStar(require("./components/DynamicRouter"), exports);
 __exportStar(require("./components/GridColumn"), exports);
 __exportStar(require("./components/GridLoader"), exports);

package/lib/mjs/index.d.ts

@@ -2,7 +2,6 @@ export * from "./app/CoreConstants";
 export * from "./app/EventWatcher";
 export * from "./app/InputDialogProps";
 export * from "./app/ReactUtils";
-export * from "./components/DnDList";
 export * from "./components/DynamicRouter";
 export * from "./components/GridColumn";
 export * from "./components/GridLoader";

package/lib/mjs/index.js

@@ -4,7 +4,6 @@ export * from "./app/EventWatcher";
 export * from "./app/InputDialogProps";
 export * from "./app/ReactUtils";
 // components
-export * from "./components/DnDList";
 export * from "./components/DynamicRouter";
 export * from "./components/GridColumn";
 export * from "./components/GridLoader";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/react",
-  "version": "1.8.46",
+  "version": "1.8.48",
   "description": "TypeScript ReactJs UI Independent Framework",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -35,8 +35,6 @@
   },
   "homepage": "https://github.com/ETSOO/AppReact#readme",
   "dependencies": {
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/sortable": "^10.0.0",
     "@emotion/css": "^11.13.5",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",

package/src/index.ts

@@ -5,7 +5,6 @@ export * from "./app/InputDialogProps";
 export * from "./app/ReactUtils";
 
 // components
-export * from "./components/DnDList";
 export * from "./components/DynamicRouter";
 export * from "./components/GridColumn";
 export * from "./components/GridLoader";

package/lib/cjs/components/DnDList.d.ts

@@ -1,74 +0,0 @@
-import { UniqueIdentifier } from "@dnd-kit/core";
-import { DataTypes } from "@etsoo/shared";
-import React, { CSSProperties } from "react";
-/**
- * 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;
-}
-/**
- * DnD sortable list properties
- */
-export interface DnDListPros<D extends object, K extends DataTypes.Keys<D>> {
-    /**
-     * 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;
-    /**
-     * List items
-     */
-    items: D[];
-    /**
-     * Unique key field
-     */
-    keyField: K;
-    /**
-     * Label field
-     */
-    labelField: K;
-    /**
-     * Methods ref
-     */
-    mRef?: React.Ref<DnDListRef<D>>;
-    /**
-     * Data change handler
-     */
-    onChange?: (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;
-}, K extends DataTypes.Keys<D, UniqueIdentifier> = DataTypes.Keys<D, UniqueIdentifier>>(props: DnDListPros<D, K>): import("react/jsx-runtime").JSX.Element;

package/lib/cjs/components/DnDList.js

@@ -1,136 +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.DnDList = DnDList;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const core_1 = require("@dnd-kit/core");
-const sortable_1 = require("@dnd-kit/sortable");
-const utilities_1 = require("@dnd-kit/utilities");
-const react_1 = __importDefault(require("react"));
-function SortableItem(props) {
-    // Destruct
-    const { id, itemRenderer, style = {} } = props;
-    // Use sortable
-    const { attributes, listeners, setNodeRef, transform, transition, setActivatorNodeRef } = (0, sortable_1.useSortable)({ id });
-    const allStyle = {
-        ...style,
-        transform: utilities_1.CSS.Transform.toString(transform),
-        transition
-    };
-    const nodeRef = {
-        style: allStyle,
-        ref: setNodeRef,
-        ...attributes
-    };
-    const actionNodeRef = {
-        ...listeners,
-        ref: setActivatorNodeRef
-    };
-    return itemRenderer(nodeRef, actionNodeRef);
-}
-/**
- * DnD (Drag and Drop) sortable list
- * @param props Props
- * @returns Component
- */
-function DnDList(props) {
-    // Destruct
-    const { getItemStyle, keyField, itemRenderer, labelField, mRef, onChange, onDragEnd } = props;
-    // States
-    const [items, setItems] = react_1.default.useState([]);
-    const [activeId, setActiveId] = react_1.default.useState();
-    const changeItems = (newItems) => {
-        // Possible to alter items with the handler
-        if (onChange)
-            onChange(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);
-    }
-    // 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);
-            }
-        };
-    }, [items]);
-    react_1.default.useEffect(() => {
-        setItems(props.items);
-    }, [props.items]);
-    return ((0, jsx_runtime_1.jsx)(core_1.DndContext, { onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: items, strategy: sortable_1.verticalListSortingStrategy, children: items.map((item, index) => {
-                const id = item[keyField];
-                return ((0, jsx_runtime_1.jsx)(SortableItem, { id: id, style: getItemStyle(index, id === activeId), itemRenderer: (nodeRef, actionNodeRef) => itemRenderer(item, index, nodeRef, actionNodeRef) }, id));
-            }) }) }));
-}

package/lib/mjs/components/DnDList.d.ts

@@ -1,74 +0,0 @@
-import { UniqueIdentifier } from "@dnd-kit/core";
-import { DataTypes } from "@etsoo/shared";
-import React, { CSSProperties } from "react";
-/**
- * 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;
-}
-/**
- * DnD sortable list properties
- */
-export interface DnDListPros<D extends object, K extends DataTypes.Keys<D>> {
-    /**
-     * 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;
-    /**
-     * List items
-     */
-    items: D[];
-    /**
-     * Unique key field
-     */
-    keyField: K;
-    /**
-     * Label field
-     */
-    labelField: K;
-    /**
-     * Methods ref
-     */
-    mRef?: React.Ref<DnDListRef<D>>;
-    /**
-     * Data change handler
-     */
-    onChange?: (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;
-}, K extends DataTypes.Keys<D, UniqueIdentifier> = DataTypes.Keys<D, UniqueIdentifier>>(props: DnDListPros<D, K>): import("react/jsx-runtime").JSX.Element;

package/lib/mjs/components/DnDList.js

@@ -1,130 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { DndContext } from "@dnd-kit/core";
-import { SortableContext, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import React from "react";
-function SortableItem(props) {
-    // Destruct
-    const { id, itemRenderer, style = {} } = props;
-    // Use sortable
-    const { attributes, listeners, setNodeRef, transform, transition, setActivatorNodeRef } = useSortable({ id });
-    const allStyle = {
-        ...style,
-        transform: CSS.Transform.toString(transform),
-        transition
-    };
-    const nodeRef = {
-        style: allStyle,
-        ref: setNodeRef,
-        ...attributes
-    };
-    const actionNodeRef = {
-        ...listeners,
-        ref: setActivatorNodeRef
-    };
-    return itemRenderer(nodeRef, actionNodeRef);
-}
-/**
- * DnD (Drag and Drop) sortable list
- * @param props Props
- * @returns Component
- */
-export function DnDList(props) {
-    // Destruct
-    const { getItemStyle, keyField, itemRenderer, labelField, mRef, onChange, onDragEnd } = props;
-    // States
-    const [items, setItems] = React.useState([]);
-    const [activeId, setActiveId] = React.useState();
-    const changeItems = (newItems) => {
-        // Possible to alter items with the handler
-        if (onChange)
-            onChange(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);
-    }
-    // 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);
-            }
-        };
-    }, [items]);
-    React.useEffect(() => {
-        setItems(props.items);
-    }, [props.items]);
-    return (_jsx(DndContext, { onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: items, strategy: verticalListSortingStrategy, children: items.map((item, index) => {
-                const id = item[keyField];
-                return (_jsx(SortableItem, { id: id, style: getItemStyle(index, id === activeId), itemRenderer: (nodeRef, actionNodeRef) => itemRenderer(item, index, nodeRef, actionNodeRef) }, id));
-            }) }) }));
-}

package/src/components/DnDList.tsx

@@ -1,306 +0,0 @@
-import {
-  DndContext,
-  DragEndEvent,
-  DragStartEvent,
-  UniqueIdentifier
-} from "@dnd-kit/core";
-import {
-  SortableContext,
-  useSortable,
-  verticalListSortingStrategy
-} from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import { DataTypes } from "@etsoo/shared";
-import React, { CSSProperties } from "react";
-
-function SortableItem(props: {
-  id: UniqueIdentifier;
-  itemRenderer: (
-    nodeRef: React.ComponentProps<any>,
-    actionNodeRef: React.ComponentProps<any>
-  ) => React.ReactElement;
-  style?: React.CSSProperties;
-}) {
-  // Destruct
-  const { id, itemRenderer, style = {} } = props;
-
-  // Use sortable
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    setActivatorNodeRef
-  } = useSortable({ id });
-
-  const allStyle = {
-    ...style,
-    transform: CSS.Transform.toString(transform),
-    transition
-  };
-
-  const nodeRef = {
-    style: allStyle,
-    ref: setNodeRef,
-    ...attributes
-  };
-
-  const actionNodeRef = {
-    ...listeners,
-    ref: setActivatorNodeRef
-  };
-
-  return itemRenderer(nodeRef, actionNodeRef);
-}
-
-/**
- * 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;
-}
-
-/**
- * DnD sortable list properties
- */
-export interface DnDListPros<D extends object, K extends DataTypes.Keys<D>> {
-  /**
-   * 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;
-
-  /**
-   * List items
-   */
-  items: D[];
-
-  /**
-   * Unique key field
-   */
-  keyField: K;
-
-  /**
-   * Label field
-   */
-  labelField: K;
-
-  /**
-   * Methods ref
-   */
-  mRef?: React.Ref<DnDListRef<D>>;
-
-  /**
-   * Data change handler
-   */
-  onChange?: (items: D[]) => void;
-
-  /**
-   * Drag end handler
-   */
-  onDragEnd?: (items: D[]) => void;
-}
-
-/**
- * DnD (Drag and Drop) sortable list
- * @param props Props
- * @returns Component
- */
-export function DnDList<
-  D extends { id: UniqueIdentifier },
-  K extends DataTypes.Keys<D, UniqueIdentifier> = DataTypes.Keys<
-    D,
-    UniqueIdentifier
-  >
->(props: DnDListPros<D, K>) {
-  // Destruct
-  const {
-    getItemStyle,
-    keyField,
-    itemRenderer,
-    labelField,
-    mRef,
-    onChange,
-    onDragEnd
-  } = props;
-
-  // States
-  const [items, setItems] = React.useState<D[]>([]);
-  const [activeId, setActiveId] = React.useState<UniqueIdentifier>();
-
-  const changeItems = (newItems: D[]) => {
-    // Possible to alter items with the handler
-    if (onChange) onChange(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);
-
-      // Insert to the destination index
-      newItems.splice(newIndex, 0, removed);
-
-      changeItems(newItems);
-
-      // Drag end handler
-      if (onDragEnd) onDragEnd(newItems);
-    }
-
-    setActiveId(undefined);
-  }
-
-  // Methods
-  React.useImperativeHandle(
-    mRef,
-    () => {
-      return {
-        addItem(newItem: D) {
-          // 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: D[]) {
-          // 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: D, index: number) {
-          // 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: number) {
-          // Clone
-          const newItems = [...items];
-
-          // Remove the item
-          newItems.splice(index, 1);
-
-          // Update the state
-          changeItems(newItems);
-        }
-      };
-    },
-    [items]
-  );
-
-  React.useEffect(() => {
-    setItems(props.items);
-  }, [props.items]);
-
-  return (
-    <DndContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
-      <SortableContext items={items} strategy={verticalListSortingStrategy}>
-        {items.map((item, index) => {
-          const id = item[keyField] as unknown as UniqueIdentifier;
-          return (
-            <SortableItem
-              id={id}
-              key={id}
-              style={getItemStyle(index, id === activeId)}
-              itemRenderer={(nodeRef, actionNodeRef) =>
-                itemRenderer(item, index, nodeRef, actionNodeRef)
-              }
-            />
-          );
-        })}
-      </SortableContext>
-    </DndContext>
-  );
-}