@tap-payments/os-micro-frontend-shared 0.0.282 → 0.0.283-test.2
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.
|
@@ -13,11 +13,10 @@ 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,9 +42,10 @@ 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();
|
|
@@ -77,10 +77,8 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
|
|
|
77
77
|
const hasTimeoutError = isTimeoutError(error);
|
|
78
78
|
const lastItemIndex = rows.length - 1;
|
|
79
79
|
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);
|
|
80
|
+
const itemsCount = isDelayedFetchingNextPage || areAllRowsLoaded ? rows.length + 1 : rows.length;
|
|
81
|
+
console.log({ isDelayedFetchingNextPage, areAllRowsLoaded, areTotalRowsNotFillingHeight, itemsCount });
|
|
84
82
|
const createVirtualTableContainer = useCallback((columnsToRender, containerKey, isPinned = false, fixedWidth) => {
|
|
85
83
|
const tableItemsCount = itemsCount;
|
|
86
84
|
const handleOnLoadMoreItems = () => __awaiter(this, void 0, void 0, function* () {
|
|
@@ -88,31 +86,68 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
|
|
|
88
86
|
return;
|
|
89
87
|
yield (loadMoreItems === null || loadMoreItems === void 0 ? void 0 : loadMoreItems());
|
|
90
88
|
});
|
|
91
|
-
const currentItemData = containerKey === 'pinnedStart' ? pinnedStartItemData : containerKey === 'pinnedEnd' ? pinnedEndItemData : unpinnedItemData;
|
|
92
89
|
const listRef = containerKey === 'pinnedStart' ? pinnedStartVirtualListRef : containerKey === 'pinnedEnd' ? pinnedEndVirtualListRef : scrollableVirtualListRef;
|
|
93
90
|
const handleScrollCallback = (scrollProps) => {
|
|
94
91
|
const source = containerKey === 'pinnedStart' ? 'start' : containerKey === 'pinnedEnd' ? 'end' : 'scrollable';
|
|
95
92
|
handleScroll(scrollProps, source);
|
|
96
93
|
};
|
|
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
|
-
|
|
94
|
+
return (_jsx(InfiniteLoader, Object.assign({ isItemLoaded: (index) => index !== lastItemIndex, itemCount: tableItemsCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered }) => (_jsx(AutoSizer, { children: ({ height, width }) => {
|
|
95
|
+
var _a;
|
|
96
|
+
const getItemSize = (index) => {
|
|
97
|
+
console.log({ All: areAllRowsLoaded, rows, index });
|
|
98
|
+
const isLastRow = areAllRowsLoaded && index === rows.length;
|
|
99
|
+
if (isLastRow) {
|
|
100
|
+
const usedHeight = rows.length * rowHeight;
|
|
101
|
+
const remainingHeight = height - usedHeight;
|
|
102
|
+
return Math.max(remainingHeight, rowHeight);
|
|
103
|
+
}
|
|
104
|
+
return rowHeight;
|
|
105
|
+
};
|
|
106
|
+
const commonItemDataParams = [
|
|
107
|
+
isDelayedFetchingNextPage,
|
|
108
|
+
rows,
|
|
109
|
+
rowProps,
|
|
110
|
+
scrollToIndex,
|
|
111
|
+
lastItemIndex,
|
|
112
|
+
(_a = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _a !== void 0 ? _a : 0,
|
|
113
|
+
isError,
|
|
114
|
+
areAllRowsLoaded,
|
|
115
|
+
];
|
|
116
|
+
const commonItemDataSuffix = [selectedCell, selectedColumn, handleCellClick, height, rowHeight];
|
|
117
|
+
const getItemDataForContainer = (columnsData, isPinnedColumn) => createItemData(columnsData, ...commonItemDataParams, isPinnedColumn, ...commonItemDataSuffix);
|
|
118
|
+
const currentItemData = containerKey === 'pinnedStart'
|
|
119
|
+
? getItemDataForContainer(pinnedStartColumnsData, true)
|
|
120
|
+
: containerKey === 'pinnedEnd'
|
|
121
|
+
? getItemDataForContainer(pinnedEndColumnsData, true)
|
|
122
|
+
: getItemDataForContainer(unpinnedColumnsData, false);
|
|
123
|
+
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: {
|
|
124
|
+
overflowX: isPinned ? 'hidden' : 'auto',
|
|
125
|
+
paddingBottom: isPinned ? '25px' : '13px',
|
|
126
|
+
backgroundColor: isPinned ? 'transparent' : theme.palette.background.default,
|
|
127
|
+
} }, { children: ListItemWrapper })));
|
|
128
|
+
} })) })));
|
|
102
129
|
}, [
|
|
103
130
|
itemsCount,
|
|
104
131
|
areAllRowsLoaded,
|
|
105
132
|
loadMoreItems,
|
|
106
133
|
threshold,
|
|
107
134
|
rowHeight,
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
135
|
+
rows,
|
|
136
|
+
pinnedStartColumnsData,
|
|
137
|
+
pinnedEndColumnsData,
|
|
138
|
+
unpinnedColumnsData,
|
|
139
|
+
isDelayedFetchingNextPage,
|
|
140
|
+
rowProps,
|
|
112
141
|
scrollToIndex,
|
|
142
|
+
lastItemIndex,
|
|
143
|
+
footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount,
|
|
144
|
+
isError,
|
|
113
145
|
areTotalRowsNotFillingHeight,
|
|
146
|
+
selectedCell,
|
|
147
|
+
selectedColumn,
|
|
148
|
+
handleCellClick,
|
|
149
|
+
handleScroll,
|
|
114
150
|
clearBackdropVisibilityTimeout,
|
|
115
|
-
lastItemIndex,
|
|
116
151
|
pinnedEndVirtualListRef,
|
|
117
152
|
pinnedStartVirtualListRef,
|
|
118
153
|
scrollableVirtualListRef,
|
|
@@ -138,23 +173,23 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
|
|
|
138
173
|
overflowX: 'hidden',
|
|
139
174
|
} }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_PinnedStyledBox", hidePadding: true, className: "list-wrapper" }, { children: createVirtualTableContainer(columnsData, containerKey, true, columnsWidth) })) }))] })) }));
|
|
140
175
|
};
|
|
141
|
-
return (_jsxs(_Fragment, { children: [
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
176
|
+
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: {
|
|
177
|
+
marginLeft: '28px',
|
|
178
|
+
maxHeight: 'calc(100vh - 300px)',
|
|
179
|
+
overflow: 'auto',
|
|
180
|
+
} }, { 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: {
|
|
181
|
+
width: '100%',
|
|
182
|
+
minWidth: 'fit-content',
|
|
183
|
+
height: 'auto',
|
|
184
|
+
display: 'flex',
|
|
185
|
+
flexDirection: 'column',
|
|
186
|
+
} }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_LoadingStyledBox", hidePadding: true, className: "list-wrapper", sx: {
|
|
148
187
|
height: 'auto',
|
|
149
188
|
display: 'flex',
|
|
150
189
|
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))] }));
|
|
190
|
+
} }, { 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: {
|
|
191
|
+
width: '100%',
|
|
192
|
+
minWidth: 'fit-content',
|
|
193
|
+
} }, { 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
194
|
}
|
|
160
195
|
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.2",
|
|
5
|
+
"testVersion": 2,
|
|
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
|
+
}
|