@etsoo/react 1.5.60 → 1.5.63

package/lib/index.d.ts

@@ -42,7 +42,6 @@ export * from './mu/CustomFabProps';
 export * from './mu/DataGridEx';
 export * from './mu/DataGridRenderers';
 export * from './mu/DialogButton';
-export * from './mu/DnDList';
 export * from './mu/DraggablePaperComponent';
 export * from './mu/EmailInput';
 export * from './mu/FabBox';

package/lib/index.js

@@ -45,7 +45,6 @@ export * from './mu/CustomFabProps';
 export * from './mu/DataGridEx';
 export * from './mu/DataGridRenderers';
 export * from './mu/DialogButton';
-export * from './mu/DnDList';
 export * from './mu/DraggablePaperComponent';
 export * from './mu/EmailInput';
 export * from './mu/FabBox';

package/lib/mu/OptionGroup.js

@@ -12,7 +12,7 @@ export function OptionGroup(props) {
     // Get option value
     // D type should be the source id type
     const getOptionValue = (option) => {
-        const value = DataTypes.getIdValue(option, idField);
+        const value = DataTypes.getValue(option, idField);
         if (value == null)
             return null;
         return value;

package/lib/mu/ScrollerListEx.js

@@ -112,7 +112,7 @@ export function ScrollerListEx(props) {
         return selected;
     };
     // Destruct
-    const { alternatingColors = [undefined, undefined], className, idField = 'id', innerItemRenderer, itemSize, itemKey = (index, data) => { var _a; return (_a = DataTypes.getIdValue(data, idField)) !== null && _a !== void 0 ? _a : index; }, itemRenderer = (itemProps) => {
+    const { alternatingColors = [undefined, undefined], className, idField = 'id', innerItemRenderer, itemSize, itemKey = (index, data) => { var _a; return (_a = DataTypes.getValue(data, idField)) !== null && _a !== void 0 ? _a : index; }, itemRenderer = (itemProps) => {
         const [itemHeight, space, margins] = calculateItemSize(itemProps.index);
         return defaultItemRenderer({
             itemHeight,

package/lib/mu/TableEx.js

@@ -229,7 +229,7 @@ export function TableEx(props) {
                         ? rows[rowIndex]
                         : undefined;
                     // Row id field value
-                    const rowId = (_a = DataTypes.getIdValue(row, idField)) !== null && _a !== void 0 ? _a : rowIndex;
+                    const rowId = (_a = DataTypes.getValue(row, idField)) !== null && _a !== void 0 ? _a : rowIndex;
                     // Selected or not
                     const isItemSelected = selectable
                         ? selectedItems.some((item) => item[idField] === rowId)

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.5.60",
+    "version": "1.5.63",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -46,7 +46,6 @@
     },
     "homepage": "https://github.com/ETSOO/AppReact#readme",
     "dependencies": {
-        "@dnd-kit/core": "^6.0.5",
         "@emotion/css": "^11.10.0",
         "@emotion/react": "^11.10.0",
         "@emotion/styled": "^11.10.0",

package/src/index.ts

@@ -49,7 +49,6 @@ export * from './mu/CustomFabProps';
 export * from './mu/DataGridEx';
 export * from './mu/DataGridRenderers';
 export * from './mu/DialogButton';
-export * from './mu/DnDList';
 export * from './mu/DraggablePaperComponent';
 export * from './mu/EmailInput';
 export * from './mu/FabBox';

package/src/mu/OptionGroup.tsx

@@ -104,7 +104,7 @@ export function OptionGroup<
     // Get option value
     // D type should be the source id type
     const getOptionValue = (option: T): D | null => {
-        const value = DataTypes.getIdValue(option, idField);
+        const value = DataTypes.getValue(option, idField);
         if (value == null) return null;
         return value as D;
     };

package/src/mu/ScrollerListEx.tsx

@@ -299,7 +299,7 @@ export function ScrollerListEx<T extends Record<string, unknown>>(
         innerItemRenderer,
         itemSize,
         itemKey = (index: number, data: T) =>
-            DataTypes.getIdValue(data, idField) ?? index,
+            DataTypes.getValue(data, idField) ?? index,
         itemRenderer = (itemProps) => {
             const [itemHeight, space, margins] = calculateItemSize(
                 itemProps.index

package/src/mu/TableEx.tsx

@@ -441,7 +441,7 @@ export function TableEx<T extends Record<string, unknown>>(
 
                             // Row id field value
                             const rowId =
-                                DataTypes.getIdValue(row, idField) ?? rowIndex;
+                                DataTypes.getValue(row, idField) ?? rowIndex;
 
                             // Selected or not
                             const isItemSelected = selectable

package/lib/mu/DnDList.d.ts

@@ -1,93 +0,0 @@
-import { UniqueIdentifier } from '@dnd-kit/core';
-import React, { CSSProperties } from 'react';
-/**
- * DnD list item props
- */
-export interface DnDItemProps<D extends {}> {
-    /**
-     * Unique id
-     */
-    id: UniqueIdentifier;
-    /**
-     * Children
-     */
-    children: React.ReactNode;
-    /**
-     * Item data
-     */
-    data?: D;
-    /**
-     * Disabled or not
-     */
-    disabled?: boolean;
-    /**
-     * Inline style
-     */
-    style?: CSSProperties;
-}
-/**
- * DnD list item
- * @param props Props
- */
-export declare function DnDItem<D extends {}>(props: DnDItemProps<D>): JSX.Element;
-/**
- * DnD list props
- */
-export interface DnDListProps<D extends {}, E extends React.ElementType> {
-    /**
-     * Item renderer
-     */
-    children: (item: D, index: number, deleteItem: (index: number) => void, editItem: (newItem: D, index: number) => boolean) => React.ReactNode;
-    /**
-     * List container component
-     * https://javascript.plainenglish.io/building-a-polymorphic-component-in-react-and-typescript-d9f236950af4
-     */
-    Component?: E;
-    /**
-     * List container props
-     */
-    componentProps?: React.ComponentProps<E>;
-    /**
-     * List disabled
-     */
-    disabled?: boolean;
-    /**
-     * Get list item style callback
-     */
-    getItemStyle?: (isDragging: boolean, index: number) => CSSProperties;
-    /**
-     * Get list style callback
-     */
-    getListStyle?: (isDraggingOver: boolean) => CSSProperties;
-    /**
-     * Label field
-     */
-    labelField: string & keyof D;
-    /**
-     * Load data
-     */
-    loadData: (name: string) => PromiseLike<D[]>;
-    /**
-     * Data change handler
-     */
-    onChange?: (items: D[]) => void;
-    /**
-     * Drag end handler
-     */
-    onDragEnd?: (items: D[]) => void;
-    /**
-     * Top and bottom sides renderer
-     */
-    sideRenderer?: (top: boolean, addItem: (item: D) => boolean, addItems: (items: D[]) => number, reloadItems: () => void) => React.ReactNode;
-    /**
-     * Name for hidden form input
-     */
-    name: string;
-}
-/**
- * Drag and drop list
- * https://github.com/atlassian/react-beautiful-dnd
- * @param props Props
- * @returns Component
- */
-export declare function DnDList<D extends {}, E extends React.ElementType = React.ElementType>(props: DnDListProps<D, E>): JSX.Element;

package/lib/mu/DnDList.js

@@ -1,128 +0,0 @@
-import { DndContext, DragOverlay, useDraggable } from '@dnd-kit/core';
-import { DataTypes } from '@etsoo/shared';
-import React from 'react';
-/**
- * DnD list item
- * @param props Props
- */
-export function DnDItem(props) {
-    const { children, style, ...rest } = props;
-    const { attributes, listeners, setNodeRef } = useDraggable(rest);
-    return (React.createElement("div", { style: style, ref: setNodeRef, ...listeners, ...attributes }, children));
-}
-/**
- * Drag and drop list
- * https://github.com/atlassian/react-beautiful-dnd
- * @param props Props
- * @returns Component
- */
-export function DnDList(props) {
-    // Destruct
-    const { children, Component = 'div', componentProps, disabled = false, getItemStyle = (_isDragging) => ({}), getListStyle = () => undefined, labelField, loadData, name, onChange, onDragEnd, sideRenderer } = props;
-    // State
-    const [items, setItems] = React.useState([]);
-    const changeItems = (items) => {
-        // Possible to alter items with the handler
-        if (onChange)
-            onChange(items);
-        // Update state
-        setItems(items);
-    };
-    // Drag end handler
-    const onDragEndLocal = (result) => {
-        // Clone
-        const newItems = [...items];
-        console.log(result);
-        // Removed item
-        // const [removed] = newItems.splice(result.source.index, 1);
-        // Insert to the destination index
-        // newItems.splice(result.destination.index, 0, removed);
-        // Update the state
-        changeItems(newItems);
-        // Drag end handler
-        if (onDragEnd)
-            onDragEnd(newItems);
-    };
-    // Add item
-    const 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;
-    };
-    // Edit item
-    const 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;
-    };
-    // Add items
-    const 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;
-    };
-    // Delete item
-    const deleteItem = (index) => {
-        // Clone
-        const newItems = [...items];
-        // Remove the item
-        newItems.splice(index, 1);
-        // Update the state
-        changeItems(newItems);
-    };
-    // Reload items
-    const reloadItems = () => {
-        // Load data
-        loadData(name).then((items) => setItems(items));
-    };
-    React.useEffect(() => {
-        // Load data
-        reloadItems();
-    }, [name]);
-    // Layout
-    return (React.createElement(React.Fragment, null,
-        sideRenderer && sideRenderer(true, addItem, addItems, reloadItems),
-        React.createElement(Component, { ...componentProps }, disabled ? (React.createElement("div", { style: getListStyle(false) }, items.map((item, index) => {
-            // Id
-            const id = DataTypes.convert(item[labelField], 'string');
-            if (id == null)
-                return;
-            return (React.createElement("div", { key: id, style: getItemStyle(false, index) }, children(item, index, deleteItem, editItem)));
-        }))) : (React.createElement(DndContext, { onDragEnd: onDragEndLocal },
-            items.map((item, index) => {
-                // Id
-                const id = DataTypes.convert(item[labelField], 'string');
-                if (id == null)
-                    return;
-                return (React.createElement(DnDItem, { id: id, key: id, data: item, "data-index": index, style: getItemStyle(false, index) }, children(item, index, deleteItem, editItem)));
-            }),
-            React.createElement(DragOverlay, null)))),
-        sideRenderer &&
-            sideRenderer(false, addItem, addItems, reloadItems)));
-}

package/src/mu/DnDList.tsx

@@ -1,338 +0,0 @@
-import {
-    DndContext,
-    DragEndEvent,
-    DragOverlay,
-    UniqueIdentifier,
-    useDraggable
-} from '@dnd-kit/core';
-import { DataTypes } from '@etsoo/shared';
-import React, { CSSProperties } from 'react';
-
-/**
- * DnD list item props
- */
-export interface DnDItemProps<D extends {}> {
-    /**
-     * Unique id
-     */
-    id: UniqueIdentifier;
-
-    /**
-     * Children
-     */
-    children: React.ReactNode;
-
-    /**
-     * Item data
-     */
-    data?: D;
-
-    /**
-     * Disabled or not
-     */
-    disabled?: boolean;
-
-    /**
-     * Inline style
-     */
-    style?: CSSProperties;
-}
-
-/**
- * DnD list item
- * @param props Props
- */
-export function DnDItem<D extends {}>(props: DnDItemProps<D>) {
-    const { children, style, ...rest } = props;
-    const { attributes, listeners, setNodeRef } = useDraggable(rest);
-    return (
-        <div style={style} ref={setNodeRef} {...listeners} {...attributes}>
-            {children}
-        </div>
-    );
-}
-
-/**
- * DnD list props
- */
-export interface DnDListProps<D extends {}, E extends React.ElementType> {
-    /**
-     * Item renderer
-     */
-    children: (
-        item: D,
-        index: number,
-        deleteItem: (index: number) => void,
-        editItem: (newItem: D, index: number) => boolean
-    ) => React.ReactNode;
-
-    /**
-     * List container component
-     * https://javascript.plainenglish.io/building-a-polymorphic-component-in-react-and-typescript-d9f236950af4
-     */
-    Component?: E;
-
-    /**
-     * List container props
-     */
-    componentProps?: React.ComponentProps<E>;
-
-    /**
-     * List disabled
-     */
-    disabled?: boolean;
-
-    /**
-     * Get list item style callback
-     */
-    getItemStyle?: (isDragging: boolean, index: number) => CSSProperties;
-
-    /**
-     * Get list style callback
-     */
-    getListStyle?: (isDraggingOver: boolean) => CSSProperties;
-
-    /**
-     * Label field
-     */
-    labelField: string & keyof D;
-
-    /**
-     * Load data
-     */
-    loadData: (name: string) => PromiseLike<D[]>;
-
-    /**
-     * Data change handler
-     */
-    onChange?: (items: D[]) => void;
-
-    /**
-     * Drag end handler
-     */
-    onDragEnd?: (items: D[]) => void;
-
-    /**
-     * Top and bottom sides renderer
-     */
-    sideRenderer?: (
-        top: boolean,
-        addItem: (item: D) => boolean,
-        addItems: (items: D[]) => number,
-        reloadItems: () => void
-    ) => React.ReactNode;
-
-    /**
-     * Name for hidden form input
-     */
-    name: string;
-}
-
-/**
- * Drag and drop list
- * https://github.com/atlassian/react-beautiful-dnd
- * @param props Props
- * @returns Component
- */
-export function DnDList<
-    D extends {},
-    E extends React.ElementType = React.ElementType
->(props: DnDListProps<D, E>) {
-    // Destruct
-    const {
-        children,
-        Component = 'div',
-        componentProps,
-        disabled = false,
-        getItemStyle = (_isDragging) => ({}),
-        getListStyle = () => undefined,
-        labelField,
-        loadData,
-        name,
-        onChange,
-        onDragEnd,
-        sideRenderer
-    } = props;
-
-    // State
-    const [items, setItems] = React.useState<D[]>([]);
-
-    const changeItems = (items: D[]) => {
-        // Possible to alter items with the handler
-        if (onChange) onChange(items);
-
-        // Update state
-        setItems(items);
-    };
-
-    // Drag end handler
-    const onDragEndLocal = (result: DragEndEvent) => {
-        // Clone
-        const newItems = [...items];
-
-        console.log(result);
-
-        // Removed item
-        // const [removed] = newItems.splice(result.source.index, 1);
-
-        // Insert to the destination index
-        // newItems.splice(result.destination.index, 0, removed);
-
-        // Update the state
-        changeItems(newItems);
-
-        // Drag end handler
-        if (onDragEnd) onDragEnd(newItems);
-    };
-
-    // Add item
-    const 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;
-    };
-
-    // Edit item
-    const 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;
-    };
-
-    // Add items
-    const 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;
-    };
-
-    // Delete item
-    const deleteItem = (index: number) => {
-        // Clone
-        const newItems = [...items];
-
-        // Remove the item
-        newItems.splice(index, 1);
-
-        // Update the state
-        changeItems(newItems);
-    };
-
-    // Reload items
-    const reloadItems = () => {
-        // Load data
-        loadData(name).then((items) => setItems(items));
-    };
-
-    React.useEffect(() => {
-        // Load data
-        reloadItems();
-    }, [name]);
-
-    // Layout
-    return (
-        <React.Fragment>
-            {sideRenderer && sideRenderer(true, addItem, addItems, reloadItems)}
-            <Component {...componentProps}>
-                {disabled ? (
-                    <div style={getListStyle(false)}>
-                        {items.map((item, index) => {
-                            // Id
-                            const id = DataTypes.convert(
-                                item[labelField],
-                                'string'
-                            );
-                            if (id == null) return;
-
-                            return (
-                                <div
-                                    key={id}
-                                    style={getItemStyle(false, index)}
-                                >
-                                    {children(
-                                        item,
-                                        index,
-                                        deleteItem,
-                                        editItem
-                                    )}
-                                </div>
-                            );
-                        })}
-                    </div>
-                ) : (
-                    <DndContext onDragEnd={onDragEndLocal}>
-                        {items.map((item, index) => {
-                            // Id
-                            const id = DataTypes.convert(
-                                item[labelField],
-                                'string'
-                            );
-                            if (id == null) return;
-
-                            return (
-                                <DnDItem<D>
-                                    id={id}
-                                    key={id}
-                                    data={item}
-                                    data-index={index}
-                                    style={getItemStyle(false, index)}
-                                >
-                                    {children(
-                                        item,
-                                        index,
-                                        deleteItem,
-                                        editItem
-                                    )}
-                                </DnDItem>
-                            );
-                        })}
-                        <DragOverlay></DragOverlay>
-                    </DndContext>
-                )}
-            </Component>
-            {sideRenderer &&
-                sideRenderer(false, addItem, addItems, reloadItems)}
-        </React.Fragment>
-    );
-}