@tap-payments/os-micro-frontend-shared 0.1.3 → 0.1.4
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/VirtualTables/SheetViewVirtualTable/components/SheetViewTableHeader/TableCell.js +9 -1
- package/build/components/VirtualTables/SheetViewVirtualTable/style.js +1 -0
- package/build/components/VirtualTables/components/ColumnSort/ColumnSort.js +1 -1
- package/build/components/VirtualTables/components/TableRow.js +1 -1
- package/build/components/VirtualTables/components/style.js +13 -6
- package/build/components/VirtualTables/utils/getSelectionStyles.d.ts +11 -0
- package/build/components/VirtualTables/utils/getSelectionStyles.js +8 -1
- package/package.json +1 -1
|
@@ -26,7 +26,15 @@ function TableCell({ column: { header, id, align, headerStyle, sortable, filter,
|
|
|
26
26
|
return (_jsxs(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell", "data-column-id": id, "data-column-width": width, "data-column-width-used": width, "data-column-align": align, "data-column-order": order, "data-column-header": typeof header === 'string' ? header : 'component', "data-column-sortable": !!sortable, "data-column-filterable": !!filter, "data-column-pinned": isPinned, isFirst: isFirst, isLast: isLast, isSheetView: true, onClick: (event) => {
|
|
27
27
|
onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(id, event);
|
|
28
28
|
setColumnFilterEl(event.currentTarget);
|
|
29
|
-
}, sx: (theme) => (Object.assign({ display: 'flex', gap: theme.spacing(0.5), alignItems: 'center', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width, textAlign: align, overflow: 'unset', cursor: 'pointer', boxSizing: 'border-box', border: isSelected ? '
|
|
29
|
+
}, sx: (theme) => (Object.assign({ display: 'flex', gap: theme.spacing(0.5), alignItems: 'center', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width, textAlign: align, overflow: 'unset', cursor: 'pointer', boxSizing: 'border-box', border: isSelected ? '1px solid #1F88D0' : '1px solid #F2F2F2', backgroundColor: isSelected ? '#F2F2F2' : '#FCFCFC', minHeight: isSelected ? '28px' : 'auto', position: 'relative', '&:before': {
|
|
30
|
+
content: '""',
|
|
31
|
+
border: isSelected ? '1px solid #1F88D0' : '1px solid transparent',
|
|
32
|
+
position: 'absolute',
|
|
33
|
+
top: 0,
|
|
34
|
+
right: 0,
|
|
35
|
+
left: 0,
|
|
36
|
+
bottom: 0,
|
|
37
|
+
} }, 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(HeaderText, Object.assign({ "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell_header_text" }, { children: header })) }))), filter && (_jsx(ColumnFilter, Object.assign({}, filter, { anchorEl: columnFilterEl, setAnchorEl: setColumnFilterEl, onClose: (event) => {
|
|
30
38
|
onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(id, event);
|
|
31
39
|
} }))), sortable && (_jsx(ColumnSort, { columnId: id, onColumnSort: onColumnSort, columnsSorting: columnsSorting, onClick: (e) => {
|
|
32
40
|
onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(id, e);
|
|
@@ -44,6 +44,7 @@ export const StyledHeader = styled(TableHead, {
|
|
|
44
44
|
export const StyledMUITableRow = styled(MUITableRow)(({ theme }) => ({
|
|
45
45
|
display: 'flex',
|
|
46
46
|
justifyContent: 'flex-start',
|
|
47
|
+
alignItems: 'center',
|
|
47
48
|
width: '100%',
|
|
48
49
|
minWidth: 'fit-content',
|
|
49
50
|
height: '28px',
|
|
@@ -27,7 +27,7 @@ function ColumnSort({ onColumnSort, columnsSorting, columnId, onClick }) {
|
|
|
27
27
|
handleClose(event);
|
|
28
28
|
}
|
|
29
29
|
};
|
|
30
|
-
return (_jsxs(_Fragment, { children: [_jsx(ColumnIcon, { onClick: handleClick, src: columnIcon, alt: "column-icon", "data-id": columnId, sx: { userSelect: 'none' } }), open && _jsx(CustomBackdrop, { onClick: handleClose }), _jsxs(Menu, Object.assign({ anchorEl: anchorEl, open: open }, { children: [_jsxs(MenuItem, Object.assign({ onClick: (e) => {
|
|
30
|
+
return (_jsxs(_Fragment, { children: [_jsx(ColumnIcon, { onClick: handleClick, src: columnIcon, alt: "column-icon", "data-id": columnId, sx: { userSelect: 'none', marginTop: '2px' } }), open && _jsx(CustomBackdrop, { onClick: handleClose }), _jsxs(Menu, Object.assign({ anchorEl: anchorEl, open: open }, { children: [_jsxs(MenuItem, Object.assign({ onClick: (e) => {
|
|
31
31
|
handleSortingOption(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.dataset.id, 'asc', e);
|
|
32
32
|
}, sx: (theme) => (Object.assign({}, ((columnsSorting === null || columnsSorting === void 0 ? void 0 : columnsSorting[(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.dataset.id) || '']) === 'asc' && { boxShadow: theme.shadows[10] }))) }, { children: [_jsx(ActionIcon, { src: sortAzIcon, alt: "sort-icon" }), _jsx(Text, Object.assign({ sx: { fontSize: '0.6875rem' } }, { children: "Sort Z-A" }))] })), _jsxs(MenuItem, Object.assign({ onClick: (e) => {
|
|
33
33
|
handleSortingOption(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.dataset.id, 'desc', e);
|
|
@@ -25,7 +25,7 @@ function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = n
|
|
|
25
25
|
isColumnSelected,
|
|
26
26
|
isLastRow,
|
|
27
27
|
});
|
|
28
|
-
return (_jsx(StyledCell, Object.assign({ component: "div", "data-testid": "TableRow_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: onCellClick ? 'pointer' : 'default' }, selectionStyles), column.cellStyle), isSheetView: isSheetView, isSelected: isCellSelected
|
|
28
|
+
return (_jsx(StyledCell, Object.assign({ component: "div", "data-testid": "TableRow_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: onCellClick ? 'pointer' : 'default' }, selectionStyles), column.cellStyle), isSheetView: isSheetView, isSelected: isCellSelected }, { children: renderCell(column) }), `${column.id}-${colIndex}`));
|
|
29
29
|
}) })), [columns, row, index, selectedCell, selectedColumn, onCellClick, isLastRow]);
|
|
30
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));
|
|
31
31
|
}
|
|
@@ -30,15 +30,22 @@ export const StyledSolidBackground = styled(Box)(({ theme }) => ({
|
|
|
30
30
|
}));
|
|
31
31
|
export const StyledCell = styled(TableCell, {
|
|
32
32
|
shouldForwardProp: (prop) => !['isLast', 'isFirst', 'isSheetView', 'isSelected'].includes(prop),
|
|
33
|
-
})(({ theme, isLast, isFirst, isSheetView, isSelected }) => (Object.assign(
|
|
34
|
-
borderRight: isLast ? '
|
|
33
|
+
})(({ theme, isLast, isFirst, isSheetView, isSelected }) => (Object.assign({ paddingBlock: '0', paddingInline: '0.3875rem !important', paddingLeft: isFirst ? '0 !important' : '0.3875rem !important', paddingRight: isLast ? '0 !important' : '0.3875rem !important', color: isSheetView ? theme.palette.text.primary : theme.palette.grey[700], fontSize: isSheetView ? theme.typography.subtitle1.fontSize : theme.typography.caption.fontSize, height: '100%', fontWeight: isSheetView ? 400 : theme.typography.fontWeightRegular, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: 'flex', alignItems: 'center', cursor: 'pointer' }, (isSheetView && {
|
|
34
|
+
borderRight: isLast ? '1px solid transparent' : `1px solid ${theme.palette.divider}`,
|
|
35
35
|
paddingInline: '8px !important',
|
|
36
36
|
paddingLeft: '8px !important',
|
|
37
37
|
paddingRight: '8px !important',
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
'
|
|
41
|
-
|
|
38
|
+
position: 'relative',
|
|
39
|
+
borderTop: '1px solid transparent',
|
|
40
|
+
borderLeft: '1px solid transparent',
|
|
41
|
+
'&:before': {
|
|
42
|
+
content: '""',
|
|
43
|
+
borderRight: isLast ? 'none' : '1px solid transparent',
|
|
44
|
+
position: 'absolute',
|
|
45
|
+
top: 0,
|
|
46
|
+
right: 0,
|
|
47
|
+
left: 0,
|
|
48
|
+
bottom: 0,
|
|
42
49
|
},
|
|
43
50
|
}))));
|
|
44
51
|
export const StyledVirtualList = styled(VirtualScrollList, {
|
|
@@ -8,6 +8,7 @@ export declare const getSelectionStyles: ({ isSelected, isCellSelected, isColumn
|
|
|
8
8
|
border?: undefined;
|
|
9
9
|
backgroundColor?: undefined;
|
|
10
10
|
color?: undefined;
|
|
11
|
+
'&:before'?: undefined;
|
|
11
12
|
borderWidth?: undefined;
|
|
12
13
|
borderStyle?: undefined;
|
|
13
14
|
borderColor?: undefined;
|
|
@@ -20,6 +21,11 @@ export declare const getSelectionStyles: ({ isSelected, isCellSelected, isColumn
|
|
|
20
21
|
border: string;
|
|
21
22
|
backgroundColor: string;
|
|
22
23
|
color: string;
|
|
24
|
+
'&:before': {
|
|
25
|
+
border: string;
|
|
26
|
+
borderWidth?: undefined;
|
|
27
|
+
borderBottom?: undefined;
|
|
28
|
+
};
|
|
23
29
|
borderWidth?: undefined;
|
|
24
30
|
borderStyle?: undefined;
|
|
25
31
|
borderColor?: undefined;
|
|
@@ -37,6 +43,11 @@ export declare const getSelectionStyles: ({ isSelected, isCellSelected, isColumn
|
|
|
37
43
|
minHeight: string;
|
|
38
44
|
display: string;
|
|
39
45
|
alignItems: string;
|
|
46
|
+
'&:before': {
|
|
47
|
+
borderWidth: string;
|
|
48
|
+
borderBottom: string;
|
|
49
|
+
border?: undefined;
|
|
50
|
+
};
|
|
40
51
|
border?: undefined;
|
|
41
52
|
backgroundColor?: undefined;
|
|
42
53
|
color?: undefined;
|
|
@@ -3,9 +3,12 @@ export const getSelectionStyles = ({ isSelected, isCellSelected, isColumnSelecte
|
|
|
3
3
|
return {};
|
|
4
4
|
if (isCellSelected && !isColumnSelected) {
|
|
5
5
|
return {
|
|
6
|
-
border: '
|
|
6
|
+
border: '1px solid #1F88D0',
|
|
7
7
|
backgroundColor: 'white',
|
|
8
8
|
color: '#1F88D0',
|
|
9
|
+
'&:before': {
|
|
10
|
+
border: '1px solid #1F88D0',
|
|
11
|
+
},
|
|
9
12
|
};
|
|
10
13
|
}
|
|
11
14
|
if (isColumnSelected) {
|
|
@@ -18,6 +21,10 @@ export const getSelectionStyles = ({ isSelected, isCellSelected, isColumnSelecte
|
|
|
18
21
|
minHeight: '28px',
|
|
19
22
|
display: 'flex',
|
|
20
23
|
alignItems: 'center',
|
|
24
|
+
'&:before': {
|
|
25
|
+
borderWidth: isLastRow ? '0px 1.5px 1px 1.5px' : '0px 1.5px 0px 1.5px',
|
|
26
|
+
borderBottom: !isLastRow ? '1px solid transparent' : '1.5px solid #1F88D0',
|
|
27
|
+
},
|
|
21
28
|
};
|
|
22
29
|
}
|
|
23
30
|
return {};
|
package/package.json
CHANGED