lecom-ui 5.2.95 → 5.2.96
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.
|
@@ -35,7 +35,7 @@ function HiddenCountTag({
|
|
|
35
35
|
},
|
|
36
36
|
[onRemoveHidden]
|
|
37
37
|
);
|
|
38
|
-
return /* @__PURE__ */ React.createElement(Tag, { color: "
|
|
38
|
+
return /* @__PURE__ */ React.createElement(Tag, { color: "blue", "data-tag": "true" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body-small-400", className: "text-blue-600" }, "+", count), !readOnly && /* @__PURE__ */ React.createElement(
|
|
39
39
|
X,
|
|
40
40
|
{
|
|
41
41
|
className: "w-4 h-4 cursor-pointer",
|
|
@@ -46,10 +46,20 @@ function HiddenCountTag({
|
|
|
46
46
|
));
|
|
47
47
|
}
|
|
48
48
|
function useTagVisibility(ref, value) {
|
|
49
|
+
const getInitialEstimate = React.useCallback((totalTags) => {
|
|
50
|
+
if (totalTags <= 3) return totalTags;
|
|
51
|
+
if (totalTags <= 4) return totalTags;
|
|
52
|
+
return Math.min(5, totalTags);
|
|
53
|
+
}, []);
|
|
49
54
|
const [maxVisibleCount, setMaxVisibleCount] = React.useState(
|
|
50
|
-
|
|
55
|
+
() => getInitialEstimate(value.length)
|
|
51
56
|
);
|
|
52
57
|
const [hiddenCount, setHiddenCount] = React.useState(0);
|
|
58
|
+
React.useEffect(() => {
|
|
59
|
+
if (maxVisibleCount === null) {
|
|
60
|
+
setMaxVisibleCount(getInitialEstimate(value.length));
|
|
61
|
+
}
|
|
62
|
+
}, [value.length, getInitialEstimate, maxVisibleCount]);
|
|
53
63
|
const calculateVisibleTags = React.useCallback(
|
|
54
64
|
(children, totalTags) => {
|
|
55
65
|
if (children.length === 0 || totalTags === 0) {
|
|
@@ -58,6 +68,13 @@ function useTagVisibility(ref, value) {
|
|
|
58
68
|
if (totalTags <= 3) {
|
|
59
69
|
return { visibleCount: totalTags, hiddenCount: 0 };
|
|
60
70
|
}
|
|
71
|
+
if (children.length === 0) {
|
|
72
|
+
const estimated = totalTags <= 4 ? totalTags : 4;
|
|
73
|
+
return {
|
|
74
|
+
visibleCount: estimated,
|
|
75
|
+
hiddenCount: Math.max(totalTags - estimated, 0)
|
|
76
|
+
};
|
|
77
|
+
}
|
|
61
78
|
const offsetTops = [...new Set(children.map((c) => c.offsetTop))].sort(
|
|
62
79
|
(a, b) => a - b
|
|
63
80
|
);
|
|
@@ -115,9 +132,18 @@ function useTagVisibility(ref, value) {
|
|
|
115
132
|
}, [value, calculateMaxVisible, ref]);
|
|
116
133
|
React.useEffect(() => {
|
|
117
134
|
if (ref.current) {
|
|
135
|
+
requestAnimationFrame(() => {
|
|
136
|
+
requestAnimationFrame(() => {
|
|
137
|
+
calculateMaxVisible();
|
|
138
|
+
});
|
|
139
|
+
});
|
|
140
|
+
}
|
|
141
|
+
}, [value.length, calculateMaxVisible, ref]);
|
|
142
|
+
React.useEffect(() => {
|
|
143
|
+
if (ref.current && value.length > 5) {
|
|
118
144
|
const timeoutId = setTimeout(() => {
|
|
119
145
|
calculateMaxVisible();
|
|
120
|
-
},
|
|
146
|
+
}, 50);
|
|
121
147
|
return () => clearTimeout(timeoutId);
|
|
122
148
|
}
|
|
123
149
|
}, [value.length, calculateMaxVisible, ref]);
|