@etsoo/react 1.4.15 → 1.4.19

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

@@ -23,9 +23,8 @@ export function ResponsibleContainer(props) {
     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;
-    console.log(hasFields, showDataGrid, refs);
     React.useEffect(() => {
-        if (rect != null && rect.height > 50 && height == null) {
+        if (rect != null && rect.height >= 0 && height == null) {
             let gridHeight = window.innerHeight - Math.round(rect.top + rect.height + 1);
             const style = window.getComputedStyle(dimensions[0][1]);
             const boxPadding = parseFloat(style.paddingLeft);
@@ -44,6 +43,7 @@ export function ResponsibleContainer(props) {
         return loadData(data);
     };
     const gridHeight = refs.current.height;
+    console.log(rect, gridHeight, showDataGrid);
     const list = React.useMemo(() => {
         if (gridHeight == null)
             return;
@@ -72,7 +72,7 @@ export function ResponsibleContainer(props) {
         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.15",
+    "version": "1.4.19",
     "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

@@ -151,10 +151,8 @@ export function ResponsibleContainer<
     const rect = dimensions[0][2];
     const showDataGrid = (rect?.width ?? 0) >= dataGridMinWidth;
 
-    console.log(hasFields, showDataGrid, refs);
-
     React.useEffect(() => {
-        if (rect != null && rect.height > 50 && height == null) {
+        if (rect != null && rect.height >= 0 && height == null) {
             let gridHeight =
                 window.innerHeight - Math.round(rect.top + rect.height + 1);
 
@@ -178,6 +176,7 @@ export function ResponsibleContainer<
     };
 
     const gridHeight = refs.current.height;
+    console.log(rect, gridHeight, showDataGrid);
     const list = React.useMemo(() => {
         if (gridHeight == null) return;
 
@@ -230,7 +229,7 @@ export function ResponsibleContainer<
 
     // 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>