@etsoo/react 1.4.21 → 1.4.25

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

@@ -113,18 +113,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

@@ -113,11 +113,6 @@ export function FixedListPage<
         }
     }, [rect]);
 
-    // Pull container id
-    const pullContainer = scrollContainer?.parentElement
-        ? '#' + scrollContainer?.parentElement.id
-        : undefined;
-
     const { paddings, ...pageRest } = pageProps;
 
     // Layout
@@ -126,7 +121,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={{

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,33 @@ 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;
-
-    // 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;
+    const halfPadding = MUGlobal.half(paddings);
 
     // Layout
     return (
-        <CommonPage
-            {...pageRest}
-            paddings={{}}
-            scrollContainer={states.element}
-            pullContainer={pullContainer}
-        >
-            <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>
+        <CommonPage {...pageRest} paddings={{}}>
+            <ResponsibleContainer<T, F>
+                paddings={paddings}
+                listBoxSx={(dataGrid, height) => {
+                    if (dataGrid) {
+                        return {
+                            padding: paddings
+                        };
+                    } else {
+                        return {
+                            height,
+                            paddingTop: halfPadding,
+                            paddingBottom: halfPadding
+                        };
+                    }
+                }}
+                {...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';
 
 /**
@@ -104,11 +100,7 @@ export function TablePage<
 
     // Layout
     return (
-        <CommonPage
-            {...pageProps}
-            scrollContainer={CommonPageScrollContainer}
-            pullContainer={CommonPagePullContainer}
-        >
+        <CommonPage {...pageProps} scrollContainer={CommonPageScrollContainer}>
             <Stack>
                 <Box
                     ref={dimensions[0][0]}