@tap-payments/os-micro-frontend-shared 0.0.70-sheet-view-table-row-v2 → 0.0.70-sheet-view-table-row-v3

package/build/components/VirtualTable/VirtualTable.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useMemo, memo, useState } from 'react';
+import { useMemo, memo, useState, useRef, useEffect } from 'react';
 import { useTheme } from '@mui/material/styles';
 import memoize from 'memoize-one';
 import AutoSizer from 'react-virtualized-auto-sizer';
@@ -57,6 +57,12 @@ function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader,
     const itemsCount = isDelayedFetchingNextPage || (areAllRowsLoaded && !areTotalRowsNotFillingHeight) ? rows.length + 1 : rows.length;
     const itemData = createItemData(orderedColumns, isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, lastItemIndex, (_a = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _a !== void 0 ? _a : 0, isError, areAllRowsLoaded && !areTotalRowsNotFillingHeight, isSheetView);
     const tableRowHeight = isSheetView ? SHEET_VIEW_TABLE_ROW_HEIGHT : TABLE_ROW_HEIGHT;
+    const listRef = useRef(null);
+    useEffect(() => {
+        if (listRef.current && typeof listRef.current.resetAfterIndex === 'function') {
+            listRef.current.resetAfterIndex(0, true);
+        }
+    }, [isSheetView, tableRowHeight]);
     const renderTableContainer = useMemo(() => {
         const setBackdropVisibility = (isVisible) => {
             setShowBackdrop(isVisible);
@@ -66,7 +72,7 @@ function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader,
                 return;
             yield (loadMoreItems === null || loadMoreItems === void 0 ? void 0 : loadMoreItems());
         });
-        return (_jsx(InfiniteLoader, Object.assign({ "data-testid": "VirtualTable_InfiniteLoader", isItemLoaded: (index) => index !== lastItemIndex, itemCount: itemsCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered, ref }) => (_jsx(AutoSizer, Object.assign({ ref: ref, "data-testid": "VirtualTable_AutoSizer" }, { children: ({ height, width }) => (_jsx(StyledVirtualList, Object.assign({ "data-testid": "VirtualTable_VirtualList", useIsScrolling: true, className: "list", itemData: itemData, height: height || 0, width: width || 0, itemCount: itemsCount, itemSize: () => tableRowHeight, onItemsRendered: onItemsRendered, setBackdropVisibility: setBackdropVisibility, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, scrollToIndex: scrollToIndex, overscanCount: TABLE_LIST_OVER_SCAN, isSheetView: isSheetView }, { children: ListItemWrapper }))) }))) })));
+        return (_jsx(InfiniteLoader, Object.assign({ "data-testid": "VirtualTable_InfiniteLoader", isItemLoaded: (index) => index !== lastItemIndex, itemCount: itemsCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered, ref }) => (_jsx(AutoSizer, Object.assign({ ref: ref, "data-testid": "VirtualTable_AutoSizer" }, { children: ({ height, width }) => (_jsx(StyledVirtualList, Object.assign({ "data-testid": "VirtualTable_VirtualList", useIsScrolling: true, className: "list", itemData: itemData, height: height || 0, width: width || 0, itemCount: itemsCount, itemSize: () => tableRowHeight, onItemsRendered: onItemsRendered, setBackdropVisibility: setBackdropVisibility, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, scrollToIndex: scrollToIndex, overscanCount: TABLE_LIST_OVER_SCAN, isSheetView: isSheetView, listRef: listRef }, { children: ListItemWrapper }))) }))) })));
     }, [
         lastItemIndex,
         loadMoreItems,

package/build/components/VirtualTable/components/virtualScroll/VirtualScrollList.d.ts

@@ -1,7 +1,9 @@
-import { VariableSizeListProps } from 'react-window';
+import React from 'react';
+import { VariableSizeList, VariableSizeListProps } from 'react-window';
 type ExtendedVariableSizeListProps = VariableSizeListProps & {
     setBackdropVisibility: (isVisible: boolean) => void;
     scrollToIndex?: number;
+    listRef?: React.RefObject<VariableSizeList>;
 };
-declare function VirtualScrollList({ itemData, children, setBackdropVisibility, scrollToIndex, ...restProps }: ExtendedVariableSizeListProps): import("react/jsx-runtime").JSX.Element;
+declare function VirtualScrollList({ itemData, children, setBackdropVisibility, scrollToIndex, listRef: externalListRef, ...restProps }: ExtendedVariableSizeListProps): import("react/jsx-runtime").JSX.Element;
 export default VirtualScrollList;

package/build/components/VirtualTable/components/virtualScroll/VirtualScrollList.js

@@ -17,14 +17,15 @@ import VirtualScrollOuter from './VirtualScrollOuter';
 import useScrollBackShadow from '../../hooks/useScrollBackShadow';
 import { VirtualScrollOuterProvider } from '../../context';
 function VirtualScrollList(_a) {
-    var { itemData, children, setBackdropVisibility, scrollToIndex } = _a, restProps = __rest(_a, ["itemData", "children", "setBackdropVisibility", "scrollToIndex"]);
+    var { itemData, children, setBackdropVisibility, scrollToIndex, listRef: externalListRef } = _a, restProps = __rest(_a, ["itemData", "children", "setBackdropVisibility", "scrollToIndex", "listRef"]);
     const { handleBackDropVisibility, clearBackdropVisibility, clearTimer } = useScrollBackShadow({
         setBackdropVisibility,
     });
     const renderedScrollTopRef = useRef(0);
     const scrollTopRef = useRef(undefined);
     const scrollLocked = useRef(false);
-    const listRef = useRef(null);
+    const internalListRef = useRef(null);
+    const listRef = externalListRef || internalListRef;
     const scrollTo = useCallback(() => {
         var _a, _b;
         clearTimer();
@@ -38,7 +39,7 @@ function VirtualScrollList(_a) {
         }
         clearBackdropVisibility();
         return false;
-    }, []);
+    }, [clearBackdropVisibility, clearTimer, handleBackDropVisibility, listRef]);
     const handleScroll = React.useCallback((event) => {
         scrollTopRef.current = event.currentTarget.scrollTop;
         if (!scrollLocked.current) {
@@ -51,7 +52,7 @@ function VirtualScrollList(_a) {
         if ((scrollToIndex || 0) >= 0 && !Number.isNaN(scrollToIndex) && scrollToIndex !== undefined && ((_a = listRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo)) {
             (_b = listRef.current) === null || _b === void 0 ? void 0 : _b.scrollToItem(scrollToIndex, 'center');
         }
-    }, [scrollToIndex]);
+    }, [scrollToIndex, listRef]);
     const itemDataInternal = React.useMemo(() => (Object.assign(Object.assign({}, itemData), { renderedScrollTopRef })), [itemData]);
     const handleOnScroll = React.useCallback(() => {
         scrollLocked.current = scrollTo();

package/build/components/VirtualTable/style.d.ts

@@ -26,6 +26,7 @@ interface StyledVirtualListProps {
 export declare const StyledVirtualList: import("@emotion/styled").StyledComponent<import("react-window").VariableSizeListProps<any> & {
     setBackdropVisibility: (isVisible: boolean) => void;
     scrollToIndex?: number | undefined;
+    listRef?: import("react").RefObject<import("react-window").VariableSizeList<any>> | undefined;
 } & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & StyledVirtualListProps, {}, {}>;
 export declare const StyledTableRow: import("@emotion/styled").StyledComponent<import("@mui/material").TableRowOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
     ref?: ((instance: HTMLTableRowElement | null) => void) | import("react").RefObject<HTMLTableRowElement> | null | undefined;

package/build/playground/VTDemo.d.ts

@@ -0,0 +1 @@
+export declare const VTDemo: () => import("react/jsx-runtime").JSX.Element;

package/build/playground/VTDemo.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button, VirtualTable } from '../components/index.js';
+import { Box } from '@mui/material';
+export const VTDemo = () => {
+    const [isSheetView, setIsSheetView] = useState(false);
+    const toggleView = () => {
+        setIsSheetView((prev) => !prev);
+    };
+    return (_jsx(Box, Object.assign({ sx: {
+            width: '100%',
+            height: '100vh',
+            overflow: 'auto',
+            flexDirection: 'row',
+            display: 'flex',
+            justifyContent: 'center',
+            p: 3,
+            backgroundColor: 'gray',
+        } }, { children: _jsxs(Box, Object.assign({ "data-testid": "ChargesList", sx: {
+                position: 'relative',
+                display: 'flex',
+                flexDirection: 'column',
+                width: '80%',
+                height: '100%',
+            } }, { children: [_jsx(Button, Object.assign({ onClick: toggleView }, { children: "Toggle" })), _jsx(VirtualTable, { showHeader: true, showFooter: true, footerProps: {
+                        totalCount: 4,
+                        sandboxMode: false,
+                        maximized: false,
+                    }, loadMoreItems: () => Promise.resolve(), isLoading: false, isFetchingNextPage: false, rows: [
+                        { index: '1', date: 'date', order: 'order' },
+                        { index: '2', date: 'date', order: 'order' },
+                        { index: '3', date: 'date', order: 'order' },
+                    ], areAllRowsLoaded: true, columnsSorting: { id: 'asc' }, onColumnSort: () => { }, columns: [
+                        { id: 'index', header: '', width: '28px' },
+                        {
+                            id: 'date',
+                            header: 'Date',
+                            width: '170px',
+                        },
+                        {
+                            id: 'order',
+                            header: 'Order',
+                            width: '170px',
+                            filter: {
+                                onConfirm: undefined,
+                                onClear: () => { },
+                                type: 'inputs',
+                                options: [
+                                    {
+                                        placeholder: 'Order',
+                                        apiKey: 'orderID',
+                                    },
+                                ],
+                                data: {},
+                            },
+                        },
+                    ], error: null, triggerDataRefetch: () => Promise.resolve(), showBackgroundColor: false, tableTitle: "Acceptance-Charges", tableMode: 'sheet', dragControls: undefined, isSheetView: isSheetView })] })) })));
+};

package/build/playground/index.d.ts

@@ -0,0 +1 @@
+export { VTDemo } from './VTDemo';

package/build/playground/index.js

@@ -0,0 +1 @@
+export { VTDemo } from './VTDemo';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.0.70-sheet-view-table-row-v2",
+  "version": "0.0.70-sheet-view-table-row-v3",
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",