@etsoo/react 1.4.38 → 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
@@ -62,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

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

@@ -1,4 +1,3 @@
-import { SxProps, Theme } from '@mui/material';
 import React from 'react';
 import { ListItemReact } from '../components/ListItemReact';
 import { ScrollerListExInnerItemRendererProps } from './ScrollerListEx';
@@ -9,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: {} | [{}, boolean] | (() => SxProps<Theme>), 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,48 +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);
-    // Calculate margin
-    const calculateMargin = () => {
-        if (typeof margin === 'function')
-            return margin();
-        if (Array.isArray(margin)) {
-            const marginValue = margin[0];
-            const isNarrow = margin[1];
-            const half = MUGlobal.half(marginValue);
-            if (isNarrow) {
-                return {
-                    marginLeft: 0,
-                    marginRight: 0,
-                    marginTop: half,
-                    marginBottom: half
-                };
-            }
-            else {
-                return {
-                    marginLeft: half,
-                    marginRight: half,
-                    marginTop: half,
-                    marginBottom: half
-                };
-            }
-        }
-        const half = MUGlobal.half(margin);
-        return {
-            marginLeft: margin,
-            marginRight: margin,
-            marginTop: half,
-            marginBottom: half
-        };
-    };
     return (React.createElement(Card, { sx: {
-            height: (theme) => MUGlobal.adjustWithTheme(itemHeight, margin, theme.spacing),
-            ...calculateMargin()
+            height: itemHeight,
+            ...margins
         } },
         React.createElement(CardHeader, { sx: { paddingBottom: 0.5 }, action: Array.isArray(actions) ? (React.createElement(MoreFab, { iconButton: true, size: "small", anchorOrigin: {
                     vertical: 'bottom',

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.38",
+    "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 {
     /**
@@ -125,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

@@ -1,15 +1,7 @@
-import {
-    Card,
-    CardContent,
-    CardHeader,
-    LinearProgress,
-    SxProps,
-    Theme
-} from '@mui/material';
+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[] {
@@ -30,8 +22,7 @@ function getActions(input: (ListItemReact | boolean)[]): ListItemReact[] {
  * @returns Component
  */
 export function MobileListItemRenderer<T>(
-    { data, itemHeight }: ScrollerListExInnerItemRendererProps<T>,
-    margin: {} | [{}, boolean] | (() => SxProps<Theme>),
+    { data, itemHeight, margins }: ScrollerListExInnerItemRendererProps<T>,
     renderer: (
         data: T
     ) => [
@@ -47,45 +38,11 @@ export function MobileListItemRenderer<T>(
     // Elements
     const [title, subheader, actions, children] = renderer(data);
 
-    // Calculate margin
-    const calculateMargin = () => {
-        if (typeof margin === 'function') return margin();
-        if (Array.isArray(margin)) {
-            const marginValue = margin[0];
-            const isNarrow = margin[1];
-            const half = MUGlobal.half(marginValue);
-            if (isNarrow) {
-                return {
-                    marginLeft: 0,
-                    marginRight: 0,
-                    marginTop: half,
-                    marginBottom: half
-                };
-            } else {
-                return {
-                    marginLeft: half,
-                    marginRight: half,
-                    marginTop: half,
-                    marginBottom: half
-                };
-            }
-        }
-
-        const half = MUGlobal.half(margin);
-        return {
-            marginLeft: margin,
-            marginRight: margin,
-            marginTop: half,
-            marginBottom: half
-        };
-    };
-
     return (
         <Card
             sx={{
-                height: (theme) =>
-                    MUGlobal.adjustWithTheme(itemHeight, margin, theme.spacing),
-                ...calculateMargin()
+                height: itemHeight,
+                ...margins
             }}
         >
             <CardHeader

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