@etsoo/react 1.4.2 → 1.4.3

package/lib/mu/DnDList.d.ts

@@ -32,6 +32,10 @@ export interface DnDListProps<D extends {}, E extends React.ElementType> {
      * Load data
      */
     loadData: (name: string) => PromiseLike<D[]>;
+    /**
+     * Data change handler
+     */
+    onChange?: (items: D[]) => void;
     /**
      * Top and bottom sides renderer
      */

package/lib/mu/DnDList.js

@@ -9,9 +9,16 @@ import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
  */
 export function DnDList(props) {
     // Destruct
-    const { children, Component = 'div', componentProps, getItemStyle = (_isDragging) => ({}), getListStyle = () => undefined, labelField, loadData, name, sideRenderer } = props;
+    const { children, Component = 'div', componentProps, getItemStyle = (_isDragging) => ({}), getListStyle = () => undefined, labelField, loadData, name, onChange, 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 onDragEnd = (result) => {
         // Dropped outside the list
@@ -25,7 +32,7 @@ export function DnDList(props) {
         // Insert to the destination index
         newItems.splice(result.destination.index, 0, removed);
         // Update the state
-        setItems(newItems);
+        changeItems(newItems);
     };
     // Add item
     const addItem = (newItem) => {
@@ -36,7 +43,7 @@ export function DnDList(props) {
         // Clone
         const newItems = [newItem, ...items];
         // Update the state
-        setItems(newItems);
+        changeItems(newItems);
         return true;
     };
     // Edit item
@@ -50,7 +57,7 @@ export function DnDList(props) {
         // Remove the item
         newItems.splice(index, 1, newItem);
         // Update the state
-        setItems(newItems);
+        changeItems(newItems);
         return true;
     };
     // Add items
@@ -66,7 +73,7 @@ export function DnDList(props) {
             newItems.push(newItem);
         });
         // Update the state
-        setItems(newItems);
+        changeItems(newItems);
         return newItems.length - items.length;
     };
     // Delete item
@@ -76,9 +83,10 @@ export function DnDList(props) {
         // Remove the item
         newItems.splice(index, 1);
         // Update the state
-        setItems(newItems);
+        changeItems(newItems);
     };
     React.useEffect(() => {
+        // Load data
         loadData(name).then((items) => setItems(items));
     }, [name]);
     // Layout

package/package.json

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

package/src/mu/DnDList.tsx

@@ -52,6 +52,11 @@ export interface DnDListProps<D extends {}, E extends React.ElementType> {
      */
     loadData: (name: string) => PromiseLike<D[]>;
 
+    /**
+     * Data change handler
+     */
+    onChange?: (items: D[]) => void;
+
     /**
      * Top and bottom sides renderer
      */
@@ -87,12 +92,21 @@ export function DnDList<
         labelField,
         loadData,
         name,
+        onChange,
         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 onDragEnd = (result: DropResult) => {
         // Dropped outside the list
@@ -110,7 +124,7 @@ export function DnDList<
         newItems.splice(result.destination.index, 0, removed);
 
         // Update the state
-        setItems(newItems);
+        changeItems(newItems);
     };
 
     // Add item
@@ -124,7 +138,7 @@ export function DnDList<
         const newItems = [newItem, ...items];
 
         // Update the state
-        setItems(newItems);
+        changeItems(newItems);
 
         return true;
     };
@@ -143,7 +157,7 @@ export function DnDList<
         newItems.splice(index, 1, newItem);
 
         // Update the state
-        setItems(newItems);
+        changeItems(newItems);
 
         return true;
     };
@@ -166,7 +180,7 @@ export function DnDList<
         });
 
         // Update the state
-        setItems(newItems);
+        changeItems(newItems);
 
         return newItems.length - items.length;
     };
@@ -180,10 +194,11 @@ export function DnDList<
         newItems.splice(index, 1);
 
         // Update the state
-        setItems(newItems);
+        changeItems(newItems);
     };
 
     React.useEffect(() => {
+        // Load data
         loadData(name).then((items) => setItems(items));
     }, [name]);