@etsoo/react 1.4.25 → 1.4.29

package/lib/components/ScrollerList.js

@@ -15,7 +15,7 @@ const calculateBatchSize = (height, itemSize) => {
  */
 export const ScrollerList = (props) => {
     // Destruct
-    const { autoLoad = true, defaultOrderBy, defaultOrderByAsc, height = window.innerHeight, width = '100%', mRef, oRef, style = {}, itemRenderer, itemSize, loadBatchSize = calculateBatchSize(height, itemSize), loadData, threshold = GridSizeGet(loadBatchSize, height) / 2, onItemsRendered, ...rest } = props;
+    const { autoLoad = true, defaultOrderBy, defaultOrderByAsc, height = document.documentElement.clientHeight, width = '100%', mRef, oRef, style = {}, itemRenderer, itemSize, loadBatchSize = calculateBatchSize(height, itemSize), loadData, threshold = GridSizeGet(loadBatchSize, height) / 2, onItemsRendered, ...rest } = props;
     // Style
     Object.assign(style, {
         width: '100%',

package/lib/mu/ResponsibleContainer.d.ts

@@ -20,6 +20,10 @@ export interface ResponsibleContainerProps<T extends {}, F extends DataTypes.Bas
      * Columns
      */
     columns: GridColumn<T>[];
+    /**
+     * Container box SX (dataGrid determines the case)
+     */
+    containerBoxSx?: (dataGrid: boolean) => SxProps<Theme>;
     /**
      * Min width to show Datagrid
      */
@@ -60,6 +64,10 @@ export interface ResponsibleContainerProps<T extends {}, F extends DataTypes.Bas
      * Methods
      */
     mRef?: React.MutableRefObject<GridMethodRef | undefined>;
+    /**
+     * Element ready callback
+     */
+    elementReady?: (element: HTMLElement, isDataGrid: boolean) => void;
     /**
      * Paddings
      */

package/lib/mu/ResponsibleContainer.js

@@ -12,8 +12,8 @@ import { SearchBar } from './SearchBar';
 function getDefaultSearchBoxSx(paddings) {
     const half = MUGlobal.half(paddings);
     return {
-        paddingLeft: half,
-        paddingRight: half,
+        paddingLeft: (theme) => theme.spacing(0.5),
+        paddingRight: (theme) => theme.spacing(0.5),
         paddingTop: half,
         marginBottom: half
     };
@@ -25,7 +25,7 @@ function getDefaultSearchBoxSx(paddings) {
  */
 export function ResponsibleContainer(props) {
     // Destruct
-    const { adjustHeight, columns, dataGridMinWidth = DataGridExCalColumns(columns).total, fields, fieldTemplate, height, listBoxSx, loadData, mRef, paddings = MUGlobal.pagePaddings, pullToRefresh = true, searchBoxSx = getDefaultSearchBoxSx(paddings), sizeReadyMiliseconds = 0, ...rest } = props;
+    const { adjustHeight, columns, containerBoxSx, dataGridMinWidth = DataGridExCalColumns(columns).total, elementReady, fields, fieldTemplate, height, listBoxSx, loadData, mRef, paddings = MUGlobal.pagePaddings, pullToRefresh = true, searchBoxSx = getDefaultSearchBoxSx(paddings), sizeReadyMiliseconds = 0, ...rest } = props;
     // Labels
     const labels = Labels.CommonPage;
     // Refs
@@ -64,6 +64,7 @@ export function ResponsibleContainer(props) {
         // Last rect
         const lastRect = state.rect;
         // 32 = scroll bar width
+        console.log(lastRect, rect);
         if (lastRect != null &&
             state.mounted !== true &&
             Math.abs(rect.width - lastRect.width) <= 32 &&
@@ -91,7 +92,9 @@ export function ResponsibleContainer(props) {
         }
         else {
             // Auto calculation
-            heightLocal = window.innerHeight - Math.round(rect.bottom + 1);
+            heightLocal =
+                document.documentElement.clientHeight -
+                    Math.round(rect.bottom + 1);
             const style = window.getComputedStyle(dimensions[0][1]);
             const boxMargin = parseFloat(style.marginBottom);
             if (!isNaN(boxMargin))
@@ -107,7 +110,10 @@ export function ResponsibleContainer(props) {
                 React.createElement(Box, { sx: listBoxSx == null
                         ? undefined
                         : listBoxSx(true, heightLocal) },
-                    React.createElement(DataGridEx, { autoLoad: !hasFields, height: heightLocal, width: rect.width, loadData: localLoadData, mRef: mRefs, columns: columns, ...rest })),
+                    React.createElement(DataGridEx, { autoLoad: !hasFields, height: heightLocal, width: rect.width, loadData: localLoadData, mRef: mRefs, outerRef: (element) => {
+                            if (element != null && elementReady)
+                                elementReady(element, true);
+                        }, columns: columns, ...rest })),
                 true
             ];
         }
@@ -124,7 +130,10 @@ export function ResponsibleContainer(props) {
             React.createElement(Box, { sx: listBoxSx == null
                     ? undefined
                     : listBoxSx(false, heightLocal) },
-                React.createElement(ScrollerListEx, { autoLoad: !hasFields, width: rect.width, height: heightLocal, loadData: localLoadData, mRef: mRefs, ...rest })),
+                React.createElement(ScrollerListEx, { autoLoad: !hasFields, height: heightLocal, loadData: localLoadData, mRef: mRefs, oRef: (element) => {
+                        if (element != null && elementReady)
+                            elementReady(element, false);
+                    }, ...rest })),
             false
         ];
     })();
@@ -140,10 +149,11 @@ export function ResponsibleContainer(props) {
             ? '.DataGridEx-Body'
             : '.ScrollerListEx-Body';
     // Layout
-    return (React.createElement(React.Fragment, null,
+    return (React.createElement(Box, { sx: containerBoxSx == null || showDataGrid == null
+            ? undefined
+            : containerBoxSx(showDataGrid) },
         React.createElement(Stack, null,
-            React.createElement(Box, { ref: dimensions[0][0], sx: searchBoxSx }, searchBar),
-            list),
+            React.createElement(Box, { ref: dimensions[0][0], sx: searchBoxSx }, searchBar)),
         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/SearchBar.js

@@ -52,6 +52,7 @@ const setChildState = (child, enabled) => {
  * @returns Component
  */
 export function SearchBar(props) {
+    var _a;
     // Destruct
     const { className, fields, innerHeight = 40, onSubmit } = props;
     // Labels
@@ -64,11 +65,13 @@ export function SearchBar(props) {
     // Drawer open / close
     const [open, updateOpen] = React.useState(false);
     // State
-    const state = React.useRef({}).current;
+    const state = React.useRef({ hasMore: true }).current;
+    const lastMaxWidth = (_a = state.lastMaxWidth) !== null && _a !== void 0 ? _a : 9999;
     // Watch container
     const { dimensions } = useDimensions(1, (target, rect) => {
         // Same logic from resetButtonRef
-        if (rect.width === state.lastMaxWidth)
+        if (rect.width === lastMaxWidth ||
+            (!state.hasMore && rect.width > lastMaxWidth))
             return false;
         // Len
         const len = target.children.length;
@@ -96,7 +99,8 @@ export function SearchBar(props) {
             return;
         // Container width
         let maxWidth = containerRect.width;
-        if (maxWidth === state.lastMaxWidth) {
+        if (maxWidth === lastMaxWidth ||
+            (!state.hasMore && maxWidth > lastMaxWidth)) {
             return;
         }
         state.lastMaxWidth = maxWidth;
@@ -158,6 +162,7 @@ export function SearchBar(props) {
             }
         }
         // Show or hide more button
+        state.hasMore = hasMore;
         setElementVisible(buttonMore, hasMore);
         setElementVisible(resetButton, true);
         // Update menu start index

package/lib/mu/pages/DataGridPage.js

@@ -42,7 +42,8 @@ export function DataGridPage(props) {
     const rect = dimensions[0][2];
     React.useEffect(() => {
         if (rect != null && rect.height > 50 && height == null) {
-            let gridHeight = window.innerHeight - Math.round(rect.top + rect.height + 1);
+            let gridHeight = document.documentElement.clientHeight -
+                Math.round(rect.top + rect.height + 1);
             const style = window.getComputedStyle(dimensions[0][1]);
             const paddingBottom = parseFloat(style.paddingBottom);
             if (!isNaN(paddingBottom))

package/lib/mu/pages/FixedListPage.js

@@ -48,7 +48,8 @@ export function FixedListPage(props) {
     const rect = dimensions[0][2];
     const list = React.useMemo(() => {
         if (rect != null && rect.height > 50) {
-            let height = window.innerHeight - Math.round(rect.top + rect.height + 1);
+            let height = document.documentElement.clientHeight -
+                Math.round(rect.top + rect.height + 1);
             if (adjustHeight != null) {
                 height -= adjustHeight(height);
             }

package/lib/mu/pages/ResponsivePage.js

@@ -12,11 +12,13 @@ export function ResponsivePage(props) {
     // Destruct
     const { pageProps = {}, ...rest } = props;
     (_a = pageProps.paddings) !== null && _a !== void 0 ? _a : (pageProps.paddings = MUGlobal.pagePaddings);
-    const { paddings, ...pageRest } = pageProps;
-    const halfPadding = MUGlobal.half(paddings);
+    const { paddings, fabColumnDirection, ...pageRest } = pageProps;
+    // State
+    const [scrollContainer, setScrollContainer] = React.useState();
+    const [direction, setDirection] = React.useState(fabColumnDirection);
     // Layout
-    return (React.createElement(CommonPage, { ...pageRest, paddings: {} },
-        React.createElement(ResponsibleContainer, { paddings: paddings, listBoxSx: (dataGrid, height) => {
+    return (React.createElement(CommonPage, { ...pageRest, paddings: {}, scrollContainer: scrollContainer, fabColumnDirection: direction },
+        React.createElement(ResponsibleContainer, { paddings: paddings, containerBoxSx: (dataGrid) => {
                 if (dataGrid) {
                     return {
                         padding: paddings
@@ -24,9 +26,20 @@ export function ResponsivePage(props) {
                 }
                 else {
                     return {
-                        height,
-                        paddingTop: halfPadding,
-                        paddingBottom: halfPadding
+                        paddingTop: paddings,
+                        paddingBottom: paddings
+                    };
+                }
+            }, elementReady: (element, isDataGrid) => {
+                setDirection(!isDataGrid);
+                setScrollContainer(element);
+            }, listBoxSx: (dataGrid, height) => {
+                if (dataGrid) {
+                    return {};
+                }
+                else {
+                    return {
+                        height: height
                     };
                 }
             }, ...rest })));

package/lib/mu/pages/TablePage.js

@@ -51,7 +51,8 @@ export function TablePage(props) {
     const rect = dimensions[0][2];
     const list = React.useMemo(() => {
         if (rect != null && rect.height > 50 && rect.width >= totalWidth) {
-            let maxHeight = window.innerHeight - (rect.top + rect.height + 1);
+            let maxHeight = document.documentElement.clientHeight -
+                (rect.top + rect.height + 1);
             const style = window.getComputedStyle(dimensions[0][1]);
             const paddingBottom = parseFloat(style.paddingBottom);
             if (!isNaN(paddingBottom))

package/lib/uses/useWindowSize.d.ts

@@ -1,9 +1,10 @@
+interface ISize {
+    width: number;
+    height: number;
+}
 /**
  * Detect window size
- * @param miliseconds Miliseconds delayed
  * @returns Window size
  */
-export declare const useWindowSize: (miliseconds?: number) => {
-    width: number;
-    height: number;
-};
+export declare const useWindowSize: () => ISize;
+export {};

package/lib/uses/useWindowSize.js

@@ -1,33 +1,39 @@
 import React from 'react';
 /**
  * Detect window size
- * @param miliseconds Miliseconds delayed
  * @returns Window size
  */
-export const useWindowSize = (miliseconds = 50) => {
+export const useWindowSize = () => {
     // State
     const [size, setSize] = React.useState({
         width: 0,
         height: 0
     });
-    const [state] = React.useState({});
-    const resizeHandler = () => {
-        if (state.seed != null)
-            window.clearTimeout(state.seed);
-        state.seed = window.setTimeout(() => {
-            setSize({
-                width: window.innerWidth,
-                height: window.innerHeight
-            });
-            state.seed = undefined;
-        }, miliseconds);
-    };
     React.useEffect(() => {
+        let ticking = false;
+        let lastKnownSize;
+        let requestAnimationFrameSeed = 0;
+        const resizeHandler = () => {
+            lastKnownSize = {
+                width: document.documentElement.clientWidth,
+                height: document.documentElement.clientHeight
+            };
+            if (!ticking) {
+                requestAnimationFrameSeed = window.requestAnimationFrame(() => {
+                    setSize(lastKnownSize);
+                    ticking = false;
+                    requestAnimationFrameSeed = 0;
+                });
+                ticking = true;
+            }
+        };
         window.addEventListener('resize', resizeHandler);
         return () => {
+            // Cancel animation frame
+            if (requestAnimationFrameSeed > 0)
+                window.cancelAnimationFrame(requestAnimationFrameSeed);
+            // Remove scroll event
             window.removeEventListener('resize', resizeHandler);
-            if (state.seed != null)
-                window.clearTimeout(state.seed);
         };
     }, []);
     // Return

package/package.json

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

package/src/components/ScrollerList.tsx

@@ -106,7 +106,7 @@ export const ScrollerList = <T extends Record<string, any>>(
         autoLoad = true,
         defaultOrderBy,
         defaultOrderByAsc,
-        height = window.innerHeight,
+        height = document.documentElement.clientHeight,
         width = '100%',
         mRef,
         oRef,

package/src/mu/ResponsibleContainer.tsx

@@ -51,6 +51,11 @@ export interface ResponsibleContainerProps<
      */
     columns: GridColumn<T>[];
 
+    /**
+     * Container box SX (dataGrid determines the case)
+     */
+    containerBoxSx?: (dataGrid: boolean) => SxProps<Theme>;
+
     /**
      * Min width to show Datagrid
      */
@@ -105,6 +110,11 @@ export interface ResponsibleContainerProps<
      */
     mRef?: React.MutableRefObject<GridMethodRef | undefined>;
 
+    /**
+     * Element ready callback
+     */
+    elementReady?: (element: HTMLElement, isDataGrid: boolean) => void;
+
     /**
      * Paddings
      */
@@ -135,8 +145,8 @@ interface LocalRefs {
 function getDefaultSearchBoxSx(paddings: {}): SxProps<Theme> {
     const half = MUGlobal.half(paddings);
     return {
-        paddingLeft: half,
-        paddingRight: half,
+        paddingLeft: (theme) => theme.spacing(0.5),
+        paddingRight: (theme) => theme.spacing(0.5),
         paddingTop: half,
         marginBottom: half
     };
@@ -155,7 +165,9 @@ export function ResponsibleContainer<
     const {
         adjustHeight,
         columns,
+        containerBoxSx,
         dataGridMinWidth = DataGridExCalColumns(columns).total,
+        elementReady,
         fields,
         fieldTemplate,
         height,
@@ -217,6 +229,7 @@ export function ResponsibleContainer<
             const lastRect = state.rect;
 
             // 32 = scroll bar width
+            console.log(lastRect, rect);
             if (
                 lastRect != null &&
                 state.mounted !== true &&
@@ -252,7 +265,9 @@ export function ResponsibleContainer<
             heightLocal = height;
         } else {
             // Auto calculation
-            heightLocal = window.innerHeight - Math.round(rect.bottom + 1);
+            heightLocal =
+                document.documentElement.clientHeight -
+                Math.round(rect.bottom + 1);
 
             const style = window.getComputedStyle(dimensions[0][1]!);
             const boxMargin = parseFloat(style.marginBottom);
@@ -281,6 +296,10 @@ export function ResponsibleContainer<
                         width={rect.width}
                         loadData={localLoadData}
                         mRef={mRefs}
+                        outerRef={(element?: HTMLDivElement) => {
+                            if (element != null && elementReady)
+                                elementReady(element, true);
+                        }}
                         columns={columns}
                         {...rest}
                     />
@@ -309,10 +328,13 @@ export function ResponsibleContainer<
             >
                 <ScrollerListEx<T>
                     autoLoad={!hasFields}
-                    width={rect.width}
                     height={heightLocal}
                     loadData={localLoadData}
                     mRef={mRefs}
+                    oRef={(element) => {
+                        if (element != null && elementReady)
+                            elementReady(element, false);
+                    }}
                     {...rest}
                 />
             </Box>,
@@ -341,12 +363,17 @@ export function ResponsibleContainer<
 
     // Layout
     return (
-        <React.Fragment>
+        <Box
+            sx={
+                containerBoxSx == null || showDataGrid == null
+                    ? undefined
+                    : containerBoxSx(showDataGrid)
+            }
+        >
             <Stack>
                 <Box ref={dimensions[0][0]} sx={searchBoxSx}>
                     {searchBar}
                 </Box>
-                {list}
             </Stack>
             {pullToRefresh && pullContainer && (
                 <PullToRefreshUI
@@ -362,6 +389,6 @@ export function ResponsibleContainer<
                     }}
                 />
             )}
-        </React.Fragment>
+        </Box>
     );
 }

package/src/mu/SearchBar.tsx

@@ -105,12 +105,18 @@ export function SearchBar(props: SearchBarProps) {
         moreForm?: HTMLFormElement;
         submitSeed?: number;
         lastMaxWidth?: number;
-    }>({}).current;
+        hasMore: boolean;
+    }>({ hasMore: true }).current;
+    const lastMaxWidth = state.lastMaxWidth ?? 9999;
 
     // Watch container
     const { dimensions } = useDimensions(1, (target, rect) => {
         // Same logic from resetButtonRef
-        if (rect.width === state.lastMaxWidth) return false;
+        if (
+            rect.width === lastMaxWidth ||
+            (!state.hasMore && rect.width > lastMaxWidth)
+        )
+            return false;
 
         // Len
         const len = target.children.length;
@@ -143,7 +149,10 @@ export function SearchBar(props: SearchBarProps) {
 
         // Container width
         let maxWidth = containerRect.width;
-        if (maxWidth === state.lastMaxWidth) {
+        if (
+            maxWidth === lastMaxWidth ||
+            (!state.hasMore && maxWidth > lastMaxWidth)
+        ) {
             return;
         }
         state.lastMaxWidth = maxWidth;
@@ -220,6 +229,7 @@ export function SearchBar(props: SearchBarProps) {
         }
 
         // Show or hide more button
+        state.hasMore = hasMore;
         setElementVisible(buttonMore, hasMore);
         setElementVisible(resetButton, true);
 

package/src/mu/pages/DataGridPage.tsx

@@ -75,7 +75,8 @@ export function DataGridPage<
     React.useEffect(() => {
         if (rect != null && rect.height > 50 && height == null) {
             let gridHeight =
-                window.innerHeight - Math.round(rect.top + rect.height + 1);
+                document.documentElement.clientHeight -
+                Math.round(rect.top + rect.height + 1);
 
             const style = window.getComputedStyle(dimensions[0][1]!);
             const paddingBottom = parseFloat(style.paddingBottom);

package/src/mu/pages/FixedListPage.tsx

@@ -85,7 +85,8 @@ export function FixedListPage<
     const list = React.useMemo(() => {
         if (rect != null && rect.height > 50) {
             let height =
-                window.innerHeight - Math.round(rect.top + rect.height + 1);
+                document.documentElement.clientHeight -
+                Math.round(rect.top + rect.height + 1);
 
             if (adjustHeight != null) {
                 height -= adjustHeight(height);

package/src/mu/pages/ResponsivePage.tsx

@@ -18,25 +18,44 @@ export function ResponsivePage<
     const { pageProps = {}, ...rest } = props;
 
     pageProps.paddings ??= MUGlobal.pagePaddings;
-    const { paddings, ...pageRest } = pageProps;
+    const { paddings, fabColumnDirection, ...pageRest } = pageProps;
 
-    const halfPadding = MUGlobal.half(paddings);
+    // State
+    const [scrollContainer, setScrollContainer] = React.useState<HTMLElement>();
+    const [direction, setDirection] = React.useState(fabColumnDirection);
 
     // Layout
     return (
-        <CommonPage {...pageRest} paddings={{}}>
+        <CommonPage
+            {...pageRest}
+            paddings={{}}
+            scrollContainer={scrollContainer}
+            fabColumnDirection={direction}
+        >
             <ResponsibleContainer<T, F>
                 paddings={paddings}
-                listBoxSx={(dataGrid, height) => {
+                containerBoxSx={(dataGrid) => {
                     if (dataGrid) {
                         return {
                             padding: paddings
                         };
                     } else {
                         return {
-                            height,
-                            paddingTop: halfPadding,
-                            paddingBottom: halfPadding
+                            paddingTop: paddings,
+                            paddingBottom: paddings
+                        };
+                    }
+                }}
+                elementReady={(element, isDataGrid) => {
+                    setDirection(!isDataGrid);
+                    setScrollContainer(element);
+                }}
+                listBoxSx={(dataGrid, height) => {
+                    if (dataGrid) {
+                        return {};
+                    } else {
+                        return {
+                            height: height
                         };
                     }
                 }}

package/src/mu/pages/TablePage.tsx

@@ -79,7 +79,9 @@ export function TablePage<
     const rect = dimensions[0][2];
     const list = React.useMemo(() => {
         if (rect != null && rect.height > 50 && rect.width >= totalWidth) {
-            let maxHeight = window.innerHeight - (rect.top + rect.height + 1);
+            let maxHeight =
+                document.documentElement.clientHeight -
+                (rect.top + rect.height + 1);
 
             const style = window.getComputedStyle(dimensions[0][1]!);
             const paddingBottom = parseFloat(style.paddingBottom);

package/src/uses/useWindowSize.ts

@@ -1,38 +1,51 @@
 import React from 'react';
 
+interface ISize {
+    width: number;
+    height: number;
+}
+
 /**
  * Detect window size
- * @param miliseconds Miliseconds delayed
  * @returns Window size
  */
-export const useWindowSize = (miliseconds: number = 50) => {
+export const useWindowSize = () => {
     // State
-    const [size, setSize] = React.useState<{
-        width: number;
-        height: number;
-    }>({
+    const [size, setSize] = React.useState<ISize>({
         width: 0,
         height: 0
     });
-    const [state] = React.useState<{ seed?: number }>({});
-
-    const resizeHandler = () => {
-        if (state.seed != null) window.clearTimeout(state.seed);
-        state.seed = window.setTimeout(() => {
-            setSize({
-                width: window.innerWidth,
-                height: window.innerHeight
-            });
-            state.seed = undefined;
-        }, miliseconds);
-    };
 
     React.useEffect(() => {
+        let ticking = false;
+        let lastKnownSize: ISize;
+        let requestAnimationFrameSeed = 0;
+
+        const resizeHandler = () => {
+            lastKnownSize = {
+                width: document.documentElement.clientWidth,
+                height: document.documentElement.clientHeight
+            };
+
+            if (!ticking) {
+                requestAnimationFrameSeed = window.requestAnimationFrame(() => {
+                    setSize(lastKnownSize);
+                    ticking = false;
+                    requestAnimationFrameSeed = 0;
+                });
+                ticking = true;
+            }
+        };
+
         window.addEventListener('resize', resizeHandler);
 
         return () => {
+            // Cancel animation frame
+            if (requestAnimationFrameSeed > 0)
+                window.cancelAnimationFrame(requestAnimationFrameSeed);
+
+            // Remove scroll event
             window.removeEventListener('resize', resizeHandler);
-            if (state.seed != null) window.clearTimeout(state.seed);
         };
     }, []);