@tap-payments/os-micro-frontend-shared 0.0.134 → 0.0.138
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.
|
@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
13
|
-
import { memo, useState } from 'react';
|
|
13
|
+
import { memo, useRef, useState } from 'react';
|
|
14
14
|
import { useTranslation } from 'react-i18next';
|
|
15
15
|
import StyledBadge, { BadgeVariants } from '../CountBadge';
|
|
16
16
|
import { convertToNumber, formatNumber } from '../../utils/index.js';
|
|
@@ -21,6 +21,7 @@ function StatusButton(_a) {
|
|
|
21
21
|
var _b, _c;
|
|
22
22
|
var { variant = 'inActive', badgeCount, icon, label, dropdownOptions, onButtonBodyClick, showDropdownIcon } = _a, props = __rest(_a, ["variant", "badgeCount", "icon", "label", "dropdownOptions", "onButtonBodyClick", "showDropdownIcon"]);
|
|
23
23
|
const [anchorEl, setAnchorEl] = useState(null);
|
|
24
|
+
const buttonRef = useRef(null);
|
|
24
25
|
const [lastActiveStatus, setLastActiveStatus] = useState((_b = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions[0]) === null || _b === void 0 ? void 0 : _b.status);
|
|
25
26
|
const { t } = useTranslation();
|
|
26
27
|
const open = Boolean(anchorEl);
|
|
@@ -34,14 +35,20 @@ function StatusButton(_a) {
|
|
|
34
35
|
const dropdownIcon = hasDropdown ? _jsx(ChevronIcon, { isActive: variant === 'active' }) : null;
|
|
35
36
|
return (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ "data-testid": "StatusButton" }, props, { onClick: (e) => {
|
|
36
37
|
var _a, _b;
|
|
37
|
-
if (hasDropdown) {
|
|
38
|
-
setAnchorEl(e.currentTarget);
|
|
39
|
-
}
|
|
40
38
|
(_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
|
|
41
39
|
onButtonBodyClick === null || onButtonBodyClick === void 0 ? void 0 : onButtonBodyClick(lastActiveStatus || ((_b = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions[0]) === null || _b === void 0 ? void 0 : _b.status) || 'all');
|
|
42
40
|
}, sx: Object.assign({}, (hasDropdown && {
|
|
43
41
|
paddingInlineEnd: '27px',
|
|
44
|
-
})) }, { children: _jsxs(LabelWrapper,
|
|
42
|
+
})) }, { children: _jsxs(LabelWrapper, Object.assign({ onClick: (e) => {
|
|
43
|
+
if (showDropdownIcon) {
|
|
44
|
+
return;
|
|
45
|
+
}
|
|
46
|
+
e.stopPropagation();
|
|
47
|
+
e.preventDefault();
|
|
48
|
+
if (hasDropdown) {
|
|
49
|
+
setAnchorEl(buttonRef.current);
|
|
50
|
+
}
|
|
51
|
+
} }, { children: [_jsxs(Label, Object.assign({ variant: variant }, { children: [statusIcon, lastActiveStatus ? t(lastActiveStatus) : label, statusBadge] })), dropdownIcon && _jsx(ChevronContainer, { children: dropdownIcon })] })) })), open && !showDropdownIcon && (_jsx(StyledDropdown, { open: open, onClose: handleClose, anchorEl: anchorEl, menuItems: (_c = (dropdownOptions || [])) === null || _c === void 0 ? void 0 : _c.map((item) => (Object.assign(Object.assign({}, item), { onClick: (e) => {
|
|
45
52
|
var _a;
|
|
46
53
|
(_a = item === null || item === void 0 ? void 0 : item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, e);
|
|
47
54
|
setLastActiveStatus(item.status);
|
|
@@ -20,7 +20,8 @@ import { FlagIcon } from '../style';
|
|
|
20
20
|
function AmountCell(_a) {
|
|
21
21
|
var { conversionType, amount, currency, tooltipLabel, amountTooltipLabel, isTextShown } = _a, props = __rest(_a, ["conversionType", "amount", "currency", "tooltipLabel", "amountTooltipLabel", "isTextShown"]);
|
|
22
22
|
const icon = currency && _jsx(FlagIcon, { src: getCurrenciesIcon(currency), alt: "customer icon" });
|
|
23
|
-
const {
|
|
23
|
+
const { fullAmount } = formatAmountWithCurrency(amount, currency);
|
|
24
|
+
const [integerAmount, decimalAmount] = fullAmount.toString().split('.');
|
|
24
25
|
return (_jsx(TableCell, Object.assign({}, props, { children: _jsxs(AmountCellContainer, { children: [_jsx(Tooltip, Object.assign({ title: tooltipLabel || '' }, { children: conversionType && _jsx(ConversionBadge, Object.assign({ className: "conversion-type" }, { children: conversionType })) })), _jsx(Tooltip, Object.assign({ title: _jsx(CurrencyIcon, { currency: currency }) }, { children: isTextShown ? _jsx("span", {}) : _jsx(FlagContainer, { children: icon }) })), _jsx(Tooltip, Object.assign({ title: amountTooltipLabel }, { children: _jsx(CurrencySpan, { children: integerAmount && decimalAmount && amount !== undefined ? (_jsxs(_Fragment, { children: [_jsx("span", { children: _jsx(CurrencyIcon, { currency: currency, fontSize: 10 }) }), ' ', integerAmount, ".", _jsx(DecimalSpan, { children: decimalAmount })] })) : (_jsx("span", { children: "-" })) }) }))] }) })));
|
|
25
26
|
}
|
|
26
27
|
export default AmountCell;
|
|
@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
13
|
-
import { memo, useState } from 'react';
|
|
13
|
+
import { memo, useRef, useState } from 'react';
|
|
14
14
|
import { useTranslation } from 'react-i18next';
|
|
15
15
|
import StyledBadge, { BadgeVariants } from '../../../CountBadge';
|
|
16
16
|
import { convertToNumber, formatNumber } from '../../../../utils/index.js';
|
|
@@ -21,6 +21,7 @@ export const StatusButton = memo((props) => {
|
|
|
21
21
|
var _a, _b;
|
|
22
22
|
const { variant = 'inActive', badgeCount, icon, label, dropdownOptions, onButtonBodyClick } = props, restProps = __rest(props, ["variant", "badgeCount", "icon", "label", "dropdownOptions", "onButtonBodyClick"]);
|
|
23
23
|
const [anchorEl, setAnchorEl] = useState(null);
|
|
24
|
+
const buttonRef = useRef(null);
|
|
24
25
|
const [lastActiveStatus, setLastActiveStatus] = useState((_a = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions[0]) === null || _a === void 0 ? void 0 : _a.status);
|
|
25
26
|
const { t } = useTranslation();
|
|
26
27
|
const open = Boolean(anchorEl);
|
|
@@ -32,16 +33,19 @@ export const StatusButton = memo((props) => {
|
|
|
32
33
|
const statusIcon = icon ? _jsx(StyledStatusIcon, { icon: icon, variant: variant, src: statusButtonIcons[icon], alt: `${icon}-icon` }) : null;
|
|
33
34
|
const statusBadge = badgeCount && !Number.isNaN(convertToNumber(badgeCount)) ? (_jsx(StyledBadge, Object.assign({ variant: variant === 'active' ? BadgeVariants.ACTIVE : BadgeVariants.INACTIVE }, { children: formatNumber(Number(badgeCount)) }))) : null;
|
|
34
35
|
const dropdownIcon = hasDropdown ? _jsx(ChevronIcon, { isActive: variant === 'active' }) : null;
|
|
35
|
-
return (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ "data-testid": "StatusButton" }, restProps, { onClick: (e) => {
|
|
36
|
+
return (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ "data-testid": "StatusButton" }, restProps, { ref: buttonRef, onClick: (e) => {
|
|
36
37
|
var _a, _b;
|
|
37
|
-
if (hasDropdown) {
|
|
38
|
-
setAnchorEl(e.currentTarget);
|
|
39
|
-
}
|
|
40
38
|
(_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
|
|
41
39
|
onButtonBodyClick === null || onButtonBodyClick === void 0 ? void 0 : onButtonBodyClick(lastActiveStatus || ((_b = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions[0]) === null || _b === void 0 ? void 0 : _b.status) || 'all');
|
|
42
40
|
}, sx: Object.assign({}, (hasDropdown && {
|
|
43
41
|
paddingInlineEnd: '27px',
|
|
44
|
-
})) }, { children: _jsxs(LabelWrapper,
|
|
42
|
+
})) }, { children: _jsxs(LabelWrapper, Object.assign({ onClick: (e) => {
|
|
43
|
+
e.stopPropagation();
|
|
44
|
+
e.preventDefault();
|
|
45
|
+
if (hasDropdown) {
|
|
46
|
+
setAnchorEl(buttonRef.current);
|
|
47
|
+
}
|
|
48
|
+
} }, { children: [_jsxs(Label, Object.assign({ variant: variant }, { children: [statusIcon, lastActiveStatus ? t(lastActiveStatus) : label, statusBadge] })), dropdownIcon && _jsx(ChevronContainer, { children: dropdownIcon })] })) })), open && (_jsx(StyledDropdown, { open: open, onClose: handleClose, anchorEl: anchorEl, menuItems: (_b = (dropdownOptions || [])) === null || _b === void 0 ? void 0 : _b.map((item) => (Object.assign(Object.assign({}, item), { onClick: (e) => {
|
|
45
49
|
var _a;
|
|
46
50
|
(_a = item === null || item === void 0 ? void 0 : item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, e);
|
|
47
51
|
setLastActiveStatus(item.status);
|
package/package.json
CHANGED