@etsoo/react 1.4.21 → 1.4.25

package/lib/components/ScrollerGrid.js

@@ -108,6 +108,8 @@ export const ScrollerGrid = (props) => {
             ...add
         };
         Object.assign(state, resetState);
+        // Reset items
+        setRows([]);
     };
     React.useImperativeHandle(mRef, () => ({
         scrollTo(params) {

package/lib/components/ScrollerList.js

@@ -120,6 +120,8 @@ export const ScrollerList = (props) => {
                     ...add
                 };
                 Object.assign(state, resetState);
+                // Reset
+                setRows([]);
             },
             scrollTo(scrollOffset) {
                 refMethods.scrollTo(scrollOffset);

package/lib/mu/DataGridEx.js

@@ -86,7 +86,7 @@ export function DataGridEx(props) {
                 sortLabel = headerCellRenderer({
                     cellProps,
                     column,
-                    columnIndex: index,
+                    columnIndex: checkable ? index - 1 : index,
                     states
                 });
             }
@@ -115,7 +115,7 @@ export function DataGridEx(props) {
             const cell = footerItemRenderer
                 ? footerItemRenderer(rows, {
                     column,
-                    index,
+                    index: checkable ? index - 1 : index,
                     states,
                     cellProps,
                     checkable

package/lib/mu/DataGridRenderers.d.ts

@@ -13,8 +13,10 @@ export declare namespace DataGridRenderers {
     function defaultCellRenderer<T extends Record<string, any>>({ cellProps, data, field, formattedValue, columnIndex, type, renderProps }: GridCellRendererProps<T>): React.ReactNode;
     /**
      * Default footer item renderer
-     * @param param Props
+     * @param rows Rows
+     * @param props Renderer props
+     * @param location Renderer location (column index)
      * @returns Component
      */
-    function defaultFooterItemRenderer<T>(_rows: T[], { index, states, checkable }: DataGridExFooterItemRendererProps<T>): string | undefined;
+    function defaultFooterItemRenderer<T>(_rows: T[], { index, states, checkable }: DataGridExFooterItemRendererProps<T>, location?: number): string | undefined;
 }

package/lib/mu/DataGridRenderers.js

@@ -75,19 +75,23 @@ export var DataGridRenderers;
     DataGridRenderers.defaultCellRenderer = defaultCellRenderer;
     /**
      * Default footer item renderer
-     * @param param Props
+     * @param rows Rows
+     * @param props Renderer props
+     * @param location Renderer location (column index)
      * @returns Component
      */
-    function defaultFooterItemRenderer(_rows, { index, states, checkable }) {
+    function defaultFooterItemRenderer(_rows, { index, states, checkable }, location = 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/lib/mu/ResponsibleContainer.d.ts

@@ -51,7 +51,7 @@ export interface ResponsibleContainerProps<T extends {}, F extends DataTypes.Bas
     /**
      * Listbox SX (dataGrid determines the case)
      */
-    listBoxSx?: (dataGrid: boolean) => SxProps<Theme>;
+    listBoxSx?: (dataGrid: boolean, height: number) => SxProps<Theme>;
     /**
      * Load data callback
      */
@@ -60,6 +60,10 @@ export interface ResponsibleContainerProps<T extends {}, F extends DataTypes.Bas
      * Methods
      */
     mRef?: React.MutableRefObject<GridMethodRef | undefined>;
+    /**
+     * Paddings
+     */
+    paddings?: {};
     /**
      * Pull to refresh data
      */

package/lib/mu/ResponsibleContainer.js

@@ -5,9 +5,19 @@ 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 { PullToRefreshUI } from './PullToRefreshUI';
 import { ScrollerListEx } from './ScrollerListEx';
 import { SearchBar } from './SearchBar';
+function getDefaultSearchBoxSx(paddings) {
+    const half = MUGlobal.half(paddings);
+    return {
+        paddingLeft: half,
+        paddingRight: half,
+        paddingTop: half,
+        marginBottom: half
+    };
+}
 /**
  * Responsible container
  * @param props Props
@@ -15,35 +25,36 @@ import { SearchBar } from './SearchBar';
  */
 export function ResponsibleContainer(props) {
     // Destruct
-    const { adjustHeight, columns, dataGridMinWidth = DataGridExCalColumns(columns).total, fields, fieldTemplate, height, listBoxSx, loadData, mRef, pullToRefresh = true, searchBoxSx, sizeReadyMiliseconds = 0, ...rest } = props;
+    const { adjustHeight, columns, dataGridMinWidth = DataGridExCalColumns(columns).total, fields, fieldTemplate, height, listBoxSx, loadData, mRef, paddings = MUGlobal.pagePaddings, pullToRefresh = true, searchBoxSx = getDefaultSearchBoxSx(paddings), sizeReadyMiliseconds = 0, ...rest } = props;
     // Labels
     const labels = Labels.CommonPage;
     // Refs
     const refs = React.useRef({});
+    const state = refs.current;
     const mRefs = useCombinedRefs(mRef, (ref) => {
         if (ref == null)
             return;
-        refs.current.ref = ref;
+        state.ref = ref;
     });
     // Update mounted state
     React.useEffect(() => {
         return () => {
-            refs.current.mounted = false;
+            state.mounted = false;
         };
     }, []);
     // Has fields
     const hasFields = fields != null && fields.length > 0;
     // Load data
     const localLoadData = (props) => {
-        refs.current.mounted = true;
+        state.mounted = true;
         const data = GridDataGet(props, fieldTemplate);
         return loadData(data);
     };
     // On submit callback
     const onSubmit = (data, _reset) => {
-        if (data == null || rect == null || refs.current.ref == null)
+        if (data == null || state.ref == null)
             return;
-        refs.current.ref.reset({ data });
+        state.ref.reset({ data });
     };
     // Watch container
     const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds, (_preRect, rect) => {
@@ -51,15 +62,15 @@ export function ResponsibleContainer(props) {
         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;
     });
     // Rect
@@ -68,7 +79,7 @@ export function ResponsibleContainer(props) {
     const [list, showDataGrid] = (() => {
         // No layout
         if (rect == null)
-            return [null, false];
+            return [null, undefined];
         // Width
         const width = rect.width;
         // Show DataGrid or List dependng on width
@@ -80,12 +91,11 @@ export function ResponsibleContainer(props) {
         }
         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);
             }
@@ -94,7 +104,9 @@ export function ResponsibleContainer(props) {
             // Delete
             delete rest.itemRenderer;
             return [
-                React.createElement(Box, { sx: listBoxSx == null ? undefined : listBoxSx(true) },
+                React.createElement(Box, { sx: listBoxSx == null
+                        ? undefined
+                        : listBoxSx(true, heightLocal) },
                     React.createElement(DataGridEx, { autoLoad: !hasFields, height: heightLocal, width: rect.width, loadData: localLoadData, mRef: mRefs, columns: columns, ...rest })),
                 true
             ];
@@ -109,23 +121,30 @@ export function ResponsibleContainer(props) {
         delete rest.hoverColor;
         delete rest.selectable;
         return [
-            React.createElement(Box, { sx: listBoxSx == null ? undefined : listBoxSx(false) },
+            React.createElement(Box, { sx: listBoxSx == null
+                    ? undefined
+                    : listBoxSx(false, heightLocal) },
                 React.createElement(ScrollerListEx, { autoLoad: !hasFields, width: rect.width, height: heightLocal, loadData: localLoadData, mRef: mRefs, ...rest })),
             false
         ];
     })();
+    const searchBar = React.useMemo(() => {
+        if (!hasFields || showDataGrid == null)
+            return;
+        return (React.createElement(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.createElement(React.Fragment, null,
         React.createElement(Stack, null,
-            React.createElement(Box, { ref: dimensions[0][0], sx: searchBoxSx }, hasFields && (React.createElement(SearchBar, { fields: fields, onSubmit: onSubmit }))),
+            React.createElement(Box, { ref: dimensions[0][0], sx: searchBoxSx }, searchBar),
             list),
-        pullToRefresh && pullContainer && (React.createElement(PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: () => { var _a; return (_a = refs.current.ref) === null || _a === void 0 ? void 0 : _a.reset(); }, shouldPullToRefresh: () => {
+        pullToRefresh && pullContainer && (React.createElement(PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: () => { var _a; return (_a = state.ref) === null || _a === void 0 ? void 0 : _a.reset(); }, shouldPullToRefresh: () => {
                 const container = document.querySelector(pullContainer);
                 return !(container === null || container === void 0 ? void 0 : container.scrollTop);
             } }))));

package/lib/mu/SearchBar.js

@@ -63,12 +63,12 @@ export function SearchBar(props) {
     const [index, updateIndex] = React.useState();
     // Drawer open / close
     const [open, updateOpen] = React.useState(false);
-    // Forms
-    const [forms] = React.useState({});
+    // State
+    const state = React.useRef({}).current;
     // Watch container
     const { dimensions } = useDimensions(1, (target, rect) => {
         // Same logic from resetButtonRef
-        if (rect.width === forms.lastMaxWidth)
+        if (rect.width === state.lastMaxWidth)
             return false;
         // Len
         const len = target.children.length;
@@ -96,10 +96,10 @@ export function SearchBar(props) {
             return;
         // 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;
         // Cached button width
@@ -174,8 +174,8 @@ export function SearchBar(props) {
     const handleForm = (event) => {
         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();
     };
     // Handle more button click
@@ -186,54 +186,56 @@ export function SearchBar(props) {
     const moreFormChange = (event) => {
         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();
     };
     // 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 = 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);
     };
     // 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.createElement(React.Fragment, null,
         React.createElement("form", { id: "SearchBarForm", className: className, onChange: handleForm, ref: (form) => {
                 if (form)
-                    forms.form = form;
+                    state.form = form;
             } },
             React.createElement(Stack, { ref: dimensions[0][0], justifyContent: "center", alignItems: "center", direction: "row", spacing: 1, height: innerHeight, sx: {
                     '& > :not(style)': {
@@ -260,7 +262,7 @@ export function SearchBar(props) {
             }, open: open, onClose: () => updateOpen(false) },
             React.createElement("form", { onChange: moreFormChange, ref: (form) => {
                     if (form)
-                        forms.moreForm = form;
+                        state.moreForm = form;
                 } },
                 React.createElement(Stack, { direction: "column", alignItems: "stretch", spacing: 2, padding: 2 }, moreItems))))));
 }

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

@@ -1,14 +1,9 @@
-/// <reference types="node" />
 /// <reference types="react" />
 import { CommonPageProps } from './CommonPageProps';
-/**
- * Default pull container
- */
-export declare const CommonPagePullContainer = "#page-container";
 /**
  * Default scroll container
  */
-export declare const CommonPageScrollContainer: NodeJS.Global & typeof globalThis;
+export declare const CommonPageScrollContainer: typeof globalThis;
 /**
  * Common page
  * @param props Props

package/lib/mu/pages/CommonPage.js

@@ -1,17 +1,12 @@
 import React from 'react';
 import { FabBox } from '../FabBox';
 import { ScrollTopFab } from '../ScrollTopFab';
-import { PullToRefreshUI } from '../PullToRefreshUI';
 import { Labels } from '../../app/Labels';
 import { MUGlobal } from '../MUGlobal';
 import { MoreFab } from '../MoreFab';
 import { ReactAppStateDetector } from '../../app/ReactApp';
 import { Container, Fab } from '@mui/material';
 import RefreshIcon from '@mui/icons-material/Refresh';
-/**
- * Default pull container
- */
-export const CommonPagePullContainer = '#page-container';
 /**
  * Default scroll container
  */
@@ -22,7 +17,7 @@ export const CommonPageScrollContainer = global;
  */
 export function CommonPage(props) {
     // Destruct
-    const { children, disableGutters = true, fabButtons, fabColumnDirection, fabPaddingAdjust = 1.5, fabSize = 'small', maxWidth = false, moreActions, onRefresh, onUpdate, onUpdateAll, paddings = MUGlobal.pagePaddings, scrollContainer, targetFields, pullContainer, sx = {}, ...rest } = props;
+    const { children, disableGutters = true, fabButtons, fabColumnDirection, fabPaddingAdjust = 1.5, fabSize = 'small', maxWidth = false, moreActions, onRefresh, onUpdate, onUpdateAll, paddings = MUGlobal.pagePaddings, scrollContainer, targetFields, sx = {}, ...rest } = props;
     // Merge style
     Object.assign(sx, {
         padding: paddings
@@ -59,9 +54,5 @@ export function CommonPage(props) {
                 onRefresh != null && (React.createElement(Fab, { title: labels.refresh, size: fabSize, onClick: onRefresh, sx: { display: { xs: 'none', md: 'inherit' } } },
                     React.createElement(RefreshIcon, null))),
                 React.createElement(MoreFab, { size: fabSize, title: labels.more, actions: moreActions })),
-            children),
-        onRefresh != null && pullContainer != null && (React.createElement(PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: onRefresh, shouldPullToRefresh: () => {
-                const container = document.querySelector(pullContainer);
-                return !(container === null || container === void 0 ? void 0 : container.scrollTop);
-            } }))));
+            children)));
 }

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

@@ -45,10 +45,6 @@ export interface CommonPageProps extends Omit<ContainerProps, 'id'> {
      * Paddings
      */
     paddings?: {};
-    /**
-     * Pull container
-     */
-    pullContainer?: string;
     /**
      * Scroll container
      */

package/lib/mu/pages/DataGridPage.js

@@ -13,7 +13,7 @@ import { CommonPage } from './CommonPage';
  * @returns Component
  */
 export function DataGridPage(props) {
-    var _a, _b;
+    var _a;
     // Destruct
     const { adjustHeight, fields, fieldTemplate, height, loadData, mRef, sizeReadyMiliseconds = 100, pageProps = {}, ...rest } = props;
     (_a = pageProps.paddings) !== null && _a !== void 0 ? _a : (pageProps.paddings = MUGlobal.pagePaddings);
@@ -69,12 +69,8 @@ export function DataGridPage(props) {
             return;
         ref.reset({ data });
     }, [ref, data]);
-    // Pull container id
-    const pullContainer = ((_b = states.element) === null || _b === void 0 ? void 0 : _b.parentElement)
-        ? '.DataGridEx-Body'
-        : undefined;
     // Layout
-    return (React.createElement(CommonPage, { ...pageProps, scrollContainer: states.element, pullContainer: pullContainer },
+    return (React.createElement(CommonPage, { ...pageProps, scrollContainer: states.element },
         React.createElement(Stack, null,
             React.createElement(Box, { ref: dimensions[0][0], sx: {
                     paddingBottom: pageProps.paddings

package/lib/mu/pages/FixedListPage.js

@@ -61,13 +61,9 @@ export function FixedListPage(props) {
                     }, ...rest })));
         }
     }, [rect]);
-    // Pull container id
-    const pullContainer = (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.parentElement)
-        ? '#' + (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.parentElement.id)
-        : undefined;
     const { paddings, ...pageRest } = pageProps;
     // Layout
-    return (React.createElement(CommonPage, { ...pageRest, paddings: {}, scrollContainer: scrollContainer, pullContainer: pullContainer },
+    return (React.createElement(CommonPage, { ...pageRest, paddings: {}, scrollContainer: scrollContainer },
         React.createElement(Stack, null,
             React.createElement(Box, { ref: dimensions[0][0], sx: { padding: paddings } },
                 React.createElement(SearchBar, { fields: fields, onSubmit: onSubmit })),

package/lib/mu/pages/ListPage.js

@@ -5,7 +5,7 @@ import useCombinedRefs from '../../uses/useCombinedRefs';
 import { MUGlobal } from '../MUGlobal';
 import { ScrollerListEx } from '../ScrollerListEx';
 import { SearchBar } from '../SearchBar';
-import { CommonPage, CommonPagePullContainer, CommonPageScrollContainer } from './CommonPage';
+import { CommonPage, CommonPageScrollContainer } from './CommonPage';
 /**
  * List page
  * @param props Props
@@ -41,7 +41,7 @@ export function ListPage(props) {
         return loadData(data);
     };
     // Layout
-    return (React.createElement(CommonPage, { ...pageProps, scrollContainer: CommonPageScrollContainer, pullContainer: CommonPagePullContainer },
+    return (React.createElement(CommonPage, { ...pageProps, scrollContainer: CommonPageScrollContainer },
         React.createElement(Stack, null,
             React.createElement(Box, { sx: {
                     paddingBottom: pageProps.paddings