@etsoo/react 1.4.20 → 1.4.21

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,16 @@ import {
     DataGridExProps
 } from './DataGridEx';
 import { GridMethodRef } from './GridMethodRef';
+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 +104,11 @@ export interface ResponsibleContainerProps<
      */
     mRef?: React.MutableRefObject<GridMethodRef | undefined>;
 
+    /**
+     * Pull to refresh data
+     */
+    pullToRefresh?: boolean;
+
     /**
      * Searchbox SX
      */
@@ -111,10 +121,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,11 +146,15 @@ export function ResponsibleContainer<
         listBoxSx,
         loadData,
         mRef,
+        pullToRefresh = true,
         searchBoxSx,
         sizeReadyMiliseconds = 0,
         ...rest
     } = props;
 
+    // Labels
+    const labels = Labels.CommonPage;
+
     // Refs
     const refs = React.useRef<LocalRefs>({});
 
@@ -143,23 +163,72 @@ export function ResponsibleContainer<
         refs.current.ref = ref;
     });
 
+    // Update mounted state
+    React.useEffect(() => {
+        return () => {
+            refs.current.mounted = false;
+        };
+    }, []);
+
     // Has fields
     const hasFields = fields != null && fields.length > 0;
 
-    // Watch container
-    const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
-    const rect = dimensions[0][2];
-
+    // Load data
     const localLoadData = (props: GridLoadDataProps) => {
+        refs.current.mounted = true;
         const data = GridDataGet(props, fieldTemplate);
         return loadData(data);
     };
 
-    const list = React.useMemo(() => {
-        // No rect
-        if (rect == null) return;
+    // On submit callback
+    const onSubmit = (data: FormData, _reset: boolean) => {
+        if (data == null || rect == null || refs.current.ref == null) return;
+        refs.current.ref.reset({ data });
+    };
+
+    // Watch container
+    const { dimensions } = useDimensions(
+        1,
+        undefined,
+        sizeReadyMiliseconds,
+        (_preRect, rect) => {
+            // Check
+            if (rect == null) return true;
+
+            // Last rect
+            const lastRect = refs.current.rect;
+
+            // 32 = scroll bar width
+            if (
+                lastRect != null &&
+                refs.current.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;
+
+            return false;
+        }
+    );
+
+    // Rect
+    const rect = dimensions[0][2];
+
+    // Create list
+    const [list, showDataGrid] = (() => {
+        // No layout
+        if (rect == null) return [null, false];
 
-        // If height is the same
+        // 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;
@@ -177,31 +246,24 @@ export function ResponsibleContainer<
             }
         }
 
-        console.log(rect, heightLocal, refs.current.height);
-
-        // Same height
-        if (heightLocal === refs.current.height) return;
-        refs.current.height = heightLocal;
-
-        // Show DataGrid or List dependng on width
-        const showDataGrid = rect.width >= dataGridMinWidth;
-
         if (showDataGrid) {
             // Delete
             delete rest.itemRenderer;
 
-            return (
+            return [
                 <Box sx={listBoxSx == null ? undefined : listBoxSx(true)}>
                     <DataGridEx<T>
                         autoLoad={!hasFields}
                         height={heightLocal}
+                        width={rect.width}
                         loadData={localLoadData}
                         mRef={mRefs}
                         columns={columns}
                         {...rest}
                     />
-                </Box>
-            );
+                </Box>,
+                true
+            ];
         }
 
         // Delete
@@ -214,34 +276,53 @@ export function ResponsibleContainer<
         delete rest.hoverColor;
         delete rest.selectable;
 
-        return (
+        return [
             <Box sx={listBoxSx == null ? undefined : listBoxSx(false)}>
                 <ScrollerListEx<T>
                     autoLoad={!hasFields}
+                    width={rect.width}
                     height={heightLocal}
                     loadData={localLoadData}
                     mRef={mRefs}
                     {...rest}
                 />
-            </Box>
-        );
-    }, [rect, height]);
-
-    // 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 ref={hasFields ? undefined : dimensions[0][0]}>
-            {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={() => refs.current.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[];