@tap-payments/os-micro-frontend-shared 0.0.235 → 0.0.236
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.
|
@@ -1,15 +1,12 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { memo, useState, useRef, useEffect } from 'react';
|
|
3
|
-
import { useTranslation } from 'react-i18next';
|
|
4
3
|
import { Typography, Checkbox } from '@mui/material';
|
|
5
4
|
import { ChevronIcon } from '../StatusButton/ChevronIcon';
|
|
6
5
|
import StyledBadge, { BadgeVariants } from '../CountBadge';
|
|
7
|
-
import CountryFlag from '../CountryFlag';
|
|
8
6
|
import { formatNumber } from '../../utils/index.js';
|
|
9
|
-
import { closeXIcon
|
|
7
|
+
import { closeXIcon } from '../../constants/index.js';
|
|
10
8
|
import { ChevronContainer, Label, LabelWrapper, StyledDropdown, MenuItemContainer, CheckboxStyles, StyledStatusButton, ClearIcon, ChevronIconWrapper, } from './style';
|
|
11
9
|
function MultiSelectStatusButton({ options = [], selectedValues, onSelectionChange, label, variant = 'inActive' }) {
|
|
12
|
-
const { t } = useTranslation();
|
|
13
10
|
const [anchorEl, setAnchorEl] = useState(null);
|
|
14
11
|
const buttonRef = useRef(null);
|
|
15
12
|
const [internalSelectedValues, setInternalSelectedValues] = useState(selectedValues);
|
|
@@ -57,13 +54,9 @@ function MultiSelectStatusButton({ options = [], selectedValues, onSelectionChan
|
|
|
57
54
|
: [...internalSelectedValues, optionStatus];
|
|
58
55
|
setInternalSelectedValues(newSelection);
|
|
59
56
|
};
|
|
60
|
-
const getDisplayLabel = () => {
|
|
61
|
-
return (_jsx(Typography, Object.assign({ fontWeight: 400, fontSize: "11px", variant: "inherit" }, { children: t('Currencies') })));
|
|
62
|
-
};
|
|
63
|
-
const countBadge = (_jsx(StyledBadge, Object.assign({ pointer: true, variant: variant === 'active' ? BadgeVariants.ACTIVE : BadgeVariants.INACTIVE }, { children: formatNumber(selectedValues.length > 0 ? selectedValues.length : options.length) })));
|
|
64
57
|
return (_jsxs(_Fragment, { children: [_jsx(StyledStatusButton, Object.assign({ buttonVariant: variant, ref: buttonRef, sx: {
|
|
65
58
|
paddingInlineEnd: '27px',
|
|
66
|
-
}, "data-testid": "MultiSelectStatusButton", onClick: handleDropdownClick, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), disabled: !options.length }, { children: _jsxs(LabelWrapper, { children: [_jsxs(Label, Object.assign({ variant: variant }, { children: [
|
|
59
|
+
}, "data-testid": "MultiSelectStatusButton", onClick: handleDropdownClick, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), disabled: !options.length }, { children: _jsxs(LabelWrapper, { children: [_jsxs(Label, Object.assign({ variant: variant }, { children: [_jsx(Typography, Object.assign({ fontWeight: 400, fontSize: "11px", variant: "inherit" }, { children: label })), _jsx(StyledBadge, Object.assign({ pointer: true, variant: variant === 'active' ? BadgeVariants.ACTIVE : BadgeVariants.INACTIVE }, { children: formatNumber(selectedValues.length > 0 ? selectedValues.length : options.length) }))] })), _jsxs(ChevronContainer, Object.assign({ onClick: isHovered && internalSelectedValues.length > 0 ? handleClearAll : undefined, sx: {
|
|
67
60
|
'&:hover': {
|
|
68
61
|
backgroundColor: 'transparent',
|
|
69
62
|
},
|
|
@@ -80,21 +73,18 @@ function MultiSelectStatusButton({ options = [], selectedValues, onSelectionChan
|
|
|
80
73
|
'&:hover': {
|
|
81
74
|
boxShadow: 'none !important',
|
|
82
75
|
},
|
|
83
|
-
}, menuItems: options.map((option) => {
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
},
|
|
97
|
-
});
|
|
98
|
-
}) }))] }));
|
|
76
|
+
}, menuItems: options.map((option) => ({
|
|
77
|
+
label: (_jsxs(MenuItemContainer, { children: [_jsx(Checkbox, { checked: internalSelectedValues.includes(option.status), size: "small", sx: CheckboxStyles, onClick: (e) => {
|
|
78
|
+
var _a;
|
|
79
|
+
e.stopPropagation();
|
|
80
|
+
handleOptionToggle((_a = option.status) !== null && _a !== void 0 ? _a : '', e);
|
|
81
|
+
} }), option.render ? option.render() : _jsx(Typography, Object.assign({ variant: "body2" }, { children: option.name }))] })),
|
|
82
|
+
onClick: (e) => {
|
|
83
|
+
var _a;
|
|
84
|
+
e.preventDefault();
|
|
85
|
+
e.stopPropagation();
|
|
86
|
+
handleOptionToggle((_a = option.status) !== null && _a !== void 0 ? _a : '', e);
|
|
87
|
+
},
|
|
88
|
+
})) }))] }));
|
|
99
89
|
}
|
|
100
90
|
export default memo(MultiSelectStatusButton);
|
|
@@ -1,9 +1,11 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import { TableHeaderStatus } from '../../types/index.js';
|
|
2
3
|
export interface CurrencyOption {
|
|
3
4
|
code: string;
|
|
4
5
|
name: string;
|
|
5
6
|
flagCode?: string;
|
|
6
7
|
status: TableHeaderStatus;
|
|
8
|
+
render?: () => JSX.Element;
|
|
7
9
|
}
|
|
8
10
|
export interface MultiSelectStatusButtonProps {
|
|
9
11
|
options: CurrencyOption[];
|
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.0.
|
|
5
|
-
"testVersion":
|
|
4
|
+
"version": "0.0.236",
|
|
5
|
+
"testVersion": 1,
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "build/index.js",
|
|
8
8
|
"module": "build/index.js",
|