@symply.io/basic-components 1.7.0-beta.1 → 1.7.0-beta.3

package/VirtualDataTable/index.js

@@ -24,7 +24,7 @@ import useInteractions from "./useInteractions";
 var VirtualDataTable = function (props, ref) {
     var rows = props.rows, columns = props.columns, dense = props.dense, height = props.height, _a = props.noDataText, noDataText = _a === void 0 ? "No Data" : _a, headerBgColor = props.headerBgColor, headerTextColor = props.headerTextColor, footerBgColor = props.footerBgColor, footerTextColor = props.footerTextColor, sortingDisabled = props.sortingDisabled, options = props.options, initialState = props.initialState, onSort = props.onSort, onRowClick = props.onRowClick, onContextMenu = props.onContextMenu, onCustomizeRowBgColor = props.onCustomizeRowBgColor;
     var _b = useState(null), rowDataIndex = _b[0], setRowDataIndex = _b[1];
-    var _c = useInteractions({ rows: rows, columns: columns, initialState: initialState, sortingDisabled: sortingDisabled, onSort: onSort }), normalCols = _c.normalCols, pinnedLeftCols = _c.pinnedLeftCols, pinnedRightCols = _c.pinnedRightCols, leftShadowVisible = _c.leftShadowVisible, rightShadowVisible = _c.rightShadowVisible, onScroll = _c.onScroll, handleSort = _c.handleSort, onResetSorting = _c.onResetSorting, renderSortingSymbol = _c.renderSortingSymbol;
+    var _c = useInteractions({ rows: rows, columns: columns, initialState: initialState, sortingDisabled: sortingDisabled, onSort: onSort }), normalCols = _c.normalCols, pinnedLeftCols = _c.pinnedLeftCols, pinnedRightCols = _c.pinnedRightCols, leftShadowVisible = _c.leftShadowVisible, rightShadowVisible = _c.rightShadowVisible, onScroll = _c.onScroll, handleSort = _c.handleSort, onResetSorting = _c.onResetSorting, reflectScrollerRef = _c.reflectScrollerRef, renderSortingSymbol = _c.renderSortingSymbol;
     useImperativeHandle(ref, function () { return ({
         onResetSorting: onResetSorting,
     }); }, [onResetSorting]);
@@ -330,6 +330,6 @@ var VirtualDataTable = function (props, ref) {
         TableBody: forwardRef(function (props, ref) { return (_jsx(TableBody, __assign({}, props, { ref: ref }))); }),
         TableFoot: forwardRef(function (props, ref) { return (_jsx(TableFooter, __assign({}, props, { ref: ref }))); }),
     }); }, [onRowClick, onContextMenu, handleCustomizeRowBgColor]);
-    return (_jsx(TableVirtuoso, { data: rows, style: { height: height }, onResize: onScroll, onScroll: onScroll, components: VirtuosoTableComponents, fixedHeaderContent: fixedHeaderContent, fixedFooterContent: fixedFooterContent, itemContent: itemContent, followOutput: "smooth", increaseViewportBy: 5 }));
+    return (_jsx(TableVirtuoso, { data: rows, increaseViewportBy: { top: 5, bottom: 8 }, initialTopMostItemIndex: 0, style: { height: height }, onScroll: onScroll, onResize: onScroll, components: VirtuosoTableComponents, fixedHeaderContent: fixedHeaderContent, fixedFooterContent: fixedFooterContent, itemContent: itemContent, followOutput: "smooth", scrollerRef: reflectScrollerRef }));
 };
 export default forwardRef(VirtualDataTable);

package/VirtualDataTable/useInteractions.d.ts

@@ -1,4 +1,3 @@
-import { UIEventHandler } from "react";
 import type { InteractionProps, TVirtualTableRow, TVirtualTableColumn, VirtualDataTableSortingProps } from "./types";
 declare function useInteractions<RowProps extends TVirtualTableRow>(props: InteractionProps<RowProps>): {
     normalCols: TVirtualTableColumn[];
@@ -6,9 +5,10 @@ declare function useInteractions<RowProps extends TVirtualTableRow>(props: Inter
     pinnedRightCols: TVirtualTableColumn[];
     leftShadowVisible: boolean;
     rightShadowVisible: boolean;
-    onScroll: UIEventHandler<HTMLDivElement>;
+    onScroll: () => void;
     handleSort: ({ accessor }: Pick<VirtualDataTableSortingProps, "accessor">) => void;
     onResetSorting: () => void;
+    reflectScrollerRef: (ref: HTMLElement | Window | null) => void;
     renderSortingSymbol: (accessor: string) => "" | "↑" | "↓";
 };
 export default useInteractions;

package/VirtualDataTable/useInteractions.js

@@ -9,15 +9,16 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { useMemo, useState, useCallback } from "react";
+import { useMemo, useState, useCallback, useEffect } from "react";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import useTheme from "@mui/material/styles/useTheme";
 function useInteractions(props) {
     var rows = props.rows, columns = props.columns, sortingDisabled = props.sortingDisabled, initialState = props.initialState, onSort = props.onSort;
     var theme = useTheme();
     var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
-    var _a = useState(false), leftShadowVisible = _a[0], setLeftShadowVisible = _a[1];
-    var _b = useState(columns.filter(function (c) { return c.fixable === "right"; }).length > 0 || false), rightShadowVisible = _b[0], setRightShadowVisible = _b[1];
+    var _a = useState(null), scrollerRef = _a[0], setScrollerRef = _a[1];
+    var _b = useState(false), leftShadowVisible = _b[0], setLeftShadowVisible = _b[1];
+    var _c = useState(columns.filter(function (c) { return c.fixable === "right"; }).length > 0 || false), rightShadowVisible = _c[0], setRightShadowVisible = _c[1];
     var initialSortingProps = useMemo(function () {
         var sortBy = (initialState || {}).sortBy;
         var _a = sortBy || {}, accessor = _a.accessor, order = _a.order;
@@ -26,7 +27,7 @@ function useInteractions(props) {
             order: !!accessor ? order || "NONE" : "NONE",
         };
     }, [initialState]);
-    var _c = useState(initialSortingProps), sortingProps = _c[0], setSortingProps = _c[1];
+    var _d = useState(initialSortingProps), sortingProps = _d[0], setSortingProps = _d[1];
     var handleSort = useCallback(function (_a) {
         var accessor = _a.accessor;
         if (!sortingDisabled) {
@@ -63,16 +64,21 @@ function useInteractions(props) {
         }
         return "↓";
     }, [sortingProps]);
-    var onScroll = useCallback(function (event) {
-        var target = event.currentTarget;
-        var scrollLeft = target.scrollLeft;
-        var scrollWidth = target.scrollWidth;
-        var clientWidth = target.clientWidth;
-        var hasScrollBar = scrollWidth > clientWidth;
-        setLeftShadowVisible(hasScrollBar && scrollLeft > 0);
-        setRightShadowVisible(hasScrollBar && scrollWidth - scrollLeft > clientWidth + 1);
+    var reflectScrollerRef = useCallback(function (ref) {
+        setScrollerRef(ref);
     }, []);
-    var _d = useMemo(function () {
+    var onScroll = useCallback(function () {
+        var target = scrollerRef;
+        if (target) {
+            var scrollLeft = target.scrollLeft;
+            var scrollWidth = target.scrollWidth;
+            var clientWidth = target.clientWidth;
+            var hasScrollBar = scrollWidth > clientWidth;
+            setLeftShadowVisible(hasScrollBar && scrollLeft > 0);
+            setRightShadowVisible(hasScrollBar && scrollWidth - scrollLeft > clientWidth + 1);
+        }
+    }, [scrollerRef]);
+    var _e = useMemo(function () {
         var hasData = rows.length > 0;
         if (isUpMd && hasData) {
             var left = columns.filter(function (c) { return c.fixable === "left"; });
@@ -83,7 +89,15 @@ function useInteractions(props) {
         else {
             return [[], columns, []];
         }
-    }, [isUpMd, rows, columns]), pinnedLeftCols = _d[0], normalCols = _d[1], pinnedRightCols = _d[2];
+    }, [isUpMd, rows, columns]), pinnedLeftCols = _e[0], normalCols = _e[1], pinnedRightCols = _e[2];
+    useEffect(function () {
+        if (columns) {
+            onScroll();
+        }
+    }, [columns, onScroll]);
+    useEffect(function () {
+        window.addEventListener("resize", onScroll);
+    }, [onScroll]);
     return {
         normalCols: normalCols,
         pinnedLeftCols: pinnedLeftCols,
@@ -93,6 +107,7 @@ function useInteractions(props) {
         onScroll: onScroll,
         handleSort: handleSort,
         onResetSorting: onResetSorting,
+        reflectScrollerRef: reflectScrollerRef,
         renderSortingSymbol: renderSortingSymbol,
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.7.0-beta.1",
+  "version": "1.7.0-beta.3",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",