@etsoo/react 1.4.16 → 1.4.20

package/lib/components/ScrollerList.js

@@ -1,11 +1,12 @@
+import { Utils } from '@etsoo/shared';
 import React from 'react';
 import { FixedSizeList, VariableSizeList } from 'react-window';
 import useCombinedRefs from '../uses/useCombinedRefs';
 import { GridSizeGet } from './GridLoader';
 // Calculate loadBatchSize
 const calculateBatchSize = (height, itemSize) => {
-    return (2 +
-        Math.ceil(height / (typeof itemSize === 'function' ? itemSize(0) : itemSize)));
+    const size = Utils.getResult(itemSize, 0);
+    return 2 + Math.ceil(height / size);
 };
 /**
  * Scroller vertical list

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,35 +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 > 50 && 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;
-    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;
@@ -62,17 +69,16 @@ 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) => {
-        console.log(data, rect, refs.current.ref, showDataGrid);
         if (data == null || rect == null || refs.current.ref == null)
             return;
         refs.current.ref.reset({ data });
     };
     // Layout
-    return (React.createElement(Stack, null,
+    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));

package/lib/mu/TabBox.d.ts

@@ -7,7 +7,7 @@ export interface TabBoxPanel extends Omit<TabProps, 'value' | 'children'> {
     /**
      * Children
      */
-    children?: React.ReactNode;
+    children?: ((visible: boolean) => React.ReactNode) | React.ReactNode;
     /**
      * Panel box props
      */

package/lib/mu/TabBox.js

@@ -1,3 +1,4 @@
+import { Utils } from '@etsoo/shared';
 import { Box, Tab, Tabs } from '@mui/material';
 import React from 'react';
 /**
@@ -20,5 +21,5 @@ export function TabBox(props) {
                     if (onChange)
                         onChange(event, newValue);
                 }, ...rest }, tabs.map(({ children, panel, ...tabRest }, index) => (React.createElement(Tab, { key: index, value: index, ...tabRest }))))),
-        tabs.map(({ children, panel }, index) => (React.createElement(Box, { key: index, hidden: value !== index, ...panel }, children)))));
+        tabs.map(({ children, panel }, index) => (React.createElement(Box, { key: index, hidden: value !== index, ...panel }, Utils.getResult(children, value === index))))));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.4.16",
+    "version": "1.4.20",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -50,9 +50,9 @@
         "@emotion/react": "^11.7.1",
         "@emotion/style": "^0.8.0",
         "@emotion/styled": "^11.6.0",
-        "@etsoo/appscript": "^1.2.20",
+        "@etsoo/appscript": "^1.2.21",
         "@etsoo/notificationbase": "^1.1.0",
-        "@etsoo/shared": "^1.1.0",
+        "@etsoo/shared": "^1.1.3",
         "@mui/icons-material": "^5.2.5",
         "@mui/material": "^5.2.7",
         "@reach/router": "^1.3.4",

package/src/components/ScrollerList.tsx

@@ -1,3 +1,4 @@
+import { Utils } from '@etsoo/shared';
 import React from 'react';
 import {
     Align,
@@ -88,12 +89,8 @@ const calculateBatchSize = (
     height: number,
     itemSize: ((index: number) => number) | number
 ) => {
-    return (
-        2 +
-        Math.ceil(
-            height / (typeof itemSize === 'function' ? itemSize(0) : itemSize)
-        )
-    );
+    const size = Utils.getResult(itemSize, 0);
+    return 2 + Math.ceil(height / size);
 };
 
 /**

package/src/mu/ResponsibleContainer.tsx

@@ -149,35 +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 > 50 && 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;
-    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
@@ -187,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}
@@ -211,25 +218,24 @@ 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) => {
-        console.log(data, rect, refs.current.ref, showDataGrid);
         if (data == null || rect == null || refs.current.ref == null) return;
         refs.current.ref.reset({ data });
     };
 
     // Layout
     return (
-        <Stack>
+        <Stack ref={hasFields ? undefined : dimensions[0][0]}>
             {hasFields && (
                 <Box ref={dimensions[0][0]} sx={searchBoxSx}>
                     <SearchBar fields={fields} onSubmit={onSubmit} />

package/src/mu/TabBox.tsx

@@ -1,3 +1,4 @@
+import { Utils } from '@etsoo/shared';
 import { Box, BoxProps, Tab, TabProps, Tabs, TabsProps } from '@mui/material';
 import React from 'react';
 
@@ -8,7 +9,7 @@ export interface TabBoxPanel extends Omit<TabProps, 'value' | 'children'> {
     /**
      * Children
      */
-    children?: React.ReactNode;
+    children?: ((visible: boolean) => React.ReactNode) | React.ReactNode;
 
     /**
      * Panel box props
@@ -76,7 +77,7 @@ export function TabBox(props: TabBoxPros) {
             </Box>
             {tabs.map(({ children, panel }, index) => (
                 <Box key={index} hidden={value !== index} {...panel}>
-                    {children}
+                    {Utils.getResult(children, value === index)}
                 </Box>
             ))}
         </React.Fragment>