@tap-payments/os-micro-frontend-shared 0.0.172 → 0.0.173
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, useRef, useState } from 'react';
|
|
13
|
+
import { memo, useCallback, useEffect, useMemo, 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';
|
|
@@ -18,37 +18,56 @@ import { ChevronIcon } from './ChevronIcon';
|
|
|
18
18
|
import { ChevronContainer, Label, LabelWrapper, StyledStatusIcon, StyledDropdown, statusButtonVariants } from './style';
|
|
19
19
|
import { statusButtonIcons } from './constant';
|
|
20
20
|
export const StatusButton = memo((props) => {
|
|
21
|
-
var _a
|
|
21
|
+
var _a;
|
|
22
22
|
const { variant = 'inActive', badgeCount, icon, label, dropdownOptions, onButtonBodyClick } = props, restProps = __rest(props, ["variant", "badgeCount", "icon", "label", "dropdownOptions", "onButtonBodyClick"]);
|
|
23
|
-
const [
|
|
24
|
-
const buttonRef = useRef(null);
|
|
25
|
-
const [lastActiveStatus, setLastActiveStatus] = useState((_a = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions[0]) === null || _a === void 0 ? void 0 : _a.status);
|
|
23
|
+
const [buttonClicks, setButtonClicks] = useState(0);
|
|
26
24
|
const { t } = useTranslation();
|
|
27
|
-
const
|
|
28
|
-
const
|
|
25
|
+
const buttonRef = useRef(null);
|
|
26
|
+
const [anchorEl, setAnchorEl] = useState(null);
|
|
27
|
+
const [selectedStatus, setSelectedStatus] = useState((_a = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions[0]) === null || _a === void 0 ? void 0 : _a.status);
|
|
28
|
+
const hasDropdown = useMemo(() => Boolean(dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.length), [dropdownOptions]);
|
|
29
|
+
const isDropdownOpen = Boolean(anchorEl) && buttonClicks > 1;
|
|
30
|
+
const isActiveVariant = variant === 'active';
|
|
31
|
+
const badgeVariant = useMemo(() => (isActiveVariant ? BadgeVariants.ACTIVE : BadgeVariants.INACTIVE), [isActiveVariant]);
|
|
32
|
+
const statusIcon = useMemo(() => (icon ? _jsx(StyledStatusIcon, { icon: icon, variant: variant, src: statusButtonIcons[icon], alt: `${icon}-icon` }) : null), [icon, variant]);
|
|
33
|
+
const statusBadge = useMemo(() => {
|
|
34
|
+
if (!badgeCount || Number.isNaN(convertToNumber(badgeCount)))
|
|
35
|
+
return null;
|
|
36
|
+
return _jsx(StyledBadge, Object.assign({ variant: badgeVariant }, { children: formatNumber(Number(badgeCount)) }));
|
|
37
|
+
}, [badgeCount, badgeVariant]);
|
|
38
|
+
const dropdownIcon = useMemo(() => (hasDropdown ? _jsx(ChevronIcon, { isActive: isActiveVariant }) : null), [hasDropdown, isActiveVariant]);
|
|
39
|
+
useEffect(() => {
|
|
40
|
+
if (!isActiveVariant) {
|
|
41
|
+
setButtonClicks(0);
|
|
42
|
+
setAnchorEl(null);
|
|
43
|
+
}
|
|
44
|
+
}, [isActiveVariant]);
|
|
45
|
+
const handleDropdownClose = useCallback(() => {
|
|
29
46
|
setAnchorEl(null);
|
|
30
|
-
};
|
|
31
|
-
const
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
47
|
+
}, []);
|
|
48
|
+
const handleDropdownToggle = useCallback(() => {
|
|
49
|
+
if (!hasDropdown)
|
|
50
|
+
return;
|
|
51
|
+
setAnchorEl(isDropdownOpen ? null : buttonRef.current);
|
|
52
|
+
}, [hasDropdown, isDropdownOpen]);
|
|
53
|
+
const handleButtonClick = useCallback((e) => {
|
|
54
|
+
var _a, _b;
|
|
55
|
+
e.stopPropagation();
|
|
56
|
+
(_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
|
|
57
|
+
onButtonBodyClick === null || onButtonBodyClick === void 0 ? void 0 : onButtonBodyClick(selectedStatus || ((_b = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions[0]) === null || _b === void 0 ? void 0 : _b.status) || 'all');
|
|
58
|
+
handleDropdownToggle();
|
|
59
|
+
setButtonClicks((prev) => prev + 1);
|
|
60
|
+
}, [props, onButtonBodyClick, selectedStatus, dropdownOptions, handleDropdownToggle]);
|
|
61
|
+
const handleMenuItemClick = useCallback((item) => (e) => {
|
|
62
|
+
var _a;
|
|
63
|
+
(_a = item === null || item === void 0 ? void 0 : item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, e);
|
|
64
|
+
setSelectedStatus(item.status);
|
|
65
|
+
handleDropdownClose();
|
|
66
|
+
}, [handleDropdownClose]);
|
|
67
|
+
const menuItems = useMemo(() => (dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((item) => (Object.assign(Object.assign({}, item), { onClick: handleMenuItemClick(item) })))) || [], [dropdownOptions, handleMenuItemClick]);
|
|
68
|
+
const ButtonComponent = statusButtonVariants[variant];
|
|
69
|
+
const displayLabel = selectedStatus ? t(selectedStatus) : label;
|
|
70
|
+
return (_jsxs(_Fragment, { children: [_jsx(ButtonComponent, Object.assign({ "data-testid": "StatusButton" }, restProps, { ref: buttonRef, onClick: handleButtonClick, sx: Object.assign({}, (hasDropdown && {
|
|
41
71
|
paddingInlineEnd: '27px',
|
|
42
|
-
})) }, { children: _jsxs(LabelWrapper, Object.assign({
|
|
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) => {
|
|
49
|
-
var _a;
|
|
50
|
-
(_a = item === null || item === void 0 ? void 0 : item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, e);
|
|
51
|
-
setLastActiveStatus(item.status);
|
|
52
|
-
handleClose();
|
|
53
|
-
} }))) }))] }));
|
|
72
|
+
})) }, { children: _jsxs(LabelWrapper, { children: [_jsxs(Label, Object.assign({ variant: variant }, { children: [statusIcon, displayLabel, statusBadge] })), dropdownIcon && _jsx(ChevronContainer, { children: dropdownIcon })] }) })), isDropdownOpen && hasDropdown && (_jsx(StyledDropdown, { open: isDropdownOpen, onClose: handleDropdownClose, anchorEl: anchorEl, menuItems: menuItems }))] }));
|
|
54
73
|
});
|
package/package.json
CHANGED