@tap-payments/os-micro-frontend-shared 0.0.268-test.3 → 0.0.269
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/TableCells/CustomCells/SalesChannelCell/SalesChannelCell.js +2 -0
- package/build/components/VirtualTable/SheetView/SheetViewTableHeader.js +2 -9
- package/build/components/VirtualTable/components/ColumnFilter/ColumnFilter.d.ts +3 -8
- package/build/components/VirtualTable/components/ColumnFilter/ColumnFilter.js +5 -5
- package/build/components/VirtualTable/style.js +1 -1
- package/package.json +2 -2
|
@@ -23,6 +23,8 @@ function SalesChannelCell(_a) {
|
|
|
23
23
|
const channelCode = (_a = channel.code) === null || _a === void 0 ? void 0 : _a.replace(/_/g, '');
|
|
24
24
|
return (_jsx(Tooltip, Object.assign({ title: sourceTooltip }, { children: _jsx(ImageWrapper, Object.assign({ order: index, variants: salesChannelAnimation(index, isTextShown ? 74 : 0), sx: {
|
|
25
25
|
width: isTextShown ? '70px' : '36px',
|
|
26
|
+
}, onClick: () => {
|
|
27
|
+
window.open(channel.address, '_blank');
|
|
26
28
|
} }, { children: isTextShown ? (_jsx(ChannelTextWrapper, { children: _jsx(ChannelTextLabel, { children: channelCode }) })) : (_jsx(StyledSourceImage, { src: channel.logo, alt: channelCode })) })) }), `${channel}-${index}`));
|
|
27
29
|
});
|
|
28
30
|
const salesChannelsCount = (salesChannels === null || salesChannels === void 0 ? void 0 : salesChannels.length) || 0;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { memo,
|
|
2
|
+
import { memo, useState } from 'react';
|
|
3
3
|
import { Box, useTheme } from '@mui/material';
|
|
4
4
|
import Dropdown from '../../DropdownMenu';
|
|
5
5
|
import { columnIcon, pinIcon, sortAzIcon, sortZaIcon, unpinIcon } from '../../../constants/index.js';
|
|
@@ -9,7 +9,6 @@ import { ActionIcon, ColumnIcon, PinIconContainer, StyledHeader, StyledMUITableR
|
|
|
9
9
|
function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns = [], onColumnPin, isPinnable = false, lastColumnId, selectedColumn = null, onColumnClick, }) {
|
|
10
10
|
const [anchorEl, setAnchorEl] = useState(null);
|
|
11
11
|
const open = Boolean(anchorEl);
|
|
12
|
-
const columnFilterRef = useRef(null);
|
|
13
12
|
const theme = useTheme();
|
|
14
13
|
const handleClick = (event) => {
|
|
15
14
|
setAnchorEl(event.currentTarget);
|
|
@@ -46,13 +45,7 @@ function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort
|
|
|
46
45
|
const isPinned = pinnedColumns.includes(id);
|
|
47
46
|
const isDefaultPinned = !!column.isDefaultPinned;
|
|
48
47
|
const isSelected = selectedColumn === id;
|
|
49
|
-
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) => {
|
|
50
|
-
var _a;
|
|
51
|
-
onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(id, event);
|
|
52
|
-
if (columnFilterRef.current) {
|
|
53
|
-
(_a = columnFilterRef.current) === null || _a === void 0 ? void 0 : _a.click();
|
|
54
|
-
}
|
|
55
|
-
}, 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', boxSizing: 'border-box', border: isSelected ? '2px solid #1F88D0' : '1px solid #F2F2F2', backgroundColor: isSelected ? '#F2F2F2' : '#FCFCFC', 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(HeaderText, Object.assign({ "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell_header_text" }, { children: header })) }))), filter && _jsx(ColumnFilter, Object.assign({ ref: columnFilterRef }, filter)), sortable && _jsx(ColumnIcon, { onClick: sortable ? handleClick : undefined, src: columnIcon, alt: "column-icon", "data-id": id }), isPinnable && pinnable && !isDefaultPinned && !isLast && (_jsx(PinIconContainer, Object.assign({ onClick: (event) => {
|
|
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', boxSizing: 'border-box', border: isSelected ? '2px solid #1F88D0' : '1px solid #F2F2F2', backgroundColor: isSelected ? '#F2F2F2' : '#FCFCFC', 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(HeaderText, Object.assign({ "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 && !isLast && (_jsx(PinIconContainer, Object.assign({ onClick: (event) => {
|
|
56
49
|
event.stopPropagation();
|
|
57
50
|
handlePinClick(id);
|
|
58
51
|
}, title: isPinned ? 'Unpin column' : 'Pin column' }, { children: _jsx("img", { src: isPinned ? unpinIcon : pinIcon, alt: "pin-icon" }) })))] }), `${id}-${colIndex}`));
|
|
@@ -1,10 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
onColumnFilterClearClick?: (() => void) | undefined;
|
|
6
|
-
data?: import("../../../../types/index.js").ColumnFilterValues | undefined;
|
|
7
|
-
isOnlyOneFilter?: boolean | undefined;
|
|
8
|
-
wrapperSx?: import("@mui/system").SxProps | undefined;
|
|
9
|
-
} & (import("../../../../types/index.js").IColumnFilterList | import("../../../../types/index.js").IColumnFilterInputs | import("../../../../types/index.js").IColumnFilterCustom)) & import("react").RefAttributes<HTMLDivElement>>>;
|
|
2
|
+
import { IColumnFilter } from '../../../../types/index.js';
|
|
3
|
+
declare function ColumnFilter(filter: IColumnFilter): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare const _default: import("react").MemoExoticComponent<typeof ColumnFilter>;
|
|
10
5
|
export default _default;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { memo, useMemo, useState } from 'react';
|
|
3
3
|
import Box from '@mui/material/Box';
|
|
4
4
|
import ClickAwayListener from '@mui/material/ClickAwayListener';
|
|
5
5
|
import Popper from '@mui/material/Popper';
|
|
@@ -8,7 +8,7 @@ import Inputs from './Inputs';
|
|
|
8
8
|
import List from './List';
|
|
9
9
|
import { FilterWrapper } from './style';
|
|
10
10
|
import CustomBackdrop from '../../../CustomBackdrop';
|
|
11
|
-
function ColumnFilter(filter
|
|
11
|
+
function ColumnFilter(filter) {
|
|
12
12
|
const [anchorEl, setAnchorEl] = useState(null);
|
|
13
13
|
const openDropdown = (event) => {
|
|
14
14
|
setAnchorEl(event.currentTarget);
|
|
@@ -50,10 +50,10 @@ function ColumnFilter(filter, ref) {
|
|
|
50
50
|
}
|
|
51
51
|
return null;
|
|
52
52
|
}, [open, filter, anchorEl, setAnchorEl]);
|
|
53
|
-
return (_jsx(ClickAwayListener, Object.assign({ onClickAway: onCloseDropdown }, { children: _jsxs(Box, Object.assign({ component: "section", "data-testid": "ColumnFilter", sx: { position: 'relative', display: 'flex', alignItems: 'center' } }, { children: [showClearIcon ? (_jsxs(FilterWrapper, { children: [_jsx(Box, { component: "img", "data-testid": "ColumnFilter_whiteFilterIcon", src: whiteFilterIcon, alt: "filter-icon", sx: { marginInlineEnd: '2px', height: 6 }, onClick: openDropdown
|
|
53
|
+
return (_jsx(ClickAwayListener, Object.assign({ onClickAway: onCloseDropdown }, { children: _jsxs(Box, Object.assign({ component: "section", "data-testid": "ColumnFilter", sx: { position: 'relative', display: 'flex', alignItems: 'center' } }, { children: [showClearIcon ? (_jsxs(FilterWrapper, { children: [_jsx(Box, { component: "img", "data-testid": "ColumnFilter_whiteFilterIcon", src: whiteFilterIcon, alt: "filter-icon", sx: { marginInlineEnd: '2px', height: 6 }, onClick: openDropdown }), _jsx(Box, { component: "img", "data-testid": "ColumnFilter_closeIcon", src: closeIcon, alt: "close-icon", onClick: () => {
|
|
54
54
|
filter.onClear(filterApiKeys);
|
|
55
|
-
} })] })) : (_jsx(Box, { component: "img", "data-testid": "ColumnFilter_columnIcon", src: columnIcon, alt: "column-icon", sx: { cursor: 'pointer', marginTop: '2px' }, onClick: openDropdown
|
|
55
|
+
} })] })) : (_jsx(Box, { component: "img", "data-testid": "ColumnFilter_columnIcon", src: columnIcon, alt: "column-icon", sx: { cursor: 'pointer', marginTop: '2px' }, onClick: openDropdown })), open && _jsx(CustomBackdrop, { onClick: onCloseDropdown }), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-start", sx: {
|
|
56
56
|
zIndex: 9999,
|
|
57
57
|
} }, { children: renderFilter }))] })) })));
|
|
58
58
|
}
|
|
59
|
-
export default memo(
|
|
59
|
+
export default memo(ColumnFilter);
|
|
@@ -29,7 +29,7 @@ export const StyledSolidBackground = styled(Box)(({ theme }) => ({
|
|
|
29
29
|
backgroundColor: theme.palette.background.default,
|
|
30
30
|
}));
|
|
31
31
|
export const StyledCell = styled(TableCell, {
|
|
32
|
-
shouldForwardProp: (prop) => !['isLast', 'isFirst', 'isSheetView'
|
|
32
|
+
shouldForwardProp: (prop) => !['isLast', 'isFirst', 'isSheetView'].includes(prop),
|
|
33
33
|
})(({ theme, isLast, isFirst, isSheetView, isSelected }) => (Object.assign(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' }, (isSheetView && {
|
|
34
34
|
borderRight: isLast ? 'none' : `1px solid ${theme.palette.divider}`,
|
|
35
35
|
paddingInline: '8px !important',
|
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.269",
|
|
5
|
+
"testVersion": 0,
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "build/index.js",
|
|
8
8
|
"module": "build/index.js",
|