@tap-payments/os-micro-frontend-shared 0.0.282 → 0.0.283-test.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -8,16 +8,15 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
|
8
8
|
});
|
|
9
9
|
};
|
|
10
10
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
11
|
-
import { useMemo, memo, useState, useCallback } from 'react';
|
|
11
|
+
import { useMemo, memo, useState, useCallback, useRef, useEffect } from 'react';
|
|
12
12
|
import { useTheme } from '@mui/material/styles';
|
|
13
13
|
import memoize from 'memoize-one';
|
|
14
14
|
import InfiniteLoader from 'react-window-infinite-loader';
|
|
15
15
|
import AutoSizer from 'react-virtualized-auto-sizer';
|
|
16
|
-
import { TABLE_THRESHOLD, TABLE_LIST_OVER_SCAN
|
|
16
|
+
import { TABLE_THRESHOLD, TABLE_LIST_OVER_SCAN } from '../../../constants/index.js';
|
|
17
17
|
import { useDelayToSetValue } from '../../../hooks/index.js';
|
|
18
18
|
import { isHeightNotFullyFilledByRows, isNotFoundError, isTimeoutError, hasError } from '../../../utils/index.js';
|
|
19
19
|
import TableFooter from '../components/TableFooter/TableFooter';
|
|
20
|
-
import TableLastItem from '../components/TableLastItem';
|
|
21
20
|
import TableNoData from '../components/TableNoData';
|
|
22
21
|
import { SheetViewTableNoData } from './components';
|
|
23
22
|
import ListItemWrapper from '../components/virtualScroll/ListItemWrapper';
|
|
@@ -26,7 +25,7 @@ import { SheetViewVirtualTableWrapper, PinnedStartColumnWrapper, PinnedEndColumn
|
|
|
26
25
|
import SheetViewTableHeader from './components/SheetViewTableHeader';
|
|
27
26
|
import { usePinnedColumns } from './hooks/usePinnedColumns';
|
|
28
27
|
import { useSynchronizedScroll } from './hooks/useSynchronizedScroll';
|
|
29
|
-
const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, isPinned, selectedCell, selectedColumn, onCellClick) => ({
|
|
28
|
+
const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, isPinned, selectedCell, selectedColumn, onCellClick, containerHeight, rowHeight) => ({
|
|
30
29
|
columns,
|
|
31
30
|
isLoading,
|
|
32
31
|
rows,
|
|
@@ -43,14 +42,34 @@ const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToInde
|
|
|
43
42
|
selectedCell,
|
|
44
43
|
selectedColumn,
|
|
45
44
|
onCellClick,
|
|
45
|
+
containerHeight,
|
|
46
|
+
rowHeight,
|
|
46
47
|
}));
|
|
47
48
|
function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, rowHeight = 28, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, showBackgroundColor, areAllRowsLoaded = false, tableBodyStyles, tableTitle, dragControls, onColumnPin, clearBackdropVisibilityTimeout = 100, isPinnable = false, tableMode, }) {
|
|
48
|
-
var _a, _b, _c;
|
|
49
49
|
const theme = useTheme();
|
|
50
50
|
const { pinnedStartColumns, pinnedEndColumns, handleColumnPin, pinnedStartColumnsData, pinnedEndColumnsData, unpinnedColumnsData, orderedColumns, lastColumnId, } = usePinnedColumns(columns, isPinnable, onColumnPin);
|
|
51
51
|
const { pinnedStartVirtualListRef, scrollableVirtualListRef, pinnedEndVirtualListRef, handleScroll } = useSynchronizedScroll();
|
|
52
52
|
const [selectedCell, setSelectedCell] = useState(null);
|
|
53
53
|
const [selectedColumn, setSelectedColumn] = useState(null);
|
|
54
|
+
const containerHeightRef = useRef(0);
|
|
55
|
+
const lastKnownRowsLengthRef = useRef(0);
|
|
56
|
+
useEffect(() => {
|
|
57
|
+
var _a, _b, _c, _d, _e, _f;
|
|
58
|
+
const hasRowsChanged = lastKnownRowsLengthRef.current !== rows.length;
|
|
59
|
+
const shouldResetCache = hasRowsChanged || areAllRowsLoaded;
|
|
60
|
+
if (shouldResetCache) {
|
|
61
|
+
if (pinnedStartVirtualListRef.current) {
|
|
62
|
+
(_b = (_a = pinnedStartVirtualListRef.current).resetAfterIndex) === null || _b === void 0 ? void 0 : _b.call(_a, 0);
|
|
63
|
+
}
|
|
64
|
+
if (scrollableVirtualListRef.current) {
|
|
65
|
+
(_d = (_c = scrollableVirtualListRef.current).resetAfterIndex) === null || _d === void 0 ? void 0 : _d.call(_c, 0);
|
|
66
|
+
}
|
|
67
|
+
if (pinnedEndVirtualListRef.current) {
|
|
68
|
+
(_f = (_e = pinnedEndVirtualListRef.current).resetAfterIndex) === null || _f === void 0 ? void 0 : _f.call(_e, 0);
|
|
69
|
+
}
|
|
70
|
+
lastKnownRowsLengthRef.current = rows.length;
|
|
71
|
+
}
|
|
72
|
+
}, [rows.length, areAllRowsLoaded, pinnedStartVirtualListRef, scrollableVirtualListRef, pinnedEndVirtualListRef]);
|
|
54
73
|
const handleCellClick = useCallback((rowIndex, columnId, event) => {
|
|
55
74
|
event.stopPropagation();
|
|
56
75
|
const cellKey = `${rowIndex}-${columnId}`;
|
|
@@ -77,10 +96,8 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
|
|
|
77
96
|
const hasTimeoutError = isTimeoutError(error);
|
|
78
97
|
const lastItemIndex = rows.length - 1;
|
|
79
98
|
const areTotalRowsNotFillingHeight = isHeightNotFullyFilledByRows(rows.length) && !tableLoading;
|
|
80
|
-
const itemsCount = isDelayedFetchingNextPage ||
|
|
81
|
-
|
|
82
|
-
const pinnedEndItemData = createItemData(pinnedEndColumnsData, isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, lastItemIndex, (_b = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _b !== void 0 ? _b : 0, isError, areAllRowsLoaded && !areTotalRowsNotFillingHeight, true, selectedCell, selectedColumn, handleCellClick);
|
|
83
|
-
const unpinnedItemData = createItemData(unpinnedColumnsData, isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, lastItemIndex, (_c = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _c !== void 0 ? _c : 0, isError, areAllRowsLoaded && !areTotalRowsNotFillingHeight, false, selectedCell, selectedColumn, handleCellClick);
|
|
99
|
+
const itemsCount = isDelayedFetchingNextPage || areAllRowsLoaded ? rows.length + 1 : rows.length;
|
|
100
|
+
console.log({ isDelayedFetchingNextPage, areAllRowsLoaded, areTotalRowsNotFillingHeight, itemsCount });
|
|
84
101
|
const createVirtualTableContainer = useCallback((columnsToRender, containerKey, isPinned = false, fixedWidth) => {
|
|
85
102
|
const tableItemsCount = itemsCount;
|
|
86
103
|
const handleOnLoadMoreItems = () => __awaiter(this, void 0, void 0, function* () {
|
|
@@ -88,35 +105,77 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
|
|
|
88
105
|
return;
|
|
89
106
|
yield (loadMoreItems === null || loadMoreItems === void 0 ? void 0 : loadMoreItems());
|
|
90
107
|
});
|
|
91
|
-
const currentItemData = containerKey === 'pinnedStart' ? pinnedStartItemData : containerKey === 'pinnedEnd' ? pinnedEndItemData : unpinnedItemData;
|
|
92
108
|
const listRef = containerKey === 'pinnedStart' ? pinnedStartVirtualListRef : containerKey === 'pinnedEnd' ? pinnedEndVirtualListRef : scrollableVirtualListRef;
|
|
93
109
|
const handleScrollCallback = (scrollProps) => {
|
|
94
110
|
const source = containerKey === 'pinnedStart' ? 'start' : containerKey === 'pinnedEnd' ? 'end' : 'scrollable';
|
|
95
111
|
handleScroll(scrollProps, source);
|
|
96
112
|
};
|
|
97
|
-
return (_jsx(InfiniteLoader, Object.assign({ isItemLoaded: (index) => index !== lastItemIndex, itemCount: tableItemsCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered }) => (_jsx(AutoSizer, { children: ({ height, width }) =>
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
113
|
+
return (_jsx(InfiniteLoader, Object.assign({ isItemLoaded: (index) => index !== lastItemIndex, itemCount: tableItemsCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered }) => (_jsx(AutoSizer, { children: ({ height, width }) => {
|
|
114
|
+
var _a;
|
|
115
|
+
containerHeightRef.current = height;
|
|
116
|
+
const getItemSize = (index) => {
|
|
117
|
+
console.log({ All: areAllRowsLoaded, rows, index, height, containerHeight: containerHeightRef.current });
|
|
118
|
+
const currentHeight = height || containerHeightRef.current || 400;
|
|
119
|
+
const isLastRow = areAllRowsLoaded && index === rows.length;
|
|
120
|
+
if (isLastRow && currentHeight > 0) {
|
|
121
|
+
const usedHeight = rows.length * rowHeight;
|
|
122
|
+
const remainingHeight = currentHeight - usedHeight;
|
|
123
|
+
const calculatedHeight = Math.max(remainingHeight, rowHeight);
|
|
124
|
+
console.log({ usedHeight, remainingHeight, calculatedHeight, currentHeight });
|
|
125
|
+
return calculatedHeight;
|
|
126
|
+
}
|
|
127
|
+
return rowHeight;
|
|
128
|
+
};
|
|
129
|
+
const commonItemDataParams = [
|
|
130
|
+
isDelayedFetchingNextPage,
|
|
131
|
+
rows,
|
|
132
|
+
rowProps,
|
|
133
|
+
scrollToIndex,
|
|
134
|
+
lastItemIndex,
|
|
135
|
+
(_a = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _a !== void 0 ? _a : 0,
|
|
136
|
+
isError,
|
|
137
|
+
areAllRowsLoaded,
|
|
138
|
+
];
|
|
139
|
+
const commonItemDataSuffix = [selectedCell, selectedColumn, handleCellClick, height, rowHeight];
|
|
140
|
+
const getItemDataForContainer = (columnsData, isPinnedColumn) => createItemData(columnsData, ...commonItemDataParams, isPinnedColumn, ...commonItemDataSuffix);
|
|
141
|
+
const currentItemData = containerKey === 'pinnedStart'
|
|
142
|
+
? getItemDataForContainer(pinnedStartColumnsData, true)
|
|
143
|
+
: containerKey === 'pinnedEnd'
|
|
144
|
+
? getItemDataForContainer(pinnedEndColumnsData, true)
|
|
145
|
+
: getItemDataForContainer(unpinnedColumnsData, false);
|
|
146
|
+
return (_jsx(StyledVirtualList, Object.assign({ listRef: listRef, height: height, width: fixedWidth || width, itemCount: tableItemsCount, itemSize: getItemSize, itemData: currentItemData, onItemsRendered: onItemsRendered, overscanCount: TABLE_LIST_OVER_SCAN, setBackdropVisibility: setShowBackdrop, scrollToIndex: scrollToIndex, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, useIsScrolling: true, onScroll: handleScrollCallback, clearBackdropVisibilityTimeout: clearBackdropVisibilityTimeout, style: {
|
|
147
|
+
overflowX: isPinned ? 'hidden' : 'auto',
|
|
148
|
+
paddingBottom: isPinned ? '25px' : '13px',
|
|
149
|
+
backgroundColor: isPinned ? 'transparent' : theme.palette.background.default,
|
|
150
|
+
} }, { children: ListItemWrapper }), `${containerKey}-${rows.length}-${areAllRowsLoaded}-${height}`));
|
|
151
|
+
} })) })));
|
|
102
152
|
}, [
|
|
103
153
|
itemsCount,
|
|
104
154
|
areAllRowsLoaded,
|
|
105
155
|
loadMoreItems,
|
|
106
156
|
threshold,
|
|
107
157
|
rowHeight,
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
158
|
+
rows,
|
|
159
|
+
pinnedStartColumnsData,
|
|
160
|
+
pinnedEndColumnsData,
|
|
161
|
+
unpinnedColumnsData,
|
|
162
|
+
isDelayedFetchingNextPage,
|
|
163
|
+
rowProps,
|
|
112
164
|
scrollToIndex,
|
|
165
|
+
lastItemIndex,
|
|
166
|
+
footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount,
|
|
167
|
+
isError,
|
|
113
168
|
areTotalRowsNotFillingHeight,
|
|
169
|
+
selectedCell,
|
|
170
|
+
selectedColumn,
|
|
171
|
+
handleCellClick,
|
|
172
|
+
handleScroll,
|
|
114
173
|
clearBackdropVisibilityTimeout,
|
|
115
|
-
lastItemIndex,
|
|
116
174
|
pinnedEndVirtualListRef,
|
|
117
175
|
pinnedStartVirtualListRef,
|
|
118
176
|
scrollableVirtualListRef,
|
|
119
177
|
theme.palette.background.default,
|
|
178
|
+
containerHeightRef,
|
|
120
179
|
]);
|
|
121
180
|
const showNoDataView = tableLoading || tableError || tableEmpty || hasTimeoutError;
|
|
122
181
|
const pinnedStartColumnsWidth = useMemo(() => pinnedStartColumnsData.reduce((acc, col) => {
|
|
@@ -138,23 +197,23 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
|
|
|
138
197
|
overflowX: 'hidden',
|
|
139
198
|
} }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_PinnedStyledBox", hidePadding: true, className: "list-wrapper" }, { children: createVirtualTableContainer(columnsData, containerKey, true, columnsWidth) })) }))] })) }));
|
|
140
199
|
};
|
|
141
|
-
return (_jsxs(_Fragment, { children: [
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
200
|
+
return (_jsxs(_Fragment, { children: [_jsx(TableContainer, { children: showNoDataView ? (tableLoading ? (_jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox_Loading", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView, scrollable: true, sx: {
|
|
201
|
+
marginLeft: '28px',
|
|
202
|
+
maxHeight: 'calc(100vh - 300px)',
|
|
203
|
+
overflow: 'auto',
|
|
204
|
+
} }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_LoadingTableWrapper", showNoDataView: showNoDataView, sx: Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: 'auto' }) }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_LoadingTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: orderedColumns, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [], onColumnPin: handleColumnPin, isPinnable: false, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_LoadingTableWrapper", sx: {
|
|
205
|
+
width: '100%',
|
|
206
|
+
minWidth: 'fit-content',
|
|
207
|
+
height: 'auto',
|
|
208
|
+
display: 'flex',
|
|
209
|
+
flexDirection: 'column',
|
|
210
|
+
} }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_LoadingStyledBox", hidePadding: true, className: "list-wrapper", sx: {
|
|
148
211
|
height: 'auto',
|
|
149
212
|
display: 'flex',
|
|
150
213
|
flexDirection: 'column',
|
|
151
|
-
} }, { children: _jsx(
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
} }, { children: _jsx(SheetViewTableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps }) })) }))] })) }))) : (_jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView }, { children: _jsx(TableWrapper, Object.assign({ isSheetView: true, "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: tableBodyStyles }, { children: _jsx(TableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps }) })) })))) : (_jsxs(SheetViewVirtualTableWrapper, { children: [renderPinnedColumn('start', pinnedStartColumnsData, pinnedStartColumnsWidth, pinnedStartColumns), _jsx(MainTableWrapper, Object.assign({ hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0 }, { children: _jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView, scrollable: true }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: '100%' }) }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_UnpinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: unpinnedColumnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [...pinnedStartColumns, ...pinnedEndColumns], onColumnPin: handleColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
|
|
156
|
-
width: '100%',
|
|
157
|
-
minWidth: 'fit-content',
|
|
158
|
-
} }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_ScrollableStyledBox", hidePadding: true, className: "list-wrapper" }, { children: createVirtualTableContainer(unpinnedColumnsData, 'scrollable', false) })) }))] })) })) })), renderPinnedColumn('end', pinnedEndColumnsData, pinnedEndColumnsWidth, [...pinnedStartColumns, ...pinnedEndColumns])] })), !showNoDataView && areTotalRowsNotFillingHeight && !isFetchingNextPage && (_jsx(TableLastItem, { height: (itemsCount + 1) * TABLE_ROW_HEIGHT, sandboxMode: footerProps === null || footerProps === void 0 ? void 0 : footerProps.sandboxMode, "data-testid": "SheetViewVirtualTable_TableLastItem" }))] }), _jsx(TableFooter, Object.assign({ "data-testid": "SheetViewVirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));
|
|
214
|
+
} }, { children: _jsx(SheetViewTableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps }) })) }))] })) }))) : (_jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView }, { children: _jsx(TableWrapper, Object.assign({ isSheetView: true, "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: tableBodyStyles }, { children: _jsx(TableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps }) })) })))) : (_jsxs(SheetViewVirtualTableWrapper, { children: [renderPinnedColumn('start', pinnedStartColumnsData, pinnedStartColumnsWidth, pinnedStartColumns), _jsx(MainTableWrapper, Object.assign({ hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0 }, { children: _jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView, scrollable: true }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: '100%' }) }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_UnpinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: unpinnedColumnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [...pinnedStartColumns, ...pinnedEndColumns], onColumnPin: handleColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
|
|
215
|
+
width: '100%',
|
|
216
|
+
minWidth: 'fit-content',
|
|
217
|
+
} }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_ScrollableStyledBox", hidePadding: true, className: "list-wrapper" }, { children: createVirtualTableContainer(unpinnedColumnsData, 'scrollable', false) })) }))] })) })) })), renderPinnedColumn('end', pinnedEndColumnsData, pinnedEndColumnsWidth, [...pinnedStartColumns, ...pinnedEndColumns])] })) }), _jsx(TableFooter, Object.assign({ "data-testid": "SheetViewVirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));
|
|
159
218
|
}
|
|
160
219
|
export default memo(SheetViewVirtualTable);
|
|
@@ -6,7 +6,6 @@ export declare const LastRowContent: React.MemoExoticComponent<({ isLoadingRow,
|
|
|
6
6
|
}) => import("react/jsx-runtime").JSX.Element>;
|
|
7
7
|
export declare const StyledItemWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
|
|
8
8
|
showShadowHighlight?: boolean | undefined;
|
|
9
|
-
isSheetView?: boolean | undefined;
|
|
10
9
|
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
11
10
|
declare function ListItemWrapper({ index, style, data: { renderedScrollTopRef, rows, rowProps, columns, isLoading, scrollToIndex, limit, totalCount, newLoadedRowsEndIndex, isError, areAllRowsLoaded, isSheetView, isPinned, ...restData }, }: Readonly<ListChildComponentProps>): import("react/jsx-runtime").JSX.Element;
|
|
12
11
|
export default ListItemWrapper;
|
|
@@ -42,9 +42,9 @@ const createRowClickHandler = (row, onRowClick) => (e) => {
|
|
|
42
42
|
};
|
|
43
43
|
export const StyledItemWrapper = styled('div', {
|
|
44
44
|
shouldForwardProp: (props) => props !== 'showShadowHighlight' && props !== 'isSheetView',
|
|
45
|
-
})(({ theme
|
|
45
|
+
})(({ theme }) => ({
|
|
46
46
|
height: '100%',
|
|
47
|
-
backgroundColor:
|
|
47
|
+
backgroundColor: theme.palette.background.default,
|
|
48
48
|
}));
|
|
49
49
|
function ListItemWrapper(_a) {
|
|
50
50
|
var _b;
|
|
@@ -59,10 +59,10 @@ function ListItemWrapper(_a) {
|
|
|
59
59
|
const lastRowContent = _jsx(LastRowContent, { isSheetView: isSheetView, isLoadingRow: isLoadingRow });
|
|
60
60
|
const isLastRow = isLoadingRow || (areAllRowsLoaded && index === lastItemIndex + 1);
|
|
61
61
|
if (isPinned && isLastRow) {
|
|
62
|
-
return (_jsx(Box, { sx: Object.assign(Object.assign({}, (isSheetView ? { minHeight: SHEET_VIEW_TABLE_ROW_HEIGHT } : { height: TABLE_ROW_HEIGHT })), { backgroundColor: '#F6F8FACC' }) }));
|
|
62
|
+
return (_jsx(Box, { sx: Object.assign(Object.assign({}, (isSheetView ? { minHeight: SHEET_VIEW_TABLE_ROW_HEIGHT, height: '100%' } : { height: TABLE_ROW_HEIGHT })), { backgroundColor: '#F6F8FACC' }) }));
|
|
63
63
|
}
|
|
64
64
|
if (isLastRow) {
|
|
65
|
-
return (_jsx(Box, Object.assign({ sx: Object.assign(Object.assign({}, (isSheetView ? { minHeight: SHEET_VIEW_TABLE_ROW_HEIGHT } : { height: TABLE_ROW_HEIGHT })), { display: 'flex', justifyContent: 'center', alignItems: 'center' }) }, { children: _jsx(Box, Object.assign({ sx: {
|
|
65
|
+
return (_jsx(Box, Object.assign({ sx: Object.assign(Object.assign({}, (isSheetView ? { minHeight: SHEET_VIEW_TABLE_ROW_HEIGHT, height: '100%' } : { height: TABLE_ROW_HEIGHT })), { display: 'flex', justifyContent: 'center', alignItems: 'center' }) }, { children: _jsx(Box, Object.assign({ sx: {
|
|
66
66
|
backgroundColor: '#F6F8FACC',
|
|
67
67
|
display: 'flex',
|
|
68
68
|
justifyContent: 'center',
|
|
@@ -73,6 +73,6 @@ function ListItemWrapper(_a) {
|
|
|
73
73
|
}
|
|
74
74
|
return (_jsx(TableRow, { index: index, row: row, columns: columns, rowProps: memoizedRowProps, isSheetView: isSheetView, selectedCell: restData.selectedCell, selectedColumn: restData.selectedColumn, onCellClick: restData.onCellClick, isLastRow: index === rows.length - 1 }, `row-${index}`));
|
|
75
75
|
}, [restData, index, row, columns, memoizedRowProps, isSheetView]);
|
|
76
|
-
return (_jsx("div", Object.assign({ "data-testid": "ListItemWrapper", style: Object.assign(Object.assign({}, style), { top: Number(style.top) - ((_b = renderedScrollTopRef === null || renderedScrollTopRef === void 0 ? void 0 : renderedScrollTopRef.current) !== null && _b !== void 0 ? _b : 0), willChange: 'top' }) }, { children: _jsx(StyledItemWrapper, Object.assign({
|
|
76
|
+
return (_jsx("div", Object.assign({ "data-testid": "ListItemWrapper", style: Object.assign(Object.assign({}, style), { top: Number(style.top) - ((_b = renderedScrollTopRef === null || renderedScrollTopRef === void 0 ? void 0 : renderedScrollTopRef.current) !== null && _b !== void 0 ? _b : 0), willChange: 'top' }) }, { children: _jsx(StyledItemWrapper, Object.assign({ "data-testid": "ListItemWrapper_StyledItemWrapper" }, { children: memoizedListItemComponent })) })));
|
|
77
77
|
}
|
|
78
78
|
export default ListItemWrapper;
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tap-payments/os-micro-frontend-shared",
|
|
3
3
|
"description": "Shared components and utilities for Tap Payments micro frontends",
|
|
4
|
-
"version": "0.0.
|
|
5
|
-
"testVersion":
|
|
4
|
+
"version": "0.0.283-test.3",
|
|
5
|
+
"testVersion": 3,
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "build/index.js",
|
|
8
8
|
"module": "build/index.js",
|
|
@@ -131,4 +131,4 @@
|
|
|
131
131
|
"publishConfig": {
|
|
132
132
|
"registry": "https://registry.npmjs.org/"
|
|
133
133
|
}
|
|
134
|
-
}
|
|
134
|
+
}
|