@etsoo/react 1.4.8 → 1.4.12

package/lib/mu/DnDList.d.ts

@@ -36,10 +36,14 @@ 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
      */
-    sideRenderer?: (top: boolean, addItem: (item: D) => boolean, addItems: (items: D[]) => number) => React.ReactNode;
+    sideRenderer?: (top: boolean, addItem: (item: D) => boolean, addItems: (items: D[]) => number, reloadItems: () => void) => React.ReactNode;
     /**
      * Name for hidden form input
      */

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) => {
@@ -49,7 +52,9 @@ export function DnDList(props) {
     // Edit item
     const editItem = (newItem, index) => {
         // Existence check
-        if (items.some((item) => item[labelField] === newItem[labelField])) {
+        const newIndex = items.findIndex((item) => item[labelField] === newItem[labelField]);
+        if (newIndex >= 0 && newIndex != index) {
+            // Label field is the same with a different item
             return false;
         }
         // Clone
@@ -85,15 +90,20 @@ export function DnDList(props) {
         // Update the state
         changeItems(newItems);
     };
-    React.useEffect(() => {
+    // Reload items
+    const reloadItems = () => {
         // Load data
         loadData(name).then((items) => setItems(items));
+    };
+    React.useEffect(() => {
+        // Load data
+        reloadItems();
     }, [name]);
     // Layout
     return (React.createElement(React.Fragment, null,
-        sideRenderer && sideRenderer(true, addItem, addItems),
+        sideRenderer && sideRenderer(true, addItem, addItems, reloadItems),
         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
@@ -108,5 +118,6 @@ export function DnDList(props) {
                             } }, children(item, index, deleteItem, editItem)))));
                     }),
                     provided.placeholder))))),
-        sideRenderer && sideRenderer(false, addItem, addItems)));
+        sideRenderer &&
+            sideRenderer(false, addItem, addItems, reloadItems)));
 }

package/lib/mu/TooltipClick.js

@@ -42,5 +42,5 @@ export function TooltipClick(props) {
                 setOpen(false);
                 if (onClose)
                     onClose(event);
-            }, title: localTitle, open: open, disableFocusListener: true, disableTouchListener: true, disableHoverListener: disableHoverListener, ...rest }, children(openTooltip))));
+            }, title: localTitle, open: open, disableFocusListener: true, disableTouchListener: true, disableHoverListener: disableHoverListener, onMouseOver: disableHoverListener ? undefined : () => setOpen(true), ...rest }, children(openTooltip))));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.4.8",
+    "version": "1.4.12",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -50,7 +50,7 @@
         "@emotion/react": "^11.7.1",
         "@emotion/style": "^0.8.0",
         "@emotion/styled": "^11.6.0",
-        "@etsoo/appscript": "^1.2.18",
+        "@etsoo/appscript": "^1.2.20",
         "@etsoo/notificationbase": "^1.1.0",
         "@etsoo/shared": "^1.1.0",
         "@mui/icons-material": "^5.2.5",
@@ -89,7 +89,7 @@
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-plugin-import": "^2.25.4",
         "eslint-plugin-react": "^7.28.0",
-        "jest": "^27.4.5",
+        "jest": "^27.4.7",
         "react-test-renderer": "^17.0.2",
         "ts-jest": "^27.1.2",
         "typescript": "^4.5.4"

package/src/mu/DnDList.tsx

@@ -57,13 +57,19 @@ 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
      */
     sideRenderer?: (
         top: boolean,
         addItem: (item: D) => boolean,
-        addItems: (items: D[]) => number
+        addItems: (items: D[]) => number,
+        reloadItems: () => void
     ) => React.ReactNode;
 
     /**
@@ -93,6 +99,7 @@ export function DnDList<
         loadData,
         name,
         onChange,
+        onDragEnd,
         sideRenderer
     } = props;
 
@@ -108,7 +115,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 +132,9 @@ export function DnDList<
 
         // Update the state
         changeItems(newItems);
+
+        // Drag end handler
+        if (onDragEnd) onDragEnd(newItems);
     };
 
     // Add item
@@ -146,7 +156,11 @@ export function DnDList<
     // Edit item
     const editItem = (newItem: D, index: number) => {
         // Existence check
-        if (items.some((item) => item[labelField] === newItem[labelField])) {
+        const newIndex = items.findIndex(
+            (item) => item[labelField] === newItem[labelField]
+        );
+        if (newIndex >= 0 && newIndex != index) {
+            // Label field is the same with a different item
             return false;
         }
 
@@ -197,17 +211,23 @@ export function DnDList<
         changeItems(newItems);
     };
 
-    React.useEffect(() => {
+    // Reload items
+    const reloadItems = () => {
         // Load data
         loadData(name).then((items) => setItems(items));
+    };
+
+    React.useEffect(() => {
+        // Load data
+        reloadItems();
     }, [name]);
 
     // Layout
     return (
         <React.Fragment>
-            {sideRenderer && sideRenderer(true, addItem, addItems)}
+            {sideRenderer && sideRenderer(true, addItem, addItems, reloadItems)}
             <Component {...componentProps}>
-                <DragDropContext onDragEnd={onDragEnd}>
+                <DragDropContext onDragEnd={onDragEndLocal}>
                     <Droppable droppableId={name}>
                         {(provided, snapshot) => (
                             <div
@@ -261,7 +281,8 @@ export function DnDList<
                     </Droppable>
                 </DragDropContext>
             </Component>
-            {sideRenderer && sideRenderer(false, addItem, addItems)}
+            {sideRenderer &&
+                sideRenderer(false, addItem, addItems, reloadItems)}
         </React.Fragment>
     );
 }

package/src/mu/TooltipClick.tsx

@@ -81,6 +81,9 @@ export function TooltipClick(props: TooltipClickProps) {
                 disableFocusListener
                 disableTouchListener
                 disableHoverListener={disableHoverListener}
+                onMouseOver={
+                    disableHoverListener ? undefined : () => setOpen(true)
+                }
                 {...rest}
             >
                 {children(openTooltip)}