@tap-payments/os-micro-frontend-shared 0.0.69-sheetview-table-v1 → 0.0.69-sheetview-table-v2

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.
Files changed (5) hide show
  1. package/build/components/VirtualTable/VirtualTable.js +4 -5
  2. package/build/components/VirtualTable/components/virtualScroll/ListItemWrapper.js +3 -3
  3. package/build/components/VirtualTable/style.d.ts +1 -0
  4. package/build/components/VirtualTable/style.js +4 -4
  5. package/package.json +1 -1
package/build/components/VirtualTable/VirtualTable.js CHANGED
@@ -56,9 +56,7 @@ function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader,
56
56
  const areTotalRowsNotFillingHeight = isHeightNotFullyFilledByRows(rows.length) && !tableLoading;
57
57
  const itemsCount = isDelayedFetchingNextPage || (areAllRowsLoaded && !areTotalRowsNotFillingHeight) ? rows.length + 1 : rows.length;
58
58
  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);
59
- const rowHeightMemoized = useMemo(() => {
60
- return isSheetView ? SHEET_VIEW_TABLE_ROW_HEIGHT : TABLE_ROW_HEIGHT;
61
- }, [isSheetView]);
59
+ const tableRowHeight = isSheetView ? SHEET_VIEW_TABLE_ROW_HEIGHT : TABLE_ROW_HEIGHT;
62
60
  const renderTableContainer = useMemo(() => {
63
61
  const setBackdropVisibility = (isVisible) => {
64
62
  setShowBackdrop(isVisible);
@@ -68,7 +66,7 @@ function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader,
68
66
  return;
69
67
  yield (loadMoreItems === null || loadMoreItems === void 0 ? void 0 : loadMoreItems());
70
68
  });
71
- 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: () => rowHeightMemoized, onItemsRendered: onItemsRendered, setBackdropVisibility: setBackdropVisibility, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, scrollToIndex: scrollToIndex, overscanCount: TABLE_LIST_OVER_SCAN }, { children: ListItemWrapper }))) }))) })));
69
+ 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 }))) }))) })));
72
70
  }, [
73
71
  orderedColumns,
74
72
  error,
@@ -85,11 +83,12 @@ function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader,
85
83
  areAllRowsLoaded,
86
84
  areTotalRowsNotFillingHeight,
87
85
  itemsCount,
86
+ tableRowHeight,
88
87
  ]);
89
88
  const showNoDataView = tableLoading || tableError || tableEmpty || hasTimeoutError;
90
89
  return (_jsxs(_Fragment, { children: [_jsxs(TableContainer, { children: [_jsx(StyledTableBox, Object.assign({ as: "main", id: "table-box-container", "aria-labelledby": "table-box-container", "data-testid": "VirtualTable_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: _jsxs(TableWrapper, Object.assign({ isSheetView: isSheetView, "data-testid": "VirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: Object.assign({}, tableBodyStyles) }, { children: [showHeader && (_jsx(TableHeader, { "data-testid": "VirtualTable_TableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: orderedColumns, headerProps: headerProps, showBackDrop: showBackDrop, isSheetView: isSheetView })), showNoDataView ? (_jsx(TableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps })) : (_jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
91
90
  width: '100%',
92
91
  minWidth: 'fit-content',
93
- } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "VirtualTable_StyledBox", hidePadding: true, className: "list-wrapper" }, { children: renderTableContainer })) })))] })) })), !showNoDataView && areTotalRowsNotFillingHeight && !isFetchingNextPage && (_jsx(TableLastItem, { height: (itemsCount + 1) * rowHeightMemoized, sandboxMode: footerProps === null || footerProps === void 0 ? void 0 : footerProps.sandboxMode, "data-testid": "VirtualTable_TableLastItem" }))] }), _jsx(TableFooter, Object.assign({ "data-testid": "VirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));
92
+ } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "VirtualTable_StyledBox", hidePadding: true, className: "list-wrapper" }, { children: renderTableContainer })) })))] })) })), !showNoDataView && areTotalRowsNotFillingHeight && !isFetchingNextPage && (_jsx(TableLastItem, { height: (itemsCount + 1) * tableRowHeight, sandboxMode: footerProps === null || footerProps === void 0 ? void 0 : footerProps.sandboxMode, "data-testid": "VirtualTable_TableLastItem" }))] }), _jsx(TableFooter, Object.assign({ "data-testid": "VirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));
94
93
  }
95
94
  export default memo(VirtualTable);
package/build/components/VirtualTable/components/virtualScroll/ListItemWrapper.js CHANGED
@@ -14,7 +14,7 @@ import React from 'react';
14
14
  import { Box } from '@mui/material';
15
15
  import { styled } from '@mui/material/styles';
16
16
  import { useTranslation } from 'react-i18next';
17
- import { blueCircleLoaderIcon, tableBackgroundLoader, TABLE_ROW_HEIGHT } from '../../../../constants/index.js';
17
+ import { blueCircleLoaderIcon, tableBackgroundLoader, TABLE_ROW_HEIGHT, SHEET_VIEW_TABLE_ROW_HEIGHT } from '../../../../constants/index.js';
18
18
  import { ActionIcon } from '../../style';
19
19
  import { RowErrorState } from '../RowErrorState';
20
20
  import { StyledParagraph } from '../TableLastItem';
@@ -56,7 +56,7 @@ function ListItemWrapper(_a) {
56
56
  const isLastRow = isLoadingRow || (areAllRowsLoaded && index === lastItemIndex + 1);
57
57
  if (isLastRow) {
58
58
  return (_jsx(Box, Object.assign({ sx: {
59
- height: TABLE_ROW_HEIGHT,
59
+ height: isSheetView ? SHEET_VIEW_TABLE_ROW_HEIGHT : TABLE_ROW_HEIGHT,
60
60
  display: 'flex',
61
61
  justifyContent: 'center',
62
62
  alignItems: 'center',
@@ -70,7 +70,7 @@ function ListItemWrapper(_a) {
70
70
  } }, { children: isError ? _jsx(RowErrorState, {}) : lastRowContent })) })));
71
71
  }
72
72
  return _jsx(TableRow, { index: index, row: row, columns: columns, rowProps: memoizedRowProps, isSheetView: isSheetView }, `row-${index}`);
73
- }, [restData, index, row, columns, memoizedRowProps]);
73
+ }, [restData, index, row, columns, memoizedRowProps, isSheetView]);
74
74
  return (_jsx("div", Object.assign({ "data-testid": "ListItemWrapper", style: Object.assign(Object.assign({}, style), { top: Number(style.top) - renderedScrollTopRef.current, willChange: 'top' }) }, { children: _jsx(StyledItemWrapper, Object.assign({ "data-testid": "ListItemWrapper_StyledItemWrapper" }, { children: memoizedListItemComponent })) })));
75
75
  }
76
76
  export default ListItemWrapper;
package/build/components/VirtualTable/style.d.ts CHANGED
@@ -21,6 +21,7 @@ export declare const StyledCell: import("@emotion/styled").StyledComponent<impor
21
21
  }, {}, {}>;
22
22
  interface StyledVirtualListProps {
23
23
  areTotalRowsNotFillingHeight: boolean;
24
+ isSheetView?: boolean;
24
25
  }
25
26
  export declare const StyledVirtualList: import("@emotion/styled").StyledComponent<import("react-window").VariableSizeListProps<any> & {
26
27
  setBackdropVisibility: (isVisible: boolean) => void;
package/build/components/VirtualTable/style.js CHANGED
@@ -34,10 +34,10 @@ export const StyledCell = styled(TableCell, {
34
34
  borderRight: isLast ? 'none' : `1px solid ${theme.palette.divider}`,
35
35
  }))));
36
36
  export const StyledVirtualList = styled(VirtualScrollList, {
37
- shouldForwardProp: (prop) => prop !== 'areTotalRowsNotFillingHeight',
38
- })(({ theme, areTotalRowsNotFillingHeight }) => ({
39
- backgroundColor: areTotalRowsNotFillingHeight ? 'transparent' : theme.palette.background.default,
40
- }));
37
+ shouldForwardProp: (prop) => !['areTotalRowsNotFillingHeight', 'isSheetView'].includes(prop),
38
+ })(({ theme, areTotalRowsNotFillingHeight, isSheetView }) => (Object.assign({ backgroundColor: areTotalRowsNotFillingHeight ? 'transparent' : theme.palette.background.default }, (isSheetView && {
39
+ backgroundColor: theme.palette.common.white,
40
+ }))));
41
41
  export const StyledTableRow = styled(MUITableRow, {
42
42
  shouldForwardProp: (props) => !['showShadowHighlight', 'showLoadedStyle', 'isSheetView'].includes(props),
43
43
  })(({ theme, showShadowHighlight, showLoadedStyle, isSheetView }) => (Object.assign({ display: 'flex', borderBottom: `1px solid ${theme === null || theme === void 0 ? void 0 : theme.palette.divider}`, position: 'relative', height: '100%', width: '100%' }, (!isSheetView && Object.assign(Object.assign({ paddingInline: '32px', '&:hover': {
package/package.json CHANGED
@@ -1,7 +1,7 @@
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.69-sheetview-table-v1",
4
+ "version": "0.0.69-sheetview-table-v2",
5
5
  "type": "module",
6
6
  "main": "build/index.js",
7
7
  "module": "build/index.js",