@etsoo/react 1.4.23 → 1.4.27

package/src/mu/pages/ResponsivePage.tsx

@@ -1,24 +1,10 @@
 import { DataTypes } from '@etsoo/shared';
-import { Box, Stack } from '@mui/material';
 import React from 'react';
-import { GridDataGet, GridLoadDataProps } from '../../components/GridLoader';
-import useCombinedRefs from '../../uses/useCombinedRefs';
-import { useDimensions } from '../../uses/useDimensions';
-import { DataGridEx, DataGridExCalColumns } from '../DataGridEx';
-import { GridMethodRef } from '../GridMethodRef';
 import { MUGlobal } from '../MUGlobal';
-import { ScrollerListEx } from '../ScrollerListEx';
-import { SearchBar } from '../SearchBar';
+import { ResponsibleContainer } from '../ResponsibleContainer';
 import { CommonPage } from './CommonPage';
 import { ResponsePageProps } from './ResponsivePageProps';
 
-interface LocalStates {
-    data?: FormData;
-    element?: HTMLElement;
-    height?: number;
-    ref?: GridMethodRef;
-}
-
 /**
  * Fixed height list page
  * @param props Props
@@ -29,193 +15,52 @@ export function ResponsivePage<
     F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate
 >(props: ResponsePageProps<T, F>) {
     // Destruct
-    const {
-        adjustHeight,
-        columns,
-        dataGridMinWidth = DataGridExCalColumns(columns).total,
-        fields,
-        fieldTemplate,
-        height,
-        loadData,
-        innerItemRenderer,
-        itemSize,
-        mRef,
-        sizeReadyMiliseconds = 0,
-        pageProps = {},
-        ...rest
-    } = props;
+    const { pageProps = {}, ...rest } = props;
 
     pageProps.paddings ??= MUGlobal.pagePaddings;
+    const { paddings, fabColumnDirection, ...pageRest } = pageProps;
 
-    // States
-    const [states, setStates] = React.useReducer(
-        (currentState: LocalStates, newState: Partial<LocalStates>) => {
-            return { ...currentState, ...newState };
-        },
-        {
-            height
-        }
-    );
-
-    const localLoadData = (props: GridLoadDataProps) => {
-        const data = GridDataGet(props, fieldTemplate);
-        return loadData(data);
-    };
-
-    const refs = useCombinedRefs(mRef, (ref: GridMethodRef) => {
-        if (ref == null) return;
-        states.ref = ref;
-        // setStates({ ref });
-    });
-
-    // On submit callback
-    const onSubmit = (data: FormData, _reset: boolean) => {
-        setStates({ data });
-    };
-
-    // Watch container
-    const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
-    const rect = dimensions[0][2];
-    const showDataGrid = (rect?.width ?? 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 (
-                <Box
-                    sx={{
-                        padding: paddings
-                    }}
-                >
-                    <DataGridEx<T>
-                        autoLoad={false}
-                        height={gridHeight}
-                        loadData={localLoadData}
-                        mRef={refs}
-                        columns={columns}
-                        outerRef={(element?: HTMLDivElement) => {
-                            if (element != null) setStates({ element });
-                        }}
-                        {...rest}
-                    />
-                </Box>
-            );
-        }
-
-        // 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 (
-            <Box
-                sx={{
-                    height: gridHeight + (isNaN(boxPadding) ? 0 : boxPadding),
-                    paddingTop: halfPadding,
-                    paddingBottom: halfPadding
-                }}
-            >
-                <ScrollerListEx<T>
-                    autoLoad={false}
-                    height={gridHeight}
-                    innerItemRenderer={innerItemRenderer}
-                    itemSize={itemSize}
-                    loadData={localLoadData}
-                    mRef={refs}
-                    oRef={(element) => {
-                        if (element != null) setStates({ element });
-                    }}
-                    {...rest}
-                />
-            </Box>
-        );
-    }, [states.height, showDataGrid, localLoadData]);
-
-    const sizeRef = React.useRef<[number, number]>();
-
-    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;
+    // State
+    const [scrollContainer, setScrollContainer] = React.useState<HTMLElement>();
+    const [direction, setDirection] = React.useState(fabColumnDirection);
 
     // Layout
     return (
         <CommonPage
             {...pageRest}
             paddings={{}}
-            scrollContainer={states.element}
-            pullContainer={pullContainer}
+            scrollContainer={scrollContainer}
+            fabColumnDirection={direction}
         >
-            <Stack>
-                <Box
-                    ref={dimensions[0][0]}
-                    sx={{
-                        paddingLeft: paddings,
-                        paddingTop: MUGlobal.increase(paddings, 0.5, 'xs'),
-                        paddingRight: paddings
-                    }}
-                >
-                    <SearchBar fields={fields} onSubmit={onSubmit} />
-                </Box>
-                {list}
-            </Stack>
+            <ResponsibleContainer<T, F>
+                paddings={paddings}
+                containerBoxSx={(dataGrid) => {
+                    if (dataGrid) {
+                        return {
+                            padding: paddings
+                        };
+                    } else {
+                        return {
+                            paddingTop: paddings,
+                            paddingBottom: paddings
+                        };
+                    }
+                }}
+                elementReady={(element, isDataGrid) => {
+                    setDirection(!isDataGrid);
+                    setScrollContainer(element);
+                }}
+                listBoxSx={(dataGrid, height) => {
+                    if (dataGrid) {
+                        return {};
+                    } else {
+                        return {
+                            height: height
+                        };
+                    }
+                }}
+                {...rest}
+            />
         </CommonPage>
     );
 }

package/src/mu/pages/ResponsivePageProps.ts

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

package/src/mu/pages/TablePage.tsx

@@ -7,11 +7,7 @@ import { useDimensions } from '../../uses/useDimensions';
 import { MUGlobal } from '../MUGlobal';
 import { SearchBar } from '../SearchBar';
 import { TableEx, TableExMethodRef, TableExMinWidth } from '../TableEx';
-import {
-    CommonPage,
-    CommonPagePullContainer,
-    CommonPageScrollContainer
-} from './CommonPage';
+import { CommonPage, CommonPageScrollContainer } from './CommonPage';
 import { TablePageProps } from './TablePageProps';
 
 /**
@@ -83,7 +79,9 @@ export function TablePage<
     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);
@@ -104,11 +102,7 @@ export function TablePage<
 
     // Layout
     return (
-        <CommonPage
-            {...pageProps}
-            scrollContainer={CommonPageScrollContainer}
-            pullContainer={CommonPagePullContainer}
-        >
+        <CommonPage {...pageProps} scrollContainer={CommonPageScrollContainer}>
             <Stack>
                 <Box
                     ref={dimensions[0][0]}

package/src/uses/useWindowSize.ts

@@ -1,38 +1,51 @@
 import React from 'react';
 
+interface ISize {
+    width: number;
+    height: number;
+}
+
 /**
  * Detect window size
- * @param miliseconds Miliseconds delayed
  * @returns Window size
  */
-export const useWindowSize = (miliseconds: number = 50) => {
+export const useWindowSize = () => {
     // State
-    const [size, setSize] = React.useState<{
-        width: number;
-        height: number;
-    }>({
+    const [size, setSize] = React.useState<ISize>({
         width: 0,
         height: 0
     });
-    const [state] = React.useState<{ seed?: number }>({});
-
-    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: ISize;
+        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);
         };
     }, []);