@topconsultnpm/sdkui-react-beta 6.15.73 → 6.15.74
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,4 +1,4 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useEffect, useMemo, useState } from 'react';
|
|
3
3
|
import styled from 'styled-components';
|
|
4
4
|
import { useTMPanelManagerContext } from './TMPanelManagerContext';
|
|
@@ -20,36 +20,50 @@ export const StyledToolbarButton = styled.button `
|
|
|
20
20
|
cursor: ${({ $isDisabled }) => ($isDisabled ? 'not-allowed' : 'pointer')};
|
|
21
21
|
opacity: ${({ $isDisabled }) => ($isDisabled ? 0.6 : 1)};
|
|
22
22
|
background: ${({ $isActive }) => $isActive ? 'rgba(255,255,255,0.35)' : 'transparent'};
|
|
23
|
+
position: relative;
|
|
23
24
|
&:hover {
|
|
24
25
|
background: ${({ $isDisabled }) => !$isDisabled ? 'rgba(255,255,255,0.35)' : undefined};
|
|
25
26
|
}
|
|
26
27
|
`;
|
|
28
|
+
const Badge = styled.span `
|
|
29
|
+
position: absolute;
|
|
30
|
+
top: 2px;
|
|
31
|
+
right: 2px;
|
|
32
|
+
background: #ff5252;
|
|
33
|
+
color: white;
|
|
34
|
+
font-size: 10px;
|
|
35
|
+
min-width: 14px;
|
|
36
|
+
height: 14px;
|
|
37
|
+
padding: 0 4px;
|
|
38
|
+
border-radius: 999px;
|
|
39
|
+
display: flex;
|
|
40
|
+
align-items: center;
|
|
41
|
+
justify-content: center;
|
|
42
|
+
line-height: 1;
|
|
43
|
+
`;
|
|
27
44
|
const TMPanelManagerToolbar = (props) => {
|
|
28
45
|
const { panels } = props;
|
|
29
|
-
// Get panel visibility toggling function and visibility state from context
|
|
30
46
|
const { togglePanelVisibility, countVisibleLeafPanels, panelVisibility, toolbarButtonsDisabled, toolbarButtonsVisibility } = useTMPanelManagerContext();
|
|
31
|
-
// Get the current device type (e.g., mobile, tablet, desktop) using a custom hook
|
|
32
47
|
const deviceType = useDeviceType();
|
|
33
|
-
// This avoids unnecessary re-renders by only recalculating when deviceType changes
|
|
34
48
|
let isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
|
|
35
49
|
const [visibleLeafPanels, setVisibleLeafPanels] = useState([]);
|
|
36
50
|
useEffect(() => {
|
|
37
|
-
// Flatten panels, filter visible leaf nodes, and sort by orderNumber
|
|
38
51
|
const visibleLeafPanelsSorted = flattenPanels(panels)
|
|
39
52
|
.filter(panel => toolbarButtonsVisibility[panel.id] && !panel.children?.length)
|
|
40
53
|
.sort((a, b) => (a.toolbarOptions?.orderNumber ?? 0) - (b.toolbarOptions?.orderNumber ?? 0));
|
|
41
|
-
// Update state with the filtered and sorted leaf panels for the toolbar
|
|
42
54
|
setVisibleLeafPanels(visibleLeafPanelsSorted);
|
|
43
|
-
}, [toolbarButtonsVisibility]);
|
|
44
|
-
// Callback for toolbar button click, prevents hiding the last visible panel to ensure at least one panel is always visible
|
|
55
|
+
}, [toolbarButtonsVisibility, panels]);
|
|
45
56
|
const onClickCallback = (panelId, isActive) => {
|
|
46
|
-
// If the panel is currently active and it's the only visible panel, do nothing
|
|
47
57
|
if (isActive && countVisibleLeafPanels() <= 1) {
|
|
48
|
-
return undefined;
|
|
58
|
+
return undefined;
|
|
49
59
|
}
|
|
50
|
-
// Otherwise, toggle the panel visibility normally
|
|
51
60
|
togglePanelVisibility(panelId);
|
|
52
61
|
};
|
|
62
|
+
const formatCount = (count) => {
|
|
63
|
+
if (count > 999)
|
|
64
|
+
return "999+";
|
|
65
|
+
return count.toString();
|
|
66
|
+
};
|
|
53
67
|
return (_jsx("div", { style: {
|
|
54
68
|
display: 'flex',
|
|
55
69
|
flexDirection: isMobile ? 'row' : 'column',
|
|
@@ -61,7 +75,8 @@ const TMPanelManagerToolbar = (props) => {
|
|
|
61
75
|
}, children: visibleLeafPanels.filter(panel => toolbarButtonsVisibility[panel.id]).map(visibleLeafPanel => {
|
|
62
76
|
const isActive = panelVisibility[visibleLeafPanel.id];
|
|
63
77
|
const isDisabled = toolbarButtonsDisabled[visibleLeafPanel.id];
|
|
64
|
-
|
|
78
|
+
const count = visibleLeafPanel.toolbarOptions?.count ?? 0;
|
|
79
|
+
return _jsx(StyledToolbarButton, { disabled: isDisabled, "$isDisabled": isDisabled, onClick: () => onClickCallback(visibleLeafPanel.id, isActive), "$isActive": isActive || visibleLeafPanel.toolbarOptions?.alwaysActiveColor, children: _jsxs(TMTooltip, { content: visibleLeafPanel.name + (count > 0 ? ": " + count : ''), position: isMobile ? 'top' : 'left', children: [typeof visibleLeafPanel.toolbarOptions?.icon === 'string' ? (_jsx("i", { className: `dx-icon dx-icon-${visibleLeafPanel.toolbarOptions?.icon}` })) : (visibleLeafPanel.toolbarOptions?.icon), (!isActive && count > 0) && _jsxs(Badge, { children: [" ", formatCount(count), " "] })] }, visibleLeafPanel.id) });
|
|
65
80
|
}) }));
|
|
66
81
|
};
|
|
67
82
|
export default TMPanelManagerToolbar;
|