@tap-payments/os-micro-frontend-shared 0.1.36-test.5 → 0.1.37-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/MaskedText/MaskedText.d.ts +1 -1
- package/build/components/MaskedText/MaskedText.js +3 -3
- package/build/components/MaskedText/type.d.ts +1 -2
- package/build/components/RangeCalender/components/QuickFilters/QuickFilters.js +1 -1
- package/build/components/StatusChip/StatusChip.d.ts +1 -1
- package/build/components/StatusChip/StatusChip.js +5 -26
- package/build/components/StatusChip/style.d.ts +3 -13
- package/build/components/StatusChip/style.js +36 -31
- package/build/components/StatusChip/type.d.ts +0 -2
- package/build/components/StatusGroupChips/style.d.ts +13 -1
- package/build/components/StatusGroupChips/style.js +2 -2
- package/build/components/StatusGroupChips/type.d.ts +3 -3
- package/build/components/TableCells/CustomCells/DestinationCell/DestinationCell.d.ts +1 -1
- package/build/components/TableCells/CustomCells/DestinationCell/DestinationCell.js +11 -8
- package/build/components/TableCells/CustomCells/type.d.ts +1 -2
- package/build/components/VirtualTables/SheetViewVirtualTable/SheetViewVirtualTable.js +1 -3
- package/build/components/VirtualTables/SheetViewVirtualTable/hooks/useTableState.d.ts +0 -2
- package/build/components/VirtualTables/SheetViewVirtualTable/hooks/useTableState.js +0 -19
- package/build/components/VirtualTables/SheetViewVirtualTable/hooks/useVirtualTableContainer.d.ts +3 -7
- package/build/components/VirtualTables/SheetViewVirtualTable/hooks/useVirtualTableContainer.js +3 -5
- package/build/components/VirtualTables/components/TableRow.d.ts +2 -4
- package/build/components/VirtualTables/components/TableRow.js +5 -17
- package/build/components/VirtualTables/components/style.js +1 -0
- package/build/components/VirtualTables/components/virtualScroll/ListItemWrapper.js +1 -1
- package/build/components/index.d.ts +0 -1
- package/build/components/index.js +0 -1
- package/build/constants/assets.d.ts +0 -1
- package/build/constants/assets.js +0 -1
- package/build/constants/table/cell/chargeTableCellWidth.d.ts +7 -7
- package/build/constants/table/cell/chargeTableCellWidth.js +7 -7
- package/build/types/table.d.ts +0 -10
- package/build/utils/style.d.ts +0 -6
- package/build/utils/style.js +1 -1
- package/package.json +2 -2
- package/build/components/StatusChipWithCopy/StatusChipWithCopy.d.ts +0 -11
- package/build/components/StatusChipWithCopy/StatusChipWithCopy.js +0 -23
- package/build/components/StatusChipWithCopy/index.d.ts +0 -4
- package/build/components/StatusChipWithCopy/index.js +0 -4
- package/build/components/StatusChipWithCopy/utils.d.ts +0 -4
- package/build/components/StatusChipWithCopy/utils.js +0 -4
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { MaskedTextProps } from './type';
|
|
2
|
-
declare const MaskedText: ({ text, startLength, endLength
|
|
2
|
+
declare const MaskedText: ({ text, startLength, endLength }: MaskedTextProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default MaskedText;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
2
|
+
import StatusChip from '../StatusChip';
|
|
3
3
|
import { passwordDotsIcon } from '../../constants/index.js';
|
|
4
|
-
const MaskedText = ({ text, startLength = 8, endLength = 4
|
|
4
|
+
const MaskedText = ({ text, startLength = 8, endLength = 4 }) => {
|
|
5
5
|
const startText = text.slice(0, startLength);
|
|
6
6
|
const endText = text.slice(text.length - endLength);
|
|
7
|
-
return (_jsxs(
|
|
7
|
+
return (_jsxs(StatusChip, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: '4px' } }, { children: [startText, _jsx("img", { src: passwordDotsIcon, alt: "passwordDots" }), endText] })));
|
|
8
8
|
};
|
|
9
9
|
export default MaskedText;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
-
|
|
3
|
-
export interface MaskedTextProps extends StatusChipWithCopyProps {
|
|
2
|
+
export interface MaskedTextProps {
|
|
4
3
|
text: string;
|
|
5
4
|
startLength?: number;
|
|
6
5
|
endLength?: number;
|
|
@@ -11,7 +11,7 @@ export default function QuickFilters({ onChange, isHijri, isAr = false }) {
|
|
|
11
11
|
{ id: 'today', value: [new DateObject(calenderSettings), new DateObject(calenderSettings)] },
|
|
12
12
|
{
|
|
13
13
|
id: 'lastWeek',
|
|
14
|
-
value: [new DateObject(calenderSettings).subtract(
|
|
14
|
+
value: [new DateObject(calenderSettings).subtract(6, 'day'), new DateObject(calenderSettings)],
|
|
15
15
|
},
|
|
16
16
|
{
|
|
17
17
|
id: 'lastMonth',
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { ChipProps } from './type';
|
|
2
|
-
declare const StatusChip: ({ children, unknownText,
|
|
2
|
+
declare const StatusChip: ({ children, unknownText, ...props }: ChipProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default StatusChip;
|
|
@@ -9,37 +9,16 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import { jsx as _jsx
|
|
13
|
-
import { useState } from 'react';
|
|
12
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
13
|
import { useTranslation } from 'react-i18next';
|
|
15
|
-
import { AnimatePresence, motion } from 'framer-motion';
|
|
16
|
-
import { copyText as copyTextHandler } from '../../utils/index.js';
|
|
17
|
-
import { blueCopyIcon, greenCheckIcon } from '../../constants/index.js';
|
|
18
14
|
import { unknownGeographyColors } from './constants';
|
|
19
|
-
import { ChipStyled
|
|
15
|
+
import { ChipStyled } from './style';
|
|
20
16
|
const StatusChip = (_a) => {
|
|
21
|
-
var { children, unknownText
|
|
22
|
-
const [showCopy, setShowCopy] = useState(false);
|
|
17
|
+
var { children, unknownText } = _a, props = __rest(_a, ["children", "unknownText"]);
|
|
23
18
|
const { t } = useTranslation();
|
|
24
|
-
const isSelected = props.isSelected;
|
|
25
19
|
if (!children) {
|
|
26
|
-
return (_jsx(ChipStyled, Object.assign({}, unknownGeographyColors, props, {
|
|
20
|
+
return (_jsx(ChipStyled, Object.assign({}, unknownGeographyColors, props, { children: unknownText ? t(unknownText) : t('unknown') })));
|
|
27
21
|
}
|
|
28
|
-
|
|
29
|
-
e.stopPropagation();
|
|
30
|
-
if (copyText) {
|
|
31
|
-
setShowCopy(true);
|
|
32
|
-
copyTextHandler(copyText);
|
|
33
|
-
const timer = setTimeout(() => {
|
|
34
|
-
setShowCopy(false);
|
|
35
|
-
}, 2000);
|
|
36
|
-
return () => {
|
|
37
|
-
clearTimeout(timer);
|
|
38
|
-
};
|
|
39
|
-
}
|
|
40
|
-
};
|
|
41
|
-
return (_jsxs(motion.div, Object.assign({ style: { position: 'relative' }, animate: { zIndex: isSelected ? 3 : 0 } }, { children: [_jsx(ChipStyled, Object.assign({}, props, { sx: { visibility: 'hidden', pointerEvents: 'none' } }, { children: _jsx(Wrapper, { children: children }) })), _jsx(ChipStyled, Object.assign({}, props, { isSelected: isSelected, style: { position: 'absolute', top: 0, left: 0, zIndex: isSelected ? 3 : 0 } }, { children: _jsxs(motion.div, Object.assign({ layout: "size", style: { display: 'flex', gap: '4px' }, animate: {
|
|
42
|
-
paddingRight: isSelected && copyText ? 12 : 0,
|
|
43
|
-
}, transition: { delay: !isSelected ? 0.2 : 0 } }, { children: [_jsx(Wrapper, { children: children }), _jsx(AnimatePresence, { children: isSelected && copyText && (_jsx(CopyWrapper, { children: _jsx(motion.img, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, onClick: handleCopy, src: showCopy ? greenCheckIcon : blueCopyIcon, style: Object.assign({ height: 12, width: 12, objectFit: 'contain' }, (showCopy && { filter: 'none' })) }) })) })] })) }))] })));
|
|
22
|
+
return _jsx(ChipStyled, Object.assign({}, props, { children: children }));
|
|
44
23
|
};
|
|
45
24
|
export default StatusChip;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const ChipStyled: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material
|
|
2
|
+
export declare const ChipStyled: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
3
3
|
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
4
|
-
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material
|
|
4
|
+
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
|
|
5
5
|
textColor?: string | undefined;
|
|
6
6
|
bgColor?: string | undefined;
|
|
7
7
|
borderColor?: string | undefined;
|
|
@@ -9,18 +9,8 @@ export declare const ChipStyled: import("@emotion/styled").StyledComponent<impor
|
|
|
9
9
|
padding?: string | undefined;
|
|
10
10
|
unknownText?: string | undefined;
|
|
11
11
|
maxWidth?: string | undefined;
|
|
12
|
-
isSelected?: boolean | undefined;
|
|
13
|
-
copyText?: string | undefined;
|
|
14
12
|
} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
15
13
|
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
16
|
-
}, keyof import("@mui/material/OverridableComponent").CommonProps | keyof import("@mui/system").BoxOwnProps<import("@mui/material
|
|
14
|
+
}, keyof import("@mui/material/OverridableComponent").CommonProps | keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & {
|
|
17
15
|
children?: import("react").ReactNode;
|
|
18
|
-
} & {
|
|
19
|
-
isSelected?: boolean | undefined;
|
|
20
16
|
}, {}, {}>;
|
|
21
|
-
export declare const Wrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
22
|
-
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
23
|
-
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
24
|
-
export declare const CopyWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
25
|
-
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
26
|
-
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
@@ -1,33 +1,38 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
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 { Box, styled } from '@mui/material';
|
|
4
13
|
export const ChipStyled = styled(Box, {
|
|
5
|
-
shouldForwardProp: (prop) => !['textColor', 'bgColor', 'borderColor', 'disabled', 'padding', 'maxWidth'
|
|
6
|
-
})((
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
+
shouldForwardProp: (prop) => !['textColor', 'bgColor', 'borderColor', 'disabled', 'padding', 'maxWidth'].includes(prop),
|
|
15
|
+
})((_a) => {
|
|
16
|
+
var { theme } = _a, props = __rest(_a, ["theme"]);
|
|
17
|
+
const { textColor = theme.palette.text.primary, bgColor = '#EFF1F2', borderColor = '#EFF1F2', disabled = false, padding, maxWidth } = props;
|
|
18
|
+
return {
|
|
19
|
+
display: 'block',
|
|
20
|
+
textAlign: 'center',
|
|
21
|
+
verticalAlign: 'middle',
|
|
22
|
+
height: '18px',
|
|
23
|
+
padding: padding || '0px 9.5px',
|
|
24
|
+
borderRadius: '30px',
|
|
25
|
+
border: `1px solid ${borderColor}`,
|
|
26
|
+
backgroundColor: bgColor,
|
|
27
|
+
color: textColor,
|
|
28
|
+
cursor: disabled ? 'not-allowed' : 'pointer',
|
|
29
|
+
opacity: disabled ? 0.5 : 1,
|
|
30
|
+
whiteSpace: 'nowrap',
|
|
31
|
+
fontSize: '11px',
|
|
32
|
+
minWidth: '67px',
|
|
33
|
+
maxWidth: maxWidth || 'none',
|
|
34
|
+
overflow: 'hidden',
|
|
35
|
+
textOverflow: maxWidth ? 'ellipsis' : 'unset',
|
|
36
|
+
boxSizing: 'border-box',
|
|
37
|
+
};
|
|
14
38
|
});
|
|
15
|
-
export const Wrapper = styled(Box)(() => ({
|
|
16
|
-
display: 'flex',
|
|
17
|
-
alignItems: 'center',
|
|
18
|
-
justifyContent: 'center',
|
|
19
|
-
gap: '4px',
|
|
20
|
-
minWidth: 46,
|
|
21
|
-
textAlign: 'center',
|
|
22
|
-
}));
|
|
23
|
-
export const CopyWrapper = styled(Box)(() => ({
|
|
24
|
-
position: 'absolute',
|
|
25
|
-
right: '8px',
|
|
26
|
-
top: 0,
|
|
27
|
-
height: '100%',
|
|
28
|
-
width: '12px',
|
|
29
|
-
display: 'flex',
|
|
30
|
-
alignItems: 'center',
|
|
31
|
-
flexDirection: 'column',
|
|
32
|
-
justifyContent: 'center',
|
|
33
|
-
}));
|
|
@@ -2,4 +2,16 @@
|
|
|
2
2
|
export declare const StyledContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
3
3
|
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
4
4
|
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
|
5
|
-
export declare const StyledStatusChip: import("@emotion/styled").StyledComponent<
|
|
5
|
+
export declare const StyledStatusChip: import("@emotion/styled").StyledComponent<{
|
|
6
|
+
textColor?: string | undefined;
|
|
7
|
+
bgColor?: string | undefined;
|
|
8
|
+
borderColor?: string | undefined;
|
|
9
|
+
disabled?: boolean | undefined;
|
|
10
|
+
padding?: string | undefined;
|
|
11
|
+
unknownText?: string | undefined;
|
|
12
|
+
maxWidth?: string | undefined;
|
|
13
|
+
} & import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
14
|
+
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
15
|
+
}, keyof import("@mui/material/OverridableComponent").CommonProps | keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & {
|
|
16
|
+
children?: import("react").ReactNode;
|
|
17
|
+
} & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { styled, Box } from '@mui/material';
|
|
2
|
-
import
|
|
2
|
+
import StatusChip from '../StatusChip';
|
|
3
3
|
export const StyledContainer = styled(Box)(() => ({
|
|
4
4
|
display: 'flex',
|
|
5
5
|
gap: '4px',
|
|
6
6
|
alignItems: 'center',
|
|
7
7
|
flexDirection: 'row',
|
|
8
8
|
}));
|
|
9
|
-
export const StyledStatusChip = styled(
|
|
9
|
+
export const StyledStatusChip = styled(StatusChip)(() => ({
|
|
10
10
|
padding: '0.75px 12px',
|
|
11
11
|
overflow: 'hidden',
|
|
12
12
|
textOverflow: 'ellipsis',
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import type React from 'react';
|
|
2
|
-
import type { BoxProps } from '@mui/material
|
|
3
|
-
|
|
4
|
-
export interface ChipConfig extends Omit<StatusChipWithCopyProps, 'content'> {
|
|
2
|
+
import type { BoxProps } from '@mui/material';
|
|
3
|
+
export interface ChipConfig {
|
|
5
4
|
key: string;
|
|
6
5
|
content: React.ReactNode;
|
|
7
6
|
sx?: object;
|
|
7
|
+
onClick?: (event: React.MouseEvent) => void;
|
|
8
8
|
}
|
|
9
9
|
export interface StatusGroupChipsProps extends Omit<BoxProps, 'children'> {
|
|
10
10
|
chips: ChipConfig[];
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { DestinationCellProps } from '../type';
|
|
2
|
-
declare function DestinationCell({ destinationsCount, destinationsTooltip, isTextShown, destination, destinationsAmount, hidden, iconDirection, tableMode,
|
|
2
|
+
declare function DestinationCell({ destinationsCount, destinationsTooltip, isTextShown, destination, destinationsAmount, hidden, iconDirection, tableMode, ...props }: DestinationCellProps): import("react/jsx-runtime").JSX.Element | null;
|
|
3
3
|
export default DestinationCell;
|
|
@@ -10,16 +10,16 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
12
|
import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
13
|
-
import Box from '@mui/material/Box';
|
|
14
13
|
import Tooltip from '../../../Tooltip';
|
|
15
14
|
import { destinationSolidIcon } from '../../../../constants/index.js';
|
|
16
15
|
import { formatAmount } from '../../../../utils/index.js';
|
|
17
16
|
import { DestinationCellContainer, DestinationCount, StyledDestinationCell, StyledDestinationIcon } from './styled';
|
|
17
|
+
import TableCell from '../../TableCell';
|
|
18
18
|
import { TextLabel } from '../style';
|
|
19
19
|
import { CurrencyIcon, StatusGroupChips } from '../../../index.js';
|
|
20
20
|
function DestinationCell(_a) {
|
|
21
21
|
var _b, _c, _d, _e, _f;
|
|
22
|
-
var { destinationsCount, destinationsTooltip, isTextShown, destination, destinationsAmount, hidden, iconDirection, tableMode
|
|
22
|
+
var { destinationsCount, destinationsTooltip, isTextShown, destination, destinationsAmount, hidden, iconDirection, tableMode } = _a, props = __rest(_a, ["destinationsCount", "destinationsTooltip", "isTextShown", "destination", "destinationsAmount", "hidden", "iconDirection", "tableMode"]);
|
|
23
23
|
const destinations = (destination === null || destination === void 0 ? void 0 : destination.destination) || [];
|
|
24
24
|
const formattedAmount = formatAmount(destinationsAmount || 0);
|
|
25
25
|
const firstDestinationFormattedAmount = formatAmount(((_b = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _b === void 0 ? void 0 : _b.amount) || 0);
|
|
@@ -30,12 +30,12 @@ function DestinationCell(_a) {
|
|
|
30
30
|
return {
|
|
31
31
|
key: `destination-${(dest === null || dest === void 0 ? void 0 : dest.id) || index}`,
|
|
32
32
|
content: (_jsxs(_Fragment, { children: [_jsxs("div", { children: [dest === null || dest === void 0 ? void 0 : dest.id, " |"] }), _jsx(CurrencyIcon, { currency: dest === null || dest === void 0 ? void 0 : dest.currency }), _jsxs("span", { children: [formattedDestAmount.integerAmount, ".", formattedDestAmount.decimalAmount] })] })),
|
|
33
|
-
chipIndex: index,
|
|
34
|
-
selectionProps,
|
|
35
|
-
copyText: `${formattedDestAmount.integerAmount}.${formattedDestAmount.decimalAmount}`,
|
|
36
33
|
};
|
|
37
|
-
}, [
|
|
38
|
-
return (_jsx(
|
|
34
|
+
}, []);
|
|
35
|
+
return (_jsx(TableCell, Object.assign({ sx: {
|
|
36
|
+
width: 'fit-content',
|
|
37
|
+
overflow: 'visible',
|
|
38
|
+
} }, props, { children: _jsx(StatusGroupChips, { chips: sheetViewChips }) })));
|
|
39
39
|
}
|
|
40
40
|
if (!destinationsCount || hidden) {
|
|
41
41
|
return null;
|
|
@@ -45,6 +45,9 @@ function DestinationCell(_a) {
|
|
|
45
45
|
justifyContent: 'flex-start',
|
|
46
46
|
height: 'auto',
|
|
47
47
|
} }, { children: destinationsCount > 1 ? (_jsxs("div", { children: ["Destination ", (_c = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _c === void 0 ? void 0 : _c.id, " - ", _jsx(CurrencyIcon, { currency: (_d = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _d === void 0 ? void 0 : _d.currency }), ' ', firstDestinationFormattedAmount.integerAmount, ".", firstDestinationFormattedAmount.decimalAmount, " +", destinationsCount - 1] })) : (_jsxs("div", { children: ["Destination ", (_e = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _e === void 0 ? void 0 : _e.id, " - ", _jsx(CurrencyIcon, { currency: (_f = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _f === void 0 ? void 0 : _f.currency }), " ", formattedAmount.integerAmount, ".", formattedAmount.decimalAmount] })) })));
|
|
48
|
-
return (_jsx(
|
|
48
|
+
return (_jsx(TableCell, Object.assign({ sx: {
|
|
49
|
+
width: 'fit-content',
|
|
50
|
+
overflow: 'visible',
|
|
51
|
+
} }, props, { children: _jsx(Tooltip, Object.assign({ title: destinationsTooltip }, { children: !isTextShown ? (_jsxs(StyledDestinationCell, Object.assign({ tableMode: tableMode }, { children: [_jsx(StyledDestinationIcon, { src: destinationSolidIcon, pointLeft: iconDirection === 'left' }), destinationsCount > 1 && (_jsx(DestinationCellContainer, Object.assign({ destinationsCount: 1 }, { children: _jsx(DestinationCount, { children: destinationsCount }) })))] }))) : (textView) })) })));
|
|
49
52
|
}
|
|
50
53
|
export default DestinationCell;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type React from 'react';
|
|
2
2
|
import type { TableCellProps } from '@mui/material';
|
|
3
|
-
import type { Charge, TableMode
|
|
3
|
+
import type { Charge, TableMode } from '../../../types/index.js';
|
|
4
4
|
import type { ActionType, FlagType } from './ActionCell';
|
|
5
5
|
import { getGeographyBoxColor } from '../../../utils/index.js';
|
|
6
6
|
export type GeographyBoxVariant = keyof ReturnType<typeof getGeographyBoxColor>;
|
|
@@ -91,7 +91,6 @@ export interface DestinationCellProps extends TableCellProps {
|
|
|
91
91
|
};
|
|
92
92
|
iconDirection?: 'left' | 'right';
|
|
93
93
|
tableMode?: TableMode;
|
|
94
|
-
selectionProps: SelectionProps;
|
|
95
94
|
}
|
|
96
95
|
export interface ActionCellProps extends TableCellProps {
|
|
97
96
|
row?: unknown;
|
|
@@ -7,7 +7,7 @@ import { SheetViewVirtualTableWrapper } from './style';
|
|
|
7
7
|
import { usePinnedColumns, useSynchronizedScroll, useTableState, useTableData, useVirtualTableContainer, usePinnedColumnsWidths } from './hooks';
|
|
8
8
|
import { PinnedColumn, MainTable, LoadingMainTable, NoDataView, VirtualTable } from './components';
|
|
9
9
|
function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, rowHeight = 28, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableTitle, dragControls, onColumnPin, clearBackdropVisibilityTimeout = 100, isPinnable = false, tableMode, }) {
|
|
10
|
-
const { selectedCell, selectedColumn, showBackDrop, setShowBackdrop, handleCellClick, handleColumnClick
|
|
10
|
+
const { selectedCell, selectedColumn, showBackDrop, setShowBackdrop, handleCellClick, handleColumnClick } = useTableState();
|
|
11
11
|
const { isError, tableLoading, tableError, tableEmpty, hasTimeoutError, showNoDataView, lastItemIndex, areTotalRowsNotFillingHeight, itemsCount, isDelayedFetchingNextPage, } = useTableData({
|
|
12
12
|
rows,
|
|
13
13
|
isLoading,
|
|
@@ -29,9 +29,7 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
|
|
|
29
29
|
isError,
|
|
30
30
|
selectedCell,
|
|
31
31
|
selectedColumn,
|
|
32
|
-
selectedChip,
|
|
33
32
|
handleCellClick,
|
|
34
|
-
handleChipClick,
|
|
35
33
|
});
|
|
36
34
|
const onPointerDown = (e) => {
|
|
37
35
|
dragControls === null || dragControls === void 0 ? void 0 : dragControls.start(e);
|
|
@@ -8,9 +8,7 @@ export declare const useTableState: () => {
|
|
|
8
8
|
selectedCell: string | null;
|
|
9
9
|
selectedColumn: string | null;
|
|
10
10
|
showBackDrop: boolean;
|
|
11
|
-
selectedChip: string | null;
|
|
12
11
|
setShowBackdrop: import("react").Dispatch<import("react").SetStateAction<boolean>>;
|
|
13
|
-
handleChipClick: (rowIndex: number, columnIndex: number, event: React.MouseEvent, chipIndex: number, pinnedType?: 'start' | 'end') => void;
|
|
14
12
|
handleCellClick: (rowIndex: number, columnIndex: number, event: React.MouseEvent, pinnedType?: 'start' | 'end') => void;
|
|
15
13
|
handleColumnClick: (columnIndex: number, event: React.MouseEvent, pinnedType?: 'start' | 'end') => void;
|
|
16
14
|
resetSelection: () => void;
|
|
@@ -2,47 +2,28 @@ import { useState, useCallback } from 'react';
|
|
|
2
2
|
export const useTableState = () => {
|
|
3
3
|
const [selectedCell, setSelectedCell] = useState(null);
|
|
4
4
|
const [selectedColumn, setSelectedColumn] = useState(null);
|
|
5
|
-
const [selectedChip, setSelectedChip] = useState(null);
|
|
6
5
|
const [showBackDrop, setShowBackdrop] = useState(false);
|
|
7
|
-
const handleChipClick = useCallback((rowIndex, columnIndex, event, chipIndex, pinnedType) => {
|
|
8
|
-
event.stopPropagation();
|
|
9
|
-
const chipKey = `${pinnedType !== null && pinnedType !== void 0 ? pinnedType : 'default'}-${rowIndex}-${columnIndex}-${chipIndex}`;
|
|
10
|
-
const cellKey = `${pinnedType !== null && pinnedType !== void 0 ? pinnedType : 'default'}-${rowIndex}-${columnIndex}`;
|
|
11
|
-
const isChipAlreadySelected = selectedChip === chipKey;
|
|
12
|
-
if (isChipAlreadySelected) {
|
|
13
|
-
setSelectedChip(null);
|
|
14
|
-
setSelectedCell(null);
|
|
15
|
-
return;
|
|
16
|
-
}
|
|
17
|
-
setSelectedChip(chipKey);
|
|
18
|
-
setSelectedCell(cellKey);
|
|
19
|
-
}, [selectedChip, setSelectedChip, setSelectedCell]);
|
|
20
6
|
const handleCellClick = useCallback((rowIndex, columnIndex, event, pinnedType) => {
|
|
21
7
|
event.stopPropagation();
|
|
22
8
|
const cellKey = `${pinnedType !== null && pinnedType !== void 0 ? pinnedType : 'default'}-${rowIndex}-${columnIndex}`;
|
|
23
9
|
setSelectedCell((prev) => (prev === cellKey ? null : cellKey));
|
|
24
10
|
setSelectedColumn(null);
|
|
25
|
-
setSelectedChip(null);
|
|
26
11
|
}, []);
|
|
27
12
|
const handleColumnClick = useCallback((columnIndex, event, pinnedType) => {
|
|
28
13
|
event.stopPropagation();
|
|
29
14
|
const columnKey = `${pinnedType !== null && pinnedType !== void 0 ? pinnedType : 'default'}-${columnIndex}`;
|
|
30
15
|
setSelectedColumn((prev) => (prev === columnKey ? null : columnKey));
|
|
31
16
|
setSelectedCell(null);
|
|
32
|
-
setSelectedChip(null);
|
|
33
17
|
}, []);
|
|
34
18
|
const resetSelection = useCallback(() => {
|
|
35
19
|
setSelectedCell(null);
|
|
36
20
|
setSelectedColumn(null);
|
|
37
|
-
setSelectedChip(null);
|
|
38
21
|
}, []);
|
|
39
22
|
return {
|
|
40
23
|
selectedCell,
|
|
41
24
|
selectedColumn,
|
|
42
25
|
showBackDrop,
|
|
43
|
-
selectedChip,
|
|
44
26
|
setShowBackdrop,
|
|
45
|
-
handleChipClick,
|
|
46
27
|
handleCellClick,
|
|
47
28
|
handleColumnClick,
|
|
48
29
|
resetSelection,
|
package/build/components/VirtualTables/SheetViewVirtualTable/hooks/useVirtualTableContainer.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import type { IColumnProps
|
|
2
|
+
import type { IColumnProps } from '../../../../types/index.js';
|
|
3
3
|
import type { TableRowProps } from '@mui/material/TableRow';
|
|
4
|
-
interface UseVirtualTableContainerProps<T = unknown>
|
|
4
|
+
interface UseVirtualTableContainerProps<T = unknown> {
|
|
5
5
|
rowHeight: number;
|
|
6
6
|
areAllRowsLoaded?: boolean;
|
|
7
7
|
rows: T[];
|
|
@@ -16,11 +16,9 @@ interface UseVirtualTableContainerProps<T = unknown> extends TableChipProps {
|
|
|
16
16
|
isError: boolean;
|
|
17
17
|
selectedCell: string | null;
|
|
18
18
|
selectedColumn: string | null;
|
|
19
|
-
selectedChip: string | null;
|
|
20
19
|
handleCellClick: (rowIndex: number, columnIndex: number, event: React.MouseEvent, pinnedType?: 'start' | 'end') => void;
|
|
21
|
-
handleChipClick: (rowIndex: number, columnIndex: number, event: React.MouseEvent, chipIndex: number, pinnedType?: 'start' | 'end') => void;
|
|
22
20
|
}
|
|
23
|
-
export declare const useVirtualTableContainer: <T = unknown>({ rowHeight, areAllRowsLoaded, rows, isDelayedFetchingNextPage, rowProps, scrollToIndex, footerProps, isError, selectedCell, selectedColumn,
|
|
21
|
+
export declare const useVirtualTableContainer: <T = unknown>({ rowHeight, areAllRowsLoaded, rows, isDelayedFetchingNextPage, rowProps, scrollToIndex, footerProps, isError, selectedCell, selectedColumn, handleCellClick, }: UseVirtualTableContainerProps<T>) => {
|
|
24
22
|
getItemSize: (index: number, height: number) => number;
|
|
25
23
|
getItemDataForContainer: (columnsData: IColumnProps[], isPinnedColumn: boolean, height: number) => {
|
|
26
24
|
columns: any;
|
|
@@ -38,9 +36,7 @@ export declare const useVirtualTableContainer: <T = unknown>({ rowHeight, areAll
|
|
|
38
36
|
isPinned: any;
|
|
39
37
|
selectedCell: any;
|
|
40
38
|
selectedColumn: any;
|
|
41
|
-
selectedChip: any;
|
|
42
39
|
onCellClick: any;
|
|
43
|
-
onChipClick: any;
|
|
44
40
|
containerHeight: any;
|
|
45
41
|
rowHeight: any;
|
|
46
42
|
};
|
package/build/components/VirtualTables/SheetViewVirtualTable/hooks/useVirtualTableContainer.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useCallback, useMemo } from 'react';
|
|
2
2
|
import memoize from 'memoize-one';
|
|
3
|
-
const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, isPinned, selectedCell, selectedColumn,
|
|
3
|
+
const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, isPinned, selectedCell, selectedColumn, onCellClick, containerHeight, rowHeight) => ({
|
|
4
4
|
columns,
|
|
5
5
|
isLoading,
|
|
6
6
|
rows,
|
|
@@ -16,13 +16,11 @@ const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToInde
|
|
|
16
16
|
isPinned,
|
|
17
17
|
selectedCell,
|
|
18
18
|
selectedColumn,
|
|
19
|
-
selectedChip,
|
|
20
19
|
onCellClick,
|
|
21
|
-
onChipClick,
|
|
22
20
|
containerHeight,
|
|
23
21
|
rowHeight,
|
|
24
22
|
}));
|
|
25
|
-
export const useVirtualTableContainer = ({ rowHeight, areAllRowsLoaded, rows, isDelayedFetchingNextPage, rowProps, scrollToIndex, footerProps, isError, selectedCell, selectedColumn,
|
|
23
|
+
export const useVirtualTableContainer = ({ rowHeight, areAllRowsLoaded, rows, isDelayedFetchingNextPage, rowProps, scrollToIndex, footerProps, isError, selectedCell, selectedColumn, handleCellClick, }) => {
|
|
26
24
|
const getItemSize = useCallback((index, height) => {
|
|
27
25
|
const isLastRow = areAllRowsLoaded && index === rows.length;
|
|
28
26
|
if (isLastRow) {
|
|
@@ -46,7 +44,7 @@ export const useVirtualTableContainer = ({ rowHeight, areAllRowsLoaded, rows, is
|
|
|
46
44
|
areAllRowsLoaded,
|
|
47
45
|
];
|
|
48
46
|
}, [isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount, isError, areAllRowsLoaded]);
|
|
49
|
-
const commonItemDataSuffix = useMemo(() => [selectedCell, selectedColumn,
|
|
47
|
+
const commonItemDataSuffix = useMemo(() => [selectedCell, selectedColumn, handleCellClick], [selectedCell, selectedColumn, handleCellClick]);
|
|
50
48
|
const getItemDataForContainer = useCallback((columnsData, isPinnedColumn, height) => createItemData(columnsData, ...commonItemDataParams, isPinnedColumn, ...commonItemDataSuffix, height, rowHeight), [commonItemDataParams, commonItemDataSuffix, rowHeight]);
|
|
51
49
|
return {
|
|
52
50
|
getItemSize,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import {
|
|
2
|
+
import type { TableRowProps } from '@mui/material';
|
|
3
3
|
import type { IColumnProps } from '../../../types/index.js';
|
|
4
4
|
interface ITableRowProps<R = any> {
|
|
5
5
|
row: R;
|
|
@@ -13,11 +13,9 @@ interface ITableRowProps<R = any> {
|
|
|
13
13
|
isSheetView?: boolean;
|
|
14
14
|
selectedCell?: string | null;
|
|
15
15
|
selectedColumn?: string | null;
|
|
16
|
-
selectedChip?: string | null;
|
|
17
16
|
onCellClick?: (rowIndex: number, columnIndex: number, event: React.MouseEvent, pinnedType?: 'start' | 'end') => void;
|
|
18
|
-
onChipClick?: (rowIndex: number, columnIndex: number, event: React.MouseEvent, chipIndex: number, pinnedType?: 'start' | 'end') => void;
|
|
19
17
|
isLastRow?: boolean;
|
|
20
18
|
}
|
|
21
|
-
declare function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell, selectedColumn,
|
|
19
|
+
declare function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell, selectedColumn, onCellClick, isLastRow, }: Readonly<ITableRowProps>): import("react/jsx-runtime").JSX.Element;
|
|
22
20
|
declare const _default: import("react").MemoExoticComponent<typeof TableRow>;
|
|
23
21
|
export default _default;
|
|
@@ -1,27 +1,17 @@
|
|
|
1
1
|
import { createElement as _createElement } from "react";
|
|
2
2
|
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
|
|
3
3
|
import { memo, useMemo } from 'react';
|
|
4
|
-
import { Box } from '@mui/material';
|
|
5
4
|
import { areEqual } from 'react-window';
|
|
6
5
|
import { StyledCell, StyledTableRow } from './style';
|
|
7
6
|
import { getSelectionStyles } from '../../../utils/index.js';
|
|
8
|
-
function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = null, selectedColumn = null,
|
|
9
|
-
const renderCell = (column
|
|
7
|
+
function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = null, selectedColumn = null, onCellClick, isLastRow = false, }) {
|
|
8
|
+
const renderCell = (column) => {
|
|
10
9
|
const { render, format, selector } = column;
|
|
11
|
-
const handleChipClick = (event, chipIndex) => {
|
|
12
|
-
onChipClick === null || onChipClick === void 0 ? void 0 : onChipClick(rowIndex, colIndex, event, chipIndex, column.pinned);
|
|
13
|
-
};
|
|
14
10
|
if (!(column === null || column === void 0 ? void 0 : column.id) || !row)
|
|
15
11
|
return null;
|
|
16
12
|
const value = selector ? selector({ row, index, value: row[column === null || column === void 0 ? void 0 : column.id] }) : row[column === null || column === void 0 ? void 0 : column.id];
|
|
17
13
|
const formattedValue = format ? format({ value, row, index }) : value;
|
|
18
|
-
return render ?
|
|
19
|
-
row,
|
|
20
|
-
column,
|
|
21
|
-
index,
|
|
22
|
-
value: row[column === null || column === void 0 ? void 0 : column.id],
|
|
23
|
-
selectionProps: { onClick: handleChipClick, rowIndex, colIndex, selectedId: selectedChip },
|
|
24
|
-
})) : (_jsx(_Fragment, { children: formattedValue }));
|
|
14
|
+
return render ? render({ row, column, index, value: row[column === null || column === void 0 ? void 0 : column.id] }) : _jsx(_Fragment, { children: formattedValue });
|
|
25
15
|
};
|
|
26
16
|
const content = useMemo(() => (_jsx(_Fragment, { children: columns.map((column, colIndex) => {
|
|
27
17
|
var _a, _b;
|
|
@@ -44,10 +34,8 @@ function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = n
|
|
|
44
34
|
effectiveFirst = isFirstColumn && column.pinned !== 'start';
|
|
45
35
|
effectiveLast = isLastColumn && column.pinned !== 'end';
|
|
46
36
|
}
|
|
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) => {
|
|
48
|
-
|
|
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: _jsx(Box, Object.assign({ sx: { position: 'relative', zIndex: 1, width: '100%' } }, { children: renderCell(column, index, colIndex) })) }), `${column.id}-${colIndex}`));
|
|
50
|
-
}) })), [columns, row, index, selectedCell, selectedColumn, onCellClick, isLastRow, selectedChip, isSheetView]);
|
|
37
|
+
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) => onCellClick === null || onCellClick === void 0 ? void 0 : onCellClick(index, colIndex, event, column.pinned), 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: renderCell(column) }), `${column.id}-${colIndex}`));
|
|
38
|
+
}) })), [columns, row, index, selectedCell, selectedColumn, onCellClick, isLastRow]);
|
|
51
39
|
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));
|
|
52
40
|
}
|
|
53
41
|
export default memo(TableRow, areEqual);
|
|
@@ -38,6 +38,7 @@ export const StyledCell = styled(TableCell, {
|
|
|
38
38
|
position: 'relative',
|
|
39
39
|
borderTop: '1px solid transparent',
|
|
40
40
|
borderLeft: '1px solid transparent',
|
|
41
|
+
overflow: 'hidden !important',
|
|
41
42
|
'&:before': {
|
|
42
43
|
content: '""',
|
|
43
44
|
borderRight: isLast ? 'none' : '1px solid transparent',
|
|
@@ -57,7 +57,7 @@ function ListItemWrapper(_a) {
|
|
|
57
57
|
const row = rows[index];
|
|
58
58
|
const isLoadingRow = isLoading && index === lastItemIndex + 1;
|
|
59
59
|
const isLoadedRow = index <= newLoadedRowsEndIndex;
|
|
60
|
-
const rowClickHandler = React.useCallback(
|
|
60
|
+
const rowClickHandler = React.useCallback(createRowClickHandler(row, rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick), [row, rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick]);
|
|
61
61
|
const memoizedRowProps = React.useMemo(() => (Object.assign(Object.assign({ showShadowHighlight: scrollToIndex === index, showLoadedStyle: isLoadedRow }, rowProps), { onClick: rowClickHandler })), [scrollToIndex, index, isLoadedRow, rowProps, rowClickHandler]);
|
|
62
62
|
const renderSheetViewLoadingRow = React.useCallback((lastRowContent) => {
|
|
63
63
|
return (_jsx(Box, Object.assign({ sx: {
|
|
@@ -98,7 +98,6 @@ export { default as ScrollLoader } from './ScrollLoader';
|
|
|
98
98
|
export * from './ScrollLoader';
|
|
99
99
|
export * from './TooltipChip';
|
|
100
100
|
export * from './RightLeftExpandingCenterChip';
|
|
101
|
-
export { default as StatusChipWithCopy } from './StatusChipWithCopy';
|
|
102
101
|
export * from './RadioButton';
|
|
103
102
|
export * from './RadioGroup';
|
|
104
103
|
export * from './LeftPeekRightExpandingChip';
|
|
@@ -98,7 +98,6 @@ export { default as ScrollLoader } from './ScrollLoader';
|
|
|
98
98
|
export * from './ScrollLoader';
|
|
99
99
|
export * from './TooltipChip';
|
|
100
100
|
export * from './RightLeftExpandingCenterChip';
|
|
101
|
-
export { default as StatusChipWithCopy } from './StatusChipWithCopy';
|
|
102
101
|
export * from './RadioButton';
|
|
103
102
|
export * from './RadioGroup';
|
|
104
103
|
export * from './LeftPeekRightExpandingChip';
|
|
@@ -528,4 +528,3 @@ export const deactivatedCircle = `${lightUrl}/deactivatedCircle.svg`;
|
|
|
528
528
|
export const exclamationOutlinedCircle = `${lightUrl}/exclamationOutlinedCircle.svg`;
|
|
529
529
|
export const outlinedCircle = `${lightUrl}/outlinedCircle.svg`;
|
|
530
530
|
export const greenCheck2ACE00 = `${lightUrl}/greenCheck2ACE00.svg`;
|
|
531
|
-
export const blueCopyIcon = `${lightUrl}/blueCopyIcon.svg`;
|
|
@@ -12,7 +12,7 @@ export declare const chargeTableCellWidth: {
|
|
|
12
12
|
readonly id: {
|
|
13
13
|
readonly default: "225px";
|
|
14
14
|
readonly text: "225px";
|
|
15
|
-
readonly sheet: "
|
|
15
|
+
readonly sheet: "235px";
|
|
16
16
|
};
|
|
17
17
|
readonly product: {
|
|
18
18
|
readonly default: "85px";
|
|
@@ -92,7 +92,7 @@ export declare const chargeTableCellWidth: {
|
|
|
92
92
|
readonly eci: {
|
|
93
93
|
readonly default: "150px";
|
|
94
94
|
readonly text: "150px";
|
|
95
|
-
readonly sheet: "
|
|
95
|
+
readonly sheet: "90px";
|
|
96
96
|
};
|
|
97
97
|
readonly amount: {
|
|
98
98
|
readonly default: "170px";
|
|
@@ -152,7 +152,7 @@ export declare const chargeTableCellWidth: {
|
|
|
152
152
|
readonly receipt: {
|
|
153
153
|
readonly default: "85px";
|
|
154
154
|
readonly text: "150px";
|
|
155
|
-
readonly sheet: "
|
|
155
|
+
readonly sheet: "155px";
|
|
156
156
|
};
|
|
157
157
|
readonly fees: {
|
|
158
158
|
readonly default: "150px";
|
|
@@ -162,7 +162,7 @@ export declare const chargeTableCellWidth: {
|
|
|
162
162
|
readonly metadata: {
|
|
163
163
|
readonly default: "180px";
|
|
164
164
|
readonly text: "180px";
|
|
165
|
-
readonly sheet: "
|
|
165
|
+
readonly sheet: "265px";
|
|
166
166
|
};
|
|
167
167
|
readonly settlement: {
|
|
168
168
|
readonly default: "200px";
|
|
@@ -187,7 +187,7 @@ export declare const chargeTableCellWidth: {
|
|
|
187
187
|
readonly card_number: {
|
|
188
188
|
readonly default: "120px";
|
|
189
189
|
readonly text: "120px";
|
|
190
|
-
readonly sheet: "
|
|
190
|
+
readonly sheet: "145px";
|
|
191
191
|
};
|
|
192
192
|
readonly auth_code: {
|
|
193
193
|
readonly default: "80px";
|
|
@@ -202,12 +202,12 @@ export declare const chargeTableCellWidth: {
|
|
|
202
202
|
readonly device: {
|
|
203
203
|
readonly default: "70px";
|
|
204
204
|
readonly text: "190px";
|
|
205
|
-
readonly sheet: "
|
|
205
|
+
readonly sheet: "225px";
|
|
206
206
|
};
|
|
207
207
|
readonly card_no: {
|
|
208
208
|
readonly default: "120px";
|
|
209
209
|
readonly text: "120px";
|
|
210
|
-
readonly sheet: "
|
|
210
|
+
readonly sheet: "190px";
|
|
211
211
|
};
|
|
212
212
|
readonly meta: {
|
|
213
213
|
readonly default: "52px";
|
|
@@ -12,7 +12,7 @@ export const chargeTableCellWidth = {
|
|
|
12
12
|
id: {
|
|
13
13
|
default: '225px',
|
|
14
14
|
text: '225px',
|
|
15
|
-
sheet: '
|
|
15
|
+
sheet: '235px',
|
|
16
16
|
},
|
|
17
17
|
product: {
|
|
18
18
|
default: '85px',
|
|
@@ -92,7 +92,7 @@ export const chargeTableCellWidth = {
|
|
|
92
92
|
eci: {
|
|
93
93
|
default: '150px',
|
|
94
94
|
text: '150px',
|
|
95
|
-
sheet: '
|
|
95
|
+
sheet: '90px',
|
|
96
96
|
},
|
|
97
97
|
amount: {
|
|
98
98
|
default: '170px',
|
|
@@ -152,7 +152,7 @@ export const chargeTableCellWidth = {
|
|
|
152
152
|
receipt: {
|
|
153
153
|
default: '85px',
|
|
154
154
|
text: '150px',
|
|
155
|
-
sheet: '
|
|
155
|
+
sheet: '155px',
|
|
156
156
|
},
|
|
157
157
|
fees: {
|
|
158
158
|
default: '150px',
|
|
@@ -162,7 +162,7 @@ export const chargeTableCellWidth = {
|
|
|
162
162
|
metadata: {
|
|
163
163
|
default: '180px',
|
|
164
164
|
text: '180px',
|
|
165
|
-
sheet: '
|
|
165
|
+
sheet: '265px',
|
|
166
166
|
},
|
|
167
167
|
settlement: {
|
|
168
168
|
default: '200px',
|
|
@@ -187,7 +187,7 @@ export const chargeTableCellWidth = {
|
|
|
187
187
|
card_number: {
|
|
188
188
|
default: '120px',
|
|
189
189
|
text: '120px',
|
|
190
|
-
sheet: '
|
|
190
|
+
sheet: '145px',
|
|
191
191
|
},
|
|
192
192
|
auth_code: {
|
|
193
193
|
default: '80px',
|
|
@@ -202,12 +202,12 @@ export const chargeTableCellWidth = {
|
|
|
202
202
|
device: {
|
|
203
203
|
default: '70px',
|
|
204
204
|
text: '190px',
|
|
205
|
-
sheet: '
|
|
205
|
+
sheet: '225px',
|
|
206
206
|
},
|
|
207
207
|
card_no: {
|
|
208
208
|
default: '120px',
|
|
209
209
|
text: '120px',
|
|
210
|
-
sheet: '
|
|
210
|
+
sheet: '190px',
|
|
211
211
|
},
|
|
212
212
|
meta: {
|
|
213
213
|
default: '52px',
|
package/build/types/table.d.ts
CHANGED
|
@@ -47,21 +47,11 @@ export interface TableFooterProps extends BoxProps {
|
|
|
47
47
|
maximized?: boolean;
|
|
48
48
|
children?: React.ReactNode;
|
|
49
49
|
}
|
|
50
|
-
export interface TableChipProps {
|
|
51
|
-
onChipClick?: (rowIndex: number, columnIndex: number, event: React.MouseEvent, chipIndex: number, pinnedType?: 'start' | 'end') => void;
|
|
52
|
-
}
|
|
53
|
-
export interface SelectionProps {
|
|
54
|
-
onClick?: (event: React.MouseEvent, index: number) => void;
|
|
55
|
-
colIndex?: number;
|
|
56
|
-
rowIndex?: number;
|
|
57
|
-
selectedId?: string | null;
|
|
58
|
-
}
|
|
59
50
|
export interface IRenderAttr<R, C> {
|
|
60
51
|
row: R;
|
|
61
52
|
column: C;
|
|
62
53
|
index: number;
|
|
63
54
|
value: any;
|
|
64
|
-
selectionProps?: SelectionProps;
|
|
65
55
|
}
|
|
66
56
|
export interface IFormatAttr<R> {
|
|
67
57
|
value: string | Record<string, any> | number;
|
package/build/utils/style.d.ts
CHANGED
|
@@ -1,9 +1,3 @@
|
|
|
1
|
-
export declare const SELECTION_COLORS: {
|
|
2
|
-
readonly primary: "#1F88D0";
|
|
3
|
-
readonly background: "white";
|
|
4
|
-
readonly border: "#F2F2F2";
|
|
5
|
-
readonly transparent: "transparent";
|
|
6
|
-
};
|
|
7
1
|
interface GetSelectionStylesParams {
|
|
8
2
|
isSelected: boolean;
|
|
9
3
|
isCellSelected: boolean;
|
package/build/utils/style.js
CHANGED
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.37-test.2",
|
|
5
|
+
"testVersion": 2,
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "build/index.js",
|
|
8
8
|
"module": "build/index.js",
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { StatusChipProps } from '../StatusChip';
|
|
3
|
-
import { SelectionProps } from '../../types/index.js';
|
|
4
|
-
export interface StatusChipWithCopyProps extends StatusChipProps {
|
|
5
|
-
copyText?: string;
|
|
6
|
-
chipIndex: number;
|
|
7
|
-
selectionProps: SelectionProps;
|
|
8
|
-
}
|
|
9
|
-
declare function StatusChipWithCopy({ children, copyText, chipIndex, selectionProps: { onClick, rowIndex, colIndex, selectedId }, ...reset }: StatusChipWithCopyProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
-
declare const _default: import("react").MemoExoticComponent<typeof StatusChipWithCopy>;
|
|
11
|
-
export default _default;
|
|
@@ -1,23 +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 } from "react/jsx-runtime";
|
|
13
|
-
import { memo, useMemo } from 'react';
|
|
14
|
-
import StatusChip from '../StatusChip';
|
|
15
|
-
import { checkIsSelected } from './utils';
|
|
16
|
-
function StatusChipWithCopy(_a) {
|
|
17
|
-
var { children, copyText, chipIndex, selectionProps: { onClick, rowIndex, colIndex, selectedId } } = _a, reset = __rest(_a, ["children", "copyText", "chipIndex", "selectionProps"]);
|
|
18
|
-
const isSelected = useMemo(() => checkIsSelected({ rowIndex, colIndex, selectedId, chipIndex }), [rowIndex, colIndex, selectedId, chipIndex]);
|
|
19
|
-
return (_jsx(StatusChip, Object.assign({}, reset, { copyText: copyText, onClick: (e) => {
|
|
20
|
-
onClick === null || onClick === void 0 ? void 0 : onClick(e, chipIndex);
|
|
21
|
-
}, isSelected: isSelected }, { children: children })));
|
|
22
|
-
}
|
|
23
|
-
export default memo(StatusChipWithCopy);
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
export const checkIsSelected = ({ chipIndex, rowIndex, colIndex, selectedId, }) => {
|
|
2
|
-
const [, selectedRowIndex, selectedColumnIndex, selectedChipIndex] = (selectedId !== null && selectedId !== void 0 ? selectedId : '').split('-');
|
|
3
|
-
return Number(selectedRowIndex) === rowIndex && Number(selectedColumnIndex) === colIndex && Number(selectedChipIndex) === chipIndex;
|
|
4
|
-
};
|