@etsoo/react 1.3.97 → 1.3.98

package/lib/mu/DnDList.d.ts

@@ -6,7 +6,7 @@ export interface DnDListProps<D extends {}, E extends React.ElementType> {
     /**
      * Item renderer
      */
-    children: (item: D, index: number, onDelete: (index: number) => void) => React.ReactNode;
+    children: (item: D, index: number, deleteItem: (index: number) => void) => React.ReactNode;
     /**
      * List container component
      * https://javascript.plainenglish.io/building-a-polymorphic-component-in-react-and-typescript-d9f236950af4
@@ -35,7 +35,7 @@ export interface DnDListProps<D extends {}, E extends React.ElementType> {
     /**
      * Top and bottom sides renderer
      */
-    sideRenderer?: (top: boolean, onAdd: (item: D) => boolean) => React.ReactNode;
+    sideRenderer?: (top: boolean, addItem: (item: D) => boolean, addItems: (items: D[]) => number) => React.ReactNode;
     /**
      * Name for hidden form input
      */

package/lib/mu/DnDList.js

@@ -27,8 +27,8 @@ export function DnDList(props) {
         // Update the state
         setItems(newItems);
     };
-    // Add handler
-    const onAdd = (newItem) => {
+    // Add item
+    const addItem = (newItem) => {
         // Existence check
         if (items.some((item) => item[labelField] == newItem[labelField])) {
             return false;
@@ -39,8 +39,24 @@ export function DnDList(props) {
         setItems(newItems);
         return true;
     };
-    // Delete handler
-    const onDelete = (index) => {
+    // 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
+        setItems(newItems);
+        return newItems.length - items.length;
+    };
+    // Delete item
+    const deleteItem = (index) => {
         // Clone
         const newItems = [...items];
         // Remove the item
@@ -53,7 +69,7 @@ export function DnDList(props) {
     }, [name]);
     // Layout
     return (React.createElement(React.Fragment, null,
-        sideRenderer && sideRenderer(true, onAdd),
+        sideRenderer && sideRenderer(true, addItem, addItems),
         React.createElement(Component, { ...componentProps },
             React.createElement(DragDropContext, { onDragEnd: onDragEnd },
                 React.createElement(Droppable, { droppableId: name }, (provided, snapshot) => (React.createElement("div", { ...provided.droppableProps, ref: provided.innerRef, style: getListStyle(snapshot.isDraggingOver) },
@@ -67,8 +83,8 @@ export function DnDList(props) {
                                 ...provided
                                     .draggableProps
                                     .style
-                            } }, children(item, index, onDelete)))));
+                            } }, children(item, index, deleteItem)))));
                     }),
                     provided.placeholder))))),
-        sideRenderer && sideRenderer(false, onAdd)));
+        sideRenderer && sideRenderer(false, addItem, addItems)));
 }

package/package.json

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

package/src/mu/DnDList.tsx

@@ -17,7 +17,7 @@ export interface DnDListProps<D extends {}, E extends React.ElementType> {
     children: (
         item: D,
         index: number,
-        onDelete: (index: number) => void
+        deleteItem: (index: number) => void
     ) => React.ReactNode;
 
     /**
@@ -56,7 +56,8 @@ export interface DnDListProps<D extends {}, E extends React.ElementType> {
      */
     sideRenderer?: (
         top: boolean,
-        onAdd: (item: D) => boolean
+        addItem: (item: D) => boolean,
+        addItems: (items: D[]) => number
     ) => React.ReactNode;
 
     /**
@@ -111,8 +112,8 @@ export function DnDList<
         setItems(newItems);
     };
 
-    // Add handler
-    const onAdd = (newItem: D) => {
+    // Add item
+    const addItem = (newItem: D) => {
         // Existence check
         if (items.some((item) => item[labelField] == newItem[labelField])) {
             return false;
@@ -127,8 +128,31 @@ export function DnDList<
         return true;
     };
 
-    // Delete handler
-    const onDelete = (index: number) => {
+    // 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
+        setItems(newItems);
+
+        return newItems.length - items.length;
+    };
+
+    // Delete item
+    const deleteItem = (index: number) => {
         // Clone
         const newItems = [...items];
 
@@ -146,7 +170,7 @@ export function DnDList<
     // Layout
     return (
         <React.Fragment>
-            {sideRenderer && sideRenderer(true, onAdd)}
+            {sideRenderer && sideRenderer(true, addItem, addItems)}
             <Component {...componentProps}>
                 <DragDropContext onDragEnd={onDragEnd}>
                     <Droppable droppableId={name}>
@@ -187,7 +211,7 @@ export function DnDList<
                                                     {children(
                                                         item,
                                                         index,
-                                                        onDelete
+                                                        deleteItem
                                                     )}
                                                 </div>
                                             )}
@@ -200,7 +224,7 @@ export function DnDList<
                     </Droppable>
                 </DragDropContext>
             </Component>
-            {sideRenderer && sideRenderer(false, onAdd)}
+            {sideRenderer && sideRenderer(false, addItem, addItems)}
         </React.Fragment>
     );
 }