@tap-payments/os-micro-frontend-shared 0.0.200 → 0.0.202
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.
- package/build/components/VirtualTable/SheetView/SheetViewTableHeader.d.ts +3 -1
- package/build/components/VirtualTable/SheetView/SheetViewTableHeader.js +3 -2
- package/build/components/VirtualTable/SheetView/SheetViewVirtualTable.js +53 -6
- package/build/components/VirtualTable/components/TableRow.d.ts +5 -1
- package/build/components/VirtualTable/components/TableRow.js +15 -3
- package/build/components/VirtualTable/components/virtualScroll/ListItemWrapper.js +1 -1
- package/build/components/VirtualTable/utils/getBorderStyle.d.ts +38 -0
- package/build/components/VirtualTable/utils/getBorderStyle.js +23 -0
- package/package.json +1 -1
|
@@ -11,7 +11,9 @@ interface SheetViewTableHeaderProps {
|
|
|
11
11
|
onColumnPin?: (columnId: string, position: 'start' | 'end' | 'unpin') => void;
|
|
12
12
|
isPinnable?: boolean;
|
|
13
13
|
lastColumnId?: string | null;
|
|
14
|
+
selectedColumns?: Set<string>;
|
|
15
|
+
onColumnClick?: (columnId: string, event: React.MouseEvent) => void;
|
|
14
16
|
}
|
|
15
|
-
declare function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns, onColumnPin, isPinnable, lastColumnId, }: SheetViewTableHeaderProps): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
declare function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns, onColumnPin, isPinnable, lastColumnId, selectedColumns, onColumnClick, }: SheetViewTableHeaderProps): import("react/jsx-runtime").JSX.Element;
|
|
16
18
|
declare const _default: import("react").MemoExoticComponent<typeof SheetViewTableHeader>;
|
|
17
19
|
export default _default;
|
|
@@ -6,7 +6,7 @@ import { columnIcon, pinIcon, sortAzIcon, sortZaIcon, unpinIcon } from '../../..
|
|
|
6
6
|
import ColumnFilter from '../components/ColumnFilter';
|
|
7
7
|
import { StyledCell } from '../style';
|
|
8
8
|
import { ActionIcon, ColumnIcon, PinIconContainer, StyledHeader, StyledMUITableRow } from './style';
|
|
9
|
-
function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns = [], onColumnPin, isPinnable = false, lastColumnId, }) {
|
|
9
|
+
function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns = [], onColumnPin, isPinnable = false, lastColumnId, selectedColumns = new Set(), onColumnClick, }) {
|
|
10
10
|
const [anchorEl, setAnchorEl] = useState(null);
|
|
11
11
|
const open = Boolean(anchorEl);
|
|
12
12
|
const theme = useTheme();
|
|
@@ -44,7 +44,8 @@ function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort
|
|
|
44
44
|
const isLast = id === columns[columns.length - 1].id;
|
|
45
45
|
const isPinned = pinnedColumns.includes(id);
|
|
46
46
|
const isDefaultPinned = !!column.isDefaultPinned;
|
|
47
|
-
|
|
47
|
+
const isSelected = selectedColumns.has(id);
|
|
48
|
+
return (_jsxs(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell", "data-column-id": column.id, "data-column-width": column.width, "data-column-width-used": column.width, "data-column-align": column.align, "data-column-order": column.order, "data-column-header": typeof column.header === 'string' ? column.header : 'component', "data-column-sortable": !!column.sortable, "data-column-filterable": !!column.filter, "data-column-pinned": isPinned, isFirst: isFirst, isLast: isLast, isSheetView: true, onClick: (event) => onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(id, event), sx: Object.assign({ display: 'flex', gap: theme.spacing(0.5), alignItems: 'center', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width: column.width, textAlign: align, overflow: 'unset', cursor: 'pointer', border: isSelected ? '1px solid #1F88D0' : 'none', backgroundColor: isSelected ? '#e3f2fd' : 'transparent', height: isSelected ? '100%' : 'auto', minHeight: isSelected ? '28px' : 'auto' }, headerStyle) }, { children: [typeof header === 'function' ? (header()) : (_jsx(Box, Object.assign({ "data-testid": "SheetViewTableHeader_columns_header", sx: { maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, { children: header && (_jsx("span", Object.assign({ style: { textOverflow: 'ellipsis', width: '80%', overflow: 'hidden' }, "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell_header_text" }, { children: header }))) }))), filter && _jsx(ColumnFilter, Object.assign({}, filter)), sortable && _jsx(ColumnIcon, { onClick: sortable ? handleClick : undefined, src: columnIcon, alt: "column-icon", "data-id": id }), isPinnable && pinnable && !isDefaultPinned && (_jsx(PinIconContainer, Object.assign({ isPinned: isPinned, onClick: () => handlePinClick(id), title: isPinned ? 'Unpin column' : 'Pin column' }, { children: _jsx("img", { src: isPinned ? unpinIcon : pinIcon, alt: "pin-icon" }) })))] }), `${id}-${colIndex}`));
|
|
48
49
|
}) })), _jsx(Dropdown, { open: open, onClose: handleClose, anchorEl: anchorEl, menuItems: [
|
|
49
50
|
{
|
|
50
51
|
label: 'Sort A-Z',
|
|
@@ -25,7 +25,7 @@ import SheetViewTableHeader from './SheetViewTableHeader';
|
|
|
25
25
|
import AutoSizer from 'react-virtualized-auto-sizer';
|
|
26
26
|
import { usePinnedColumns } from './hooks/usePinnedColumns';
|
|
27
27
|
import { useSynchronizedScroll } from './hooks/useSynchronizedScroll';
|
|
28
|
-
const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, isPinned) => ({
|
|
28
|
+
const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, isPinned, selectedCells, selectedColumns, onCellClick) => ({
|
|
29
29
|
columns,
|
|
30
30
|
isLoading,
|
|
31
31
|
rows,
|
|
@@ -39,12 +39,56 @@ const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToInde
|
|
|
39
39
|
newLoadedRowsEndIndex: lastItemIndex,
|
|
40
40
|
isSheetView: true,
|
|
41
41
|
isPinned,
|
|
42
|
+
selectedCells,
|
|
43
|
+
selectedColumns,
|
|
44
|
+
onCellClick,
|
|
42
45
|
}));
|
|
43
46
|
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, }) {
|
|
44
47
|
var _a, _b, _c;
|
|
45
48
|
const theme = useTheme();
|
|
46
49
|
const { pinnedStartColumns, pinnedEndColumns, handleColumnPin, pinnedStartColumnsData, pinnedEndColumnsData, unpinnedColumnsData, orderedColumns, lastColumnId, } = usePinnedColumns(columns, isPinnable, onColumnPin);
|
|
47
50
|
const { pinnedStartVirtualListRef, scrollableVirtualListRef, pinnedEndVirtualListRef, handleScroll } = useSynchronizedScroll();
|
|
51
|
+
const [selectedCells, setSelectedCells] = useState(new Set());
|
|
52
|
+
const [selectedColumns, setSelectedColumns] = useState(new Set());
|
|
53
|
+
const handleCellClick = useCallback((rowIndex, columnId, event) => {
|
|
54
|
+
event.stopPropagation();
|
|
55
|
+
const cellKey = `${rowIndex}-${columnId}`;
|
|
56
|
+
setSelectedCells((prev) => {
|
|
57
|
+
const newSelected = new Set(prev);
|
|
58
|
+
if (newSelected.has(cellKey)) {
|
|
59
|
+
newSelected.delete(cellKey);
|
|
60
|
+
}
|
|
61
|
+
else {
|
|
62
|
+
if (!event.ctrlKey && !event.metaKey) {
|
|
63
|
+
newSelected.clear();
|
|
64
|
+
}
|
|
65
|
+
newSelected.add(cellKey);
|
|
66
|
+
}
|
|
67
|
+
return newSelected;
|
|
68
|
+
});
|
|
69
|
+
if (!event.ctrlKey && !event.metaKey) {
|
|
70
|
+
setSelectedColumns(new Set());
|
|
71
|
+
}
|
|
72
|
+
}, []);
|
|
73
|
+
const handleColumnClick = useCallback((columnId, event) => {
|
|
74
|
+
event.stopPropagation();
|
|
75
|
+
setSelectedColumns((prev) => {
|
|
76
|
+
const newSelected = new Set(prev);
|
|
77
|
+
if (newSelected.has(columnId)) {
|
|
78
|
+
newSelected.delete(columnId);
|
|
79
|
+
}
|
|
80
|
+
else {
|
|
81
|
+
if (!event.ctrlKey && !event.metaKey) {
|
|
82
|
+
newSelected.clear();
|
|
83
|
+
}
|
|
84
|
+
newSelected.add(columnId);
|
|
85
|
+
}
|
|
86
|
+
return newSelected;
|
|
87
|
+
});
|
|
88
|
+
if (!event.ctrlKey && !event.metaKey) {
|
|
89
|
+
setSelectedCells(new Set());
|
|
90
|
+
}
|
|
91
|
+
}, []);
|
|
48
92
|
const onPointerDown = (e) => {
|
|
49
93
|
dragControls === null || dragControls === void 0 ? void 0 : dragControls.start(e);
|
|
50
94
|
};
|
|
@@ -61,9 +105,9 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
|
|
|
61
105
|
const lastItemIndex = rows.length - 1;
|
|
62
106
|
const areTotalRowsNotFillingHeight = isHeightNotFullyFilledByRows(rows.length) && !tableLoading;
|
|
63
107
|
const itemsCount = isDelayedFetchingNextPage || (areAllRowsLoaded && !areTotalRowsNotFillingHeight) ? rows.length + 1 : rows.length;
|
|
64
|
-
const pinnedStartItemData = createItemData(pinnedStartColumnsData, isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, lastItemIndex, (_a = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _a !== void 0 ? _a : 0, isError, areAllRowsLoaded && !areTotalRowsNotFillingHeight, true);
|
|
65
|
-
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);
|
|
66
|
-
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);
|
|
108
|
+
const pinnedStartItemData = createItemData(pinnedStartColumnsData, isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, lastItemIndex, (_a = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _a !== void 0 ? _a : 0, isError, areAllRowsLoaded && !areTotalRowsNotFillingHeight, true, selectedCells, selectedColumns, handleCellClick);
|
|
109
|
+
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, selectedCells, selectedColumns, handleCellClick);
|
|
110
|
+
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, selectedCells, selectedColumns, handleCellClick);
|
|
67
111
|
const createVirtualTableContainer = useCallback((columnsToRender, containerKey, isPinned = false, fixedWidth) => {
|
|
68
112
|
const tableItemsCount = itemsCount;
|
|
69
113
|
const handleOnLoadMoreItems = () => __awaiter(this, void 0, void 0, function* () {
|
|
@@ -94,6 +138,9 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
|
|
|
94
138
|
handleScroll,
|
|
95
139
|
scrollToIndex,
|
|
96
140
|
areTotalRowsNotFillingHeight,
|
|
141
|
+
selectedCells,
|
|
142
|
+
selectedColumns,
|
|
143
|
+
handleCellClick,
|
|
97
144
|
]);
|
|
98
145
|
const showNoDataView = tableLoading || tableError || tableEmpty || hasTimeoutError;
|
|
99
146
|
const pinnedStartColumnsWidth = useMemo(() => pinnedStartColumnsData.reduce((acc, col) => {
|
|
@@ -109,12 +156,12 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
|
|
|
109
156
|
const containerKey = position === 'start' ? 'pinnedStart' : 'pinnedEnd';
|
|
110
157
|
if (columnsData.length === 0)
|
|
111
158
|
return null;
|
|
112
|
-
return (_jsx(Wrapper, Object.assign({ width: columnsWidth }, { children: _jsxs(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: [showHeader && (_jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_PinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: columnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: pinnedColumnsList, onColumnPin: handleColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
|
|
159
|
+
return (_jsx(Wrapper, Object.assign({ width: columnsWidth }, { children: _jsxs(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: [showHeader && (_jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_PinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: columnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: pinnedColumnsList, onColumnPin: handleColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumns: selectedColumns, onColumnClick: handleColumnClick })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
|
|
113
160
|
width: '100%',
|
|
114
161
|
minWidth: 'fit-content',
|
|
115
162
|
} }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_PinnedStyledBox", hidePadding: true, className: "list-wrapper" }, { children: createVirtualTableContainer(columnsData, containerKey, true, columnsWidth) })) }))] })) })));
|
|
116
163
|
};
|
|
117
|
-
return (_jsxs(_Fragment, { children: [_jsxs(TableContainer, { children: [showNoDataView ? (_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 }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
|
|
164
|
+
return (_jsxs(_Fragment, { children: [_jsxs(TableContainer, { children: [showNoDataView ? (_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, selectedColumns: selectedColumns, onColumnClick: handleColumnClick }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
|
|
118
165
|
width: '100%',
|
|
119
166
|
minWidth: 'fit-content',
|
|
120
167
|
} }, { 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))] }));
|
|
@@ -11,7 +11,11 @@ interface ITableRowProps<R = any> {
|
|
|
11
11
|
showLoadedStyle?: boolean;
|
|
12
12
|
};
|
|
13
13
|
isSheetView?: boolean;
|
|
14
|
+
selectedCells?: Set<string>;
|
|
15
|
+
selectedColumns?: Set<string>;
|
|
16
|
+
onCellClick?: (rowIndex: number, columnId: string, event: React.MouseEvent) => void;
|
|
17
|
+
isLastRow?: boolean;
|
|
14
18
|
}
|
|
15
|
-
declare function TableRow({ row, columns, index, rowProps, isSheetView }: Readonly<ITableRowProps>): import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
declare function TableRow({ row, columns, index, rowProps, isSheetView, selectedCells, selectedColumns, onCellClick, isLastRow, }: Readonly<ITableRowProps>): import("react/jsx-runtime").JSX.Element;
|
|
16
20
|
declare const _default: import("react").MemoExoticComponent<typeof TableRow>;
|
|
17
21
|
export default _default;
|
|
@@ -3,7 +3,8 @@ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
|
|
|
3
3
|
import { memo, useMemo } from 'react';
|
|
4
4
|
import { areEqual } from 'react-window';
|
|
5
5
|
import { StyledCell, StyledTableRow } from '../style';
|
|
6
|
-
|
|
6
|
+
import { getBorderStyle } from '../utils/getBorderStyle';
|
|
7
|
+
function TableRow({ row, columns, index, rowProps, isSheetView, selectedCells = new Set(), selectedColumns = new Set(), onCellClick, isLastRow = false, }) {
|
|
7
8
|
const renderCell = (column) => {
|
|
8
9
|
const { render, format, selector } = column;
|
|
9
10
|
if (!(column === null || column === void 0 ? void 0 : column.id) || !row)
|
|
@@ -13,8 +14,19 @@ function TableRow({ row, columns, index, rowProps, isSheetView }) {
|
|
|
13
14
|
return render ? render({ row, column, index, value: row[column === null || column === void 0 ? void 0 : column.id] }) : _jsx(_Fragment, { children: formattedValue });
|
|
14
15
|
};
|
|
15
16
|
const content = useMemo(() => (_jsx(_Fragment, { children: columns.map((column, colIndex) => {
|
|
16
|
-
|
|
17
|
-
|
|
17
|
+
const columnIdStr = String(column.id);
|
|
18
|
+
const cellKey = `${index}-${columnIdStr}`;
|
|
19
|
+
const isCellSelected = selectedCells.has(cellKey);
|
|
20
|
+
const isColumnSelected = selectedColumns.has(columnIdStr);
|
|
21
|
+
const isSelected = isCellSelected || isColumnSelected;
|
|
22
|
+
const borderStyle = getBorderStyle({
|
|
23
|
+
isSelected,
|
|
24
|
+
isCellSelected,
|
|
25
|
+
isColumnSelected,
|
|
26
|
+
isLastRow,
|
|
27
|
+
});
|
|
28
|
+
return (_jsx(StyledCell, Object.assign({ component: "div", "data-testid": "SheetViewTableRow_TableCell", "data-column-id": column.id, "data-column-width": column.width, "data-column-width-used": column.width, "data-column-align": column.align, "data-column-order": column.order, "data-column-header": typeof column.header === 'string' ? column.header : 'component', "data-column-sortable": !!column.sortable, "data-column-filterable": !!column.filter, isFirst: column.id === columns[0].id, isLast: column.id === columns[columns.length - 1].id, onClick: (event) => onCellClick === null || onCellClick === void 0 ? void 0 : onCellClick(index, columnIdStr, event), sx: Object.assign(Object.assign({ width: column.width, minWidth: column.width, textAlign: column.align, justifyContent: column.align === 'right' ? 'flex-end' : 'flex-start', cursor: 'pointer' }, borderStyle), column.cellStyle), isSheetView: isSheetView }, { children: renderCell(column) }), `${column.id}-${colIndex}`));
|
|
29
|
+
}) })), [columns, row, index, selectedCells, selectedColumns, onCellClick, isLastRow]);
|
|
18
30
|
return (_createElement(StyledTableRow, Object.assign({ "data-testid": "TableRow", onClick: rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick, showShadowHighlight: rowProps === null || rowProps === void 0 ? void 0 : rowProps.showShadowHighlight, showLoadedStyle: rowProps === null || rowProps === void 0 ? void 0 : rowProps.showLoadedStyle, component: "article" }, rowProps, { key: index, isSheetView: isSheetView }), content));
|
|
19
31
|
}
|
|
20
32
|
export default memo(TableRow, areEqual);
|
|
@@ -68,7 +68,7 @@ function ListItemWrapper(_a) {
|
|
|
68
68
|
height: '100%',
|
|
69
69
|
} }, { children: isError ? _jsx(RowErrorState, {}) : lastRowContent })) })));
|
|
70
70
|
}
|
|
71
|
-
return _jsx(TableRow, { index: index, row: row, columns: columns, rowProps: memoizedRowProps, isSheetView: isSheetView }, `row-${index}`);
|
|
71
|
+
return (_jsx(TableRow, { index: index, row: row, columns: columns, rowProps: memoizedRowProps, isSheetView: isSheetView, selectedCells: restData.selectedCells, selectedColumns: restData.selectedColumns, onCellClick: restData.onCellClick, isLastRow: index === rows.length - 1 }, `row-${index}`));
|
|
72
72
|
}, [restData, index, row, columns, memoizedRowProps, isSheetView]);
|
|
73
73
|
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 })) })));
|
|
74
74
|
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
interface GetBorderStyleParams {
|
|
2
|
+
isSelected: boolean;
|
|
3
|
+
isCellSelected: boolean;
|
|
4
|
+
isColumnSelected: boolean;
|
|
5
|
+
isLastRow: boolean;
|
|
6
|
+
}
|
|
7
|
+
export declare const getBorderStyle: ({ isSelected, isCellSelected, isColumnSelected, isLastRow }: GetBorderStyleParams) => {
|
|
8
|
+
border?: undefined;
|
|
9
|
+
backgroundColor?: undefined;
|
|
10
|
+
borderWidth?: undefined;
|
|
11
|
+
borderStyle?: undefined;
|
|
12
|
+
borderColor?: undefined;
|
|
13
|
+
height?: undefined;
|
|
14
|
+
minHeight?: undefined;
|
|
15
|
+
display?: undefined;
|
|
16
|
+
alignItems?: undefined;
|
|
17
|
+
} | {
|
|
18
|
+
border: string;
|
|
19
|
+
backgroundColor: string;
|
|
20
|
+
borderWidth?: undefined;
|
|
21
|
+
borderStyle?: undefined;
|
|
22
|
+
borderColor?: undefined;
|
|
23
|
+
height?: undefined;
|
|
24
|
+
minHeight?: undefined;
|
|
25
|
+
display?: undefined;
|
|
26
|
+
alignItems?: undefined;
|
|
27
|
+
} | {
|
|
28
|
+
borderWidth: string;
|
|
29
|
+
borderStyle: string;
|
|
30
|
+
borderColor: string;
|
|
31
|
+
backgroundColor: string;
|
|
32
|
+
height: string;
|
|
33
|
+
minHeight: string;
|
|
34
|
+
display: string;
|
|
35
|
+
alignItems: string;
|
|
36
|
+
border?: undefined;
|
|
37
|
+
};
|
|
38
|
+
export {};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
export const getBorderStyle = ({ isSelected, isCellSelected, isColumnSelected, isLastRow }) => {
|
|
2
|
+
if (!isSelected)
|
|
3
|
+
return {};
|
|
4
|
+
if (isCellSelected && !isColumnSelected) {
|
|
5
|
+
return {
|
|
6
|
+
border: '1px solid #1F88D0',
|
|
7
|
+
backgroundColor: '#e3f2fd',
|
|
8
|
+
};
|
|
9
|
+
}
|
|
10
|
+
if (isColumnSelected) {
|
|
11
|
+
return {
|
|
12
|
+
borderWidth: isLastRow ? '0px 0.5px 1px 0.5px' : '0px 0.5px 0px 0.5px',
|
|
13
|
+
borderStyle: 'solid',
|
|
14
|
+
borderColor: '#1F88D0',
|
|
15
|
+
backgroundColor: '#e3f2fd',
|
|
16
|
+
height: '100%',
|
|
17
|
+
minHeight: '28px',
|
|
18
|
+
display: 'flex',
|
|
19
|
+
alignItems: 'center',
|
|
20
|
+
};
|
|
21
|
+
}
|
|
22
|
+
return {};
|
|
23
|
+
};
|
package/package.json
CHANGED