allaw-ui 5.2.0 → 5.2.1
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.
|
@@ -138,27 +138,52 @@ var AvatarToggleGroup = function (_a) {
|
|
|
138
138
|
document.addEventListener("keydown", handleGlobalKeyDown);
|
|
139
139
|
return function () { return document.removeEventListener("keydown", handleGlobalKeyDown); };
|
|
140
140
|
}, [disabled, calculatedMaxVisible]);
|
|
141
|
-
|
|
142
|
-
var
|
|
143
|
-
var
|
|
141
|
+
// Réorganiser pour afficher les sélectionnés en priorité si nécessaire
|
|
142
|
+
var hasHiddenPros = pros.length > calculatedMaxVisible;
|
|
143
|
+
var maxVisibleSlots = hasHiddenPros
|
|
144
|
+
? calculatedMaxVisible - 1
|
|
145
|
+
: calculatedMaxVisible;
|
|
146
|
+
// Déterminer si tous les sélectionnés sont visibles avec l'ordre actuel
|
|
147
|
+
var selectedPros = pros.filter(function (p) { return selected.includes(p.proUserId); });
|
|
148
|
+
var unselectedPros = pros.filter(function (p) { return !selected.includes(p.proUserId); });
|
|
149
|
+
var initialVisiblePros = pros.slice(0, maxVisibleSlots);
|
|
150
|
+
var allSelectedAreVisible = selectedPros.length === 0 ||
|
|
151
|
+
selectedPros.every(function (sp) {
|
|
152
|
+
return initialVisiblePros.some(function (vp) { return vp.proUserId === sp.proUserId; });
|
|
153
|
+
});
|
|
154
|
+
// Si certains sélectionnés ne sont pas visibles, réorganiser
|
|
155
|
+
var orderedPros = allSelectedAreVisible
|
|
156
|
+
? pros
|
|
157
|
+
: __spreadArray(__spreadArray([], selectedPros, true), unselectedPros, true);
|
|
158
|
+
var visiblePros = orderedPros.slice(0, maxVisibleSlots);
|
|
159
|
+
var hiddenCount = pros.length - visiblePros.length;
|
|
144
160
|
return (React.createElement("div", { ref: containerRef, className: "".concat(styles.proSwitch, " ").concat(className), role: "group", "aria-label": "S\u00E9lection de professionnels", "data-disabled": disabled },
|
|
145
|
-
React.createElement("div", { className: styles.avatarStack },
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
161
|
+
React.createElement("div", { className: styles.avatarStack },
|
|
162
|
+
visiblePros.map(function (pro, index) {
|
|
163
|
+
var isSelected = selected.includes(pro.proUserId);
|
|
164
|
+
return (React.createElement("div", { key: pro.proUserId, className: styles.avatarWrapper, style: {
|
|
165
|
+
zIndex: isSelected ? 100 : visiblePros.length - index,
|
|
166
|
+
marginLeft: index === 0 ? 0 : -8,
|
|
167
|
+
}, onMouseEnter: function (e) {
|
|
168
|
+
e.currentTarget.style.zIndex = "200";
|
|
169
|
+
}, onMouseLeave: function (e) {
|
|
170
|
+
e.currentTarget.style.zIndex = isSelected
|
|
171
|
+
? "100"
|
|
172
|
+
: String(visiblePros.length - index);
|
|
173
|
+
} },
|
|
174
|
+
React.createElement(AvatarBubble, { firstName: pro.firstName, name: pro.name, src: pro.profilePictureLink, size: 46, isSelected: isSelected, disabled: disabled, onClick: function () { return handleAvatarClick(pro); }, alt: "".concat(pro.firstName, " ").concat(pro.name), className: focusedIndex === index ? styles.focused : "", showTooltip: showTooltips, tooltipId: tooltipId })));
|
|
175
|
+
}),
|
|
176
|
+
hasHiddenPros && (React.createElement("div", { className: styles.avatarWrapper, style: {
|
|
177
|
+
zIndex: 1,
|
|
178
|
+
marginLeft: visiblePros.length === 0 ? 0 : -8,
|
|
150
179
|
}, onMouseEnter: function (e) {
|
|
151
180
|
e.currentTarget.style.zIndex = "200";
|
|
152
181
|
}, onMouseLeave: function (e) {
|
|
153
|
-
e.currentTarget.style.zIndex =
|
|
154
|
-
? "100"
|
|
155
|
-
: String(visiblePros.length - index);
|
|
182
|
+
e.currentTarget.style.zIndex = "1";
|
|
156
183
|
} },
|
|
157
|
-
React.createElement(
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
"+",
|
|
161
|
-
hiddenCount)),
|
|
184
|
+
React.createElement("button", { className: styles.moreButton, onClick: onOpenPortal, onKeyDown: handleKeyDown, disabled: disabled, "aria-label": "Voir ".concat(pros.length, " professionnels"), tabIndex: disabled ? -1 : 0 },
|
|
185
|
+
"+",
|
|
186
|
+
hiddenCount)))),
|
|
162
187
|
showTooltips && (React.createElement(Tooltip, { id: tooltipId, place: "top", style: {
|
|
163
188
|
fontSize: "12px",
|
|
164
189
|
color: "#FFF",
|
|
@@ -55,8 +55,8 @@
|
|
|
55
55
|
|
|
56
56
|
/* Bouton +X pour les pros cachés */
|
|
57
57
|
.moreButton {
|
|
58
|
-
width:
|
|
59
|
-
height:
|
|
58
|
+
width: 46px;
|
|
59
|
+
height: 46px;
|
|
60
60
|
border-radius: 50%;
|
|
61
61
|
background-color: var(--dark-grey, #456073);
|
|
62
62
|
color: white;
|
|
@@ -70,14 +70,11 @@
|
|
|
70
70
|
font-size: 14px;
|
|
71
71
|
transition: all 0.2s ease;
|
|
72
72
|
flex-shrink: 0;
|
|
73
|
-
margin-left: -8px;
|
|
74
|
-
z-index: 5;
|
|
75
73
|
}
|
|
76
74
|
|
|
77
75
|
.moreButton:hover {
|
|
78
76
|
background-color: var(--mid-grey, #728ea7);
|
|
79
77
|
transform: translateY(-2px);
|
|
80
|
-
z-index: 15;
|
|
81
78
|
}
|
|
82
79
|
|
|
83
80
|
.moreButton:focus-visible {
|
|
@@ -109,12 +106,12 @@
|
|
|
109
106
|
padding-left: 8px;
|
|
110
107
|
}
|
|
111
108
|
|
|
112
|
-
.moreButton {
|
|
109
|
+
/* .moreButton {
|
|
113
110
|
width: 32px;
|
|
114
111
|
height: 32px;
|
|
115
112
|
font-size: 12px;
|
|
116
113
|
margin-left: -6px;
|
|
117
|
-
}
|
|
114
|
+
} */
|
|
118
115
|
|
|
119
116
|
/* Ajuster la taille des avatars en mobile */
|
|
120
117
|
.avatarWrapper .avatarBubble {
|