@etsoo/react 1.4.22 → 1.4.26

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
@@ -51,7 +51,8 @@ export function TablePage(props) {
     const rect = dimensions[0][2];
     const list = React.useMemo(() => {
         if (rect != null && rect.height > 50 && rect.width >= totalWidth) {
-            let maxHeight = window.innerHeight - (rect.top + rect.height + 1);
+            let maxHeight = document.documentElement.clientHeight -
+                (rect.top + rect.height + 1);
             const style = window.getComputedStyle(dimensions[0][1]);
             const paddingBottom = parseFloat(style.paddingBottom);
             if (!isNaN(paddingBottom))
@@ -60,7 +61,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/lib/uses/useWindowSize.d.ts

@@ -1,9 +1,10 @@
+interface ISize {
+    width: number;
+    height: number;
+}
 /**
  * Detect window size
- * @param miliseconds Miliseconds delayed
  * @returns Window size
  */
-export declare const useWindowSize: (miliseconds?: number) => {
-    width: number;
-    height: number;
-};
+export declare const useWindowSize: () => ISize;
+export {};

package/lib/uses/useWindowSize.js

@@ -1,33 +1,39 @@
 import React from 'react';
 /**
  * Detect window size
- * @param miliseconds Miliseconds delayed
  * @returns Window size
  */
-export const useWindowSize = (miliseconds = 50) => {
+export const useWindowSize = () => {
     // State
     const [size, setSize] = React.useState({
         width: 0,
         height: 0
     });
-    const [state] = React.useState({});
-    const resizeHandler = () => {
-        if (state.seed != null)
-            window.clearTimeout(state.seed);
-        state.seed = window.setTimeout(() => {
-            setSize({
-                width: window.innerWidth,
-                height: window.innerHeight
-            });
-            state.seed = undefined;
-        }, miliseconds);
-    };
     React.useEffect(() => {
+        let ticking = false;
+        let lastKnownSize;
+        let requestAnimationFrameSeed = 0;
+        const resizeHandler = () => {
+            lastKnownSize = {
+                width: document.documentElement.clientWidth,
+                height: document.documentElement.clientHeight
+            };
+            if (!ticking) {
+                requestAnimationFrameSeed = window.requestAnimationFrame(() => {
+                    setSize(lastKnownSize);
+                    ticking = false;
+                    requestAnimationFrameSeed = 0;
+                });
+                ticking = true;
+            }
+        };
         window.addEventListener('resize', resizeHandler);
         return () => {
+            // Cancel animation frame
+            if (requestAnimationFrameSeed > 0)
+                window.cancelAnimationFrame(requestAnimationFrameSeed);
+            // Remove scroll event
             window.removeEventListener('resize', resizeHandler);
-            if (state.seed != null)
-                window.clearTimeout(state.seed);
         };
     }, []);
     // Return

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.4.22",
+    "version": "1.4.26",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -50,7 +50,7 @@
         "@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",

package/src/components/ScrollerList.tsx

@@ -106,7 +106,7 @@ export const ScrollerList = <T extends Record<string, any>>(
         autoLoad = true,
         defaultOrderBy,
         defaultOrderByAsc,
-        height = window.innerHeight,
+        height = document.documentElement.clientHeight,
         width = '100%',
         mRef,
         oRef,
@@ -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

@@ -51,6 +51,11 @@ export interface ResponsibleContainerProps<
      */
     columns: GridColumn<T>[];
 
+    /**
+     * Container box SX (dataGrid determines the case)
+     */
+    containerBoxSx?: (dataGrid: boolean) => SxProps<Theme>;
+
     /**
      * Min width to show Datagrid
      */
@@ -91,7 +96,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
@@ -105,6 +110,11 @@ export interface ResponsibleContainerProps<
      */
     mRef?: React.MutableRefObject<GridMethodRef | undefined>;
 
+    /**
+     * Element ready callback
+     */
+    elementReady?: (element: HTMLElement, isDataGrid: boolean) => void;
+
     /**
      * Paddings
      */
@@ -132,6 +142,16 @@ interface LocalRefs {
     mounted?: boolean;
 }
 
+function getDefaultSearchBoxSx(paddings: {}): SxProps<Theme> {
+    const half = MUGlobal.half(paddings);
+    return {
+        paddingLeft: (theme) => theme.spacing(0.5),
+        paddingRight: (theme) => theme.spacing(0.5),
+        paddingTop: half,
+        marginBottom: half
+    };
+}
+
 /**
  * Responsible container
  * @param props Props
@@ -145,7 +165,9 @@ export function ResponsibleContainer<
     const {
         adjustHeight,
         columns,
+        containerBoxSx,
         dataGridMinWidth = DataGridExCalColumns(columns).total,
+        elementReady,
         fields,
         fieldTemplate,
         height,
@@ -154,7 +176,7 @@ export function ResponsibleContainer<
         mRef,
         paddings = MUGlobal.pagePaddings,
         pullToRefresh = true,
-        searchBoxSx = { marginBottom: MUGlobal.half(paddings) },
+        searchBoxSx = getDefaultSearchBoxSx(paddings),
         sizeReadyMiliseconds = 0,
         ...rest
     } = props;
@@ -228,7 +250,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;
@@ -242,7 +264,9 @@ export function ResponsibleContainer<
             heightLocal = height;
         } else {
             // Auto calculation
-            heightLocal = window.innerHeight - Math.round(rect.bottom + 1);
+            heightLocal =
+                document.documentElement.clientHeight -
+                Math.round(rect.bottom + 1);
 
             const style = window.getComputedStyle(dimensions[0][1]!);
             const boxMargin = parseFloat(style.marginBottom);
@@ -258,13 +282,23 @@ 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}
                         width={rect.width}
                         loadData={localLoadData}
                         mRef={mRefs}
+                        outerRef={(element?: HTMLDivElement) => {
+                            if (element != null && elementReady)
+                                elementReady(element, true);
+                        }}
                         columns={columns}
                         {...rest}
                     />
@@ -284,13 +318,22 @@ 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}
                     height={heightLocal}
                     loadData={localLoadData}
                     mRef={mRefs}
+                    oRef={(element) => {
+                        if (element != null && elementReady)
+                            elementReady(element, false);
+                    }}
                     {...rest}
                 />
             </Box>,
@@ -298,21 +341,37 @@ 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>
+        <Box
+            sx={
+                containerBoxSx == null || showDataGrid == null
+                    ? undefined
+                    : containerBoxSx(showDataGrid)
+            }
+        >
             <Stack>
                 <Box ref={dimensions[0][0]} sx={searchBoxSx}>
-                    {hasFields && (
-                        <SearchBar fields={fields} onSubmit={onSubmit} />
-                    )}
+                    {searchBar}
                 </Box>
                 {list}
             </Stack>
@@ -330,6 +389,6 @@ export function ResponsibleContainer<
                     }}
                 />
             )}
-        </React.Fragment>
+        </Box>
     );
 }

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

package/src/mu/pages/CommonPage.tsx

@@ -1,7 +1,6 @@
 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 { CommonPageProps } from './CommonPageProps';
@@ -10,11 +9,6 @@ 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
  */
@@ -41,7 +35,6 @@ export function CommonPage(props: CommonPageProps) {
         paddings = MUGlobal.pagePaddings,
         scrollContainer,
         targetFields,
-        pullContainer,
         sx = {},
         ...rest
     } = props;
@@ -125,20 +118,6 @@ export function CommonPage(props: CommonPageProps) {
                 </FabBox>
                 {children}
             </Container>
-            {onRefresh != null && pullContainer != null && (
-                <PullToRefreshUI
-                    mainElement={pullContainer}
-                    triggerElement={pullContainer}
-                    instructionsPullToRefresh={labels.pullToRefresh}
-                    instructionsReleaseToRefresh={labels.releaseToRefresh}
-                    instructionsRefreshing={labels.refreshing}
-                    onRefresh={onRefresh}
-                    shouldPullToRefresh={() => {
-                        const container = document.querySelector(pullContainer);
-                        return !container?.scrollTop;
-                    }}
-                />
-            )}
         </React.Fragment>
     );
 }

package/src/mu/pages/CommonPageProps.ts

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

package/src/mu/pages/DataGridPage.tsx

@@ -75,7 +75,8 @@ export function DataGridPage<
     React.useEffect(() => {
         if (rect != null && rect.height > 50 && height == null) {
             let gridHeight =
-                window.innerHeight - Math.round(rect.top + rect.height + 1);
+                document.documentElement.clientHeight -
+                Math.round(rect.top + rect.height + 1);
 
             const style = window.getComputedStyle(dimensions[0][1]!);
             const paddingBottom = parseFloat(style.paddingBottom);
@@ -113,18 +114,9 @@ export function DataGridPage<
         ref.reset({ data });
     }, [ref, data]);
 
-    // Pull container id
-    const pullContainer = states.element?.parentElement
-        ? '.DataGridEx-Body'
-        : undefined;
-
     // Layout
     return (
-        <CommonPage
-            {...pageProps}
-            scrollContainer={states.element}
-            pullContainer={pullContainer}
-        >
+        <CommonPage {...pageProps} scrollContainer={states.element}>
             <Stack>
                 <Box
                     ref={dimensions[0][0]}

package/src/mu/pages/FixedListPage.tsx

@@ -85,7 +85,8 @@ export function FixedListPage<
     const list = React.useMemo(() => {
         if (rect != null && rect.height > 50) {
             let height =
-                window.innerHeight - Math.round(rect.top + rect.height + 1);
+                document.documentElement.clientHeight -
+                Math.round(rect.top + rect.height + 1);
 
             if (adjustHeight != null) {
                 height -= adjustHeight(height);
@@ -113,11 +114,6 @@ export function FixedListPage<
         }
     }, [rect]);
 
-    // Pull container id
-    const pullContainer = scrollContainer?.parentElement
-        ? '#' + scrollContainer?.parentElement.id
-        : undefined;
-
     const { paddings, ...pageRest } = pageProps;
 
     // Layout
@@ -126,7 +122,6 @@ export function FixedListPage<
             {...pageRest}
             paddings={{}}
             scrollContainer={scrollContainer}
-            pullContainer={pullContainer}
         >
             <Stack>
                 <Box ref={dimensions[0][0]} sx={{ padding: paddings }}>

package/src/mu/pages/ListPage.tsx

@@ -7,11 +7,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';
 import { ListPageProps } from './ListPageProps';
 
 /**
@@ -69,11 +65,7 @@ export function ListPage<
 
     // Layout
     return (
-        <CommonPage
-            {...pageProps}
-            scrollContainer={CommonPageScrollContainer}
-            pullContainer={CommonPagePullContainer}
-        >
+        <CommonPage {...pageProps} scrollContainer={CommonPageScrollContainer}>
             <Stack>
                 <Box
                     sx={{