@etsoo/react 1.4.19 → 1.4.20

package/lib/mu/ResponsibleContainer.js

@@ -7,7 +7,6 @@ import { DataGridEx, DataGridExCalColumns } from './DataGridEx';
 import { ScrollerListEx } from './ScrollerListEx';
 import { SearchBar } from './SearchBar';
 export function ResponsibleContainer(props) {
-    var _a;
     // Destruct
     const { adjustHeight, columns, dataGridMinWidth = DataGridExCalColumns(columns).total, fields, fieldTemplate, height, listBoxSx, loadData, mRef, searchBoxSx, sizeReadyMiliseconds = 0, ...rest } = props;
     // Refs
@@ -22,36 +21,43 @@ export function ResponsibleContainer(props) {
     // Watch container
     const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
     const rect = dimensions[0][2];
-    const showDataGrid = ((_a = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _a !== void 0 ? _a : 0) >= dataGridMinWidth;
-    React.useEffect(() => {
-        if (rect != null && rect.height >= 0 && height == null) {
-            let gridHeight = window.innerHeight - Math.round(rect.top + rect.height + 1);
+    const localLoadData = (props) => {
+        const data = GridDataGet(props, fieldTemplate);
+        return loadData(data);
+    };
+    const list = React.useMemo(() => {
+        // No rect
+        if (rect == null)
+            return;
+        // If height is the same
+        let heightLocal;
+        if (height != null) {
+            heightLocal = height;
+        }
+        else {
+            // Auto calculation
+            heightLocal =
+                window.innerHeight - Math.round(rect.top + rect.height + 1);
             const style = window.getComputedStyle(dimensions[0][1]);
             const boxPadding = parseFloat(style.paddingLeft);
             if (!isNaN(boxPadding))
-                gridHeight -= 2 * boxPadding;
+                heightLocal -= 2 * boxPadding;
             if (adjustHeight != null) {
-                gridHeight -= adjustHeight(gridHeight);
-            }
-            if (gridHeight !== refs.current.height) {
-                refs.current.height = gridHeight;
+                heightLocal -= adjustHeight(heightLocal);
             }
         }
-    }, [rect]);
-    const localLoadData = (props) => {
-        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)
+        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: gridHeight, loadData: localLoadData, mRef: mRefs, columns: columns, ...rest })));
+                React.createElement(DataGridEx, { autoLoad: !hasFields, height: heightLocal, loadData: localLoadData, mRef: mRefs, columns: columns, ...rest })));
         }
         // Delete
         delete rest.checkable;
@@ -63,8 +69,8 @@ export function ResponsibleContainer(props) {
         delete rest.hoverColor;
         delete rest.selectable;
         return (React.createElement(Box, { sx: listBoxSx == null ? undefined : listBoxSx(false) },
-            React.createElement(ScrollerListEx, { autoLoad: !hasFields, height: gridHeight, loadData: localLoadData, mRef: mRefs, ...rest })));
-    }, [gridHeight, showDataGrid]);
+            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)

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.4.19",
+    "version": "1.4.20",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",

package/src/mu/ResponsibleContainer.tsx

@@ -149,36 +149,42 @@ export function ResponsibleContainer<
     // Watch container
     const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
     const rect = dimensions[0][2];
-    const showDataGrid = (rect?.width ?? 0) >= dataGridMinWidth;
 
-    React.useEffect(() => {
-        if (rect != null && rect.height >= 0 && height == null) {
-            let gridHeight =
+    const localLoadData = (props: GridLoadDataProps) => {
+        const data = GridDataGet(props, fieldTemplate);
+        return loadData(data);
+    };
+
+    const list = React.useMemo(() => {
+        // No rect
+        if (rect == null) return;
+
+        // If height is the same
+        let heightLocal: number;
+        if (height != null) {
+            heightLocal = height;
+        } else {
+            // Auto calculation
+            heightLocal =
                 window.innerHeight - Math.round(rect.top + rect.height + 1);
 
             const style = window.getComputedStyle(dimensions[0][1]!);
             const boxPadding = parseFloat(style.paddingLeft);
-            if (!isNaN(boxPadding)) gridHeight -= 2 * boxPadding;
+            if (!isNaN(boxPadding)) heightLocal -= 2 * boxPadding;
 
             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);
-    };
+        console.log(rect, heightLocal, refs.current.height);
 
-    const gridHeight = refs.current.height;
-    console.log(rect, gridHeight, showDataGrid);
-    const list = React.useMemo(() => {
-        if (gridHeight == null) return;
+        // 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
@@ -188,7 +194,7 @@ export function ResponsibleContainer<
                 <Box sx={listBoxSx == null ? undefined : listBoxSx(true)}>
                     <DataGridEx<T>
                         autoLoad={!hasFields}
-                        height={gridHeight}
+                        height={heightLocal}
                         loadData={localLoadData}
                         mRef={mRefs}
                         columns={columns}
@@ -212,14 +218,14 @@ export function ResponsibleContainer<
             <Box sx={listBoxSx == null ? undefined : listBoxSx(false)}>
                 <ScrollerListEx<T>
                     autoLoad={!hasFields}
-                    height={gridHeight}
+                    height={heightLocal}
                     loadData={localLoadData}
                     mRef={mRefs}
                     {...rest}
                 />
             </Box>
         );
-    }, [gridHeight, showDataGrid]);
+    }, [rect, height]);
 
     // On submit callback
     const onSubmit = (data: FormData, _reset: boolean) => {