@etsoo/react 1.4.13 → 1.4.17

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/index.d.ts

@@ -56,6 +56,7 @@ export * from './mu/OptionGroup';
 export * from './mu/PList';
 export * from './mu/ProgressCount';
 export * from './mu/PullToRefreshUI';
+export * from './mu/ResponsibleContainer';
 export * from './mu/RLink';
 export * from './mu/ScrollerListEx';
 export * from './mu/ScrollTopFab';

package/lib/index.js

@@ -59,6 +59,7 @@ export * from './mu/OptionGroup';
 export * from './mu/PList';
 export * from './mu/ProgressCount';
 export * from './mu/PullToRefreshUI';
+export * from './mu/ResponsibleContainer';
 export * from './mu/RLink';
 export * from './mu/ScrollerListEx';
 export * from './mu/ScrollTopFab';

package/lib/mu/MobileListItemRenderer.d.ts

@@ -1,6 +1,13 @@
 import React from 'react';
 import { ListItemReact } from '../components/ListItemReact';
 import { ScrollerListExInnerItemRendererProps } from './ScrollerListEx';
+/**
+ * Default mobile list item renderer
+ * @param param0 List renderer props
+ * @param margin Margin
+ * @param renderer Renderer for card content
+ * @returns Component
+ */
 export declare function MobileListItemRenderer<T>({ data, itemHeight }: ScrollerListExInnerItemRendererProps<T>, margin: {}, renderer: (data: T) => [
     string,
     string | undefined,

package/lib/mu/MobileListItemRenderer.js

@@ -12,6 +12,13 @@ function getActions(input) {
     });
     return actions;
 }
+/**
+ * Default mobile list item renderer
+ * @param param0 List renderer props
+ * @param margin Margin
+ * @param renderer Renderer for card content
+ * @returns Component
+ */
 export function MobileListItemRenderer({ data, itemHeight }, margin, renderer) {
     // Loading
     if (data == null)

package/lib/mu/ResponsibleContainer.d.ts

@@ -0,0 +1,69 @@
+import { DataTypes } from '@etsoo/shared';
+import { SxProps, Theme } from '@mui/material';
+import React from 'react';
+import { ListChildComponentProps } from 'react-window';
+import { GridColumn } from '../components/GridColumn';
+import { GridJsonData } from '../components/GridLoader';
+import { DataGridExProps } from './DataGridEx';
+import { GridMethodRef } from './GridMethodRef';
+import { ScrollerListExInnerItemRendererProps } from './ScrollerListEx';
+export interface ResponsibleContainerProps<T extends {}, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate> extends Omit<DataGridExProps<T>, 'height' | 'itemKey' | 'loadData' | 'mRef' | 'onScroll' | 'onItemsRendered'> {
+    /**
+     * Height will be deducted
+     * @param height Current calcuated height
+     */
+    adjustHeight?: (height: number) => number;
+    /**
+     * Columns
+     */
+    columns: GridColumn<T>[];
+    /**
+     * Min width to show Datagrid
+     */
+    dataGridMinWidth?: number;
+    /**
+     * Search fields
+     */
+    fields?: React.ReactElement[];
+    /**
+     * Search field template
+     */
+    fieldTemplate?: F;
+    /**
+     * Grid height
+     */
+    height?: number;
+    /**
+     * Inner item renderer
+     */
+    innerItemRenderer: (props: ScrollerListExInnerItemRendererProps<T>) => React.ReactNode;
+    /**
+     * Item renderer
+     */
+    itemRenderer?: (props: ListChildComponentProps<T>) => React.ReactElement;
+    /**
+     * Item size, a function indicates its a variable size list
+     */
+    itemSize: ((index: number) => number) | number;
+    /**
+     * Listbox SX (dataGrid determines the case)
+     */
+    listBoxSx?: (dataGrid: boolean) => SxProps<Theme>;
+    /**
+     * Load data callback
+     */
+    loadData: (data: GridJsonData & DataTypes.BasicTemplateType<F>) => PromiseLike<T[] | null | undefined>;
+    /**
+     * Methods
+     */
+    mRef?: React.MutableRefObject<GridMethodRef | undefined>;
+    /**
+     * Searchbox SX
+     */
+    searchBoxSx?: SxProps<Theme>;
+    /**
+     * Size ready to read miliseconds span
+     */
+    sizeReadyMiliseconds?: number;
+}
+export declare function ResponsibleContainer<T extends {}, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate>(props: ResponsibleContainerProps<T, F>): JSX.Element;

package/lib/mu/ResponsibleContainer.js

@@ -0,0 +1,82 @@
+import { Box, Stack } from '@mui/material';
+import React from 'react';
+import { GridDataGet } from '../components/GridLoader';
+import useCombinedRefs from '../uses/useCombinedRefs';
+import { useDimensions } from '../uses/useDimensions';
+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
+    const refs = React.useRef({});
+    const mRefs = useCombinedRefs(mRef, (ref) => {
+        if (ref == null)
+            return;
+        refs.current.ref = ref;
+    });
+    // Has fields
+    const hasFields = fields != null && fields.length > 0;
+    // 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 style = window.getComputedStyle(dimensions[0][1]);
+            const boxPadding = parseFloat(style.paddingLeft);
+            if (!isNaN(boxPadding))
+                gridHeight -= 2 * boxPadding;
+            if (adjustHeight != null) {
+                gridHeight -= adjustHeight(gridHeight);
+            }
+            if (gridHeight !== refs.current.height) {
+                refs.current.height = gridHeight;
+            }
+        }
+    }, [rect]);
+    const localLoadData = (props) => {
+        const data = GridDataGet(props, fieldTemplate);
+        return loadData(data);
+    };
+    const gridHeight = refs.current.height;
+    const list = React.useMemo(() => {
+        if (gridHeight == null)
+            return;
+        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 })));
+        }
+        // Delete
+        delete rest.checkable;
+        delete rest.borderRowsCount;
+        delete rest.bottomHeight;
+        delete rest.footerItemRenderer;
+        delete rest.headerHeight;
+        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: gridHeight, loadData: localLoadData, mRef: mRefs, ...rest })));
+    }, [gridHeight, showDataGrid]);
+    // 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 });
+    };
+    React.useEffect(() => {
+        console.log('useEffect', rect, refs.current.ref, showDataGrid);
+    }, []);
+    // Layout
+    return (React.createElement(Stack, null,
+        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.13",
+    "version": "1.4.17",
     "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/index.ts

@@ -63,6 +63,7 @@ export * from './mu/OptionGroup';
 export * from './mu/PList';
 export * from './mu/ProgressCount';
 export * from './mu/PullToRefreshUI';
+export * from './mu/ResponsibleContainer';
 export * from './mu/RLink';
 export * from './mu/ScrollerListEx';
 export * from './mu/ScrollTopFab';

package/src/mu/MobileListItemRenderer.tsx

@@ -15,6 +15,13 @@ function getActions(input: (ListItemReact | boolean)[]): ListItemReact[] {
     return actions;
 }
 
+/**
+ * Default mobile list item renderer
+ * @param param0 List renderer props
+ * @param margin Margin
+ * @param renderer Renderer for card content
+ * @returns Component
+ */
 export function MobileListItemRenderer<T>(
     { data, itemHeight }: ScrollerListExInnerItemRendererProps<T>,
     margin: {},

package/src/mu/ResponsibleContainer.tsx

@@ -0,0 +1,245 @@
+import { DataTypes } from '@etsoo/shared';
+import { Box, Stack, SxProps, Theme } from '@mui/material';
+import React from 'react';
+import { ListChildComponentProps } from 'react-window';
+import { GridColumn } from '../components/GridColumn';
+import {
+    GridDataGet,
+    GridJsonData,
+    GridLoadDataProps
+} from '../components/GridLoader';
+import useCombinedRefs from '../uses/useCombinedRefs';
+import { useDimensions } from '../uses/useDimensions';
+import {
+    DataGridEx,
+    DataGridExCalColumns,
+    DataGridExProps
+} from './DataGridEx';
+import { GridMethodRef } from './GridMethodRef';
+import {
+    ScrollerListEx,
+    ScrollerListExInnerItemRendererProps
+} from './ScrollerListEx';
+import { SearchBar } from './SearchBar';
+
+export interface ResponsibleContainerProps<
+    T extends {},
+    F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate
+> extends Omit<
+        DataGridExProps<T>,
+        | 'height'
+        | 'itemKey'
+        | 'loadData'
+        | 'mRef'
+        | 'onScroll'
+        | 'onItemsRendered'
+    > {
+    /**
+     * Height will be deducted
+     * @param height Current calcuated height
+     */
+    adjustHeight?: (height: number) => number;
+
+    /**
+     * Columns
+     */
+    columns: GridColumn<T>[];
+
+    /**
+     * Min width to show Datagrid
+     */
+    dataGridMinWidth?: number;
+
+    /**
+     * Search fields
+     */
+    fields?: React.ReactElement[];
+
+    /**
+     * Search field template
+     */
+    fieldTemplate?: F;
+
+    /**
+     * Grid height
+     */
+    height?: number;
+
+    /**
+     * Inner item renderer
+     */
+    innerItemRenderer: (
+        props: ScrollerListExInnerItemRendererProps<T>
+    ) => React.ReactNode;
+
+    /**
+     * Item renderer
+     */
+    itemRenderer?: (props: ListChildComponentProps<T>) => React.ReactElement;
+
+    /**
+     * Item size, a function indicates its a variable size list
+     */
+    itemSize: ((index: number) => number) | number;
+
+    /**
+     * Listbox SX (dataGrid determines the case)
+     */
+    listBoxSx?: (dataGrid: boolean) => SxProps<Theme>;
+
+    /**
+     * Load data callback
+     */
+    loadData: (
+        data: GridJsonData & DataTypes.BasicTemplateType<F>
+    ) => PromiseLike<T[] | null | undefined>;
+
+    /**
+     * Methods
+     */
+    mRef?: React.MutableRefObject<GridMethodRef | undefined>;
+
+    /**
+     * Searchbox SX
+     */
+    searchBoxSx?: SxProps<Theme>;
+
+    /**
+     * Size ready to read miliseconds span
+     */
+    sizeReadyMiliseconds?: number;
+}
+
+interface LocalRefs {
+    height?: number;
+    ref?: GridMethodRef;
+}
+
+export function ResponsibleContainer<
+    T extends {},
+    F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate
+>(props: ResponsibleContainerProps<T, F>) {
+    // Destruct
+    const {
+        adjustHeight,
+        columns,
+        dataGridMinWidth = DataGridExCalColumns(columns).total,
+        fields,
+        fieldTemplate,
+        height,
+        listBoxSx,
+        loadData,
+        mRef,
+        searchBoxSx,
+        sizeReadyMiliseconds = 0,
+        ...rest
+    } = props;
+
+    // Refs
+    const refs = React.useRef<LocalRefs>({});
+
+    const mRefs = useCombinedRefs(mRef, (ref: GridMethodRef) => {
+        if (ref == null) return;
+        refs.current.ref = ref;
+    });
+
+    // Has fields
+    const hasFields = fields != null && fields.length > 0;
+
+    // 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 =
+                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 (adjustHeight != null) {
+                gridHeight -= adjustHeight(gridHeight);
+            }
+
+            if (gridHeight !== refs.current.height) {
+                refs.current.height = gridHeight;
+            }
+        }
+    }, [rect]);
+
+    const localLoadData = (props: GridLoadDataProps) => {
+        const data = GridDataGet(props, fieldTemplate);
+        return loadData(data);
+    };
+
+    const gridHeight = refs.current.height;
+    const list = React.useMemo(() => {
+        if (gridHeight == null) return;
+
+        if (showDataGrid) {
+            // Delete
+            delete rest.itemRenderer;
+
+            return (
+                <Box sx={listBoxSx == null ? undefined : listBoxSx(true)}>
+                    <DataGridEx<T>
+                        autoLoad={!hasFields}
+                        height={gridHeight}
+                        loadData={localLoadData}
+                        mRef={mRefs}
+                        columns={columns}
+                        {...rest}
+                    />
+                </Box>
+            );
+        }
+
+        // Delete
+        delete rest.checkable;
+        delete rest.borderRowsCount;
+        delete rest.bottomHeight;
+        delete rest.footerItemRenderer;
+        delete rest.headerHeight;
+        delete rest.hideFooter;
+        delete rest.hoverColor;
+        delete rest.selectable;
+
+        return (
+            <Box sx={listBoxSx == null ? undefined : listBoxSx(false)}>
+                <ScrollerListEx<T>
+                    autoLoad={!hasFields}
+                    height={gridHeight}
+                    loadData={localLoadData}
+                    mRef={mRefs}
+                    {...rest}
+                />
+            </Box>
+        );
+    }, [gridHeight, showDataGrid]);
+
+    // 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 });
+    };
+
+    React.useEffect(() => {
+        console.log('useEffect', rect, refs.current.ref, showDataGrid);
+    }, []);
+
+    // Layout
+    return (
+        <Stack>
+            {hasFields && (
+                <Box ref={dimensions[0][0]} sx={searchBoxSx}>
+                    <SearchBar fields={fields} onSubmit={onSubmit} />
+                </Box>
+            )}
+            {list}
+        </Stack>
+    );
+}

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>