@etsoo/react 1.4.21 → 1.4.22

package/lib/components/ScrollerGrid.js

@@ -108,6 +108,8 @@ export const ScrollerGrid = (props) => {
             ...add
         };
         Object.assign(state, resetState);
+        // Reset items
+        setRows([]);
     };
     React.useImperativeHandle(mRef, () => ({
         scrollTo(params) {

package/lib/mu/ResponsibleContainer.d.ts

@@ -60,6 +60,10 @@ export interface ResponsibleContainerProps<T extends {}, F extends DataTypes.Bas
      * Methods
      */
     mRef?: React.MutableRefObject<GridMethodRef | undefined>;
+    /**
+     * Paddings
+     */
+    paddings?: {};
     /**
      * Pull to refresh data
      */

package/lib/mu/ResponsibleContainer.js

@@ -5,6 +5,7 @@ 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';
@@ -15,35 +16,36 @@ import { SearchBar } from './SearchBar';
  */
 export function ResponsibleContainer(props) {
     // Destruct
-    const { adjustHeight, columns, dataGridMinWidth = DataGridExCalColumns(columns).total, fields, fieldTemplate, height, listBoxSx, loadData, mRef, pullToRefresh = true, 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 () => {
-            refs.current.mounted = false;
+            state.mounted = false;
         };
     }, []);
     // Has fields
     const hasFields = fields != null && fields.length > 0;
     // Load data
     const localLoadData = (props) => {
-        refs.current.mounted = true;
+        state.mounted = true;
         const data = GridDataGet(props, fieldTemplate);
         return loadData(data);
     };
     // On submit callback
     const onSubmit = (data, _reset) => {
-        if (data == null || rect == null || refs.current.ref == null)
+        if (data == null || state.ref == null)
             return;
-        refs.current.ref.reset({ data });
+        state.ref.reset({ data });
     };
     // Watch container
     const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds, (_preRect, rect) => {
@@ -51,15 +53,15 @@ export function ResponsibleContainer(props) {
         if (rect == null)
             return true;
         // Last rect
-        const lastRect = refs.current.rect;
+        const lastRect = state.rect;
         // 32 = scroll bar width
         if (lastRect != null &&
-            refs.current.mounted !== true &&
+            state.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;
+        state.rect = rect;
         return false;
     });
     // Rect
@@ -80,12 +82,11 @@ export function ResponsibleContainer(props) {
         }
         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);
             }
@@ -125,7 +126,7 @@ export function ResponsibleContainer(props) {
         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 = refs.current.ref) === null || _a === void 0 ? void 0 : _a.reset(); }, shouldPullToRefresh: () => {
+        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/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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.4.21",
+    "version": "1.4.22",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -54,7 +54,7 @@
         "@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/ScrollerGrid.tsx

@@ -289,6 +289,9 @@ export const ScrollerGrid = <T extends Record<string, unknown>>(
             ...add
         };
         Object.assign(state, resetState);
+
+        // Reset items
+        setRows([]);
     };
 
     React.useImperativeHandle(

package/src/mu/ResponsibleContainer.tsx

@@ -17,6 +17,7 @@ import {
     DataGridExProps
 } from './DataGridEx';
 import { GridMethodRef } from './GridMethodRef';
+import { MUGlobal } from './MUGlobal';
 import { PullToRefreshUI } from './PullToRefreshUI';
 import {
     ScrollerListEx,
@@ -104,6 +105,11 @@ export interface ResponsibleContainerProps<
      */
     mRef?: React.MutableRefObject<GridMethodRef | undefined>;
 
+    /**
+     * Paddings
+     */
+    paddings?: {};
+
     /**
      * Pull to refresh data
      */
@@ -146,8 +152,9 @@ export function ResponsibleContainer<
         listBoxSx,
         loadData,
         mRef,
+        paddings = MUGlobal.pagePaddings,
         pullToRefresh = true,
-        searchBoxSx,
+        searchBoxSx = { marginBottom: MUGlobal.half(paddings) },
         sizeReadyMiliseconds = 0,
         ...rest
     } = props;
@@ -157,16 +164,17 @@ export function ResponsibleContainer<
 
     // 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 () => {
-            refs.current.mounted = false;
+            state.mounted = false;
         };
     }, []);
 
@@ -175,15 +183,15 @@ export function ResponsibleContainer<
 
     // Load data
     const localLoadData = (props: GridLoadDataProps) => {
-        refs.current.mounted = true;
+        state.mounted = true;
         const data = GridDataGet(props, fieldTemplate);
         return loadData(data);
     };
 
     // On submit callback
     const onSubmit = (data: FormData, _reset: boolean) => {
-        if (data == null || rect == null || refs.current.ref == null) return;
-        refs.current.ref.reset({ data });
+        if (data == null || state.ref == null) return;
+        state.ref.reset({ data });
     };
 
     // Watch container
@@ -196,19 +204,19 @@ export function ResponsibleContainer<
             if (rect == null) return true;
 
             // Last rect
-            const lastRect = refs.current.rect;
+            const lastRect = state.rect;
 
             // 32 = scroll bar width
             if (
                 lastRect != null &&
-                refs.current.mounted !== true &&
+                state.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;
+            state.rect = rect;
 
             return false;
         }
@@ -234,12 +242,11 @@ export function ResponsibleContainer<
             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);
@@ -316,7 +323,7 @@ export function ResponsibleContainer<
                     instructionsPullToRefresh={labels.pullToRefresh}
                     instructionsReleaseToRefresh={labels.releaseToRefresh}
                     instructionsRefreshing={labels.refreshing}
-                    onRefresh={() => refs.current.ref?.reset()}
+                    onRefresh={() => state.ref?.reset()}
                     shouldPullToRefresh={() => {
                         const container = document.querySelector(pullContainer);
                         return !container?.scrollTop;