@etsoo/react 1.4.21 → 1.4.25

package/lib/mu/pages/ResponsivePage.js

@@ -1,12 +1,6 @@
-import { Box, Stack } from '@mui/material';
 import React from 'react';
-import { GridDataGet } from '../../components/GridLoader';
-import useCombinedRefs from '../../uses/useCombinedRefs';
-import { useDimensions } from '../../uses/useDimensions';
-import { DataGridEx, DataGridExCalColumns } from '../DataGridEx';
 import { MUGlobal } from '../MUGlobal';
-import { ScrollerListEx } from '../ScrollerListEx';
-import { SearchBar } from '../SearchBar';
+import { ResponsibleContainer } from '../ResponsibleContainer';
 import { CommonPage } from './CommonPage';
 /**
  * Fixed height list page
@@ -14,119 +8,26 @@ import { CommonPage } from './CommonPage';
  * @returns Component
  */
 export function ResponsivePage(props) {
-    var _a, _b;
+    var _a;
     // Destruct
-    const { adjustHeight, columns, dataGridMinWidth = DataGridExCalColumns(columns).total, fields, fieldTemplate, height, loadData, innerItemRenderer, itemSize, mRef, sizeReadyMiliseconds = 0, pageProps = {}, ...rest } = props;
+    const { pageProps = {}, ...rest } = props;
     (_a = pageProps.paddings) !== null && _a !== void 0 ? _a : (pageProps.paddings = MUGlobal.pagePaddings);
-    // States
-    const [states, setStates] = React.useReducer((currentState, newState) => {
-        return { ...currentState, ...newState };
-    }, {
-        height
-    });
-    const localLoadData = (props) => {
-        const data = GridDataGet(props, fieldTemplate);
-        return loadData(data);
-    };
-    const refs = useCombinedRefs(mRef, (ref) => {
-        if (ref == null)
-            return;
-        states.ref = ref;
-        // setStates({ ref });
-    });
-    // On submit callback
-    const onSubmit = (data, _reset) => {
-        setStates({ data });
-    };
-    // Watch container
-    const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
-    const rect = dimensions[0][2];
-    const showDataGrid = ((_b = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _b !== void 0 ? _b : 0) >= dataGridMinWidth;
-    React.useEffect(() => {
-        if (rect != null && rect.height > 50 && height == null) {
-            let gridHeight = window.innerHeight - Math.round(rect.top + rect.height + 1);
-            const style = window.getComputedStyle(dimensions[0][1]);
-            const boxPadding = parseFloat(style.paddingLeft);
-            if (!isNaN(boxPadding))
-                gridHeight -= 2 * boxPadding;
-            if (adjustHeight != null) {
-                gridHeight -= adjustHeight(gridHeight);
-            }
-            if (gridHeight !== states.height)
-                setStates({ height: gridHeight });
-        }
-    }, [rect]);
     const { paddings, ...pageRest } = pageProps;
-    const list = React.useMemo(() => {
-        const gridHeight = states.height;
-        if (gridHeight == null)
-            return;
-        // Show in a row when under DataGrid
-        pageProps.fabColumnDirection = !showDataGrid;
-        if (showDataGrid) {
-            // Delete
-            delete rest.itemRenderer;
-            return (React.createElement(Box, { sx: {
-                    padding: paddings
-                } },
-                React.createElement(DataGridEx, { autoLoad: false, height: gridHeight, loadData: localLoadData, mRef: refs, columns: columns, outerRef: (element) => {
-                        if (element != null)
-                            setStates({ element });
-                    }, ...rest })));
-        }
-        // Delete
-        delete rest.checkable;
-        delete rest.borderRowsCount;
-        delete rest.bottomHeight;
-        delete rest.footerItemRenderer;
-        delete rest.headerHeight;
-        delete rest.hideFooter;
-        delete rest.hoverColor;
-        delete rest.selectable;
-        // Half
-        const halfPadding = MUGlobal.half(paddings);
-        const style = window.getComputedStyle(dimensions[0][1]);
-        const boxPadding = parseFloat(style.paddingLeft);
-        return (React.createElement(Box, { sx: {
-                height: gridHeight + (isNaN(boxPadding) ? 0 : boxPadding),
-                paddingTop: halfPadding,
-                paddingBottom: halfPadding
-            } },
-            React.createElement(ScrollerListEx, { autoLoad: false, height: gridHeight, innerItemRenderer: innerItemRenderer, itemSize: itemSize, loadData: localLoadData, mRef: refs, oRef: (element) => {
-                    if (element != null)
-                        setStates({ element });
-                }, ...rest })));
-    }, [states.height, showDataGrid, localLoadData]);
-    const sizeRef = React.useRef();
-    const { ref, data } = states;
-    React.useEffect(() => {
-        if (ref == null || data == null || rect == null)
-            return;
-        // Resize without reset
-        if (sizeRef.current == null) {
-            sizeRef.current = [rect.width, rect.height];
-        }
-        else if (sizeRef.current[0] !== rect.width ||
-            sizeRef.current[1] !== rect.height) {
-            sizeRef.current = [rect.width, rect.height];
-            return;
-        }
-        ref.reset({ data });
-    });
-    // Pull container id
-    const pullContainer = states.element
-        ? showDataGrid
-            ? '.DataGridEx-Body'
-            : '.ScrollerListEx-Body'
-        : undefined;
+    const halfPadding = MUGlobal.half(paddings);
     // Layout
-    return (React.createElement(CommonPage, { ...pageRest, paddings: {}, scrollContainer: states.element, pullContainer: pullContainer },
-        React.createElement(Stack, null,
-            React.createElement(Box, { ref: dimensions[0][0], sx: {
-                    paddingLeft: paddings,
-                    paddingTop: MUGlobal.increase(paddings, 0.5, 'xs'),
-                    paddingRight: paddings
-                } },
-                React.createElement(SearchBar, { fields: fields, onSubmit: onSubmit })),
-            list)));
+    return (React.createElement(CommonPage, { ...pageRest, paddings: {} },
+        React.createElement(ResponsibleContainer, { paddings: paddings, listBoxSx: (dataGrid, height) => {
+                if (dataGrid) {
+                    return {
+                        padding: paddings
+                    };
+                }
+                else {
+                    return {
+                        height,
+                        paddingTop: halfPadding,
+                        paddingBottom: halfPadding
+                    };
+                }
+            }, ...rest })));
 }

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

@@ -28,4 +28,8 @@ export interface ResponsePageProps<T, F extends DataTypes.BasicTemplate> extends
      * Methods
      */
     mRef?: React.MutableRefObject<GridMethodRef | undefined>;
+    /**
+     * Pull to refresh data
+     */
+    pullToRefresh?: boolean;
 }

package/lib/mu/pages/TablePage.js

@@ -6,7 +6,7 @@ import { useDimensions } from '../../uses/useDimensions';
 import { MUGlobal } from '../MUGlobal';
 import { SearchBar } from '../SearchBar';
 import { TableEx, TableExMinWidth } from '../TableEx';
-import { CommonPage, CommonPagePullContainer, CommonPageScrollContainer } from './CommonPage';
+import { CommonPage, CommonPageScrollContainer } from './CommonPage';
 /**
  * Table page
  * @param props Props
@@ -60,7 +60,7 @@ export function TablePage(props) {
         }
     }, [rect]);
     // Layout
-    return (React.createElement(CommonPage, { ...pageProps, scrollContainer: CommonPageScrollContainer, pullContainer: CommonPagePullContainer },
+    return (React.createElement(CommonPage, { ...pageProps, scrollContainer: CommonPageScrollContainer },
         React.createElement(Stack, null,
             React.createElement(Box, { ref: dimensions[0][0], sx: {
                     paddingBottom: pageProps.paddings

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.4.21",
+    "version": "1.4.25",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -50,11 +50,11 @@
         "@emotion/react": "^11.7.1",
         "@emotion/style": "^0.8.0",
         "@emotion/styled": "^11.6.0",
-        "@etsoo/appscript": "^1.2.21",
+        "@etsoo/appscript": "^1.2.22",
         "@etsoo/notificationbase": "^1.1.0",
         "@etsoo/shared": "^1.1.3",
         "@mui/icons-material": "^5.2.5",
-        "@mui/material": "^5.2.7",
+        "@mui/material": "^5.2.8",
         "@reach/router": "^1.3.4",
         "@types/pica": "^5.1.3",
         "@types/pulltorefreshjs": "^0.1.5",
@@ -76,15 +76,15 @@
         "react-window": "^1.8.6"
     },
     "devDependencies": {
-        "@babel/cli": "^7.16.7",
+        "@babel/cli": "^7.16.8",
         "@babel/core": "^7.16.7",
-        "@babel/plugin-transform-runtime": "^7.16.7",
-        "@babel/preset-env": "^7.16.7",
-        "@babel/runtime-corejs3": "^7.16.7",
+        "@babel/plugin-transform-runtime": "^7.16.8",
+        "@babel/preset-env": "^7.16.8",
+        "@babel/runtime-corejs3": "^7.16.8",
         "@types/jest": "^27.4.0",
         "@types/react-test-renderer": "^17.0.1",
-        "@typescript-eslint/eslint-plugin": "^5.9.0",
-        "@typescript-eslint/parser": "^5.9.0",
+        "@typescript-eslint/eslint-plugin": "^5.9.1",
+        "@typescript-eslint/parser": "^5.9.1",
         "eslint": "^8.6.0",
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-plugin-import": "^2.25.4",

package/src/components/ScrollerGrid.tsx

@@ -289,6 +289,9 @@ export const ScrollerGrid = <T extends Record<string, unknown>>(
             ...add
         };
         Object.assign(state, resetState);
+
+        // Reset items
+        setRows([]);
     };
 
     React.useImperativeHandle(

package/src/components/ScrollerList.tsx

@@ -248,6 +248,9 @@ export const ScrollerList = <T extends Record<string, any>>(
                         ...add
                     };
                     Object.assign(state, resetState);
+
+                    // Reset
+                    setRows([]);
                 },
 
                 scrollTo(scrollOffset: number): void {

package/src/mu/DataGridEx.tsx

@@ -241,7 +241,7 @@ export function DataGridEx<T extends Record<string, any>>(
                         sortLabel = headerCellRenderer({
                             cellProps,
                             column,
-                            columnIndex: index,
+                            columnIndex: checkable ? index - 1 : index, // Ignore the checkbox case,
                             states
                         });
                     } else if (sortable && field != null) {
@@ -306,7 +306,7 @@ export function DataGridEx<T extends Record<string, any>>(
                     const cell = footerItemRenderer
                         ? footerItemRenderer(rows, {
                               column,
-                              index,
+                              index: checkable ? index - 1 : index, // Ignore the checkbox case
                               states,
                               cellProps,
                               checkable

package/src/mu/DataGridRenderers.tsx

@@ -112,24 +112,27 @@ export namespace DataGridRenderers {
 
     /**
      * Default footer item renderer
-     * @param param Props
+     * @param rows Rows
+     * @param props Renderer props
+     * @param location Renderer location (column index)
      * @returns Component
      */
     export function defaultFooterItemRenderer<T>(
         _rows: T[],
-        { index, states, checkable }: DataGridExFooterItemRendererProps<T>
+        { index, states, checkable }: DataGridExFooterItemRendererProps<T>,
+        location: number = 0
     ) {
         const { selectedItems, loadedItems, hasNextPage } = states;
 
-        if (checkable && index === 1) {
-            return [
-                selectedItems.length,
-                loadedItems.toLocaleString() + (hasNextPage ? '+' : '')
-            ].join(' / ');
-        }
-
-        if (!checkable && index === 0) {
-            return loadedItems.toLocaleString() + (hasNextPage ? '+' : '');
+        if (index === location) {
+            if (checkable) {
+                return [
+                    selectedItems.length,
+                    loadedItems.toLocaleString() + (hasNextPage ? '+' : '')
+                ].join(' / ');
+            } else {
+                return loadedItems.toLocaleString() + (hasNextPage ? '+' : '');
+            }
         }
 
         return undefined;

package/src/mu/ResponsibleContainer.tsx

@@ -17,6 +17,7 @@ import {
     DataGridExProps
 } from './DataGridEx';
 import { GridMethodRef } from './GridMethodRef';
+import { MUGlobal } from './MUGlobal';
 import { PullToRefreshUI } from './PullToRefreshUI';
 import {
     ScrollerListEx,
@@ -90,7 +91,7 @@ export interface ResponsibleContainerProps<
     /**
      * Listbox SX (dataGrid determines the case)
      */
-    listBoxSx?: (dataGrid: boolean) => SxProps<Theme>;
+    listBoxSx?: (dataGrid: boolean, height: number) => SxProps<Theme>;
 
     /**
      * Load data callback
@@ -104,6 +105,11 @@ export interface ResponsibleContainerProps<
      */
     mRef?: React.MutableRefObject<GridMethodRef | undefined>;
 
+    /**
+     * Paddings
+     */
+    paddings?: {};
+
     /**
      * Pull to refresh data
      */
@@ -126,6 +132,16 @@ interface LocalRefs {
     mounted?: boolean;
 }
 
+function getDefaultSearchBoxSx(paddings: {}): SxProps<Theme> {
+    const half = MUGlobal.half(paddings);
+    return {
+        paddingLeft: half,
+        paddingRight: half,
+        paddingTop: half,
+        marginBottom: half
+    };
+}
+
 /**
  * Responsible container
  * @param props Props
@@ -146,8 +162,9 @@ export function ResponsibleContainer<
         listBoxSx,
         loadData,
         mRef,
+        paddings = MUGlobal.pagePaddings,
         pullToRefresh = true,
-        searchBoxSx,
+        searchBoxSx = getDefaultSearchBoxSx(paddings),
         sizeReadyMiliseconds = 0,
         ...rest
     } = props;
@@ -157,16 +174,17 @@ export function ResponsibleContainer<
 
     // Refs
     const refs = React.useRef<LocalRefs>({});
+    const state = refs.current;
 
     const mRefs = useCombinedRefs(mRef, (ref: GridMethodRef) => {
         if (ref == null) return;
-        refs.current.ref = ref;
+        state.ref = ref;
     });
 
     // Update mounted state
     React.useEffect(() => {
         return () => {
-            refs.current.mounted = false;
+            state.mounted = false;
         };
     }, []);
 
@@ -175,15 +193,15 @@ export function ResponsibleContainer<
 
     // Load data
     const localLoadData = (props: GridLoadDataProps) => {
-        refs.current.mounted = true;
+        state.mounted = true;
         const data = GridDataGet(props, fieldTemplate);
         return loadData(data);
     };
 
     // On submit callback
     const onSubmit = (data: FormData, _reset: boolean) => {
-        if (data == null || rect == null || refs.current.ref == null) return;
-        refs.current.ref.reset({ data });
+        if (data == null || state.ref == null) return;
+        state.ref.reset({ data });
     };
 
     // Watch container
@@ -196,19 +214,19 @@ export function ResponsibleContainer<
             if (rect == null) return true;
 
             // Last rect
-            const lastRect = refs.current.rect;
+            const lastRect = state.rect;
 
             // 32 = scroll bar width
             if (
                 lastRect != null &&
-                refs.current.mounted !== true &&
+                state.mounted !== true &&
                 Math.abs(rect.width - lastRect.width) <= 32 &&
                 Math.abs(rect.height - lastRect.height) <= 32
             )
                 return true;
 
             // Hold the new rect
-            refs.current.rect = rect;
+            state.rect = rect;
 
             return false;
         }
@@ -220,7 +238,7 @@ export function ResponsibleContainer<
     // Create list
     const [list, showDataGrid] = (() => {
         // No layout
-        if (rect == null) return [null, false];
+        if (rect == null) return [null, undefined];
 
         // Width
         const width = rect.width;
@@ -234,12 +252,11 @@ export function ResponsibleContainer<
             heightLocal = height;
         } else {
             // Auto calculation
-            heightLocal =
-                window.innerHeight - Math.round(rect.top + rect.height + 1);
+            heightLocal = window.innerHeight - Math.round(rect.bottom + 1);
 
             const style = window.getComputedStyle(dimensions[0][1]!);
-            const boxPadding = parseFloat(style.paddingLeft);
-            if (!isNaN(boxPadding)) heightLocal -= 2 * boxPadding;
+            const boxMargin = parseFloat(style.marginBottom);
+            if (!isNaN(boxMargin)) heightLocal -= 3 * boxMargin; // 1 - Box, 2 - Page bottom
 
             if (adjustHeight != null) {
                 heightLocal -= adjustHeight(heightLocal);
@@ -251,7 +268,13 @@ export function ResponsibleContainer<
             delete rest.itemRenderer;
 
             return [
-                <Box sx={listBoxSx == null ? undefined : listBoxSx(true)}>
+                <Box
+                    sx={
+                        listBoxSx == null
+                            ? undefined
+                            : listBoxSx(true, heightLocal)
+                    }
+                >
                     <DataGridEx<T>
                         autoLoad={!hasFields}
                         height={heightLocal}
@@ -277,7 +300,13 @@ export function ResponsibleContainer<
         delete rest.selectable;
 
         return [
-            <Box sx={listBoxSx == null ? undefined : listBoxSx(false)}>
+            <Box
+                sx={
+                    listBoxSx == null
+                        ? undefined
+                        : listBoxSx(false, heightLocal)
+                }
+            >
                 <ScrollerListEx<T>
                     autoLoad={!hasFields}
                     width={rect.width}
@@ -291,21 +320,31 @@ export function ResponsibleContainer<
         ];
     })();
 
+    const searchBar = React.useMemo(() => {
+        if (!hasFields || showDataGrid == null) return;
+        return (
+            <SearchBar
+                fields={fields}
+                onSubmit={onSubmit}
+                className={`searchBar${showDataGrid ? 'Grid' : 'List'}`}
+            />
+        );
+    }, [showDataGrid, hasFields]);
+
     // Pull container
-    const pullContainer = list
-        ? showDataGrid
+    const pullContainer =
+        showDataGrid == null
+            ? undefined
+            : showDataGrid
             ? '.DataGridEx-Body'
-            : '.ScrollerListEx-Body'
-        : undefined;
+            : '.ScrollerListEx-Body';
 
     // Layout
     return (
         <React.Fragment>
             <Stack>
                 <Box ref={dimensions[0][0]} sx={searchBoxSx}>
-                    {hasFields && (
-                        <SearchBar fields={fields} onSubmit={onSubmit} />
-                    )}
+                    {searchBar}
                 </Box>
                 {list}
             </Stack>
@@ -316,7 +355,7 @@ export function ResponsibleContainer<
                     instructionsPullToRefresh={labels.pullToRefresh}
                     instructionsReleaseToRefresh={labels.releaseToRefresh}
                     instructionsRefreshing={labels.refreshing}
-                    onRefresh={() => refs.current.ref?.reset()}
+                    onRefresh={() => state.ref?.reset()}
                     shouldPullToRefresh={() => {
                         const container = document.querySelector(pullContainer);
                         return !container?.scrollTop;

package/src/mu/SearchBar.tsx

@@ -99,18 +99,18 @@ export function SearchBar(props: SearchBarProps) {
     // Drawer open / close
     const [open, updateOpen] = React.useState(false);
 
-    // Forms
-    const [forms] = React.useState<{
+    // State
+    const state = React.useRef<{
         form?: HTMLFormElement;
         moreForm?: HTMLFormElement;
         submitSeed?: number;
         lastMaxWidth?: number;
-    }>({});
+    }>({}).current;
 
     // Watch container
     const { dimensions } = useDimensions(1, (target, rect) => {
         // Same logic from resetButtonRef
-        if (rect.width === forms.lastMaxWidth) return false;
+        if (rect.width === state.lastMaxWidth) return false;
 
         // Len
         const len = target.children.length;
@@ -143,10 +143,10 @@ export function SearchBar(props: SearchBarProps) {
 
         // Container width
         let maxWidth = containerRect.width;
-        if (maxWidth === forms.lastMaxWidth) {
+        if (maxWidth === state.lastMaxWidth) {
             return;
         }
-        forms.lastMaxWidth = maxWidth;
+        state.lastMaxWidth = maxWidth;
 
         // More button
         const buttonMore = resetButton.previousElementSibling!;
@@ -241,7 +241,7 @@ export function SearchBar(props: SearchBarProps) {
     const handleForm = (event: React.FormEvent<HTMLFormElement>) => {
         if (event.nativeEvent.cancelable && !event.nativeEvent.composed) return;
 
-        if (forms.form == null) forms.form = event.currentTarget;
+        if (state.form == null) state.form = event.currentTarget;
 
         handleSubmit();
     };
@@ -255,7 +255,7 @@ export function SearchBar(props: SearchBarProps) {
     const moreFormChange = (event: React.FormEvent<HTMLFormElement>) => {
         if (event.nativeEvent.cancelable && !event.nativeEvent.composed) return;
 
-        if (forms.moreForm == null) forms.moreForm = event.currentTarget;
+        if (state.moreForm == null) state.moreForm = event.currentTarget;
 
         handleSubmit();
     };
@@ -263,32 +263,32 @@ export function SearchBar(props: SearchBarProps) {
     // Reset
     const handleReset = () => {
         // Clear form values
-        if (forms.form != null) resetForm(forms.form);
-        if (forms.moreForm != null) resetForm(forms.moreForm);
+        if (state.form != null) resetForm(state.form);
+        if (state.moreForm != null) resetForm(state.moreForm);
 
         // Resubmit
         handleSubmitInstant(true);
     };
 
     // Submit
-    const handleSubmit = () => {
-        if (forms.submitSeed != null) {
-            clearTimeout(forms.submitSeed);
+    const handleSubmit = (delay = 480) => {
+        if (state.submitSeed != null) {
+            clearTimeout(state.submitSeed);
         }
 
         // Delay the change
-        forms.submitSeed = window.setTimeout(handleSubmitInstant, 480);
+        state.submitSeed = window.setTimeout(handleSubmitInstant, delay);
     };
 
     // Submit at once
     const handleSubmitInstant = (reset: boolean = false) => {
         // Reset timeout
-        forms.submitSeed = undefined;
+        state.submitSeed = undefined;
 
         // Prepare data
-        const data = new FormData(forms.form);
-        if (forms.moreForm != null) {
-            DomUtils.mergeFormData(data, new FormData(forms.moreForm));
+        const data = new FormData(state.form);
+        if (state.moreForm != null) {
+            DomUtils.mergeFormData(data, new FormData(state.moreForm));
         }
 
         onSubmit(data, reset);
@@ -296,15 +296,17 @@ export function SearchBar(props: SearchBarProps) {
 
     // First loading
     React.useEffect(() => {
-        // Delayed way
-        handleSubmit();
-
         return () => {
             // Clear the seeds
-            if (forms.submitSeed != null) clearTimeout(forms.submitSeed);
+            if (state.submitSeed != null) clearTimeout(state.submitSeed);
         };
     }, []);
 
+    React.useEffect(() => {
+        // Delayed way
+        handleSubmit(100);
+    }, [className]);
+
     // Layout
     return (
         <React.Fragment>
@@ -313,7 +315,7 @@ export function SearchBar(props: SearchBarProps) {
                 className={className}
                 onChange={handleForm}
                 ref={(form) => {
-                    if (form) forms.form = form;
+                    if (form) state.form = form;
                 }}
             >
                 <Stack
@@ -374,7 +376,7 @@ export function SearchBar(props: SearchBarProps) {
                     <form
                         onChange={moreFormChange}
                         ref={(form) => {
-                            if (form) forms.moreForm = form;
+                            if (form) state.moreForm = form;
                         }}
                     >
                         <Stack