@etsoo/react 1.4.40 → 1.4.41

package/lib/app/Labels.d.ts

@@ -8,6 +8,7 @@ export declare namespace Labels {
      */
     const CommonPage: {
         add: string;
+        delete: string;
         more: string;
         pullToRefresh: string;
         refresh: string;

package/lib/app/Labels.js

@@ -9,6 +9,7 @@ export var Labels;
      */
     Labels.CommonPage = {
         add: 'Add',
+        delete: 'Delete',
         more: 'More',
         pullToRefresh: 'Pull down to refresh',
         refresh: 'Refresh',

package/lib/mu/DataGridRenderers.js

@@ -67,7 +67,7 @@ export var DataGridRenderers;
             if (value)
                 return React.createElement(CheckIcon, { fontSize: "small" });
             else
-                return React.createElement(ClearIcon, { fontSize: "small", color: "error" });
+                return React.createElement(ClearIcon, { fontSize: "small", color: "warning" });
         }
         // To string
         return new String(value);

package/lib/mu/pages/EditPage.d.ts

@@ -4,10 +4,18 @@ import { CommonPageProps } from './CommonPageProps';
  * Add / Edit page props
  */
 export interface EditPageProps extends Omit<CommonPageProps, 'onSubmit'> {
+    /**
+     * Is editing
+     */
+    isEditing?: boolean;
     /**
      * On form submit
      */
     onSubmit?: FormEventHandler<HTMLFormElement>;
+    /**
+     * On delete callback
+     */
+    onDelete?: () => Promise<void> | void;
 }
 /**
  * Add / Edit page

package/lib/mu/pages/EditPage.js

@@ -4,22 +4,24 @@ import { Labels } from '../../app/Labels';
 import { MUGlobal } from '../MUGlobal';
 import { CommonPage, CommonPageScrollContainer } from './CommonPage';
 import SaveIcon from '@mui/icons-material/Save';
+import DeleteIcon from '@mui/icons-material/Delete';
 /**
  * Add / Edit page
  * @param props Props
  */
 export function EditPage(props) {
     // Destruct
-    const { children, onSubmit, paddings = MUGlobal.pagePaddings, scrollContainer = CommonPageScrollContainer, ...rest } = props;
+    const { children, isEditing, onDelete, onSubmit, paddings = MUGlobal.pagePaddings, scrollContainer = CommonPageScrollContainer, ...rest } = props;
     // Labels
     const labels = Labels.CommonPage;
     return (React.createElement(CommonPage, { paddings: paddings, scrollContainer: scrollContainer, ...rest },
         React.createElement("form", { onSubmit: onSubmit },
             React.createElement(Grid, { container: true, justifyContent: "left", spacing: paddings, paddingTop: 1 }, children),
-            React.createElement(Grid, { container: true, position: "sticky", sx: {
+            React.createElement(Grid, { container: true, position: "sticky", display: "flex", gap: paddings, sx: {
                     top: 'auto',
                     bottom: (theme) => MUGlobal.updateWithTheme(paddings, theme.spacing),
                     paddingTop: paddings
                 } },
-                React.createElement(Button, { variant: "contained", type: "submit", fullWidth: true, startIcon: React.createElement(SaveIcon, null) }, labels.save)))));
+                isEditing && onDelete && (React.createElement(Button, { color: "primary", variant: "outlined", onClick: () => onDelete(), startIcon: React.createElement(DeleteIcon, { color: "warning" }) }, labels.delete)),
+                React.createElement(Button, { variant: "contained", type: "submit", fullWidth: true, startIcon: React.createElement(SaveIcon, null), sx: { flexGrow: 1 } }, labels.save)))));
 }

package/package.json

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

package/src/app/Labels.ts

@@ -9,6 +9,7 @@ export namespace Labels {
      */
     export const CommonPage = {
         add: 'Add',
+        delete: 'Delete',
         more: 'More',
         pullToRefresh: 'Pull down to refresh',
         refresh: 'Refresh',

package/src/mu/DataGridRenderers.tsx

@@ -103,7 +103,7 @@ export namespace DataGridRenderers {
             }
 
             if (value) return <CheckIcon fontSize="small" />;
-            else return <ClearIcon fontSize="small" color="error" />;
+            else return <ClearIcon fontSize="small" color="warning" />;
         }
 
         // To string

package/src/mu/pages/EditPage.tsx

@@ -5,15 +5,26 @@ import { MUGlobal } from '../MUGlobal';
 import { CommonPage, CommonPageScrollContainer } from './CommonPage';
 import { CommonPageProps } from './CommonPageProps';
 import SaveIcon from '@mui/icons-material/Save';
+import DeleteIcon from '@mui/icons-material/Delete';
 
 /**
  * Add / Edit page props
  */
 export interface EditPageProps extends Omit<CommonPageProps, 'onSubmit'> {
+    /**
+     * Is editing
+     */
+    isEditing?: boolean;
+
     /**
      * On form submit
      */
     onSubmit?: FormEventHandler<HTMLFormElement>;
+
+    /**
+     * On delete callback
+     */
+    onDelete?: () => Promise<void> | void;
 }
 
 /**
@@ -24,6 +35,8 @@ export function EditPage(props: EditPageProps) {
     // Destruct
     const {
         children,
+        isEditing,
+        onDelete,
         onSubmit,
         paddings = MUGlobal.pagePaddings,
         scrollContainer = CommonPageScrollContainer,
@@ -51,6 +64,8 @@ export function EditPage(props: EditPageProps) {
                 <Grid
                     container
                     position="sticky"
+                    display="flex"
+                    gap={paddings}
                     sx={{
                         top: 'auto',
                         bottom: (theme) =>
@@ -58,11 +73,22 @@ export function EditPage(props: EditPageProps) {
                         paddingTop: paddings
                     }}
                 >
+                    {isEditing && onDelete && (
+                        <Button
+                            color="primary"
+                            variant="outlined"
+                            onClick={() => onDelete()}
+                            startIcon={<DeleteIcon color="warning" />}
+                        >
+                            {labels.delete}
+                        </Button>
+                    )}
                     <Button
                         variant="contained"
                         type="submit"
                         fullWidth
                         startIcon={<SaveIcon />}
+                        sx={{ flexGrow: 1 }}
                     >
                         {labels.save}
                     </Button>