@etsoo/react 1.5.59 → 1.5.60

package/lib/mu/DnDList.d.ts

@@ -1,4 +1,35 @@
+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
  */

package/lib/mu/DnDList.js

@@ -1,6 +1,15 @@
-import { DndContext } from '@dnd-kit/core';
+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
@@ -23,6 +32,7 @@ export function DnDList(props) {
     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
@@ -104,7 +114,15 @@ export function DnDList(props) {
             if (id == null)
                 return;
             return (React.createElement("div", { key: id, style: getItemStyle(false, index) }, children(item, index, deleteItem, editItem)));
-        }))) : (React.createElement(DndContext, { onDragEnd: onDragEndLocal }))),
+        }))) : (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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.5.59",
+    "version": "1.5.60",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",

package/src/mu/DnDList.tsx

@@ -1,7 +1,57 @@
-import { DndContext, DragEndEvent } from '@dnd-kit/core';
+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
  */
@@ -120,6 +170,8 @@ export function DnDList<
         // Clone
         const newItems = [...items];
 
+        console.log(result);
+
         // Removed item
         // const [removed] = newItems.splice(result.source.index, 1);
 
@@ -249,7 +301,34 @@ export function DnDList<
                         })}
                     </div>
                 ) : (
-                    <DndContext onDragEnd={onDragEndLocal}></DndContext>
+                    <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 &&