@etsoo/react 1.4.35 → 1.4.39

package/lib/mu/MUGlobal.d.ts

@@ -1,3 +1,4 @@
+import { Theme } from '@mui/material';
 export declare class MUGlobal {
     /**
      * Search field shrink
@@ -40,14 +41,20 @@ export declare class MUGlobal {
      * @returns Updated object
      */
     static half(input: {}): {};
+    /**
+     * Reverse object number properties, like 5 to -5
+     * @param input Input object
+     * @returns Updated object
+     */
+    static reverse(input: {}): {};
     /**
      * Update object number properties with adjustment
      * @param input Input object
-     * @param adjust Adjust value
+     * @param adjust Adjust value or new size object
      * @param field Specific field
      * @returns Updated object
      */
-    static increase(input: {}, adjust: number, field?: string): {};
+    static increase(input: {}, adjust: number | {}, field?: string): {};
     /**
      * Adjust size with theme update
      * @param size Base size
@@ -56,6 +63,13 @@ export declare class MUGlobal {
      * @returns Updated object
      */
     static adjustWithTheme(size: number, adjust: {}, updateFunc: (value: number) => string): {};
+    /**
+     * Get multple medias theme space
+     * @param spaces Spaces
+     * @param theme Theme
+     * @returns Result
+     */
+    static getSpace(spaces: {}, theme: Theme): number;
     /**
      * Update object number properties with theme
      * @param input Input object

package/lib/mu/MUGlobal.js

@@ -14,10 +14,24 @@ export class MUGlobal {
         });
         return newObj;
     }
+    /**
+     * Reverse object number properties, like 5 to -5
+     * @param input Input object
+     * @returns Updated object
+     */
+    static reverse(input) {
+        const newObj = { ...input };
+        Object.entries(newObj).forEach(([key, value]) => {
+            if (typeof value === 'number') {
+                Reflect.set(newObj, key, -value);
+            }
+        });
+        return newObj;
+    }
     /**
      * Update object number properties with adjustment
      * @param input Input object
-     * @param adjust Adjust value
+     * @param adjust Adjust value or new size object
      * @param field Specific field
      * @returns Updated object
      */
@@ -25,8 +39,14 @@ export class MUGlobal {
         const newObj = { ...input };
         Object.entries(newObj).forEach(([key, value]) => {
             if (typeof value === 'number') {
-                if (field == null || field === key)
-                    Reflect.set(newObj, key, value + adjust);
+                if (field == null || field === key) {
+                    const adjustValue = typeof adjust === 'number'
+                        ? adjust
+                        : Reflect.get(adjust, key);
+                    if (adjustValue == null || typeof adjustValue !== 'number')
+                        return;
+                    Reflect.set(newObj, key, value + adjustValue);
+                }
             }
         });
         return newObj;
@@ -50,6 +70,25 @@ export class MUGlobal {
         });
         return newObj;
     }
+    /**
+     * Get multple medias theme space
+     * @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 mediaRaw = theme.breakpoints.up(key);
+                const mediaQuery = mediaRaw.substring(mediaRaw.indexOf('('));
+                if (window.matchMedia(mediaQuery).matches) {
+                    return parseInt(theme.spacing(value), 10);
+                }
+            }
+        }
+        return 0;
+    }
     /**
      * Update object number properties with theme
      * @param input Input object

package/lib/mu/MobileListItemRenderer.d.ts

@@ -8,7 +8,7 @@ import { ScrollerListExInnerItemRendererProps } from './ScrollerListEx';
  * @param renderer Renderer for card content
  * @returns Component
  */
-export declare function MobileListItemRenderer<T>({ data, itemHeight }: ScrollerListExInnerItemRendererProps<T>, margin: {}, renderer: (data: T) => [
+export declare function MobileListItemRenderer<T>({ data, itemHeight, margins }: ScrollerListExInnerItemRendererProps<T>, renderer: (data: T) => [
     string,
     string | undefined,
     React.ReactNode | (ListItemReact | boolean)[],

package/lib/mu/MobileListItemRenderer.js

@@ -1,7 +1,6 @@
 import { Card, CardContent, CardHeader, LinearProgress } from '@mui/material';
 import React from 'react';
 import { MoreFab } from './MoreFab';
-import { MUGlobal } from './MUGlobal';
 function getActions(input) {
     // Actions
     const actions = [];
@@ -19,20 +18,15 @@ function getActions(input) {
  * @param renderer Renderer for card content
  * @returns Component
  */
-export function MobileListItemRenderer({ data, itemHeight }, margin, renderer) {
+export function MobileListItemRenderer({ data, itemHeight, margins }, renderer) {
     // Loading
     if (data == null)
         return React.createElement(LinearProgress, null);
     // Elements
     const [title, subheader, actions, children] = renderer(data);
-    // Half
-    const halfMargin = MUGlobal.half(margin);
     return (React.createElement(Card, { sx: {
-            height: (theme) => MUGlobal.adjustWithTheme(itemHeight, margin, theme.spacing),
-            marginLeft: margin,
-            marginRight: margin,
-            marginTop: halfMargin,
-            marginBottom: halfMargin
+            height: itemHeight,
+            ...margins
         } },
         React.createElement(CardHeader, { sx: { paddingBottom: 0.5 }, action: Array.isArray(actions) ? (React.createElement(MoreFab, { iconButton: true, size: "small", anchorOrigin: {
                     vertical: 'bottom',
@@ -66,5 +60,7 @@ export function MobileListItemRenderer({ data, itemHeight }, margin, renderer) {
                         }
                     }
                 } })) : (actions), title: title, titleTypographyProps: { variant: 'body2' }, subheader: subheader, subheaderTypographyProps: { variant: 'caption' } }),
-        React.createElement(CardContent, { sx: { paddingTop: 0 } }, children)));
+        React.createElement(CardContent, { sx: {
+                paddingTop: 0
+            } }, children)));
 }

package/lib/mu/ResponsibleContainer.d.ts

@@ -6,7 +6,7 @@ import { GridColumn } from '../components/GridColumn';
 import { GridJsonData } from '../components/GridLoader';
 import { DataGridExProps } from './DataGridEx';
 import { GridMethodRef } from './GridMethodRef';
-import { ScrollerListExInnerItemRendererProps } from './ScrollerListEx';
+import { ScrollerListExInnerItemRendererProps, ScrollerListExItemSize } from './ScrollerListEx';
 /**
  * ResponsibleContainer props
  */
@@ -51,7 +51,7 @@ export interface ResponsibleContainerProps<T extends {}, F extends DataTypes.Bas
     /**
      * Item size, a function indicates its a variable size list
      */
-    itemSize: ((index: number) => number) | number;
+    itemSize: ScrollerListExItemSize;
     /**
      * Load data callback
      */

package/lib/mu/ScrollerListEx.d.ts

@@ -13,11 +13,26 @@ export interface ScrollerListExInnerItemRendererProps<T> extends ListChildCompon
      * Item height
      */
     itemHeight: number;
+    /**
+     * Item space
+     */
+    space: number;
+    /**
+     * Default margins
+     */
+    margins: {};
 }
+/**
+ * Extended ScrollerList ItemSize type
+ * 1. Callback function
+ * 2. Static sets
+ * 3. Dynamic calculation
+ */
+export declare type ScrollerListExItemSize = ((index: number) => [number, number] | [number, number, {}]) | [number, number] | [number, {}, boolean?];
 /**
  * Extended ScrollerList Props
  */
-export interface ScrollerListExProps<T> extends Omit<ScrollerListProps<T>, 'itemRenderer'> {
+export interface ScrollerListExProps<T> extends Omit<ScrollerListProps<T>, 'itemRenderer' | 'itemSize'> {
     /**
      * Alternating colors for odd/even rows
      */
@@ -34,6 +49,10 @@ export interface ScrollerListExProps<T> extends Omit<ScrollerListProps<T>, 'item
      * Item renderer
      */
     itemRenderer?: (props: ListChildComponentProps<T>) => React.ReactElement;
+    /**
+     * Item size, a function indicates its a variable size list
+     */
+    itemSize: ScrollerListExItemSize;
     /**
      * On items select change
      */

package/lib/mu/ScrollerListEx.js

@@ -1,7 +1,9 @@
 import { css } from '@emotion/css';
 import { DataTypes, Utils } from '@etsoo/shared';
+import { useTheme } from '@mui/material';
 import React from 'react';
 import { ScrollerList } from '../components/ScrollerList';
+import { MUGlobal } from './MUGlobal';
 // Scroll bar size
 const scrollbarSize = 16;
 // Selected class name
@@ -36,15 +38,44 @@ const createGridStyle = (alternatingColors, selectedColor) => {
         }
     });
 };
+// Default margin
+const defaultMargin = (margin, isNarrow) => {
+    const half = MUGlobal.half(margin);
+    if (isNarrow == null) {
+        const half = MUGlobal.half(margin);
+        return {
+            marginLeft: margin,
+            marginRight: margin,
+            marginTop: half,
+            marginBottom: half
+        };
+    }
+    if (isNarrow) {
+        return {
+            marginLeft: 0,
+            marginRight: 0,
+            marginTop: half,
+            marginBottom: half
+        };
+    }
+    return {
+        marginLeft: half,
+        marginRight: half,
+        marginTop: half,
+        marginBottom: half
+    };
+};
 // Default itemRenderer
-function defaultItemRenderer({ index, innerItemRenderer, data, onMouseDown, selected, style, itemHeight }) {
+function defaultItemRenderer({ index, innerItemRenderer, data, onMouseDown, selected, style, itemHeight, space, margins }) {
     // Child
     const child = innerItemRenderer({
         index,
         data,
         style,
         selected,
-        itemHeight
+        itemHeight,
+        space,
+        margins
     });
     let rowClass = `ScrollerListEx-Row${index % 2}`;
     if (selected)
@@ -80,19 +111,49 @@ export function ScrollerListEx(props) {
             : false;
         return selected;
     };
+    // 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
+        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) => {
+        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 = typeof itemSize === 'function'
-            ? itemSize(itemProps.index)
-            : itemSize;
+        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: itemSize, ...rest }));
+    return (React.createElement(ScrollerList, { className: Utils.mergeClasses('ScrollerListEx-Body', className, createGridStyle(alternatingColors, selectedColor)), itemKey: itemKey, itemRenderer: itemRenderer, itemSize: itemSizeLocal, ...rest }));
 }

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

@@ -2,7 +2,7 @@
 import { DataTypes } from '@etsoo/shared';
 import { ListChildComponentProps } from 'react-window';
 import { GridMethodRef } from '../GridMethodRef';
-import { ScrollerListExInnerItemRendererProps } from '../ScrollerListEx';
+import { ScrollerListExInnerItemRendererProps, ScrollerListExItemSize } from '../ScrollerListEx';
 import { DataGridPageProps } from './DataGridPageProps';
 /**
  * Response page props
@@ -23,7 +23,7 @@ export interface ResponsePageProps<T, F extends DataTypes.BasicTemplate> extends
     /**
      * Item size, a function indicates its a variable size list
      */
-    itemSize: ((index: number) => number) | number;
+    itemSize: ScrollerListExItemSize;
     /**
      * Methods
      */

package/package.json

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

package/src/mu/MUGlobal.ts

@@ -1,4 +1,5 @@
 import { NumberUtils } from '@etsoo/shared';
+import { Breakpoint, Theme } from '@mui/material';
 
 export class MUGlobal {
     /**
@@ -56,19 +57,42 @@ export class MUGlobal {
         return newObj;
     }
 
+    /**
+     * Reverse object number properties, like 5 to -5
+     * @param input Input object
+     * @returns Updated object
+     */
+    static reverse(input: {}) {
+        const newObj = { ...input };
+        Object.entries(newObj).forEach(([key, value]) => {
+            if (typeof value === 'number') {
+                Reflect.set(newObj, key, -value);
+            }
+        });
+        return newObj;
+    }
+
     /**
      * Update object number properties with adjustment
      * @param input Input object
-     * @param adjust Adjust value
+     * @param adjust Adjust value or new size object
      * @param field Specific field
      * @returns Updated object
      */
-    static increase(input: {}, adjust: number, field?: string) {
+    static increase(input: {}, adjust: number | {}, field?: string) {
         const newObj = { ...input };
         Object.entries(newObj).forEach(([key, value]) => {
             if (typeof value === 'number') {
-                if (field == null || field === key)
-                    Reflect.set(newObj, key, value + adjust);
+                if (field == null || field === key) {
+                    const adjustValue =
+                        typeof adjust === 'number'
+                            ? adjust
+                            : Reflect.get(adjust, key);
+                    if (adjustValue == null || typeof adjustValue !== 'number')
+                        return;
+
+                    Reflect.set(newObj, key, value + adjustValue);
+                }
             }
         });
         return newObj;
@@ -102,6 +126,28 @@ export class MUGlobal {
         return newObj;
     }
 
+    /**
+     * Get multple medias theme space
+     * @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 mediaRaw = theme.breakpoints.up(key as Breakpoint);
+                const mediaQuery = mediaRaw.substring(mediaRaw.indexOf('('));
+                if (window.matchMedia(mediaQuery).matches) {
+                    return parseInt(theme.spacing(value), 10);
+                }
+            }
+        }
+        return 0;
+    }
+
     /**
      * Update object number properties with theme
      * @param input Input object

package/src/mu/MobileListItemRenderer.tsx

@@ -2,7 +2,6 @@ import { Card, CardContent, CardHeader, LinearProgress } from '@mui/material';
 import React from 'react';
 import { ListItemReact } from '../components/ListItemReact';
 import { MoreFab } from './MoreFab';
-import { MUGlobal } from './MUGlobal';
 import { ScrollerListExInnerItemRendererProps } from './ScrollerListEx';
 
 function getActions(input: (ListItemReact | boolean)[]): ListItemReact[] {
@@ -23,8 +22,7 @@ function getActions(input: (ListItemReact | boolean)[]): ListItemReact[] {
  * @returns Component
  */
 export function MobileListItemRenderer<T>(
-    { data, itemHeight }: ScrollerListExInnerItemRendererProps<T>,
-    margin: {},
+    { data, itemHeight, margins }: ScrollerListExInnerItemRendererProps<T>,
     renderer: (
         data: T
     ) => [
@@ -40,18 +38,11 @@ export function MobileListItemRenderer<T>(
     // Elements
     const [title, subheader, actions, children] = renderer(data);
 
-    // Half
-    const halfMargin = MUGlobal.half(margin);
-
     return (
         <Card
             sx={{
-                height: (theme) =>
-                    MUGlobal.adjustWithTheme(itemHeight, margin, theme.spacing),
-                marginLeft: margin,
-                marginRight: margin,
-                marginTop: halfMargin,
-                marginBottom: halfMargin
+                height: itemHeight,
+                ...margins
             }}
         >
             <CardHeader
@@ -107,7 +98,13 @@ export function MobileListItemRenderer<T>(
                 subheader={subheader}
                 subheaderTypographyProps={{ variant: 'caption' }}
             />
-            <CardContent sx={{ paddingTop: 0 }}>{children}</CardContent>
+            <CardContent
+                sx={{
+                    paddingTop: 0
+                }}
+            >
+                {children}
+            </CardContent>
         </Card>
     );
 }

package/src/mu/ResponsibleContainer.tsx

@@ -21,7 +21,8 @@ import { MUGlobal } from './MUGlobal';
 import { PullToRefreshUI } from './PullToRefreshUI';
 import {
     ScrollerListEx,
-    ScrollerListExInnerItemRendererProps
+    ScrollerListExInnerItemRendererProps,
+    ScrollerListExItemSize
 } from './ScrollerListEx';
 import { SearchBar } from './SearchBar';
 
@@ -91,7 +92,7 @@ export interface ResponsibleContainerProps<
     /**
      * Item size, a function indicates its a variable size list
      */
-    itemSize: ((index: number) => number) | number;
+    itemSize: ScrollerListExItemSize;
 
     /**
      * Load data callback

package/src/mu/ScrollerListEx.tsx

@@ -1,8 +1,10 @@
 import { css } from '@emotion/css';
 import { DataTypes, Utils } from '@etsoo/shared';
+import { useTheme } from '@mui/material';
 import React from 'react';
 import { ListChildComponentProps } from 'react-window';
 import { ScrollerList, ScrollerListProps } from '../components/ScrollerList';
+import { MUGlobal } from './MUGlobal';
 
 // Scroll bar size
 const scrollbarSize = 16;
@@ -44,6 +46,37 @@ const createGridStyle = (
     });
 };
 
+// Default margin
+const defaultMargin = (margin: {}, isNarrow?: boolean) => {
+    const half = MUGlobal.half(margin);
+
+    if (isNarrow == null) {
+        const half = MUGlobal.half(margin);
+        return {
+            marginLeft: margin,
+            marginRight: margin,
+            marginTop: half,
+            marginBottom: half
+        };
+    }
+
+    if (isNarrow) {
+        return {
+            marginLeft: 0,
+            marginRight: 0,
+            marginTop: half,
+            marginBottom: half
+        };
+    }
+
+    return {
+        marginLeft: half,
+        marginRight: half,
+        marginTop: half,
+        marginBottom: half
+    };
+};
+
 /**
  * Extended ScrollerList inner item renderer props
  */
@@ -58,13 +91,34 @@ export interface ScrollerListExInnerItemRendererProps<T>
      * Item height
      */
     itemHeight: number;
+
+    /**
+     * Item space
+     */
+    space: number;
+
+    /**
+     * Default margins
+     */
+    margins: {};
 }
 
+/**
+ * Extended ScrollerList ItemSize type
+ * 1. Callback function
+ * 2. Static sets
+ * 3. Dynamic calculation
+ */
+export type ScrollerListExItemSize =
+    | ((index: number) => [number, number] | [number, number, {}])
+    | [number, number]
+    | [number, {}, boolean?];
+
 /**
  * Extended ScrollerList Props
  */
 export interface ScrollerListExProps<T>
-    extends Omit<ScrollerListProps<T>, 'itemRenderer'> {
+    extends Omit<ScrollerListProps<T>, 'itemRenderer' | 'itemSize'> {
     /**
      * Alternating colors for odd/even rows
      */
@@ -87,6 +141,11 @@ export interface ScrollerListExProps<T>
      */
     itemRenderer?: (props: ListChildComponentProps<T>) => React.ReactElement;
 
+    /**
+     * Item size, a function indicates its a variable size list
+     */
+    itemSize: ScrollerListExItemSize;
+
     /**
      * On items select change
      */
@@ -116,6 +175,16 @@ interface defaultItemRendererProps<T> extends ListChildComponentProps<T> {
      */
     itemHeight: number;
 
+    /**
+     * Item space
+     */
+    space: number;
+
+    /**
+     * Default margins
+     */
+    margins: {};
+
     /**
      * Item selected
      */
@@ -130,7 +199,9 @@ function defaultItemRenderer<T>({
     onMouseDown,
     selected,
     style,
-    itemHeight
+    itemHeight,
+    space,
+    margins
 }: defaultItemRendererProps<T>) {
     // Child
     const child = innerItemRenderer({
@@ -138,7 +209,9 @@ function defaultItemRenderer<T>({
         data,
         style,
         selected,
-        itemHeight
+        itemHeight,
+        space,
+        margins
     });
 
     let rowClass = `ScrollerListEx-Row${index % 2}`;
@@ -192,6 +265,41 @@ 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],
@@ -202,14 +310,15 @@ export function ScrollerListEx<T extends Record<string, unknown>>(
         itemKey = (index: number, data: T) =>
             DataTypes.getIdValue(data, idField) ?? index,
         itemRenderer = (itemProps) => {
-            const itemHeight =
-                typeof itemSize === 'function'
-                    ? itemSize(itemProps.index)
-                    : itemSize;
+            const [itemHeight, space, margins] = calculateItemSize(
+                itemProps.index
+            );
             return defaultItemRenderer({
                 itemHeight,
                 innerItemRenderer,
                 onMouseDown,
+                space,
+                margins,
                 selected: isSelected(itemProps.data),
                 ...itemProps
             });
@@ -229,7 +338,7 @@ export function ScrollerListEx<T extends Record<string, unknown>>(
             )}
             itemKey={itemKey}
             itemRenderer={itemRenderer}
-            itemSize={itemSize}
+            itemSize={itemSizeLocal}
             {...rest}
         />
     );

package/src/mu/pages/ResponsivePageProps.ts

@@ -1,7 +1,10 @@
 import { DataTypes } from '@etsoo/shared';
 import { ListChildComponentProps } from 'react-window';
 import { GridMethodRef } from '../GridMethodRef';
-import { ScrollerListExInnerItemRendererProps } from '../ScrollerListEx';
+import {
+    ScrollerListExInnerItemRendererProps,
+    ScrollerListExItemSize
+} from '../ScrollerListEx';
 import { DataGridPageProps } from './DataGridPageProps';
 
 /**
@@ -32,7 +35,7 @@ export interface ResponsePageProps<T, F extends DataTypes.BasicTemplate>
     /**
      * Item size, a function indicates its a variable size list
      */
-    itemSize: ((index: number) => number) | number;
+    itemSize: ScrollerListExItemSize;
 
     /**
      * Methods