@tap-payments/os-micro-frontend-shared 0.1.20-test.1 → 0.1.20-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.
- package/build/components/VirtualTables/SheetViewVirtualTable/components/SheetViewTableHeader/TableCell.js +15 -12
- package/build/components/VirtualTables/components/TableHeader/components/TableCell/TableCell.js +7 -5
- package/build/components/VirtualTables/components/style.d.ts +3 -0
- package/build/components/VirtualTables/components/style.js +6 -0
- package/package.json +2 -2
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { memo, useCallback, useMemo, useState } from 'react';
|
|
2
|
+
import { memo, useCallback, useMemo, useRef, useState } from 'react';
|
|
3
3
|
import Box from '@mui/material/Box';
|
|
4
4
|
import { pinIcon, unpinIcon } from '../../../../../constants/index.js';
|
|
5
5
|
import ColumnFilter from '../../../components/ColumnFilter';
|
|
6
|
-
import { StyledCell } from '../../../components/style';
|
|
6
|
+
import { StyledCell, TableHeaderInner } from '../../../components/style';
|
|
7
7
|
import { PinIconContainer, HeaderText } from '../../style';
|
|
8
8
|
import ColumnSort from '../../../../VirtualTables/components/ColumnSort';
|
|
9
9
|
function TableCell({ column: { header, id, align, headerStyle, sortable, filter, pinnable, width, order, tableViewId, pinned }, colIndex, isFirst, isLast, isSelected, isDefaultPinned, onColumnSort, columnsSorting, onColumnPin, isPinnable, lastColumnId, onColumnClick, pinnedColumns, }) {
|
|
10
10
|
const [columnFilterEl, setColumnFilterEl] = useState(null);
|
|
11
|
+
const cellRef = useRef(null);
|
|
11
12
|
const checkIsPanned = useCallback((columnId) => pinnedColumns === null || pinnedColumns === void 0 ? void 0 : pinnedColumns.includes(columnId), [pinnedColumns]);
|
|
12
13
|
const isPinned = useMemo(() => checkIsPanned(id), [id, checkIsPanned]);
|
|
13
14
|
const handlePinClick = (columnId) => {
|
|
@@ -23,9 +24,11 @@ function TableCell({ column: { header, id, align, headerStyle, sortable, filter,
|
|
|
23
24
|
}
|
|
24
25
|
}
|
|
25
26
|
};
|
|
26
|
-
|
|
27
|
+
const onOpenFilterDropdown = () => {
|
|
28
|
+
setColumnFilterEl(cellRef.current);
|
|
29
|
+
};
|
|
30
|
+
return (_jsx(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, ref: cellRef, onClick: (event) => {
|
|
27
31
|
onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(colIndex, event, pinned);
|
|
28
|
-
setColumnFilterEl(event.currentTarget);
|
|
29
32
|
}, 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
33
|
content: '""',
|
|
31
34
|
border: isSelected ? '1px solid #1F88D0' : '1px solid transparent',
|
|
@@ -34,13 +37,13 @@ function TableCell({ column: { header, id, align, headerStyle, sortable, filter,
|
|
|
34
37
|
right: 0,
|
|
35
38
|
left: 0,
|
|
36
39
|
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) => {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
40
|
+
} }, headerStyle)) }, { children: _jsxs(TableHeaderInner, Object.assign({ onClick: onOpenFilterDropdown }, { 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) => {
|
|
41
|
+
onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(colIndex, event, pinned);
|
|
42
|
+
} }))), sortable && (_jsx(ColumnSort, { columnId: id, onColumnSort: onColumnSort, columnsSorting: columnsSorting, onClick: (e) => {
|
|
43
|
+
onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(colIndex, e, pinned);
|
|
44
|
+
} })), isPinnable && pinnable && !isDefaultPinned && !isLast && (_jsx(PinIconContainer, Object.assign({ onClick: (event) => {
|
|
45
|
+
event.stopPropagation();
|
|
46
|
+
handlePinClick(id);
|
|
47
|
+
}, title: isPinned ? 'Unpin column' : 'Pin column' }, { children: _jsx("img", { src: isPinned ? unpinIcon : pinIcon, alt: "pin-icon" }) })))] })) })));
|
|
45
48
|
}
|
|
46
49
|
export default memo(TableCell);
|
package/build/components/VirtualTables/components/TableHeader/components/TableCell/TableCell.js
CHANGED
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useState } from 'react';
|
|
2
|
+
import { useRef, useState } from 'react';
|
|
3
3
|
import Box from '@mui/material/Box';
|
|
4
4
|
import ColumnFilter from '../../../../../VirtualTables/components/ColumnFilter';
|
|
5
5
|
import ColumnSort from '../../../../../VirtualTables/components/ColumnSort';
|
|
6
|
-
import { StyledCell } from '../../../../../VirtualTables/components/style';
|
|
6
|
+
import { StyledCell, TableHeaderInner } from '../../../../../VirtualTables/components/style';
|
|
7
7
|
export function TableCell({ column: { header, id, align, headerStyle, sortable, filter, width, order }, isFirst, isLast, isSheetView, onColumnSort, columnsSorting, }) {
|
|
8
8
|
const [columnFilterEl, setColumnFilterEl] = useState(null);
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
const cellRef = useRef(null);
|
|
10
|
+
const onOpenFilterDropdown = () => {
|
|
11
|
+
setColumnFilterEl(cellRef.current);
|
|
12
|
+
};
|
|
13
|
+
return (_jsx(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "VirtualTable_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, isFirst: isFirst, isLast: isLast, ref: cellRef, sx: (theme) => (Object.assign({ paddingInline: '0.6875rem', paddingLeft: isFirst ? '0' : '0.6875rem', paddingRight: isLast ? '0' : '0.6875rem', display: 'flex', gap: theme.spacing(0.5), alignItems: 'center', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width: width, textAlign: align, overflow: 'unset', fontWeight: 600 }, headerStyle)), isSheetView: isSheetView }, { children: _jsxs(TableHeaderInner, Object.assign({ onClick: onOpenFilterDropdown }, { children: [typeof header === 'function' ? (header()) : (_jsx(Box, Object.assign({ "data-testid": "TableHeader_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": "VirtualTable_TableHeader_StyledCell_header_text" }, { children: header }))) }))), filter && _jsx(ColumnFilter, Object.assign({}, filter, { anchorEl: columnFilterEl, setAnchorEl: setColumnFilterEl })), sortable && _jsx(ColumnSort, { onColumnSort: onColumnSort, columnsSorting: columnsSorting, columnId: id })] })) })));
|
|
12
14
|
}
|
|
@@ -19,6 +19,9 @@ export declare const StyledCell: import("@emotion/styled").StyledComponent<impor
|
|
|
19
19
|
isSheetView?: boolean | undefined;
|
|
20
20
|
isSelected?: boolean | undefined;
|
|
21
21
|
}, {}, {}>;
|
|
22
|
+
export declare const TableHeaderInner: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
23
|
+
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
24
|
+
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
|
22
25
|
interface StyledVirtualListProps {
|
|
23
26
|
areTotalRowsNotFillingHeight: boolean;
|
|
24
27
|
isSheetView?: boolean;
|
|
@@ -49,6 +49,12 @@ export const StyledCell = styled(TableCell, {
|
|
|
49
49
|
},
|
|
50
50
|
}));
|
|
51
51
|
});
|
|
52
|
+
export const TableHeaderInner = styled(Box)(({ theme }) => ({
|
|
53
|
+
zIndex: 1,
|
|
54
|
+
display: 'flex',
|
|
55
|
+
gap: theme.spacing(0.5),
|
|
56
|
+
alignItems: 'center',
|
|
57
|
+
}));
|
|
52
58
|
export const StyledVirtualList = styled(VirtualScrollList, {
|
|
53
59
|
shouldForwardProp: (prop) => !['areTotalRowsNotFillingHeight', 'isSheetView'].includes(prop),
|
|
54
60
|
})(({ theme, areTotalRowsNotFillingHeight, isSheetView }) => (Object.assign({ backgroundColor: areTotalRowsNotFillingHeight ? 'transparent' : theme.palette.background.default }, (isSheetView && {
|
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.1.20-test.
|
|
5
|
-
"testVersion":
|
|
4
|
+
"version": "0.1.20-test.2",
|
|
5
|
+
"testVersion": 2,
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "build/index.js",
|
|
8
8
|
"module": "build/index.js",
|