@etsoo/react 1.4.10 → 1.4.11

package/lib/mu/DnDList.d.ts

@@ -36,6 +36,10 @@ export interface DnDListProps<D extends {}, E extends React.ElementType> {
      * Data change handler
      */
     onChange?: (items: D[]) => void;
+    /**
+     * Drag end handler
+     */
+    onDragEnd?: (items: D[]) => void;
     /**
      * Top and bottom sides renderer
      */

package/lib/mu/DnDList.js

@@ -9,7 +9,7 @@ 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, onChange, sideRenderer } = props;
+    const { children, Component = 'div', componentProps, getItemStyle = (_isDragging) => ({}), getListStyle = () => undefined, labelField, loadData, name, onChange, onDragEnd, sideRenderer } = props;
     // State
     const [items, setItems] = React.useState([]);
     const changeItems = (items) => {
@@ -20,7 +20,7 @@ export function DnDList(props) {
         setItems(items);
     };
     // Drag end handler
-    const onDragEnd = (result) => {
+    const onDragEndLocal = (result) => {
         // Dropped outside the list
         if (!result.destination) {
             return;
@@ -33,6 +33,9 @@ export function DnDList(props) {
         newItems.splice(result.destination.index, 0, removed);
         // Update the state
         changeItems(newItems);
+        // Drag end handler
+        if (onDragEnd)
+            onDragEnd(newItems);
     };
     // Add item
     const addItem = (newItem) => {
@@ -95,7 +98,7 @@ export function DnDList(props) {
     return (React.createElement(React.Fragment, null,
         sideRenderer && sideRenderer(true, addItem, addItems),
         React.createElement(Component, { ...componentProps },
-            React.createElement(DragDropContext, { onDragEnd: onDragEnd },
+            React.createElement(DragDropContext, { onDragEnd: onDragEndLocal },
                 React.createElement(Droppable, { droppableId: name }, (provided, snapshot) => (React.createElement("div", { ...provided.droppableProps, ref: provided.innerRef, style: getListStyle(snapshot.isDraggingOver) },
                     items.map((item, index) => {
                         // Id

package/package.json

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

package/src/mu/DnDList.tsx

@@ -57,6 +57,11 @@ export interface DnDListProps<D extends {}, E extends React.ElementType> {
      */
     onChange?: (items: D[]) => void;
 
+    /**
+     * Drag end handler
+     */
+    onDragEnd?: (items: D[]) => void;
+
     /**
      * Top and bottom sides renderer
      */
@@ -93,6 +98,7 @@ export function DnDList<
         loadData,
         name,
         onChange,
+        onDragEnd,
         sideRenderer
     } = props;
 
@@ -108,7 +114,7 @@ export function DnDList<
     };
 
     // Drag end handler
-    const onDragEnd = (result: DropResult) => {
+    const onDragEndLocal = (result: DropResult) => {
         // Dropped outside the list
         if (!result.destination) {
             return;
@@ -125,6 +131,9 @@ export function DnDList<
 
         // Update the state
         changeItems(newItems);
+
+        // Drag end handler
+        if (onDragEnd) onDragEnd(newItems);
     };
 
     // Add item
@@ -211,7 +220,7 @@ export function DnDList<
         <React.Fragment>
             {sideRenderer && sideRenderer(true, addItem, addItems)}
             <Component {...componentProps}>
-                <DragDropContext onDragEnd={onDragEnd}>
+                <DragDropContext onDragEnd={onDragEndLocal}>
                     <Droppable droppableId={name}>
                         {(provided, snapshot) => (
                             <div