@etsoo/react 1.4.20 → 1.4.24

package/src/mu/DataGridRenderers.tsx

@@ -112,25 +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>({
-        index,
-        states,
-        checkable
-    }: DataGridExFooterItemRendererProps<T>) {
-        const { selectedItems, rows, hasNextPage } = states;
-
-        if (checkable && index === 1) {
-            return [
-                selectedItems.length,
-                rows.length.toLocaleString() + (hasNextPage ? '+' : '')
-            ].join(' / ');
-        }
-
-        if (!checkable && index === 0) {
-            return rows.length.toLocaleString() + (hasNextPage ? '+' : '');
+    export function defaultFooterItemRenderer<T>(
+        _rows: T[],
+        { index, states, checkable }: DataGridExFooterItemRendererProps<T>,
+        location: number = 0
+    ) {
+        const { selectedItems, loadedItems, hasNextPage } = states;
+
+        if (index === location) {
+            if (checkable) {
+                return [
+                    selectedItems.length,
+                    loadedItems.toLocaleString() + (hasNextPage ? '+' : '')
+                ].join(' / ');
+            } else {
+                return loadedItems.toLocaleString() + (hasNextPage ? '+' : '');
+            }
         }
 
         return undefined;

package/src/mu/GridMethodRef.ts

@@ -1,3 +1,5 @@
+import { GridLoaderStates } from '../components/GridLoader';
+
 /**
  * Grid method ref
  */
@@ -6,5 +8,5 @@ export interface GridMethodRef {
      * Reset
      * @param add Additional data
      */
-    reset(add?: {}): void;
+    reset(add?: Partial<GridLoaderStates<unknown>>): void;
 }

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,78 +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;
 
-    // Watch container
-    const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
-    const rect = dimensions[0][2];
-
+    // Load data
     const localLoadData = (props: GridLoadDataProps) => {
+        state.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 || state.ref == null) return;
+        state.ref.reset({ data });
+    };
 
-        // If height is the same
+    // Watch container
+    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];
+
+    // 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.top + rect.height + 1);
+            heightLocal = window.innerHeight - Math.round(rect.bottom + 1);
 
             const style = window.getComputedStyle(dimensions[0][1]!);
-            const boxPadding = parseFloat(style.paddingLeft);
-            if (!isNaN(boxPadding)) heightLocal -= 2 * boxPadding;
+            const boxMargin = parseFloat(style.marginBottom);
+            if (!isNaN(boxMargin)) heightLocal -= 3 * boxMargin; // 1 - Box, 2 - Page bottom
 
             if (adjustHeight != null) {
                 heightLocal -= adjustHeight(heightLocal);
             }
         }
 
-        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 +283,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={() => 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/SearchBar.tsx

@@ -271,13 +271,13 @@ export function SearchBar(props: SearchBarProps) {
     };
 
     // Submit
-    const handleSubmit = () => {
+    const handleSubmit = (delay = 480) => {
         if (forms.submitSeed != null) {
             clearTimeout(forms.submitSeed);
         }
 
         // Delay the change
-        forms.submitSeed = window.setTimeout(handleSubmitInstant, 480);
+        forms.submitSeed = window.setTimeout(handleSubmitInstant, delay);
     };
 
     // Submit at once
@@ -297,7 +297,7 @@ export function SearchBar(props: SearchBarProps) {
     // First loading
     React.useEffect(() => {
         // Delayed way
-        handleSubmit();
+        handleSubmit(100);
 
         return () => {
             // Clear the seeds

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[];