@etsoo/react 1.3.99 → 1.4.0

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, deleteItem: (index: number) => void) => React.ReactNode;
+    children: (item: D, index: number, deleteItem: (index: number) => void, editItem: (newItem: D, indexOrLabel: number | string) => void) => React.ReactNode;
     /**
      * List container component
      * https://javascript.plainenglish.io/building-a-polymorphic-component-in-react-and-typescript-d9f236950af4

package/lib/mu/DnDList.js

@@ -39,6 +39,21 @@ export function DnDList(props) {
         setItems(newItems);
         return true;
     };
+    // Edit item
+    const editItem = (newItem, indexOrLabel) => {
+        const index = typeof indexOrLabel === 'number'
+            ? indexOrLabel
+            : items.findIndex((item) => DataTypes.convert(item[labelField], 'string') ==
+                indexOrLabel);
+        if (index === -1)
+            return;
+        // Clone
+        const newItems = [...items];
+        // Remove the item
+        newItems.splice(index, 1, newItem);
+        // Update the state
+        setItems(newItems);
+    };
     // Add items
     const addItems = (inputItems) => {
         // Clone
@@ -83,7 +98,7 @@ export function DnDList(props) {
                                 ...provided
                                     .draggableProps
                                     .style
-                            } }, children(item, index, deleteItem)))));
+                            } }, children(item, index, deleteItem, editItem)))));
                     }),
                     provided.placeholder))))),
         sideRenderer && sideRenderer(false, addItem, addItems)));

package/lib/mu/pages/EditPage.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { Labels } from '../../app/Labels';
 import { MUGlobal } from '../MUGlobal';
 import { CommonPage, CommonPageScrollContainer } from './CommonPage';
-import EditIcon from '@mui/icons-material/Edit';
+import SaveIcon from '@mui/icons-material/Save';
 /**
  * Edit page
  * @param props Props
@@ -21,5 +21,5 @@ export function EditPage(props) {
                     bottom: (theme) => MUGlobal.updateWithTheme(paddings, theme.spacing),
                     paddingTop: paddings
                 } },
-                React.createElement(Button, { variant: "contained", type: "submit", fullWidth: true, startIcon: React.createElement(EditIcon, null) }, labels.save)))));
+                React.createElement(Button, { variant: "contained", type: "submit", fullWidth: true, startIcon: React.createElement(SaveIcon, null) }, labels.save)))));
 }

package/package.json

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

package/src/mu/DnDList.tsx

@@ -17,7 +17,8 @@ export interface DnDListProps<D extends {}, E extends React.ElementType> {
     children: (
         item: D,
         index: number,
-        deleteItem: (index: number) => void
+        deleteItem: (index: number) => void,
+        editItem: (newItem: D, indexOrLabel: number | string) => void
     ) => React.ReactNode;
 
     /**
@@ -128,6 +129,28 @@ export function DnDList<
         return true;
     };
 
+    // Edit item
+    const editItem = (newItem: D, indexOrLabel: number | string) => {
+        const index =
+            typeof indexOrLabel === 'number'
+                ? indexOrLabel
+                : items.findIndex(
+                      (item) =>
+                          DataTypes.convert(item[labelField], 'string') ==
+                          indexOrLabel
+                  );
+        if (index === -1) return;
+
+        // Clone
+        const newItems = [...items];
+
+        // Remove the item
+        newItems.splice(index, 1, newItem);
+
+        // Update the state
+        setItems(newItems);
+    };
+
     // Add items
     const addItems = (inputItems: D[]) => {
         // Clone
@@ -212,7 +235,8 @@ export function DnDList<
                                                     {children(
                                                         item,
                                                         index,
-                                                        deleteItem
+                                                        deleteItem,
+                                                        editItem
                                                     )}
                                                 </div>
                                             )}

package/src/mu/pages/EditPage.tsx

@@ -6,7 +6,7 @@ import { Labels } from '../../app/Labels';
 import { MUGlobal } from '../MUGlobal';
 import { CommonPage, CommonPageScrollContainer } from './CommonPage';
 import { CommonPageProps } from './CommonPageProps';
-import EditIcon from '@mui/icons-material/Edit';
+import SaveIcon from '@mui/icons-material/Save';
 
 /**
  * Edit page router props, include 'id' (/:id) query parameter
@@ -70,7 +70,7 @@ export function EditPage(props: EditPageProps) {
                         variant="contained"
                         type="submit"
                         fullWidth
-                        startIcon={<EditIcon />}
+                        startIcon={<SaveIcon />}
                     >
                         {labels.save}
                     </Button>