@tap-payments/os-micro-frontend-shared 0.1.147 → 0.1.148-test.10
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/LeadStatusCell/constant.d.ts +1 -0
- package/build/components/TableCells/CustomCells/LeadStatusCell/constant.js +1 -0
- package/build/components/TableCells/CustomCells/PaymentAgreementCell/PaymentAgreementCellSheet.d.ts +3 -0
- package/build/components/TableCells/{SheetViewCells/PaymentAgreementCell/PaymentAgreementCell.js → CustomCells/PaymentAgreementCell/PaymentAgreementCellSheet.js} +3 -8
- package/build/components/TableCells/CustomCells/PaymentAgreementCell/constant.d.ts +6 -0
- package/build/components/TableCells/CustomCells/PaymentAgreementCell/constant.js +6 -0
- package/build/components/TableCells/CustomCells/PaymentAgreementCell/index.d.ts +1 -0
- package/build/components/TableCells/CustomCells/PaymentAgreementCell/index.js +1 -0
- package/build/components/TableCells/CustomCells/PaymentAgreementCell/type.d.ts +6 -0
- package/build/components/TableCells/CustomCells/SegmentsCell/SegmentsCell.js +8 -4
- package/build/components/TableCells/CustomCells/SegmentsCell/type.d.ts +1 -1
- package/build/components/TableCells/CustomCells/SegmentsCell/utils.d.ts +2 -0
- package/build/components/TableCells/CustomCells/SegmentsCell/utils.js +14 -0
- package/build/components/TableCells/CustomCells/index.d.ts +1 -1
- package/build/components/TableCells/CustomCells/index.js +1 -1
- package/build/components/TableCells/index.d.ts +0 -1
- package/build/components/TableCells/index.js +0 -1
- package/build/types/index.d.ts +0 -1
- package/build/types/index.js +0 -1
- package/build/utils/string.d.ts +1 -0
- package/build/utils/string.js +4 -1
- package/package.json +3 -3
- package/build/components/TableCells/CustomCells/SourceMergedCell/CollapsedViewIcon.d.ts +0 -11
- package/build/components/TableCells/CustomCells/SourceMergedCell/CollapsedViewIcon.js +0 -51
- package/build/components/TableCells/CustomCells/SourceMergedCell/SourceMergedCell.d.ts +0 -3
- package/build/components/TableCells/CustomCells/SourceMergedCell/SourceMergedCell.js +0 -105
- package/build/components/TableCells/CustomCells/SourceMergedCell/index.d.ts +0 -3
- package/build/components/TableCells/CustomCells/SourceMergedCell/index.js +0 -3
- package/build/components/TableCells/CustomCells/SourceMergedCell/style.d.ts +0 -1622
- package/build/components/TableCells/CustomCells/SourceMergedCell/style.js +0 -95
- package/build/components/TableCells/CustomCells/SourceMergedCell/type.d.ts +0 -19
- package/build/components/TableCells/CustomCells/SourceMergedCell/utils.d.ts +0 -12
- package/build/components/TableCells/CustomCells/SourceMergedCell/utils.js +0 -12
- package/build/components/TableCells/SheetViewCells/PaymentAgreementCell/PaymentAgreementCell.d.ts +0 -13
- package/build/components/TableCells/SheetViewCells/PaymentAgreementCell/index.d.ts +0 -1
- package/build/components/TableCells/SheetViewCells/PaymentAgreementCell/index.js +0 -1
- package/build/components/TableCells/SheetViewCells/index.d.ts +0 -1
- package/build/components/TableCells/SheetViewCells/index.js +0 -1
- package/build/types/source.d.ts +0 -1
- package/build/types/source.js +0 -1
- /package/build/components/TableCells/CustomCells/{SourceMergedCell → PaymentAgreementCell}/type.js +0 -0
|
@@ -12,15 +12,10 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
import { Box } from '@mui/material';
|
|
14
14
|
import { StatusChipWithCopy } from '../../../index.js';
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
ORDER: 'Order',
|
|
18
|
-
SUBSCRIPTION: 'Subscription',
|
|
19
|
-
INSTALLMENT: 'Installment',
|
|
20
|
-
};
|
|
21
|
-
function PaymentAgreementCell(_a) {
|
|
15
|
+
import { paymentAgreementTypes } from './constant';
|
|
16
|
+
function PaymentAgreementCellSheet(_a) {
|
|
22
17
|
var { type, count } = _a, props = __rest(_a, ["type", "count"]);
|
|
23
18
|
const countText = count === null || count === void 0 ? void 0 : count.toString();
|
|
24
19
|
return (_jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'row', gap: '4px' } }, { children: [_jsx(StatusChipWithCopy, Object.assign({ copyText: type, unknownText: "noPaymentAgreement" }, props, { chipIndex: 0 }, { children: type ? paymentAgreementTypes[type] : type })), countText && (_jsx(StatusChipWithCopy, Object.assign({ copyText: countText }, props, { chipIndex: 1, minWidth: "38px" }, { children: countText })))] })));
|
|
25
20
|
}
|
|
26
|
-
export default
|
|
21
|
+
export default PaymentAgreementCellSheet;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as PaymentAgreementCellSheet } from './PaymentAgreementCellSheet';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as PaymentAgreementCellSheet } from './PaymentAgreementCellSheet';
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { paymentAgreementTypes } from './constant';
|
|
2
|
+
import { StatusChipWithCopyProps } from '../../../StatusChipWithCopy';
|
|
3
|
+
export interface PaymentAgreementCellProps extends Omit<StatusChipWithCopyProps, 'chipIndex'> {
|
|
4
|
+
type?: keyof typeof paymentAgreementTypes;
|
|
5
|
+
count?: number;
|
|
6
|
+
}
|
|
@@ -19,21 +19,25 @@ import { TableCell } from '../../../TableCells';
|
|
|
19
19
|
import { segmentsIcons } from './constant';
|
|
20
20
|
import { ReferenceTextLabel, ReferenceTextWrapper, ReferenceSourcesContainer, StyledSourceCell, referenceSourceAnimation } from './style';
|
|
21
21
|
import IconWithBadge from '../../../IconWithBadge';
|
|
22
|
+
import { getSegmentTooltip } from './utils';
|
|
22
23
|
function SegmentsCell(_a) {
|
|
23
24
|
var { isTextShown, segments } = _a, props = __rest(_a, ["isTextShown", "segments"]);
|
|
24
25
|
const [isTooltipOpen, setIsTooltipOpen] = useState(false);
|
|
25
26
|
const theme = useTheme();
|
|
26
27
|
const ReferenceSources = useMemo(() => segments === null || segments === void 0 ? void 0 : segments.filter((segment) => !!segment.name).map((segment, index) => {
|
|
27
|
-
|
|
28
|
-
const
|
|
28
|
+
var _a, _b;
|
|
29
|
+
const isPlatformSegment = (_b = (_a = segment.type) === null || _a === void 0 ? void 0 : _a.toLowerCase) === null || _b === void 0 ? void 0 : _b.call(_a).includes('platform');
|
|
30
|
+
const sourceTooltip = segment.tooltip || getSegmentTooltip(segment);
|
|
31
|
+
const segmentType = segment.type;
|
|
32
|
+
const icon = isPlatformSegment ? segmentsIcons.platform : segmentsIcons[segmentType];
|
|
29
33
|
return (_jsx(Tooltip, Object.assign({ onOpen: () => {
|
|
30
34
|
setIsTooltipOpen(true);
|
|
31
35
|
}, onClose: () => {
|
|
32
36
|
setIsTooltipOpen(false);
|
|
33
37
|
}, title: sourceTooltip }, { children: _jsx(ImageWrapper, Object.assign({ order: index, variants: referenceSourceAnimation(index, theme.shadows[4], isTextShown ? 83 : 0), sx: {
|
|
34
38
|
width: isTextShown ? '79px' : '36px',
|
|
35
|
-
} }, { children: isTextShown ? (_jsx(ReferenceTextWrapper, { children: _jsx(ReferenceTextLabel, { children: startCase(segment.name) }) })) : (_jsx(IconWithBadge, { mainIcon: segment.icon ||
|
|
36
|
-
e.currentTarget.src = segmentsIcons[
|
|
39
|
+
} }, { children: isTextShown ? (_jsx(ReferenceTextWrapper, { children: _jsx(ReferenceTextLabel, { children: startCase(segment.name) }) })) : (_jsx(IconWithBadge, { mainIcon: segment.icon || icon, mainIconSize: 16, containerSize: 16, sx: Object.assign({}, (segment.icon ? { borderRadius: '40px' } : { borderRadius: '0px' })), onError: (e) => {
|
|
40
|
+
e.currentTarget.src = segmentsIcons[segmentType];
|
|
37
41
|
e.currentTarget.style.borderRadius = '0px';
|
|
38
42
|
}, borderColor: "transparent" })) })) }), `${segment.name}-${index}`));
|
|
39
43
|
}), [segments, isTextShown, theme]);
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { capitalizeString } from '../../../../utils/index.js';
|
|
2
|
+
export const getSegmentTooltip = (segment) => {
|
|
3
|
+
let prefixKey = '';
|
|
4
|
+
switch (segment.type) {
|
|
5
|
+
case 'technology':
|
|
6
|
+
case 'institution':
|
|
7
|
+
prefixKey = 'Payment';
|
|
8
|
+
break;
|
|
9
|
+
default:
|
|
10
|
+
prefixKey = '';
|
|
11
|
+
break;
|
|
12
|
+
}
|
|
13
|
+
return `${prefixKey} ${capitalizeString(segment.type)} - ${segment.name}`;
|
|
14
|
+
};
|
|
@@ -35,7 +35,6 @@ export * from './TokenStatusCell';
|
|
|
35
35
|
export * from './BrandCell';
|
|
36
36
|
export * from './MetadataCell';
|
|
37
37
|
export * from './PayoutReportCell';
|
|
38
|
-
export * from './SourceMergedCell';
|
|
39
38
|
export * from './ReceiptCell';
|
|
40
39
|
export * from './EntityCell';
|
|
41
40
|
export * from './ApplicationStatusCell';
|
|
@@ -50,3 +49,4 @@ export * from './AppsCell';
|
|
|
50
49
|
export * from './type';
|
|
51
50
|
export * from './style';
|
|
52
51
|
export * from './LeadStatusCell';
|
|
52
|
+
export * from './PaymentAgreementCell';
|
|
@@ -35,7 +35,6 @@ export * from './TokenStatusCell';
|
|
|
35
35
|
export * from './BrandCell';
|
|
36
36
|
export * from './MetadataCell';
|
|
37
37
|
export * from './PayoutReportCell';
|
|
38
|
-
export * from './SourceMergedCell';
|
|
39
38
|
export * from './ReceiptCell';
|
|
40
39
|
export * from './EntityCell';
|
|
41
40
|
export * from './ApplicationStatusCell';
|
|
@@ -50,3 +49,4 @@ export * from './AppsCell';
|
|
|
50
49
|
export * from './type';
|
|
51
50
|
export * from './style';
|
|
52
51
|
export * from './LeadStatusCell';
|
|
52
|
+
export * from './PaymentAgreementCell';
|
package/build/types/index.d.ts
CHANGED
package/build/types/index.js
CHANGED
package/build/utils/string.d.ts
CHANGED
|
@@ -15,3 +15,4 @@ export declare const maskValue: (value: string) => string;
|
|
|
15
15
|
* @returns The transformed string with proper case formatting
|
|
16
16
|
*/
|
|
17
17
|
export declare const transformStringToProperCase: (text: string, separator?: string | RegExp, replacement?: string) => string;
|
|
18
|
+
export declare const capitalizeString: (text?: string) => string;
|
package/build/utils/string.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import startCase from 'lodash
|
|
1
|
+
import { capitalize, startCase } from 'lodash';
|
|
2
2
|
export const removePrefixFromString = (str, prefix) => {
|
|
3
3
|
if (!prefix) {
|
|
4
4
|
return str;
|
|
@@ -67,3 +67,6 @@ export const transformStringToProperCase = (text, separator = /_/g, replacement
|
|
|
67
67
|
// Apply proper case formatting
|
|
68
68
|
return startCase(updatedText);
|
|
69
69
|
};
|
|
70
|
+
export const capitalizeString = (text) => {
|
|
71
|
+
return capitalize(startCase(text));
|
|
72
|
+
};
|
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.
|
|
5
|
-
"testVersion":
|
|
4
|
+
"version": "0.1.148-test.10",
|
|
5
|
+
"testVersion": 10,
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "build/index.js",
|
|
8
8
|
"module": "build/index.js",
|
|
@@ -163,4 +163,4 @@
|
|
|
163
163
|
"publishConfig": {
|
|
164
164
|
"registry": "https://registry.npmjs.org/"
|
|
165
165
|
}
|
|
166
|
-
}
|
|
166
|
+
}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { SxProps } from '@mui/material';
|
|
2
|
-
import { SourceMergedCellProps } from './type';
|
|
3
|
-
export interface CollapsedViewIconProps {
|
|
4
|
-
hasPreviousIcon: boolean;
|
|
5
|
-
hasNextIcon: boolean;
|
|
6
|
-
isTextShown?: boolean;
|
|
7
|
-
collapsedViewIcon: SourceMergedCellProps['icons'][number];
|
|
8
|
-
sx?: SxProps;
|
|
9
|
-
}
|
|
10
|
-
declare const CollapsedViewIcon: ({ hasPreviousIcon, hasNextIcon, isTextShown, collapsedViewIcon, ...props }: Readonly<CollapsedViewIconProps>) => import("react/jsx-runtime").JSX.Element;
|
|
11
|
-
export default CollapsedViewIcon;
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
-
var t = {};
|
|
3
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
-
t[p] = s[p];
|
|
5
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
-
t[p[i]] = s[p[i]];
|
|
9
|
-
}
|
|
10
|
-
return t;
|
|
11
|
-
};
|
|
12
|
-
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
-
import { collapsedViewIconVariants, StatusIcon, StatusWrapper } from './style';
|
|
14
|
-
const CollapsedViewIcon = (_a) => {
|
|
15
|
-
var { hasPreviousIcon, hasNextIcon, isTextShown, collapsedViewIcon } = _a, props = __rest(_a, ["hasPreviousIcon", "hasNextIcon", "isTextShown", "collapsedViewIcon"]);
|
|
16
|
-
return (_jsxs(_Fragment, { children: [hasPreviousIcon && (_jsx(StatusWrapper, Object.assign({ variants: {
|
|
17
|
-
initial: {
|
|
18
|
-
x: -5,
|
|
19
|
-
zIndex: 95,
|
|
20
|
-
opacity: 1,
|
|
21
|
-
},
|
|
22
|
-
hover: {
|
|
23
|
-
x: -5,
|
|
24
|
-
zIndex: 95,
|
|
25
|
-
opacity: 0,
|
|
26
|
-
},
|
|
27
|
-
}, transition: collapsedViewIconVariants }, props, { children: _jsx(StatusIcon, Object.assign({ isTextShown: isTextShown }, props, { children: collapsedViewIcon.icon })) }))), _jsx(StatusWrapper, Object.assign({ variants: {
|
|
28
|
-
initial: {
|
|
29
|
-
x: 0,
|
|
30
|
-
zIndex: 100,
|
|
31
|
-
opacity: 1,
|
|
32
|
-
},
|
|
33
|
-
hover: {
|
|
34
|
-
x: 0,
|
|
35
|
-
zIndex: 100,
|
|
36
|
-
opacity: 0,
|
|
37
|
-
},
|
|
38
|
-
}, transition: collapsedViewIconVariants }, props, { children: _jsx(StatusIcon, Object.assign({ isTextShown: isTextShown }, props, { children: collapsedViewIcon.icon })) })), hasNextIcon && (_jsx(StatusWrapper, Object.assign({ variants: {
|
|
39
|
-
initial: {
|
|
40
|
-
x: 5,
|
|
41
|
-
zIndex: 95,
|
|
42
|
-
opacity: 1,
|
|
43
|
-
},
|
|
44
|
-
hover: {
|
|
45
|
-
x: 5,
|
|
46
|
-
zIndex: 95,
|
|
47
|
-
opacity: 0,
|
|
48
|
-
},
|
|
49
|
-
}, transition: collapsedViewIconVariants }, props, { children: _jsx(StatusIcon, Object.assign({ isTextShown: isTextShown }, props, { children: collapsedViewIcon.icon })) })))] }));
|
|
50
|
-
};
|
|
51
|
-
export default CollapsedViewIcon;
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
import { SourceMergedCellProps } from './type';
|
|
2
|
-
declare function SourceMergedCell({ icons, isTextShown, centerIconKey, collapsedViewIcon, isReversed, tableMode, ...props }: Readonly<SourceMergedCellProps>): import("react/jsx-runtime").JSX.Element;
|
|
3
|
-
export default SourceMergedCell;
|
|
@@ -1,105 +0,0 @@
|
|
|
1
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
-
var t = {};
|
|
3
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
-
t[p] = s[p];
|
|
5
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
-
t[p[i]] = s[p[i]];
|
|
9
|
-
}
|
|
10
|
-
return t;
|
|
11
|
-
};
|
|
12
|
-
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
-
import { useRef, useEffect, useState, useMemo } from 'react';
|
|
14
|
-
import { TableCell } from '../../../TableCells';
|
|
15
|
-
import { StatusContainer, StatusWrapper, StatusIcon, SheetModeContainer, SheetModeStatusWrapper, SheetModeIconContainer } from './style';
|
|
16
|
-
import { getIconXTranslation } from './utils';
|
|
17
|
-
import CollapsedViewIcon from './CollapsedViewIcon';
|
|
18
|
-
function SourceMergedCell(_a) {
|
|
19
|
-
var { icons, isTextShown, centerIconKey, collapsedViewIcon, isReversed = false, tableMode } = _a, props = __rest(_a, ["icons", "isTextShown", "centerIconKey", "collapsedViewIcon", "isReversed", "tableMode"]);
|
|
20
|
-
const iconsList = useMemo(() => icons.filter((icon) => Boolean(icon.icon)), [icons]);
|
|
21
|
-
const [isHovering, setIsHovering] = useState(false);
|
|
22
|
-
const centerIconIndex = Math.max(centerIconKey ? iconsList.findIndex((icon) => icon.key === centerIconKey) : 0, 0);
|
|
23
|
-
// Create refs for each icon to measure their actual widths
|
|
24
|
-
const iconRefs = useRef([]);
|
|
25
|
-
const [iconMeasurements, setIconMeasurements] = useState(new Map());
|
|
26
|
-
// For sheet mode, always show all icons inline
|
|
27
|
-
const isSheetMode = tableMode === 'sheet';
|
|
28
|
-
// Measure icons after render and on table mode change
|
|
29
|
-
useEffect(() => {
|
|
30
|
-
if (isSheetMode)
|
|
31
|
-
return; // Skip measurements for sheet mode as we don't need hover animations
|
|
32
|
-
setTimeout(() => {
|
|
33
|
-
const tableMode = isTextShown ? 'text' : 'default';
|
|
34
|
-
const newMeasurements = new Map();
|
|
35
|
-
iconRefs.current.forEach((ref, index) => {
|
|
36
|
-
if (ref) {
|
|
37
|
-
const width = ref.getBoundingClientRect().width;
|
|
38
|
-
// Get existing measurements or create new
|
|
39
|
-
const existingMeasurement = iconMeasurements.get(index) || { default: 0, text: 0 };
|
|
40
|
-
// Update only the current table mode's measurement
|
|
41
|
-
newMeasurements.set(index, Object.assign(Object.assign({}, existingMeasurement), { [tableMode]: width }));
|
|
42
|
-
}
|
|
43
|
-
});
|
|
44
|
-
setIconMeasurements(new Map([...iconMeasurements, ...newMeasurements]));
|
|
45
|
-
}, 50);
|
|
46
|
-
}, [iconsList, isTextShown, isHovering, isSheetMode]);
|
|
47
|
-
const hasPreviousIcon = (isReversed && iconsList.length > 1) || centerIconIndex > 0;
|
|
48
|
-
const hasNextIcon = !isReversed && centerIconIndex < iconsList.length - 1;
|
|
49
|
-
if (isSheetMode) {
|
|
50
|
-
return (_jsx(TableCell, Object.assign({}, props, { "data-testid": "StatusCell", sx: {
|
|
51
|
-
position: 'relative',
|
|
52
|
-
overflow: 'visible',
|
|
53
|
-
zIndex: 101,
|
|
54
|
-
} }, { children: _jsx(SheetModeContainer, { children: iconsList === null || iconsList === void 0 ? void 0 : iconsList.map((icon, index) => (_jsx(SheetModeStatusWrapper, Object.assign({ "data-testid": `StatusWrapper-${icon.key}` }, { children: _jsx(SheetModeIconContainer, { children: icon.icon }) }), `StatusWrapper-${icon.key}-${index}`))) }) })));
|
|
55
|
-
}
|
|
56
|
-
return (_jsx(TableCell, Object.assign({}, props, { "data-testid": "StatusCell", sx: {
|
|
57
|
-
position: 'relative',
|
|
58
|
-
overflow: 'visible',
|
|
59
|
-
zIndex: 101,
|
|
60
|
-
} }, { children: _jsx(StatusContainer, Object.assign({ animate: isHovering ? 'hover' : 'initial', onMouseEnter: () => setIsHovering(true), onMouseLeave: () => setIsHovering(false), initial: "initial", sx: {
|
|
61
|
-
minHeight: '20px',
|
|
62
|
-
maxWidth: '55px',
|
|
63
|
-
}, isReversed: isReversed }, { children: _jsxs(_Fragment, { children: [collapsedViewIcon && (_jsx(CollapsedViewIcon, { hasPreviousIcon: hasPreviousIcon, hasNextIcon: hasNextIcon, isTextShown: isTextShown, collapsedViewIcon: collapsedViewIcon, sx: props.sx }, 'collapsedViewIcon')), iconsList === null || iconsList === void 0 ? void 0 : iconsList.map((icon, index) => {
|
|
64
|
-
if (!icon)
|
|
65
|
-
return;
|
|
66
|
-
const tableMode = isTextShown ? 'text' : 'default';
|
|
67
|
-
// To keep x position of each icon while hovering consistent
|
|
68
|
-
const xHoverPosition = getIconXTranslation({
|
|
69
|
-
iconsList: iconsList.map((iconObj, i) => {
|
|
70
|
-
const measurements = iconMeasurements.get(i);
|
|
71
|
-
return Object.assign(Object.assign({}, iconObj), { width: {
|
|
72
|
-
default: (measurements === null || measurements === void 0 ? void 0 : measurements.default) || 0,
|
|
73
|
-
text: (measurements === null || measurements === void 0 ? void 0 : measurements.text) || 0,
|
|
74
|
-
} });
|
|
75
|
-
}),
|
|
76
|
-
tableMode: tableMode,
|
|
77
|
-
centerIndex: centerIconIndex,
|
|
78
|
-
iconIndex: index,
|
|
79
|
-
});
|
|
80
|
-
return (_jsx(StatusWrapper, Object.assign({ ref: (el) => (iconRefs.current[index] = el), "data-testid": `StatusWrapper-${icon.key}`, variants: {
|
|
81
|
-
initial: {
|
|
82
|
-
x: 0,
|
|
83
|
-
opacity: 0,
|
|
84
|
-
},
|
|
85
|
-
hover: {
|
|
86
|
-
x: isReversed ? -xHoverPosition : xHoverPosition,
|
|
87
|
-
zIndex: 100 - Math.abs(centerIconIndex - index),
|
|
88
|
-
opacity: 1,
|
|
89
|
-
},
|
|
90
|
-
}, transition: {
|
|
91
|
-
default: { duration: 0.3, ease: 'easeInOut' },
|
|
92
|
-
opacity: { duration: 0.0, ease: 'linear' },
|
|
93
|
-
} }, { children: _jsx(StatusIcon, Object.assign({ isTextShown: isTextShown, variants: {
|
|
94
|
-
initial: {
|
|
95
|
-
opacity: 0,
|
|
96
|
-
},
|
|
97
|
-
hover: {
|
|
98
|
-
opacity: 1,
|
|
99
|
-
},
|
|
100
|
-
}, transition: {
|
|
101
|
-
opacity: { duration: 0.0, ease: 'linear' },
|
|
102
|
-
} }, { children: icon.icon })) }), `StatusWrapper-${icon.key}-${index}`));
|
|
103
|
-
})] }) })) })));
|
|
104
|
-
}
|
|
105
|
-
export default SourceMergedCell;
|