@etsoo/react 1.3.93 → 1.3.94

package/lib/index.d.ts

@@ -38,6 +38,7 @@ 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

@@ -41,6 +41,7 @@ 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/DnDList.d.ts

@@ -0,0 +1,33 @@
+import { DataTypes } from '@etsoo/shared';
+import React, { CSSProperties } from 'react';
+/**
+ * DnD list props
+ */
+export interface DnDListProps {
+    /**
+     * Item renderer
+     */
+    children: (item: DataTypes.IdItem, index: number, onDelete: (index: number) => void) => React.ReactNode;
+    /**
+     * Get list item style callback
+     */
+    getItemStyle?: (isDragging: boolean) => CSSProperties;
+    /**
+     * Get list style callback
+     */
+    getListStyle?: (isDraggingOver: boolean) => CSSProperties;
+    /**
+     * Top and bottom sides renderer
+     */
+    sideRenderer?: (top: boolean, onAdd: (item: DataTypes.IdItem) => boolean) => React.ReactNode;
+    /**
+     * Name for hidden form input
+     */
+    name: string;
+}
+/**
+ * Drag and drop list
+ * @param props Props
+ * @returns Component
+ */
+export declare function DnDList(props: DnDListProps): JSX.Element;

package/lib/mu/DnDList.js

@@ -0,0 +1,66 @@
+import { DataTypes } from '@etsoo/shared';
+import React from 'react';
+import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
+/**
+ * Drag and drop list
+ * @param props Props
+ * @returns Component
+ */
+export function DnDList(props) {
+    // Destruct
+    const { children, getItemStyle = (_isDragging) => ({}), getListStyle = () => undefined, name, sideRenderer } = props;
+    // State
+    const [items, setItems] = React.useState([]);
+    // Drag end handler
+    const onDragEnd = (result) => {
+        console.log(result);
+        // Dropped outside the list
+        if (!result.destination) {
+            return;
+        }
+        // Clone
+        const newItems = [...items];
+        // 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
+        setItems(newItems);
+    };
+    // Add handler
+    const onAdd = (newItem) => {
+        // Existence check
+        if (items.some((item) => DataTypes.getItemId(item) === DataTypes.getItemId(newItem))) {
+            return false;
+        }
+        // Clone
+        const newItems = [newItem, ...items];
+        // Update the state
+        setItems(newItems);
+        return true;
+    };
+    // Delete handler
+    const onDelete = (index) => {
+        // Clone
+        const newItems = [...items];
+        // Remove the item
+        newItems.splice(index, 1);
+        // Update the state
+        setItems(newItems);
+    };
+    // Layout
+    return (React.createElement(React.Fragment, null,
+        sideRenderer && sideRenderer(true, onAdd),
+        React.createElement(DragDropContext, { onDragEnd: onDragEnd },
+            React.createElement(Droppable, { droppableId: name }, (provided, snapshot) => (React.createElement("div", { ...provided.droppableProps, ref: provided.innerRef, style: getListStyle(snapshot.isDraggingOver) },
+                items.map((item, index) => {
+                    const id = DataTypes.getItemId(item);
+                    return (React.createElement(Draggable, { key: id, draggableId: id, index: index }, (provided, snapshot) => (React.createElement("div", { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, style: {
+                            ...getItemStyle(snapshot.isDragging),
+                            ...provided.draggableProps
+                                .style
+                        } }, children(item, index, onDelete)))));
+                }),
+                provided.placeholder)))),
+        sideRenderer && sideRenderer(false, onAdd)));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.3.93",
+    "version": "1.3.94",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -50,9 +50,9 @@
         "@emotion/react": "^11.7.1",
         "@emotion/style": "^0.8.0",
         "@emotion/styled": "^11.6.0",
-        "@etsoo/appscript": "^1.2.10",
+        "@etsoo/appscript": "^1.2.11",
         "@etsoo/notificationbase": "^1.0.95",
-        "@etsoo/shared": "^1.0.94",
+        "@etsoo/shared": "^1.0.95",
         "@mui/icons-material": "^5.2.5",
         "@mui/material": "^5.2.6",
         "@reach/router": "^1.3.4",
@@ -61,6 +61,7 @@
         "@types/reach__router": "^1.3.10",
         "@types/react": "^17.0.38",
         "@types/react-avatar-editor": "^10.3.6",
+        "@types/react-beautiful-dnd": "^13.1.2",
         "@types/react-dom": "^17.0.11",
         "@types/react-input-mask": "^3.0.1",
         "@types/react-window": "^1.8.5",
@@ -68,6 +69,7 @@
         "pulltorefreshjs": "^0.1.22",
         "react": "^17.0.2",
         "react-avatar-editor": "^12.0.0",
+        "react-beautiful-dnd": "^13.1.0",
         "react-dom": "^17.0.2",
         "react-draggable": "^4.4.4",
         "react-imask": "^6.2.2",

package/src/index.ts

@@ -45,6 +45,7 @@ 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/DnDList.tsx

@@ -0,0 +1,170 @@
+import { DataTypes } from '@etsoo/shared';
+import React, { CSSProperties } from 'react';
+import {
+    DragDropContext,
+    Draggable,
+    Droppable,
+    DropResult
+} from 'react-beautiful-dnd';
+
+/**
+ * DnD list props
+ */
+export interface DnDListProps {
+    /**
+     * Item renderer
+     */
+    children: (
+        item: DataTypes.IdItem,
+        index: number,
+        onDelete: (index: number) => void
+    ) => React.ReactNode;
+
+    /**
+     * Get list item style callback
+     */
+    getItemStyle?: (isDragging: boolean) => CSSProperties;
+
+    /**
+     * Get list style callback
+     */
+    getListStyle?: (isDraggingOver: boolean) => CSSProperties;
+
+    /**
+     * Top and bottom sides renderer
+     */
+    sideRenderer?: (
+        top: boolean,
+        onAdd: (item: DataTypes.IdItem) => boolean
+    ) => React.ReactNode;
+
+    /**
+     * Name for hidden form input
+     */
+    name: string;
+}
+
+/**
+ * Drag and drop list
+ * @param props Props
+ * @returns Component
+ */
+export function DnDList(props: DnDListProps) {
+    // Destruct
+    const {
+        children,
+        getItemStyle = (_isDragging) => ({}),
+        getListStyle = () => undefined,
+        name,
+        sideRenderer
+    } = props;
+
+    // State
+    const [items, setItems] = React.useState<DataTypes.IdItem[]>([]);
+
+    // Drag end handler
+    const onDragEnd = (result: DropResult) => {
+        console.log(result);
+        // Dropped outside the list
+        if (!result.destination) {
+            return;
+        }
+
+        // Clone
+        const newItems = [...items];
+
+        // 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
+        setItems(newItems);
+    };
+
+    // Add handler
+    const onAdd = (newItem: DataTypes.IdItem) => {
+        // Existence check
+        if (
+            items.some(
+                (item) =>
+                    DataTypes.getItemId(item) === DataTypes.getItemId(newItem)
+            )
+        ) {
+            return false;
+        }
+
+        // Clone
+        const newItems = [newItem, ...items];
+
+        // Update the state
+        setItems(newItems);
+
+        return true;
+    };
+
+    // Delete handler
+    const onDelete = (index: number) => {
+        // Clone
+        const newItems = [...items];
+
+        // Remove the item
+        newItems.splice(index, 1);
+
+        // Update the state
+        setItems(newItems);
+    };
+
+    // Layout
+    return (
+        <React.Fragment>
+            {sideRenderer && sideRenderer(true, onAdd)}
+            <DragDropContext onDragEnd={onDragEnd}>
+                <Droppable droppableId={name}>
+                    {(provided, snapshot) => (
+                        <div
+                            {...provided.droppableProps}
+                            ref={provided.innerRef}
+                            style={getListStyle(snapshot.isDraggingOver)}
+                        >
+                            {items.map((item, index) => {
+                                const id = DataTypes.getItemId(item);
+                                return (
+                                    <Draggable
+                                        key={id}
+                                        draggableId={id}
+                                        index={index}
+                                    >
+                                        {(provided, snapshot) => (
+                                            <div
+                                                ref={provided.innerRef}
+                                                {...provided.draggableProps}
+                                                {...provided.dragHandleProps}
+                                                style={{
+                                                    ...getItemStyle(
+                                                        snapshot.isDragging
+                                                    ),
+                                                    ...provided.draggableProps
+                                                        .style
+                                                }}
+                                            >
+                                                {children(
+                                                    item,
+                                                    index,
+                                                    onDelete
+                                                )}
+                                            </div>
+                                        )}
+                                    </Draggable>
+                                );
+                            })}
+                            {provided.placeholder}
+                        </div>
+                    )}
+                </Droppable>
+            </DragDropContext>
+            {sideRenderer && sideRenderer(false, onAdd)}
+        </React.Fragment>
+    );
+}