@etsoo/react 1.4.39 → 1.4.43

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/MUGlobal.d.ts

@@ -63,8 +63,15 @@ export declare class MUGlobal {
      * @returns Updated object
      */
     static adjustWithTheme(size: number, adjust: {}, updateFunc: (value: number) => string): {};
+    /**
+     * Break points defined
+     */
+    static breakpoints: readonly ["xs", "sm", "md", "lg", "xl"];
     /**
      * Get multple medias theme space
+     * Responsive values and Breakpoints as an object
+     * xs = theme.breakpoints.up('xs')
+     * https://mui.com/system/basics/
      * @param spaces Spaces
      * @param theme Theme
      * @returns Result

package/lib/mu/MUGlobal.js

@@ -72,14 +72,19 @@ export class MUGlobal {
     }
     /**
      * Get multple medias theme space
+     * Responsive values and Breakpoints as an object
+     * xs = theme.breakpoints.up('xs')
+     * https://mui.com/system/basics/
      * @param spaces Spaces
      * @param theme Theme
      * @returns Result
      */
     static getSpace(spaces, theme) {
-        for (const [key, value] of Object.entries(spaces)) {
-            if (typeof value === 'number' &&
-                theme.breakpoints.keys.findIndex((bk) => bk === key) != -1) {
+        const start = this.breakpoints.length - 1;
+        for (let i = start; i >= 0; i--) {
+            const key = this.breakpoints[i];
+            const value = Reflect.get(spaces, key);
+            if (typeof value === 'number') {
                 const mediaRaw = theme.breakpoints.up(key);
                 const mediaQuery = mediaRaw.substring(mediaRaw.indexOf('('));
                 if (window.matchMedia(mediaQuery).matches) {
@@ -137,3 +142,7 @@ MUGlobal.textFieldVariant = 'filled';
  * Page default paddings
  */
 MUGlobal.pagePaddings = { xs: 2, sm: 3 };
+/**
+ * Break points defined
+ */
+MUGlobal.breakpoints = ['xs', 'sm', 'md', 'lg', 'xl'];

package/lib/mu/ScrollerListEx.js

@@ -111,18 +111,25 @@ export function ScrollerListEx(props) {
             : false;
         return selected;
     };
+    // Destruct
+    const { alternatingColors = [undefined, undefined], className, idField = 'id', innerItemRenderer, itemSize, itemKey = (index, data) => { var _a; return (_a = DataTypes.getIdValue(data, idField)) !== null && _a !== void 0 ? _a : index; }, itemRenderer = (itemProps) => {
+        const [itemHeight, space, margins] = calculateItemSize(itemProps.index);
+        return defaultItemRenderer({
+            itemHeight,
+            innerItemRenderer,
+            onMouseDown,
+            space,
+            margins,
+            selected: isSelected(itemProps.data),
+            ...itemProps
+        });
+    }, onSelectChange, selectedColor = '#edf4fb', ...rest } = props;
     // Theme
     const theme = useTheme();
-    // Calculate size
-    const calculateItemSize = (index) => {
-        // Callback function
-        if (typeof itemSize === 'function') {
-            const result = itemSize(index);
-            if (result.length == 2)
-                return [...result, defaultMargin(MUGlobal.pagePaddings)];
-            return result;
-        }
-        // Calculation
+    // Cache calculation
+    const itemSizeResult = React.useMemo(() => {
+        if (typeof itemSize === 'function')
+            return undefined;
         const [size, spaces, isNarrow] = itemSize;
         if (typeof spaces === 'number')
             return [
@@ -135,25 +142,24 @@ export function ScrollerListEx(props) {
             MUGlobal.getSpace(spaces, theme),
             defaultMargin(spaces, isNarrow)
         ];
+    }, [itemSize]);
+    // Calculate size
+    const calculateItemSize = (index) => {
+        // Callback function
+        if (typeof itemSize === 'function') {
+            const result = itemSize(index);
+            if (result.length == 2)
+                return [...result, defaultMargin(MUGlobal.pagePaddings)];
+            return result;
+        }
+        // Calculation
+        return itemSizeResult;
     };
     // Local item size
     const itemSizeLocal = (index) => {
         const [size, space] = calculateItemSize(index);
         return size + space;
     };
-    // Destruct
-    const { alternatingColors = [undefined, undefined], className, idField = 'id', innerItemRenderer, itemSize, itemKey = (index, data) => { var _a; return (_a = DataTypes.getIdValue(data, idField)) !== null && _a !== void 0 ? _a : index; }, itemRenderer = (itemProps) => {
-        const [itemHeight, space, margins] = calculateItemSize(itemProps.index);
-        return defaultItemRenderer({
-            itemHeight,
-            innerItemRenderer,
-            onMouseDown,
-            space,
-            margins,
-            selected: isSelected(itemProps.data),
-            ...itemProps
-        });
-    }, onSelectChange, selectedColor = '#edf4fb', ...rest } = props;
     // Layout
     return (React.createElement(ScrollerList, { className: Utils.mergeClasses('ScrollerListEx-Body', className, createGridStyle(alternatingColors, selectedColor)), itemKey: itemKey, itemRenderer: itemRenderer, itemSize: itemSizeLocal, ...rest }));
 }

package/lib/mu/TabBox.d.ts

@@ -12,6 +12,10 @@ export interface TabBoxPanel extends Omit<TabProps, 'value' | 'children'> {
      * Panel box props
      */
     panel?: Omit<BoxProps, 'hidden'>;
+    /**
+     * To URL
+     */
+    to?: string;
 }
 /**
  * Tabs with box props

package/lib/mu/TabBox.js

@@ -1,5 +1,6 @@
 import { Utils } from '@etsoo/shared';
 import { Box, Tab, Tabs } from '@mui/material';
+import { Link } from '@reach/router';
 import React from 'react';
 /**
  * Tabs with box
@@ -25,6 +26,6 @@ export function TabBox(props) {
                     setValue(newValue);
                     if (onChange)
                         onChange(event, newValue);
-                }, ...rest }, tabs.map(({ children, panel, ...tabRest }, index) => (React.createElement(Tab, { key: index, value: index, ...tabRest }))))),
+                }, ...rest }, tabs.map(({ children, panel, ...tabRest }, index) => (React.createElement(Tab, { key: index, value: index, LinkComponent: tabRest.to ? Link : undefined, ...tabRest }))))),
         tabs.map(({ children, panel }, index) => (React.createElement(Box, { key: index, hidden: value !== index, ...panel }, Utils.getResult(children, value === index))))));
 }

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", startIcon: React.createElement(SaveIcon, null), sx: { flexGrow: 1 } }, labels.save)))));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.4.39",
+    "version": "1.4.43",
     "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.22",
+        "@etsoo/appscript": "^1.2.23",
         "@etsoo/notificationbase": "^1.1.0",
         "@etsoo/shared": "^1.1.3",
         "@mui/icons-material": "^5.2.5",

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/MUGlobal.ts

@@ -126,18 +126,26 @@ export class MUGlobal {
         return newObj;
     }
 
+    /**
+     * Break points defined
+     */
+    static breakpoints = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
+
     /**
      * Get multple medias theme space
+     * Responsive values and Breakpoints as an object
+     * xs = theme.breakpoints.up('xs')
+     * https://mui.com/system/basics/
      * @param spaces Spaces
      * @param theme Theme
      * @returns Result
      */
     static getSpace(spaces: {}, theme: Theme) {
-        for (const [key, value] of Object.entries(spaces)) {
-            if (
-                typeof value === 'number' &&
-                theme.breakpoints.keys.findIndex((bk) => bk === key) != -1
-            ) {
+        const start = this.breakpoints.length - 1;
+        for (let i = start; i >= 0; i--) {
+            const key = this.breakpoints[i];
+            const value = Reflect.get(spaces, key);
+            if (typeof value === 'number') {
                 const mediaRaw = theme.breakpoints.up(key as Breakpoint);
                 const mediaQuery = mediaRaw.substring(mediaRaw.indexOf('('));
                 if (window.matchMedia(mediaQuery).matches) {
@@ -145,6 +153,7 @@ export class MUGlobal {
                 }
             }
         }
+
         return 0;
     }
 

package/src/mu/ScrollerListEx.tsx

@@ -265,41 +265,6 @@ export function ScrollerListEx<T extends Record<string, unknown>>(
         return selected;
     };
 
-    // Theme
-    const theme = useTheme();
-
-    // Calculate size
-    const calculateItemSize = (index: number): [number, number, {}] => {
-        // Callback function
-        if (typeof itemSize === 'function') {
-            const result = itemSize(index);
-            if (result.length == 2)
-                return [...result, defaultMargin(MUGlobal.pagePaddings)];
-            return result;
-        }
-
-        // Calculation
-        const [size, spaces, isNarrow] = itemSize;
-        if (typeof spaces === 'number')
-            return [
-                size,
-                spaces,
-                defaultMargin(MUGlobal.pagePaddings, undefined)
-            ];
-
-        return [
-            size,
-            MUGlobal.getSpace(spaces, theme),
-            defaultMargin(spaces, isNarrow)
-        ];
-    };
-
-    // Local item size
-    const itemSizeLocal = (index: number) => {
-        const [size, space] = calculateItemSize(index);
-        return size + space;
-    };
-
     // Destruct
     const {
         alternatingColors = [undefined, undefined],
@@ -328,6 +293,49 @@ export function ScrollerListEx<T extends Record<string, unknown>>(
         ...rest
     } = props;
 
+    // Theme
+    const theme = useTheme();
+
+    // Cache calculation
+    const itemSizeResult = React.useMemo(():
+        | [number, number, {}]
+        | undefined => {
+        if (typeof itemSize === 'function') return undefined;
+        const [size, spaces, isNarrow] = itemSize;
+        if (typeof spaces === 'number')
+            return [
+                size,
+                spaces,
+                defaultMargin(MUGlobal.pagePaddings, undefined)
+            ];
+
+        return [
+            size,
+            MUGlobal.getSpace(spaces, theme),
+            defaultMargin(spaces, isNarrow)
+        ];
+    }, [itemSize]);
+
+    // Calculate size
+    const calculateItemSize = (index: number): [number, number, {}] => {
+        // Callback function
+        if (typeof itemSize === 'function') {
+            const result = itemSize(index);
+            if (result.length == 2)
+                return [...result, defaultMargin(MUGlobal.pagePaddings)];
+            return result;
+        }
+
+        // Calculation
+        return itemSizeResult!;
+    };
+
+    // Local item size
+    const itemSizeLocal = (index: number) => {
+        const [size, space] = calculateItemSize(index);
+        return size + space;
+    };
+
     // Layout
     return (
         <ScrollerList<T>

package/src/mu/TabBox.tsx

@@ -1,5 +1,6 @@
 import { Utils } from '@etsoo/shared';
 import { Box, BoxProps, Tab, TabProps, Tabs, TabsProps } from '@mui/material';
+import { Link } from '@reach/router';
 import React from 'react';
 
 /**
@@ -15,6 +16,11 @@ export interface TabBoxPanel extends Omit<TabProps, 'value' | 'children'> {
      * Panel box props
      */
     panel?: Omit<BoxProps, 'hidden'>;
+
+    /**
+     * To URL
+     */
+    to?: string;
 }
 
 /**
@@ -93,7 +99,12 @@ export function TabBox(props: TabBoxPros) {
                     {...rest}
                 >
                     {tabs.map(({ children, panel, ...tabRest }, index) => (
-                        <Tab key={index} value={index} {...tabRest} />
+                        <Tab
+                            key={index}
+                            value={index}
+                            LinkComponent={tabRest.to ? Link : undefined}
+                            {...tabRest}
+                        />
                     ))}
                 </Tabs>
             </Box>

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,21 @@ 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>