@etsoo/react 1.3.97 → 1.4.1

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, 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
@@ -19,7 +19,7 @@ export interface DnDListProps<D extends {}, E extends React.ElementType> {
     /**
      * Get list item style callback
      */
-    getItemStyle?: (isDragging: boolean) => CSSProperties;
+    getItemStyle?: (isDragging: boolean, index: number) => CSSProperties;
     /**
      * Get list style callback
      */
@@ -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,39 @@ export function DnDList(props) {
         setItems(newItems);
         return true;
     };
-    // Delete handler
-    const onDelete = (index) => {
+    // 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
+        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 +84,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) },
@@ -63,12 +94,12 @@ export function DnDList(props) {
                         if (id == null)
                             return;
                         return (React.createElement(Draggable, { key: id, draggableId: id, index: index }, (provided, snapshot) => (React.createElement("div", { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, style: {
-                                ...getItemStyle(snapshot.isDragging),
+                                ...getItemStyle(snapshot.isDragging, index),
                                 ...provided
                                     .draggableProps
                                     .style
-                            } }, children(item, index, onDelete)))));
+                            } }, children(item, index, deleteItem, editItem)))));
                     }),
                     provided.placeholder))))),
-        sideRenderer && sideRenderer(false, onAdd)));
+        sideRenderer && sideRenderer(false, addItem, addItems)));
 }

package/lib/mu/NotifierMU.js

@@ -1,5 +1,5 @@
 import { NotificationAlign, NotificationMessageType, NotificationType } from '@etsoo/notificationbase';
-import { Alert, AlertTitle, Backdrop, Box, Button, CircularProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Fade, Slider, Snackbar, styled, Switch, TextField } from '@mui/material';
+import { Alert, AlertTitle, Backdrop, Box, Button, CircularProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Fade, Slider, Snackbar, styled, Switch, TextField, Typography } from '@mui/material';
 import { Error, Info, Help, Warning, Done } from '@mui/icons-material';
 import React from 'react';
 import { Labels } from '../app/Labels';
@@ -120,14 +120,21 @@ export class NotificationMU extends NotificationReact {
         const labels = Labels.NotificationMU;
         const title = (_a = this.title) !== null && _a !== void 0 ? _a : labels.promptTitle;
         const { cancelLabel = labels.promptCancel, okLabel = labels.promptOK, inputs, type, fullScreen, fullWidth = true, maxWidth, primaryButton, ...rest } = (_b = this.inputProps) !== null && _b !== void 0 ? _b : {};
+        const inputRef = React.createRef();
+        const errorRef = React.createRef();
+        const setError = (error) => {
+            if (errorRef.current == null)
+                return;
+            errorRef.current.innerText = error !== null && error !== void 0 ? error : '';
+        };
         const handleSubmit = async (event) => {
             // Result
             let result = undefined;
+            const input = inputRef.current;
             if (this.onReturn) {
                 // Inputs case, no HTMLForm set to value, set the current form
                 if (inputs && value == null)
                     value = event.currentTarget.form;
-                const input = inputRef.current;
                 if (input) {
                     if (type === 'date') {
                         const dateValue = input.valueAsDate;
@@ -165,12 +172,21 @@ export class NotificationMU extends NotificationReact {
             // Get the value
             // returns false to prevent default dismiss
             const v = await result;
-            if (v === false)
+            if (v === false) {
+                input === null || input === void 0 ? void 0 : input.focus();
                 return;
+            }
+            if (Array.isArray(v)) {
+                if (!v[0]) {
+                    const error = v[1];
+                    setError(error);
+                    input === null || input === void 0 ? void 0 : input.focus();
+                    return;
+                }
+            }
             this.dismiss();
         };
         let localInputs;
-        let inputRef = React.createRef();
         let value = undefined;
         if (inputs == null) {
             if (type === 'switch') {
@@ -180,7 +196,7 @@ export class NotificationMU extends NotificationReact {
                 localInputs = React.createElement(Slider, { onChange: (_e, v) => (value = v) });
             }
             else {
-                localInputs = (React.createElement(TextField, { inputRef: inputRef, autoFocus: true, margin: "dense", fullWidth: true, type: type, required: true, ...rest }));
+                localInputs = (React.createElement(TextField, { inputRef: inputRef, onChange: () => setError(undefined), autoFocus: true, margin: "dense", fullWidth: true, type: type, required: true, ...rest }));
             }
         }
         else {
@@ -193,7 +209,8 @@ export class NotificationMU extends NotificationReact {
                     React.createElement("span", { className: "dialogTitle" }, title)),
                 React.createElement(DialogContent, null,
                     React.createElement(DialogContentText, null, this.content),
-                    localInputs),
+                    localInputs,
+                    React.createElement(Typography, { variant: "caption", display: "block", ref: errorRef, color: (theme) => theme.palette.error.main })),
                 React.createElement(DialogActions, null,
                     React.createElement(Button, { color: "secondary", onClick: () => {
                             if (this.onReturn)

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.97",
+    "version": "1.4.1",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -50,8 +50,8 @@
         "@emotion/react": "^11.7.1",
         "@emotion/style": "^0.8.0",
         "@emotion/styled": "^11.6.0",
-        "@etsoo/appscript": "^1.2.11",
-        "@etsoo/notificationbase": "^1.0.95",
+        "@etsoo/appscript": "^1.2.12",
+        "@etsoo/notificationbase": "^1.0.96",
         "@etsoo/shared": "^1.0.97",
         "@mui/icons-material": "^5.2.5",
         "@mui/material": "^5.2.6",
@@ -76,12 +76,12 @@
         "react-window": "^1.8.6"
     },
     "devDependencies": {
-        "@babel/cli": "^7.16.0",
-        "@babel/core": "^7.16.5",
-        "@babel/plugin-transform-runtime": "^7.16.5",
-        "@babel/preset-env": "^7.16.5",
-        "@babel/runtime-corejs3": "^7.16.5",
-        "@types/jest": "^27.0.3",
+        "@babel/cli": "^7.16.7",
+        "@babel/core": "^7.16.7",
+        "@babel/plugin-transform-runtime": "^7.16.7",
+        "@babel/preset-env": "^7.16.7",
+        "@babel/runtime-corejs3": "^7.16.7",
+        "@types/jest": "^27.4.0",
         "@types/react-test-renderer": "^17.0.1",
         "@typescript-eslint/eslint-plugin": "^5.8.1",
         "@typescript-eslint/parser": "^5.8.1",

package/src/mu/DnDList.tsx

@@ -17,7 +17,8 @@ export interface DnDListProps<D extends {}, E extends React.ElementType> {
     children: (
         item: D,
         index: number,
-        onDelete: (index: number) => void
+        deleteItem: (index: number) => void,
+        editItem: (newItem: D, indexOrLabel: number | string) => void
     ) => React.ReactNode;
 
     /**
@@ -34,7 +35,7 @@ export interface DnDListProps<D extends {}, E extends React.ElementType> {
     /**
      * Get list item style callback
      */
-    getItemStyle?: (isDragging: boolean) => CSSProperties;
+    getItemStyle?: (isDragging: boolean, index: number) => CSSProperties;
 
     /**
      * Get list style callback
@@ -56,7 +57,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 +113,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 +129,53 @@ export function DnDList<
         return true;
     };
 
-    // Delete handler
-    const onDelete = (index: number) => {
+    // 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
+        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 +193,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}>
@@ -177,7 +224,8 @@ export function DnDList<
                                                     {...provided.dragHandleProps}
                                                     style={{
                                                         ...getItemStyle(
-                                                            snapshot.isDragging
+                                                            snapshot.isDragging,
+                                                            index
                                                         ),
                                                         ...provided
                                                             .draggableProps
@@ -187,7 +235,8 @@ export function DnDList<
                                                     {children(
                                                         item,
                                                         index,
-                                                        onDelete
+                                                        deleteItem,
+                                                        editItem
                                                     )}
                                                 </div>
                                             )}
@@ -200,7 +249,7 @@ export function DnDList<
                     </Droppable>
                 </DragDropContext>
             </Component>
-            {sideRenderer && sideRenderer(false, onAdd)}
+            {sideRenderer && sideRenderer(false, addItem, addItems)}
         </React.Fragment>
     );
 }

package/src/mu/NotifierMU.tsx

@@ -25,7 +25,8 @@ import {
     Snackbar,
     styled,
     Switch,
-    TextField
+    TextField,
+    Typography
 } from '@mui/material';
 import { Error, Info, Help, Warning, Done } from '@mui/icons-material';
 import React from 'react';
@@ -238,18 +239,31 @@ export class NotificationMU extends NotificationReact {
             ...rest
         } = this.inputProps ?? {};
 
+        const inputRef = React.createRef<HTMLInputElement>();
+        const errorRef = React.createRef<HTMLSpanElement>();
+
+        const setError = (error?: string) => {
+            if (errorRef.current == null) return;
+            errorRef.current.innerText = error ?? '';
+        };
+
         const handleSubmit = async (
             event: React.MouseEvent<HTMLButtonElement>
         ) => {
             // Result
-            let result: boolean | void | PromiseLike<boolean | void> =
+            let result:
+                | boolean
+                | [boolean, string | undefined]
+                | void
+                | PromiseLike<boolean | [boolean, string | undefined] | void> =
                 undefined;
 
+            const input = inputRef.current;
+
             if (this.onReturn) {
                 // Inputs case, no HTMLForm set to value, set the current form
                 if (inputs && value == null) value = event.currentTarget.form;
 
-                const input = inputRef.current;
                 if (input) {
                     if (type === 'date') {
                         const dateValue = input.valueAsDate;
@@ -284,13 +298,23 @@ export class NotificationMU extends NotificationReact {
             // Get the value
             // returns false to prevent default dismiss
             const v = await result;
-            if (v === false) return;
+            if (v === false) {
+                input?.focus();
+                return;
+            }
+            if (Array.isArray(v)) {
+                if (!v[0]) {
+                    const error = v[1];
+                    setError(error);
+                    input?.focus();
+                    return;
+                }
+            }
 
             this.dismiss();
         };
 
         let localInputs: React.ReactNode;
-        let inputRef = React.createRef<HTMLInputElement>();
         let value: any = undefined;
 
         if (inputs == null) {
@@ -310,6 +334,7 @@ export class NotificationMU extends NotificationReact {
                 localInputs = (
                     <TextField
                         inputRef={inputRef}
+                        onChange={() => setError(undefined)}
                         autoFocus
                         margin="dense"
                         fullWidth
@@ -341,6 +366,12 @@ export class NotificationMU extends NotificationReact {
                     <DialogContent>
                         <DialogContentText>{this.content}</DialogContentText>
                         {localInputs}
+                        <Typography
+                            variant="caption"
+                            display="block"
+                            ref={errorRef}
+                            color={(theme) => theme.palette.error.main}
+                        />
                     </DialogContent>
                     <DialogActions>
                         <Button

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>