@etsoo/react 1.4.18 → 1.4.22

package/src/mu/ResponsibleContainer.tsx

@@ -2,6 +2,7 @@ import { DataTypes } from '@etsoo/shared';
 import { Box, Stack, SxProps, Theme } from '@mui/material';
 import React from 'react';
 import { ListChildComponentProps } from 'react-window';
+import { Labels } from '../app/Labels';
 import { GridColumn } from '../components/GridColumn';
 import {
     GridDataGet,
@@ -16,12 +17,17 @@ import {
     DataGridExProps
 } from './DataGridEx';
 import { GridMethodRef } from './GridMethodRef';
+import { MUGlobal } from './MUGlobal';
+import { PullToRefreshUI } from './PullToRefreshUI';
 import {
     ScrollerListEx,
     ScrollerListExInnerItemRendererProps
 } from './ScrollerListEx';
 import { SearchBar } from './SearchBar';
 
+/**
+ * ResponsibleContainer props
+ */
 export interface ResponsibleContainerProps<
     T extends {},
     F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate
@@ -99,6 +105,16 @@ export interface ResponsibleContainerProps<
      */
     mRef?: React.MutableRefObject<GridMethodRef | undefined>;
 
+    /**
+     * Paddings
+     */
+    paddings?: {};
+
+    /**
+     * Pull to refresh data
+     */
+    pullToRefresh?: boolean;
+
     /**
      * Searchbox SX
      */
@@ -111,10 +127,16 @@ export interface ResponsibleContainerProps<
 }
 
 interface LocalRefs {
-    height?: number;
+    rect?: DOMRect;
     ref?: GridMethodRef;
+    mounted?: boolean;
 }
 
+/**
+ * Responsible container
+ * @param props Props
+ * @returns Layout
+ */
 export function ResponsibleContainer<
     T extends {},
     F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate
@@ -130,72 +152,125 @@ export function ResponsibleContainer<
         listBoxSx,
         loadData,
         mRef,
-        searchBoxSx,
+        paddings = MUGlobal.pagePaddings,
+        pullToRefresh = true,
+        searchBoxSx = { marginBottom: MUGlobal.half(paddings) },
         sizeReadyMiliseconds = 0,
         ...rest
     } = props;
 
+    // Labels
+    const labels = Labels.CommonPage;
+
     // 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 () => {
+            state.mounted = false;
+        };
+    }, []);
+
     // Has fields
     const hasFields = fields != null && fields.length > 0;
 
+    // Load data
+    const localLoadData = (props: GridLoadDataProps) => {
+        state.mounted = true;
+        const data = GridDataGet(props, fieldTemplate);
+        return loadData(data);
+    };
+
+    // On submit callback
+    const onSubmit = (data: FormData, _reset: boolean) => {
+        if (data == null || state.ref == null) return;
+        state.ref.reset({ data });
+    };
+
     // Watch container
-    const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
+    const { dimensions } = useDimensions(
+        1,
+        undefined,
+        sizeReadyMiliseconds,
+        (_preRect, rect) => {
+            // Check
+            if (rect == null) return true;
+
+            // Last rect
+            const lastRect = state.rect;
+
+            // 32 = scroll bar width
+            if (
+                lastRect != null &&
+                state.mounted !== true &&
+                Math.abs(rect.width - lastRect.width) <= 32 &&
+                Math.abs(rect.height - lastRect.height) <= 32
+            )
+                return true;
+
+            // Hold the new rect
+            state.rect = rect;
+
+            return false;
+        }
+    );
+
+    // Rect
     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);
+    // Create list
+    const [list, showDataGrid] = (() => {
+        // No layout
+        if (rect == null) return [null, false];
+
+        // Width
+        const width = rect.width;
+
+        // Show DataGrid or List dependng on width
+        const showDataGrid = width >= dataGridMinWidth;
+
+        // Height
+        let heightLocal: number;
+        if (height != null) {
+            heightLocal = height;
+        } else {
+            // Auto calculation
+            heightLocal = window.innerHeight - Math.round(rect.bottom + 1);
 
             const style = window.getComputedStyle(dimensions[0][1]!);
-            const boxPadding = parseFloat(style.paddingLeft);
-            if (!isNaN(boxPadding)) gridHeight -= 2 * boxPadding;
+            const boxMargin = parseFloat(style.marginBottom);
+            if (!isNaN(boxMargin)) heightLocal -= 3 * boxMargin; // 1 - Box, 2 - Page bottom
 
             if (adjustHeight != null) {
-                gridHeight -= adjustHeight(gridHeight);
-            }
-
-            if (gridHeight !== refs.current.height) {
-                refs.current.height = gridHeight;
+                heightLocal -= adjustHeight(heightLocal);
             }
         }
-    }, [rect]);
-
-    const localLoadData = (props: GridLoadDataProps) => {
-        const data = GridDataGet(props, fieldTemplate);
-        return loadData(data);
-    };
-
-    const gridHeight = refs.current.height;
-    console.log(rect, gridHeight, showDataGrid);
-    const list = React.useMemo(() => {
-        if (gridHeight == null) return;
 
         if (showDataGrid) {
             // Delete
             delete rest.itemRenderer;
 
-            return (
+            return [
                 <Box sx={listBoxSx == null ? undefined : listBoxSx(true)}>
                     <DataGridEx<T>
                         autoLoad={!hasFields}
-                        height={gridHeight}
+                        height={heightLocal}
+                        width={rect.width}
                         loadData={localLoadData}
                         mRef={mRefs}
                         columns={columns}
                         {...rest}
                     />
-                </Box>
-            );
+                </Box>,
+                true
+            ];
         }
 
         // Delete
@@ -208,34 +283,53 @@ export function ResponsibleContainer<
         delete rest.hoverColor;
         delete rest.selectable;
 
-        return (
+        return [
             <Box sx={listBoxSx == null ? undefined : listBoxSx(false)}>
                 <ScrollerListEx<T>
                     autoLoad={!hasFields}
-                    height={gridHeight}
+                    width={rect.width}
+                    height={heightLocal}
                     loadData={localLoadData}
                     mRef={mRefs}
                     {...rest}
                 />
-            </Box>
-        );
-    }, [gridHeight, showDataGrid]);
-
-    // On submit callback
-    const onSubmit = (data: FormData, _reset: boolean) => {
-        if (data == null || rect == null || refs.current.ref == null) return;
-        refs.current.ref.reset({ data });
-    };
+            </Box>,
+            false
+        ];
+    })();
+
+    // Pull container
+    const pullContainer = list
+        ? showDataGrid
+            ? '.DataGridEx-Body'
+            : '.ScrollerListEx-Body'
+        : undefined;
 
     // Layout
     return (
-        <Stack>
-            {hasFields && (
+        <React.Fragment>
+            <Stack>
                 <Box ref={dimensions[0][0]} sx={searchBoxSx}>
-                    <SearchBar fields={fields} onSubmit={onSubmit} />
+                    {hasFields && (
+                        <SearchBar fields={fields} onSubmit={onSubmit} />
+                    )}
                 </Box>
+                {list}
+            </Stack>
+            {pullToRefresh && pullContainer && (
+                <PullToRefreshUI
+                    mainElement={pullContainer}
+                    triggerElement={pullContainer}
+                    instructionsPullToRefresh={labels.pullToRefresh}
+                    instructionsReleaseToRefresh={labels.releaseToRefresh}
+                    instructionsRefreshing={labels.refreshing}
+                    onRefresh={() => state.ref?.reset()}
+                    shouldPullToRefresh={() => {
+                        const container = document.querySelector(pullContainer);
+                        return !container?.scrollTop;
+                    }}
+                />
             )}
-            {list}
-        </Stack>
+        </React.Fragment>
     );
 }

package/src/mu/ScrollerListEx.tsx

@@ -174,8 +174,7 @@ export function ScrollerListEx<T extends Record<string, unknown>>(
         if (selectedData != null && selectedData[idField] === data[idField])
             return;
 
-        if (selectedDiv != null)
-            selectedDiv.classList.remove(selectedClassName);
+        selectedDiv?.classList.remove(selectedClassName);
 
         div.classList.add(selectedClassName);
 

package/src/mu/TableEx.tsx

@@ -145,43 +145,41 @@ export function TableEx<T extends Record<string, unknown>>(
         rowsPerPageLocal = 10;
     }
 
+    // Rows
+    const [rows, updateRows] = React.useState<T[]>([]);
+    const setRows = (rows: T[]) => {
+        state.loadedItems = rows.length;
+        updateRows(rows);
+    };
+
     // States
-    const [state, stateUpdate] = React.useReducer(
-        (
-            currentState: GridLoaderStates<T>,
-            newState: Partial<GridLoaderStates<T>>
-        ) => {
-            return { ...currentState, ...newState };
-        },
-        {
-            autoLoad,
-            currentPage: 0,
-            hasNextPage: true,
-            isNextPageLoading: false,
-            orderBy: defaultOrderBy,
-            orderByAsc: defaultOrderBy
-                ? columns.find((column) => column.field === defaultOrderBy)
-                      ?.sortAsc
-                : undefined,
-            rows: [],
-            batchSize: rowsPerPageLocal,
-            selectedItems: []
-        }
-    );
-    const isMounted = React.useRef(true);
+    const stateRefs = React.useRef<GridLoaderStates<T>>({
+        autoLoad,
+        currentPage: 0,
+        loadedItems: 0,
+        hasNextPage: true,
+        isNextPageLoading: false,
+        orderBy: defaultOrderBy,
+        orderByAsc: defaultOrderBy
+            ? columns.find((column) => column.field === defaultOrderBy)?.sortAsc
+            : undefined,
+        batchSize: rowsPerPageLocal,
+        selectedItems: []
+    });
+    const state = stateRefs.current;
 
     // Reset the state and load again
-    const reset = (add?: {}) => {
-        const state = {
+    const reset = (add?: Partial<GridLoaderStates<T>>) => {
+        const resetState: Partial<GridLoaderStates<T>> = {
             autoLoad: true,
             currentPage: 0,
+            loadedItems: 0,
             hasNextPage: true,
             isNextPageLoading: false,
             lastLoadedItems: undefined,
-            rows: [],
             ...add
         };
-        stateUpdate(state);
+        Object.assign(state, resetState);
     };
 
     React.useImperativeHandle(
@@ -211,7 +209,8 @@ export function TableEx<T extends Record<string, unknown>>(
         state.isNextPageLoading = true;
 
         // Parameters
-        const { currentPage, batchSize, orderBy, orderByAsc, data } = state;
+        const { currentPage, batchSize, orderBy, orderByAsc, data, isMounted } =
+            state;
 
         const loadProps: GridLoadDataProps = {
             currentPage,
@@ -222,18 +221,18 @@ export function TableEx<T extends Record<string, unknown>>(
         };
 
         loadData(loadProps).then((result) => {
-            if (!isMounted.current || result == null) {
+            state.isMounted = true;
+            if (result == null || isMounted === false) {
                 return;
             }
 
             const newItems = result.length;
+            state.lastLoadedItems = newItems;
+            state.hasNextPage = newItems >= batchSize;
+            state.isNextPageLoading = false;
 
-            stateUpdate({
-                rows: result,
-                lastLoadedItems: newItems,
-                hasNextPage: newItems >= batchSize,
-                isNextPageLoading: false
-            });
+            // Update rows
+            setRows(result);
         });
     };
 
@@ -246,12 +245,12 @@ export function TableEx<T extends Record<string, unknown>>(
     const handleChangeRowsPerPage = (
         event: React.ChangeEvent<HTMLInputElement>
     ) => {
-        const rowsPerPage = parseInt(event.target.value);
-        reset({ rowsPerPage });
+        const batchSize = parseInt(event.target.value);
+        reset({ batchSize });
     };
 
     const handleSelect = (item: T, checked: Boolean) => {
-        const selectedItems = [...state.selectedItems];
+        const selectedItems = state.selectedItems;
 
         const index = selectedItems.findIndex(
             (selectedItem) => selectedItem[idField] === item[idField]
@@ -265,14 +264,12 @@ export function TableEx<T extends Record<string, unknown>>(
         if (onSelectChange != null) {
             onSelectChange(selectedItems);
         }
-
-        stateUpdate({ selectedItems });
     };
 
     const handleSelectAll = (checked: boolean) => {
-        const selectedItems = [...state.selectedItems];
+        const selectedItems = state.selectedItems;
 
-        state.rows.forEach((row) => {
+        rows.forEach((row) => {
             const index = selectedItems.findIndex(
                 (selectedItem) => selectedItem[idField] === row[idField]
             );
@@ -287,8 +284,6 @@ export function TableEx<T extends Record<string, unknown>>(
         if (onSelectChange != null) {
             onSelectChange(selectedItems);
         }
-
-        stateUpdate({ selectedItems });
     };
 
     // New sort
@@ -303,7 +298,6 @@ export function TableEx<T extends Record<string, unknown>>(
         hasNextPage,
         lastLoadedItems,
         orderBy,
-        rows,
         batchSize,
         selectedItems
     } = state;
@@ -333,7 +327,7 @@ export function TableEx<T extends Record<string, unknown>>(
 
     React.useEffect(() => {
         return () => {
-            isMounted.current = false;
+            state.isMounted = false;
         };
     }, []);
 

package/src/uses/useDimensions.ts

@@ -1,17 +1,6 @@
 import { DomUtils } from '@etsoo/shared';
 import React from 'react';
 
-const createRef = (
-    source: [React.RefCallback<Element>, Element?, DOMRect?][],
-    index: number
-): [React.RefCallback<Element>] => {
-    return [
-        (instance) => {
-            if (instance != null) source[index][1] = instance;
-        }
-    ];
-};
-
 interface states {
     count: number;
     indices: number[];