@etsoo/react 1.4.33 → 1.4.37

package/lib/mu/MUGlobal.d.ts

@@ -40,14 +40,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

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;

package/lib/mu/MobileListItemRenderer.d.ts

@@ -1,3 +1,4 @@
+import { SxProps, Theme } from '@mui/material';
 import React from 'react';
 import { ListItemReact } from '../components/ListItemReact';
 import { ScrollerListExInnerItemRendererProps } from './ScrollerListEx';
@@ -8,7 +9,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 }: ScrollerListExInnerItemRendererProps<T>, margin: {} | [{}, boolean] | (() => SxProps<Theme>), renderer: (data: T) => [
     string,
     string | undefined,
     React.ReactNode | (ListItemReact | boolean)[],

package/lib/mu/MobileListItemRenderer.js

@@ -25,14 +25,42 @@ export function MobileListItemRenderer({ data, itemHeight }, margin, renderer) {
         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),
+    // 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: halfMargin,
-            marginBottom: halfMargin
+            marginTop: half,
+            marginBottom: half
+        };
+    };
+    return (React.createElement(Card, { sx: {
+            height: (theme) => MUGlobal.adjustWithTheme(itemHeight, margin, theme.spacing),
+            ...calculateMargin()
         } },
         React.createElement(CardHeader, { sx: { paddingBottom: 0.5 }, action: Array.isArray(actions) ? (React.createElement(MoreFab, { iconButton: true, size: "small", anchorOrigin: {
                     vertical: 'bottom',
@@ -66,5 +94,10 @@ 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,
+                '&:last-child': {
+                    paddingBottom: 0 // default 24px
+                }
+            } }, children)));
 }

package/lib/mu/ResponsibleContainer.d.ts

@@ -23,7 +23,7 @@ export interface ResponsibleContainerProps<T extends {}, F extends DataTypes.Bas
     /**
      * Container box SX (dataGrid determines the case)
      */
-    containerBoxSx?: (dataGrid?: boolean) => SxProps<Theme>;
+    containerBoxSx?: (paddings: {}, dataGrid?: boolean) => SxProps<Theme>;
     /**
      * Min width to show Datagrid
      */

package/lib/mu/ResponsibleContainer.js

@@ -9,13 +9,12 @@ import { MUGlobal } from './MUGlobal';
 import { PullToRefreshUI } from './PullToRefreshUI';
 import { ScrollerListEx } from './ScrollerListEx';
 import { SearchBar } from './SearchBar';
-function getDefaultSearchBoxSx(paddings) {
+function defaultContainerBoxSx(paddings, _dataGrid) {
     const half = MUGlobal.half(paddings);
     return {
-        paddingLeft: (theme) => theme.spacing(1),
-        paddingRight: (theme) => theme.spacing(1),
-        paddingTop: half,
-        marginBottom: half
+        '& .SearchBox': {
+            marginBottom: half
+        }
     };
 }
 /**
@@ -25,7 +24,7 @@ function getDefaultSearchBoxSx(paddings) {
  */
 export function ResponsibleContainer(props) {
     // Destruct
-    const { adjustHeight, columns, containerBoxSx, dataGridMinWidth = Math.max(576, DataGridExCalColumns(columns).total), elementReady, fields, fieldTemplate, height, loadData, mRef, paddings = MUGlobal.pagePaddings, pullToRefresh = true, sizeReadyMiliseconds = 0, ...rest } = props;
+    const { adjustHeight, columns, containerBoxSx = defaultContainerBoxSx, dataGridMinWidth = Math.max(576, DataGridExCalColumns(columns).total), elementReady, fields, fieldTemplate, height, loadData, mRef, paddings = MUGlobal.pagePaddings, pullToRefresh = true, sizeReadyMiliseconds = 0, ...rest } = props;
     // Labels
     const labels = Labels.CommonPage;
     // Refs
@@ -146,7 +145,7 @@ export function ResponsibleContainer(props) {
     // Layout
     return (React.createElement(Box, { sx: containerBoxSx == null
             ? undefined
-            : containerBoxSx(showDataGrid) },
+            : containerBoxSx(paddings, showDataGrid) },
         React.createElement(Stack, null,
             React.createElement(Box, { ref: dimensions[0][0], className: "SearchBox" }, searchBar),
             list),

package/lib/mu/TabBox.d.ts

@@ -21,6 +21,14 @@ export interface TabBoxPros extends BoxProps {
      * Container props
      */
     container?: Omit<TabsProps, 'value'>;
+    /**
+     * Default selected index
+     */
+    defaultIndex?: number;
+    /**
+     * Current index
+     */
+    index?: number;
     /**
      * Add a hidden input and its name
      */

package/lib/mu/TabBox.js

@@ -8,10 +8,15 @@ import React from 'react';
  */
 export function TabBox(props) {
     // Destruct
-    const { inputName, root, container = {}, tabs } = props;
+    const { index, inputName, root, container = {}, defaultIndex = 0, tabs } = props;
     const { onChange, ...rest } = container;
     // State
-    const [value, setValue] = React.useState(0);
+    const [value, setValue] = React.useState(defaultIndex);
+    React.useEffect(() => {
+        if (index == null)
+            return;
+        setValue(index);
+    }, [index]);
     // Layout
     return (React.createElement(React.Fragment, null,
         inputName && (React.createElement("input", { type: "hidden", name: inputName, value: value })),

package/lib/mu/pages/ResponsivePage.js

@@ -13,13 +13,14 @@ export function ResponsivePage(props) {
     const { pageProps = {}, ...rest } = props;
     (_a = pageProps.paddings) !== null && _a !== void 0 ? _a : (pageProps.paddings = MUGlobal.pagePaddings);
     const { paddings, fabColumnDirection, ...pageRest } = pageProps;
-    const half = MUGlobal.half(paddings);
     // State
     const [scrollContainer, setScrollContainer] = React.useState();
     const [direction, setDirection] = React.useState(fabColumnDirection);
     // Layout
     return (React.createElement(CommonPage, { ...pageRest, paddings: {}, scrollContainer: scrollContainer, fabColumnDirection: direction },
-        React.createElement(ResponsibleContainer, { paddings: paddings, containerBoxSx: (dataGrid) => {
+        React.createElement(ResponsibleContainer, { paddings: paddings, containerBoxSx: (paddings, _dataGrid) => {
+                // Half
+                const half = MUGlobal.half(paddings);
                 // .SearchBox keep the same to avoid flick when switching between DataGrid and List
                 return {
                     '& .SearchBox': {

package/package.json

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

package/src/mu/MUGlobal.ts

@@ -56,19 +56,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;

package/src/mu/MobileListItemRenderer.tsx

@@ -1,4 +1,11 @@
-import { Card, CardContent, CardHeader, LinearProgress } from '@mui/material';
+import {
+    Card,
+    CardContent,
+    CardHeader,
+    LinearProgress,
+    SxProps,
+    Theme
+} from '@mui/material';
 import React from 'react';
 import { ListItemReact } from '../components/ListItemReact';
 import { MoreFab } from './MoreFab';
@@ -24,7 +31,7 @@ function getActions(input: (ListItemReact | boolean)[]): ListItemReact[] {
  */
 export function MobileListItemRenderer<T>(
     { data, itemHeight }: ScrollerListExInnerItemRendererProps<T>,
-    margin: {},
+    margin: {} | [{}, boolean] | (() => SxProps<Theme>),
     renderer: (
         data: T
     ) => [
@@ -40,18 +47,45 @@ export function MobileListItemRenderer<T>(
     // Elements
     const [title, subheader, actions, children] = renderer(data);
 
-    // Half
-    const halfMargin = MUGlobal.half(margin);
+    // 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),
-                marginLeft: margin,
-                marginRight: margin,
-                marginTop: halfMargin,
-                marginBottom: halfMargin
+                ...calculateMargin()
             }}
         >
             <CardHeader
@@ -107,7 +141,16 @@ export function MobileListItemRenderer<T>(
                 subheader={subheader}
                 subheaderTypographyProps={{ variant: 'caption' }}
             />
-            <CardContent sx={{ paddingTop: 0 }}>{children}</CardContent>
+            <CardContent
+                sx={{
+                    paddingTop: 0,
+                    '&:last-child': {
+                        paddingBottom: 0 // default 24px
+                    }
+                }}
+            >
+                {children}
+            </CardContent>
         </Card>
     );
 }

package/src/mu/ResponsibleContainer.tsx

@@ -54,7 +54,7 @@ export interface ResponsibleContainerProps<
     /**
      * Container box SX (dataGrid determines the case)
      */
-    containerBoxSx?: (dataGrid?: boolean) => SxProps<Theme>;
+    containerBoxSx?: (paddings: {}, dataGrid?: boolean) => SxProps<Theme>;
 
     /**
      * Min width to show Datagrid
@@ -132,13 +132,15 @@ interface LocalRefs {
     mounted?: boolean;
 }
 
-function getDefaultSearchBoxSx(paddings: {}): SxProps<Theme> {
+function defaultContainerBoxSx(
+    paddings: {},
+    _dataGrid?: boolean
+): SxProps<Theme> {
     const half = MUGlobal.half(paddings);
     return {
-        paddingLeft: (theme) => theme.spacing(1),
-        paddingRight: (theme) => theme.spacing(1),
-        paddingTop: half,
-        marginBottom: half
+        '& .SearchBox': {
+            marginBottom: half
+        }
     };
 }
 
@@ -155,7 +157,7 @@ export function ResponsibleContainer<
     const {
         adjustHeight,
         columns,
-        containerBoxSx,
+        containerBoxSx = defaultContainerBoxSx,
         dataGridMinWidth = Math.max(576, DataGridExCalColumns(columns).total),
         elementReady,
         fields,
@@ -342,7 +344,7 @@ export function ResponsibleContainer<
             sx={
                 containerBoxSx == null
                     ? undefined
-                    : containerBoxSx(showDataGrid)
+                    : containerBoxSx(paddings, showDataGrid)
             }
         >
             <Stack>

package/src/mu/TabBox.tsx

@@ -26,6 +26,16 @@ export interface TabBoxPros extends BoxProps {
      */
     container?: Omit<TabsProps, 'value'>;
 
+    /**
+     * Default selected index
+     */
+    defaultIndex?: number;
+
+    /**
+     * Current index
+     */
+    index?: number;
+
     /**
      * Add a hidden input and its name
      */
@@ -49,11 +59,23 @@ export interface TabBoxPros extends BoxProps {
  */
 export function TabBox(props: TabBoxPros) {
     // Destruct
-    const { inputName, root, container = {}, tabs } = props;
+    const {
+        index,
+        inputName,
+        root,
+        container = {},
+        defaultIndex = 0,
+        tabs
+    } = props;
     const { onChange, ...rest } = container;
 
     // State
-    const [value, setValue] = React.useState(0);
+    const [value, setValue] = React.useState(defaultIndex);
+
+    React.useEffect(() => {
+        if (index == null) return;
+        setValue(index);
+    }, [index]);
 
     // Layout
     return (

package/src/mu/pages/ResponsivePage.tsx

@@ -20,8 +20,6 @@ export function ResponsivePage<
     pageProps.paddings ??= MUGlobal.pagePaddings;
     const { paddings, fabColumnDirection, ...pageRest } = pageProps;
 
-    const half = MUGlobal.half(paddings);
-
     // State
     const [scrollContainer, setScrollContainer] = React.useState<HTMLElement>();
     const [direction, setDirection] = React.useState(fabColumnDirection);
@@ -36,7 +34,10 @@ export function ResponsivePage<
         >
             <ResponsibleContainer<T, F>
                 paddings={paddings}
-                containerBoxSx={(dataGrid) => {
+                containerBoxSx={(paddings, _dataGrid) => {
+                    // Half
+                    const half = MUGlobal.half(paddings);
+
                     // .SearchBox keep the same to avoid flick when switching between DataGrid and List
                     return {
                         '& .SearchBox': {