@tap-payments/os-micro-frontend-shared 0.1.49 → 0.1.50
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/LICENSE +21 -21
- package/README.md +12 -12
- package/build/components/AccountDropdown/style.d.ts +1 -1
- package/build/components/ActivityAreaChart/styles.d.ts +3 -3
- package/build/components/AppServices/style.d.ts +1 -1
- package/build/components/CircularProgressWithLabel/style.d.ts +1 -1
- package/build/components/DockButton/style.d.ts +1 -1
- package/build/components/FileUpload/style.d.ts +2 -2
- package/build/components/FileUploader/style.d.ts +1 -1
- package/build/components/IconWithLabel/style.d.ts +1 -1
- package/build/components/IconsDropdown/style.d.ts +2 -2
- package/build/components/JSONViewer/style.d.ts +1 -1
- package/build/components/LabeledIconDropdown/style.d.ts +3 -3
- package/build/components/MultiSelectWithSearch/style.d.ts +3 -3
- package/build/components/NestedDropdown/styles.d.ts +1 -1
- package/build/components/ProgressBar/style.d.ts +1 -1
- package/build/components/ProgressRing/style.d.ts +2 -2
- package/build/components/RFH/Inputs/SelectWithAccordion/style.d.ts +3 -3
- package/build/components/SelectDropdown/style.d.ts +1 -1
- package/build/components/SelectWithSearch/style.d.ts +3 -3
- package/build/components/StatusChipWithCopy/utils.d.ts +1 -1
- package/build/components/StatusLabel/style.d.ts +1 -1
- package/build/components/TableHeader/style.d.ts +1 -1
- package/build/components/Timepicker/style.d.ts +2 -2
- package/build/components/ToolbarIcon/ExpandButton/style.d.ts +1 -1
- package/build/components/VirtualTables/SheetViewVirtualTable/SheetViewVirtualTable.js +1 -2
- package/build/components/VirtualTables/SheetViewVirtualTable/components/SheetViewTableHeaderCell.js +3 -10
- package/build/components/VirtualTables/SheetViewVirtualTable/components/VirtualTable.d.ts +0 -1
- package/build/components/VirtualTables/SheetViewVirtualTable/hooks/useTableState.d.ts +0 -2
- package/build/components/VirtualTables/SheetViewVirtualTable/hooks/useTableState.js +2 -15
- package/build/components/VirtualTables/SheetViewVirtualTable/hooks/useVirtualTableContainer.d.ts +1 -3
- package/build/components/VirtualTables/SheetViewVirtualTable/hooks/useVirtualTableContainer.js +3 -4
- package/build/components/VirtualTables/components/TableFooter/style.d.ts +2 -2
- package/build/components/VirtualTables/components/TableRow.d.ts +1 -2
- package/build/components/VirtualTables/components/TableRow.js +7 -20
- package/build/components/VirtualTables/components/style.d.ts +0 -3
- package/build/components/VirtualTables/components/style.js +3 -7
- package/build/components/Widget/style.d.ts +1 -1
- package/build/components/WindowAppIcon/style.d.ts +1 -1
- package/build/constants/table/cell/authorizationTableCellWidth.d.ts +5 -0
- package/build/constants/table/cell/authorizationTableCellWidth.js +5 -0
- package/build/constants/table/cell/chargeTableCellWidth.d.ts +5 -0
- package/build/constants/table/cell/chargeTableCellWidth.js +5 -0
- package/build/constants/table/cell/destinationsTableCellWidth.d.ts +5 -0
- package/build/constants/table/cell/destinationsTableCellWidth.js +5 -0
- package/build/constants/table/cell/refundTableCellWidth.d.ts +5 -0
- package/build/constants/table/cell/refundTableCellWidth.js +5 -0
- package/build/utils/columns.d.ts +2 -2
- package/build/utils/columns.js +3 -4
- package/build/utils/style.d.ts +1 -10
- package/build/utils/style.js +5 -30
- package/package.json +1 -1
|
@@ -4,8 +4,8 @@ import { memo, useMemo } from 'react';
|
|
|
4
4
|
import { Box } from '@mui/material';
|
|
5
5
|
import { areEqual } from 'react-window';
|
|
6
6
|
import { StyledCell, StyledTableRow } from './style';
|
|
7
|
-
import { getSelectionStyles
|
|
8
|
-
function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = null, selectedColumn = null,
|
|
7
|
+
import { getSelectionStyles } from '../../../utils/index.js';
|
|
8
|
+
function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = null, selectedColumn = null, selectedChip = null, onCellClick, isLastRow = false, onChipClick, }) {
|
|
9
9
|
const renderCell = (column, rowIndex, colIndex) => {
|
|
10
10
|
const { render, format, selector } = column;
|
|
11
11
|
const handleChipClick = (event, chipIndex) => {
|
|
@@ -24,20 +24,16 @@ function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = n
|
|
|
24
24
|
})) : (_jsx(_Fragment, { children: formattedValue }));
|
|
25
25
|
};
|
|
26
26
|
const content = useMemo(() => (_jsx(_Fragment, { children: columns.map((column, colIndex) => {
|
|
27
|
-
var _a, _b
|
|
27
|
+
var _a, _b;
|
|
28
28
|
const cellKey = `${(_a = column.pinned) !== null && _a !== void 0 ? _a : 'default'}-${index}-${colIndex}`;
|
|
29
29
|
const isCellSelected = selectedCell === cellKey;
|
|
30
30
|
const columnKey = `${(_b = column.pinned) !== null && _b !== void 0 ? _b : 'default'}-${colIndex}`;
|
|
31
31
|
const isColumnSelected = selectedColumn === columnKey;
|
|
32
|
-
const
|
|
33
|
-
const isSelected = isCellSelected || isColumnSelected || isRowSelected;
|
|
34
|
-
const nextCellKey = colIndex < columns.length - 1 ? `${(_c = column.pinned) !== null && _c !== void 0 ? _c : 'default'}-${index}-${colIndex + 1}` : null;
|
|
35
|
-
const isNextCellSelected = nextCellKey ? selectedCell === nextCellKey : false;
|
|
32
|
+
const isSelected = isCellSelected || isColumnSelected;
|
|
36
33
|
const selectionStyles = getSelectionStyles({
|
|
37
34
|
isSelected,
|
|
38
35
|
isCellSelected,
|
|
39
36
|
isColumnSelected,
|
|
40
|
-
isRowSelected,
|
|
41
37
|
isLastRow,
|
|
42
38
|
});
|
|
43
39
|
const isFirstColumn = column.id === columns[0].id;
|
|
@@ -48,19 +44,10 @@ function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = n
|
|
|
48
44
|
effectiveFirst = isFirstColumn && column.pinned !== 'start';
|
|
49
45
|
effectiveLast = isLastColumn && column.pinned !== 'end';
|
|
50
46
|
}
|
|
51
|
-
const rowSelectionBorderStyles = isRowSelected
|
|
52
|
-
? getRowSelectionBorderStyles({
|
|
53
|
-
isCellSelected,
|
|
54
|
-
isNextCellSelected,
|
|
55
|
-
effectiveLast,
|
|
56
|
-
isPinnedEnd: column.pinned === 'end',
|
|
57
|
-
colIndex,
|
|
58
|
-
})
|
|
59
|
-
: {};
|
|
60
47
|
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: effectiveFirst, isLast: effectiveLast, onClick: (event) => {
|
|
61
48
|
onCellClick === null || onCellClick === void 0 ? void 0 : onCellClick(index, colIndex, event, column.pinned);
|
|
62
|
-
}, sx: Object.assign(Object.assign(
|
|
63
|
-
}) })), [columns, row, index, selectedCell, selectedColumn,
|
|
64
|
-
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
|
|
49
|
+
}, 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: isSheetView ? (_jsx(Box, Object.assign({ sx: { position: 'relative', zIndex: 1 } }, { children: renderCell(column, index, colIndex) }))) : (_jsx(_Fragment, { children: renderCell(column, index, colIndex) })) }), `${column.id}-${colIndex}`));
|
|
50
|
+
}) })), [columns, row, index, selectedCell, selectedColumn, onCellClick, isLastRow, selectedChip, isSheetView]);
|
|
51
|
+
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));
|
|
65
52
|
}
|
|
66
53
|
export default memo(TableRow, areEqual);
|
|
@@ -38,9 +38,6 @@ export declare const StyledTableRow: import("@emotion/styled").StyledComponent<i
|
|
|
38
38
|
showShadowHighlight?: boolean | undefined;
|
|
39
39
|
showLoadedStyle?: boolean | undefined;
|
|
40
40
|
isSheetView?: boolean | undefined;
|
|
41
|
-
selectedRow?: number | null | undefined;
|
|
42
|
-
isSelected?: boolean | undefined;
|
|
43
|
-
index?: number | undefined;
|
|
44
41
|
}, {}, {}>;
|
|
45
42
|
export declare const StyledTableBox: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
46
43
|
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
@@ -5,7 +5,6 @@ import MUITableRow from '@mui/material/TableRow';
|
|
|
5
5
|
import { motion } from 'framer-motion';
|
|
6
6
|
import { TABLE_FOOTER_HEIGHT } from './TableFooter/style';
|
|
7
7
|
import VirtualScrollList from './virtualScroll/VirtualScrollList';
|
|
8
|
-
import { SELECTION_COLORS } from '../../../utils/index.js';
|
|
9
8
|
export const TableWrapper = styled(Box, {
|
|
10
9
|
shouldForwardProp: (prop) => prop !== 'showNoDataView',
|
|
11
10
|
})(({ showNoDataView }) => ({
|
|
@@ -64,8 +63,8 @@ export const StyledVirtualList = styled(VirtualScrollList, {
|
|
|
64
63
|
backgroundColor: theme.palette.common.white,
|
|
65
64
|
}))));
|
|
66
65
|
export const StyledTableRow = styled(MUITableRow, {
|
|
67
|
-
shouldForwardProp: (props) => !['showShadowHighlight', 'showLoadedStyle', 'isSheetView'
|
|
68
|
-
})(({ theme, showShadowHighlight, showLoadedStyle, isSheetView
|
|
66
|
+
shouldForwardProp: (props) => !['showShadowHighlight', 'showLoadedStyle', 'isSheetView'].includes(props),
|
|
67
|
+
})(({ theme, showShadowHighlight, showLoadedStyle, isSheetView }) => (Object.assign({ display: 'flex', borderBottom: `1px solid ${theme === null || theme === void 0 ? void 0 : theme.palette.divider}`, position: 'relative', height: '100%', width: '100%' }, (!isSheetView && Object.assign(Object.assign({ paddingInline: '32px', '&:hover': {
|
|
69
68
|
boxShadow: theme.shadows[12],
|
|
70
69
|
zIndex: 1,
|
|
71
70
|
'.payment-sources-container': {
|
|
@@ -102,10 +101,7 @@ export const StyledTableRow = styled(MUITableRow, {
|
|
|
102
101
|
position: 'absolute',
|
|
103
102
|
left: 0,
|
|
104
103
|
},
|
|
105
|
-
}))))
|
|
106
|
-
selectedRow === index && {
|
|
107
|
-
border: `1.5px solid ${SELECTION_COLORS.primary}`,
|
|
108
|
-
}))));
|
|
104
|
+
}))))));
|
|
109
105
|
export const StyledTableBox = styled(Box, {
|
|
110
106
|
shouldForwardProp: (prop) => prop !== 'showNoDataView' && prop !== 'scrollable',
|
|
111
107
|
})(({ theme, showNoDataView, scrollable }) => ({
|
|
@@ -13,7 +13,7 @@ export declare const ListItemStyled: import("@emotion/styled").StyledComponent<i
|
|
|
13
13
|
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
14
14
|
export declare const ItemText: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
|
|
15
15
|
ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
|
|
16
|
-
}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "m" | "order" | "p" | "style" | "color" | "border" | "
|
|
16
|
+
}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "m" | "order" | "p" | "style" | "color" | "border" | "borderColor" | "borderBottom" | "flex" | "display" | "alignItems" | "className" | "classes" | "children" | "borderTop" | "borderRight" | "borderLeft" | "borderRadius" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignContent" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
|
|
17
17
|
component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
18
18
|
} & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
19
19
|
export declare const ItemTextWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export declare const TitleStyled: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
|
|
3
3
|
ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
|
|
4
|
-
}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "m" | "order" | "p" | "style" | "color" | "border" | "
|
|
4
|
+
}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "m" | "order" | "p" | "style" | "color" | "border" | "borderColor" | "borderBottom" | "flex" | "display" | "alignItems" | "className" | "classes" | "children" | "borderTop" | "borderRight" | "borderLeft" | "borderRadius" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignContent" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
|
|
5
5
|
component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
6
6
|
} & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
7
7
|
export declare const StyledWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
package/build/utils/columns.d.ts
CHANGED
|
@@ -9,8 +9,8 @@ export declare function filterShownColumns<T>(columns: Array<IColumnProps<T & {
|
|
|
9
9
|
export declare function isParameterSelected(columns: ColumnViewProps[], columnId: string, parameter: string): boolean;
|
|
10
10
|
export declare function mapDataToViews(columnData?: ColumnsView[], language?: string): ColumnViewProps[];
|
|
11
11
|
export declare function mapViewsToData(columns: ColumnViewProps[]): ColumnsView[];
|
|
12
|
-
export declare const updateColumnSelection: ({ columnsViewData,
|
|
12
|
+
export declare const updateColumnSelection: ({ columnsViewData, columnsName, selected, }: {
|
|
13
13
|
columnsViewData: ColumnsView[];
|
|
14
|
-
|
|
14
|
+
columnsName: string[];
|
|
15
15
|
selected: boolean;
|
|
16
16
|
}) => ColumnsView[];
|
package/build/utils/columns.js
CHANGED
|
@@ -65,11 +65,10 @@ export function mapViewsToData(columns) {
|
|
|
65
65
|
};
|
|
66
66
|
});
|
|
67
67
|
}
|
|
68
|
-
export const updateColumnSelection = ({ columnsViewData,
|
|
68
|
+
export const updateColumnSelection = ({ columnsViewData, columnsName, selected, }) => {
|
|
69
69
|
return columnsViewData.map((column) => {
|
|
70
|
-
var _a
|
|
71
|
-
|
|
72
|
-
if (columnText === columnName.toLowerCase()) {
|
|
70
|
+
var _a;
|
|
71
|
+
if (columnsName.includes((_a = column.name[0]) === null || _a === void 0 ? void 0 : _a.text)) {
|
|
73
72
|
return Object.assign(Object.assign({}, column), { selected });
|
|
74
73
|
}
|
|
75
74
|
return column;
|
package/build/utils/style.d.ts
CHANGED
|
@@ -8,17 +8,8 @@ interface GetSelectionStylesParams {
|
|
|
8
8
|
isSelected: boolean;
|
|
9
9
|
isCellSelected: boolean;
|
|
10
10
|
isColumnSelected: boolean;
|
|
11
|
-
isRowSelected?: boolean;
|
|
12
11
|
isLastRow: boolean;
|
|
13
12
|
}
|
|
14
13
|
type SelectionStyles = Record<string, string | Record<string, string>>;
|
|
15
|
-
export declare const getSelectionStyles: ({ isSelected, isCellSelected, isColumnSelected,
|
|
16
|
-
interface GetRowSelectionBorderStylesParams {
|
|
17
|
-
isCellSelected: boolean;
|
|
18
|
-
isNextCellSelected: boolean;
|
|
19
|
-
effectiveLast: boolean;
|
|
20
|
-
isPinnedEnd: boolean;
|
|
21
|
-
colIndex: number;
|
|
22
|
-
}
|
|
23
|
-
export declare const getRowSelectionBorderStyles: ({ isCellSelected, isNextCellSelected, effectiveLast, isPinnedEnd, colIndex, }: GetRowSelectionBorderStylesParams) => SelectionStyles;
|
|
14
|
+
export declare const getSelectionStyles: ({ isSelected, isCellSelected, isColumnSelected, isLastRow }: GetSelectionStylesParams) => SelectionStyles;
|
|
24
15
|
export {};
|
package/build/utils/style.js
CHANGED
|
@@ -5,21 +5,18 @@ export const SELECTION_COLORS = {
|
|
|
5
5
|
transparent: 'transparent',
|
|
6
6
|
};
|
|
7
7
|
const BORDER_STYLES = {
|
|
8
|
-
thin: '
|
|
9
|
-
thick: '
|
|
8
|
+
thin: '1px',
|
|
9
|
+
thick: '1.5px',
|
|
10
10
|
none: '0px',
|
|
11
11
|
};
|
|
12
12
|
const CELL_DIMENSIONS = {
|
|
13
13
|
minHeight: '28px',
|
|
14
14
|
fullHeight: '100%',
|
|
15
15
|
};
|
|
16
|
-
export const getSelectionStyles = ({ isSelected, isCellSelected, isColumnSelected,
|
|
16
|
+
export const getSelectionStyles = ({ isSelected, isCellSelected, isColumnSelected, isLastRow }) => {
|
|
17
17
|
if (!isSelected) {
|
|
18
18
|
return {};
|
|
19
19
|
}
|
|
20
|
-
if (isRowSelected) {
|
|
21
|
-
return getRowSelectionStyles();
|
|
22
|
-
}
|
|
23
20
|
if (isCellSelected && !isColumnSelected) {
|
|
24
21
|
return getSingleCellSelectionStyles();
|
|
25
22
|
}
|
|
@@ -28,21 +25,12 @@ export const getSelectionStyles = ({ isSelected, isCellSelected, isColumnSelecte
|
|
|
28
25
|
}
|
|
29
26
|
return {};
|
|
30
27
|
};
|
|
31
|
-
const getRowSelectionStyles = () => ({
|
|
32
|
-
backgroundColor: SELECTION_COLORS.background,
|
|
33
|
-
color: SELECTION_COLORS.primary,
|
|
34
|
-
border: 'none',
|
|
35
|
-
'&:before': {
|
|
36
|
-
border: 'none',
|
|
37
|
-
},
|
|
38
|
-
});
|
|
39
28
|
const getSingleCellSelectionStyles = () => ({
|
|
40
|
-
border:
|
|
29
|
+
border: `${BORDER_STYLES.thin} solid ${SELECTION_COLORS.primary}`,
|
|
41
30
|
backgroundColor: SELECTION_COLORS.background,
|
|
42
31
|
color: SELECTION_COLORS.primary,
|
|
43
|
-
borderRadius: '2px',
|
|
44
32
|
'&:before': {
|
|
45
|
-
border:
|
|
33
|
+
border: `${BORDER_STYLES.thin} solid ${SELECTION_COLORS.primary}`,
|
|
46
34
|
},
|
|
47
35
|
});
|
|
48
36
|
const getColumnSelectionStyles = (isLastRow) => {
|
|
@@ -72,16 +60,3 @@ const getBorderWidthForColumn = (isLastRow) => {
|
|
|
72
60
|
const getBorderBottomForColumn = (isLastRow) => {
|
|
73
61
|
return isLastRow ? `${BORDER_STYLES.thick} solid ${SELECTION_COLORS.primary}` : `${BORDER_STYLES.thin} solid ${SELECTION_COLORS.border}`;
|
|
74
62
|
};
|
|
75
|
-
export const getRowSelectionBorderStyles = ({ isCellSelected, isNextCellSelected, effectiveLast, isPinnedEnd, colIndex, }) => (Object.assign(Object.assign(Object.assign({ borderRadius: '0px', '&:before': {
|
|
76
|
-
border: 'none',
|
|
77
|
-
}, '&:after': {
|
|
78
|
-
border: 'none',
|
|
79
|
-
}, border: `1.5px solid ${SELECTION_COLORS.primary}` }, (isCellSelected && Object.assign({ border: `1.5px solid ${SELECTION_COLORS.primary}` }, (isNextCellSelected && {
|
|
80
|
-
borderRight: `1.5px solid ${SELECTION_COLORS.primary}`,
|
|
81
|
-
})))), (isCellSelected &&
|
|
82
|
-
colIndex > 0 && {
|
|
83
|
-
borderLeft: `1.5px solid ${SELECTION_COLORS.primary}`,
|
|
84
|
-
})), (effectiveLast &&
|
|
85
|
-
isPinnedEnd && {
|
|
86
|
-
borderRight: `2.5px solid ${SELECTION_COLORS.primary}`,
|
|
87
|
-
})));
|
package/package.json
CHANGED