@tap-payments/os-micro-frontend-shared 0.0.69-sheetview-container-v2 → 0.0.69-sheetview-container-v4
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.
|
@@ -83,9 +83,9 @@ function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader,
|
|
|
83
83
|
itemsCount,
|
|
84
84
|
]);
|
|
85
85
|
const showNoDataView = tableLoading || tableError || tableEmpty || hasTimeoutError;
|
|
86
|
-
return (_jsxs(_Fragment, { children: [_jsxs(TableContainer,
|
|
86
|
+
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 })), 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: {
|
|
87
87
|
width: '100%',
|
|
88
88
|
minWidth: 'fit-content',
|
|
89
|
-
} }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "VirtualTable_StyledBox", hidePadding: true, className: "list-wrapper" }, { children: renderTableContainer })) })))] })) })), !showNoDataView && areTotalRowsNotFillingHeight && !isFetchingNextPage && (_jsx(TableLastItem, { height: (itemsCount + 1) * TABLE_ROW_HEIGHT, sandboxMode: footerProps === null || footerProps === void 0 ? void 0 : footerProps.sandboxMode, "data-testid": "VirtualTable_TableLastItem" }))] })
|
|
89
|
+
} }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "VirtualTable_StyledBox", hidePadding: true, className: "list-wrapper" }, { children: renderTableContainer })) })))] })) })), !showNoDataView && areTotalRowsNotFillingHeight && !isFetchingNextPage && (_jsx(TableLastItem, { height: (itemsCount + 1) * TABLE_ROW_HEIGHT, 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))] }));
|
|
90
90
|
}
|
|
91
91
|
export default memo(VirtualTable);
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
interface TableWrapperProps {
|
|
3
3
|
showNoDataView?: boolean;
|
|
4
|
+
isSheetView?: boolean;
|
|
4
5
|
}
|
|
5
6
|
export declare const TableWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
6
7
|
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
@@ -312,9 +313,7 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
|
|
|
312
313
|
} & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLImageElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
|
313
314
|
export declare const TableContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
314
315
|
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
315
|
-
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme
|
|
316
|
-
isSheetView?: boolean | undefined;
|
|
317
|
-
}, {}, {}>;
|
|
316
|
+
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
|
318
317
|
export declare const StyledCardsBox: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
319
318
|
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
320
319
|
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
|
|
@@ -6,8 +6,8 @@ import { motion } from 'framer-motion';
|
|
|
6
6
|
import { TABLE_FOOTER_HEIGHT } from './components/TableFooter/style';
|
|
7
7
|
import VirtualScrollList from './components/virtualScroll/VirtualScrollList';
|
|
8
8
|
export const TableWrapper = styled(Box, {
|
|
9
|
-
shouldForwardProp: (prop) => prop !== 'showNoDataView',
|
|
10
|
-
})(({ showNoDataView }) => ({
|
|
9
|
+
shouldForwardProp: (prop) => prop !== 'showNoDataView' && prop !== 'isSheetView',
|
|
10
|
+
})(({ showNoDataView, isSheetView }) => ({
|
|
11
11
|
display: 'flex',
|
|
12
12
|
flexDirection: 'column',
|
|
13
13
|
height: '100%',
|
|
@@ -15,6 +15,8 @@ export const TableWrapper = styled(Box, {
|
|
|
15
15
|
minWidth: showNoDataView ? 'unset' : 'fit-content',
|
|
16
16
|
overflow: 'hidden',
|
|
17
17
|
overflowX: showNoDataView ? 'hidden' : 'scroll',
|
|
18
|
+
padding: isSheetView ? '0 32px' : '0',
|
|
19
|
+
border: isSheetView ? '1px solid #F2F2F2' : 'none',
|
|
18
20
|
}));
|
|
19
21
|
export const StyledBox = styled(Box, {
|
|
20
22
|
shouldForwardProp: (prop) => prop !== 'hidePadding',
|
|
@@ -105,15 +107,11 @@ export const ActionIcon = styled(motion.img)(() => ({
|
|
|
105
107
|
position: 'relative',
|
|
106
108
|
zIndex: 2,
|
|
107
109
|
}));
|
|
108
|
-
export const TableContainer = styled(Box
|
|
109
|
-
shouldForwardProp: (prop) => prop !== 'isSheetView',
|
|
110
|
-
})(({ isSheetView }) => ({
|
|
110
|
+
export const TableContainer = styled(Box)(() => ({
|
|
111
111
|
position: 'relative',
|
|
112
112
|
display: 'flex',
|
|
113
113
|
flexDirection: 'column',
|
|
114
114
|
height: '100%',
|
|
115
|
-
border: isSheetView ? '1px solid #F2F2F2' : 'none',
|
|
116
|
-
marginX: isSheetView ? '32px' : '0',
|
|
117
115
|
}));
|
|
118
116
|
export const StyledCardsBox = styled(Box, {
|
|
119
117
|
shouldForwardProp: (prop) => prop !== 'showNoDataView',
|
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-container-
|
|
4
|
+
"version": "0.0.69-sheetview-container-v4",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "build/index.js",
|
|
7
7
|
"module": "build/index.js",
|