@etsoo/react 1.4.20 → 1.4.24

package/lib/mu/ResponsibleContainer.js

@@ -1,63 +1,104 @@
 import { Box, Stack } from '@mui/material';
 import React from 'react';
+import { Labels } from '../app/Labels';
 import { GridDataGet } from '../components/GridLoader';
 import useCombinedRefs from '../uses/useCombinedRefs';
 import { useDimensions } from '../uses/useDimensions';
 import { DataGridEx, DataGridExCalColumns } from './DataGridEx';
+import { MUGlobal } from './MUGlobal';
+import { PullToRefreshUI } from './PullToRefreshUI';
 import { ScrollerListEx } from './ScrollerListEx';
 import { SearchBar } from './SearchBar';
+/**
+ * Responsible container
+ * @param props Props
+ * @returns Layout
+ */
 export function ResponsibleContainer(props) {
     // Destruct
-    const { adjustHeight, columns, dataGridMinWidth = DataGridExCalColumns(columns).total, fields, fieldTemplate, height, listBoxSx, loadData, mRef, searchBoxSx, sizeReadyMiliseconds = 0, ...rest } = props;
+    const { adjustHeight, columns, dataGridMinWidth = DataGridExCalColumns(columns).total, fields, fieldTemplate, height, listBoxSx, loadData, mRef, paddings = MUGlobal.pagePaddings, pullToRefresh = true, searchBoxSx = { marginBottom: MUGlobal.half(paddings) }, sizeReadyMiliseconds = 0, ...rest } = props;
+    // Labels
+    const labels = Labels.CommonPage;
     // Refs
     const refs = React.useRef({});
+    const state = refs.current;
     const mRefs = useCombinedRefs(mRef, (ref) => {
         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) => {
+        state.mounted = true;
         const data = GridDataGet(props, fieldTemplate);
         return loadData(data);
     };
-    const list = React.useMemo(() => {
-        // No rect
-        if (rect == null)
+    // On submit callback
+    const onSubmit = (data, _reset) => {
+        if (data == null || state.ref == null)
             return;
-        // If height is the same
+        state.ref.reset({ data });
+    };
+    // 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;
         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 (React.createElement(Box, { sx: listBoxSx == null ? undefined : listBoxSx(true) },
-                React.createElement(DataGridEx, { autoLoad: !hasFields, height: heightLocal, loadData: localLoadData, mRef: mRefs, columns: columns, ...rest })));
+            return [
+                React.createElement(Box, { sx: listBoxSx == null ? undefined : listBoxSx(true) },
+                    React.createElement(DataGridEx, { autoLoad: !hasFields, height: heightLocal, width: rect.width, loadData: localLoadData, mRef: mRefs, columns: columns, ...rest })),
+                true
+            ];
         }
         // Delete
         delete rest.checkable;
@@ -68,18 +109,25 @@ export function ResponsibleContainer(props) {
         delete rest.hideFooter;
         delete rest.hoverColor;
         delete rest.selectable;
-        return (React.createElement(Box, { sx: listBoxSx == null ? undefined : listBoxSx(false) },
-            React.createElement(ScrollerListEx, { autoLoad: !hasFields, height: heightLocal, loadData: localLoadData, mRef: mRefs, ...rest })));
-    }, [rect, height]);
-    // On submit callback
-    const onSubmit = (data, _reset) => {
-        if (data == null || rect == null || refs.current.ref == null)
-            return;
-        refs.current.ref.reset({ data });
-    };
+        return [
+            React.createElement(Box, { sx: listBoxSx == null ? undefined : listBoxSx(false) },
+                React.createElement(ScrollerListEx, { autoLoad: !hasFields, width: rect.width, height: heightLocal, loadData: localLoadData, mRef: mRefs, ...rest })),
+            false
+        ];
+    })();
+    // Pull container
+    const pullContainer = list
+        ? showDataGrid
+            ? '.DataGridEx-Body'
+            : '.ScrollerListEx-Body'
+        : undefined;
     // Layout
-    return (React.createElement(Stack, { ref: hasFields ? undefined : dimensions[0][0] },
-        hasFields && (React.createElement(Box, { ref: dimensions[0][0], sx: searchBoxSx },
-            React.createElement(SearchBar, { fields: fields, onSubmit: onSubmit }))),
-        list));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Stack, null,
+            React.createElement(Box, { ref: dimensions[0][0], sx: searchBoxSx }, hasFields && (React.createElement(SearchBar, { fields: fields, onSubmit: onSubmit }))),
+            list),
+        pullToRefresh && pullContainer && (React.createElement(PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: () => { var _a; return (_a = state.ref) === null || _a === void 0 ? void 0 : _a.reset(); }, shouldPullToRefresh: () => {
+                const container = document.querySelector(pullContainer);
+                return !(container === null || container === void 0 ? void 0 : container.scrollTop);
+            } }))));
 }

package/lib/mu/ScrollerListEx.js

@@ -66,8 +66,7 @@ export function ScrollerListEx(props) {
         const [selectedDiv, selectedData] = (_a = selectedItem.current) !== null && _a !== void 0 ? _a : [];
         if (selectedData != null && selectedData[idField] === data[idField])
             return;
-        if (selectedDiv != null)
-            selectedDiv.classList.remove(selectedClassName);
+        selectedDiv === null || selectedDiv === void 0 ? void 0 : selectedDiv.classList.remove(selectedClassName);
         div.classList.add(selectedClassName);
         selectedItem.current = [div, data];
         if (onSelectChange)

package/lib/mu/SearchBar.js

@@ -201,12 +201,12 @@ export function SearchBar(props) {
         handleSubmitInstant(true);
     };
     // 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
     const handleSubmitInstant = (reset = false) => {
@@ -222,7 +222,7 @@ export function SearchBar(props) {
     // First loading
     React.useEffect(() => {
         // Delayed way
-        handleSubmit();
+        handleSubmit(100);
         return () => {
             // Clear the seeds
             if (forms.submitSeed != null)

package/lib/mu/TableEx.js

@@ -34,35 +34,39 @@ export function TableEx(props) {
     else {
         rowsPerPageLocal = 10;
     }
+    // Rows
+    const [rows, updateRows] = React.useState([]);
+    const setRows = (rows) => {
+        state.loadedItems = rows.length;
+        updateRows(rows);
+    };
     // States
-    const [state, stateUpdate] = React.useReducer((currentState, newState) => {
-        return { ...currentState, ...newState };
-    }, {
+    const stateRefs = React.useRef({
         autoLoad,
         currentPage: 0,
+        loadedItems: 0,
         hasNextPage: true,
         isNextPageLoading: false,
         orderBy: defaultOrderBy,
         orderByAsc: defaultOrderBy
             ? (_a = columns.find((column) => column.field === defaultOrderBy)) === null || _a === void 0 ? void 0 : _a.sortAsc
             : undefined,
-        rows: [],
         batchSize: rowsPerPageLocal,
         selectedItems: []
     });
-    const isMounted = React.useRef(true);
+    const state = stateRefs.current;
     // Reset the state and load again
     const reset = (add) => {
-        const state = {
+        const resetState = {
             autoLoad: true,
             currentPage: 0,
+            loadedItems: 0,
             hasNextPage: true,
             isNextPageLoading: false,
             lastLoadedItems: undefined,
-            rows: [],
             ...add
         };
-        stateUpdate(state);
+        Object.assign(state, resetState);
     };
     React.useImperativeHandle(mRef, () => ({
         /**
@@ -84,7 +88,7 @@ export function TableEx(props) {
         // Update state
         state.isNextPageLoading = true;
         // Parameters
-        const { currentPage, batchSize, orderBy, orderByAsc, data } = state;
+        const { currentPage, batchSize, orderBy, orderByAsc, data, isMounted } = state;
         const loadProps = {
             currentPage,
             batchSize,
@@ -93,16 +97,16 @@ export function TableEx(props) {
             data
         };
         loadData(loadProps).then((result) => {
-            if (!isMounted.current || result == null) {
+            state.isMounted = true;
+            if (result == null || isMounted === false) {
                 return;
             }
             const newItems = result.length;
-            stateUpdate({
-                rows: result,
-                lastLoadedItems: newItems,
-                hasNextPage: newItems >= batchSize,
-                isNextPageLoading: false
-            });
+            state.lastLoadedItems = newItems;
+            state.hasNextPage = newItems >= batchSize;
+            state.isNextPageLoading = false;
+            // Update rows
+            setRows(result);
         });
     };
     const handleChangePage = (_event, newPage) => {
@@ -111,11 +115,11 @@ export function TableEx(props) {
         loadDataLocal();
     };
     const handleChangeRowsPerPage = (event) => {
-        const rowsPerPage = parseInt(event.target.value);
-        reset({ rowsPerPage });
+        const batchSize = parseInt(event.target.value);
+        reset({ batchSize });
     };
     const handleSelect = (item, checked) => {
-        const selectedItems = [...state.selectedItems];
+        const selectedItems = state.selectedItems;
         const index = selectedItems.findIndex((selectedItem) => selectedItem[idField] === item[idField]);
         if (checked) {
             if (index === -1)
@@ -128,11 +132,10 @@ export function TableEx(props) {
         if (onSelectChange != null) {
             onSelectChange(selectedItems);
         }
-        stateUpdate({ selectedItems });
     };
     const handleSelectAll = (checked) => {
-        const selectedItems = [...state.selectedItems];
-        state.rows.forEach((row) => {
+        const selectedItems = state.selectedItems;
+        rows.forEach((row) => {
             const index = selectedItems.findIndex((selectedItem) => selectedItem[idField] === row[idField]);
             if (checked) {
                 if (index === -1)
@@ -145,14 +148,13 @@ export function TableEx(props) {
         if (onSelectChange != null) {
             onSelectChange(selectedItems);
         }
-        stateUpdate({ selectedItems });
     };
     // New sort
     const handleSort = (field, asc) => {
         reset({ orderBy: field, orderByAsc: asc });
     };
     // Destruct states
-    const { autoLoad: stateAutoLoad, currentPage, hasNextPage, lastLoadedItems, orderBy, rows, batchSize, selectedItems } = state;
+    const { autoLoad: stateAutoLoad, currentPage, hasNextPage, lastLoadedItems, orderBy, batchSize, selectedItems } = state;
     // Current page selected items
     const pageSelectedItems = selectable
         ? rows.reduce((previousValue, currentItem) => {
@@ -170,7 +172,7 @@ export function TableEx(props) {
         loadDataLocal();
     React.useEffect(() => {
         return () => {
-            isMounted.current = false;
+            state.isMounted = false;
         };
     }, []);
     // Layout

package/lib/mu/pages/CommonPage.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 /// <reference types="react" />
 import { CommonPageProps } from './CommonPageProps';
 /**
@@ -8,7 +7,7 @@ export declare const CommonPagePullContainer = "#page-container";
 /**
  * Default scroll container
  */
-export declare const CommonPageScrollContainer: NodeJS.Global & typeof globalThis;
+export declare const CommonPageScrollContainer: typeof globalThis;
 /**
  * Common page
  * @param props Props

package/lib/uses/useDimensions.js

@@ -1,13 +1,5 @@
 import { DomUtils } from '@etsoo/shared';
 import React from 'react';
-const createRef = (source, index) => {
-    return [
-        (instance) => {
-            if (instance != null)
-                source[index][1] = instance;
-        }
-    ];
-};
 /**
  * Calculate element(s) dimensions
  * @param elements Observed elments count

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.4.20",
+    "version": "1.4.24",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -50,11 +50,11 @@
         "@emotion/react": "^11.7.1",
         "@emotion/style": "^0.8.0",
         "@emotion/styled": "^11.6.0",
-        "@etsoo/appscript": "^1.2.21",
+        "@etsoo/appscript": "^1.2.22",
         "@etsoo/notificationbase": "^1.1.0",
         "@etsoo/shared": "^1.1.3",
         "@mui/icons-material": "^5.2.5",
-        "@mui/material": "^5.2.7",
+        "@mui/material": "^5.2.8",
         "@reach/router": "^1.3.4",
         "@types/pica": "^5.1.3",
         "@types/pulltorefreshjs": "^0.1.5",
@@ -76,15 +76,15 @@
         "react-window": "^1.8.6"
     },
     "devDependencies": {
-        "@babel/cli": "^7.16.7",
+        "@babel/cli": "^7.16.8",
         "@babel/core": "^7.16.7",
-        "@babel/plugin-transform-runtime": "^7.16.7",
-        "@babel/preset-env": "^7.16.7",
-        "@babel/runtime-corejs3": "^7.16.7",
+        "@babel/plugin-transform-runtime": "^7.16.8",
+        "@babel/preset-env": "^7.16.8",
+        "@babel/runtime-corejs3": "^7.16.8",
         "@types/jest": "^27.4.0",
         "@types/react-test-renderer": "^17.0.1",
-        "@typescript-eslint/eslint-plugin": "^5.9.0",
-        "@typescript-eslint/parser": "^5.9.0",
+        "@typescript-eslint/eslint-plugin": "^5.9.1",
+        "@typescript-eslint/parser": "^5.9.1",
         "eslint": "^8.6.0",
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-plugin-import": "^2.25.4",

package/src/components/GridLoader.ts

@@ -126,6 +126,11 @@ export interface GridLoaderStates<T> extends GridLoadDataProps {
      */
     lastLoadedItems?: number;
 
+    /**
+     * All loaded items count
+     */
+    loadedItems: number;
+
     /**
      * Has next page?
      */
@@ -137,9 +142,9 @@ export interface GridLoaderStates<T> extends GridLoadDataProps {
     isNextPageLoading: boolean;
 
     /**
-     * Current rows
+     * Is mounted
      */
-    rows: T[];
+    isMounted?: boolean;
 
     /**
      * Selected items of id