lecom-ui 5.2.99 → 5.3.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.
|
@@ -57,14 +57,19 @@ function useTagVisibility(ref, value) {
|
|
|
57
57
|
const [hiddenCount, setHiddenCount] = React.useState(0);
|
|
58
58
|
const calculateVisibleTags = React.useCallback(
|
|
59
59
|
(children, totalTags) => {
|
|
60
|
-
if (children.length === 0 || totalTags === 0)
|
|
61
|
-
|
|
60
|
+
if (children.length === 0 || totalTags === 0) {
|
|
61
|
+
const initialCount = getInitialEstimate(totalTags);
|
|
62
|
+
return {
|
|
63
|
+
visibleCount: initialCount,
|
|
64
|
+
hiddenCount: Math.max(totalTags - initialCount, 0)
|
|
65
|
+
};
|
|
66
|
+
}
|
|
62
67
|
if (totalTags <= 3) return { visibleCount: totalTags, hiddenCount: 0 };
|
|
63
68
|
const offsetTops = [...new Set(children.map((c) => c.offsetTop))].sort(
|
|
64
69
|
(a, b) => a - b
|
|
65
70
|
);
|
|
66
71
|
if (offsetTops.length <= 1) {
|
|
67
|
-
return { visibleCount: totalTags, hiddenCount: 0 };
|
|
72
|
+
return totalTags > 6 ? { visibleCount: 5, hiddenCount: totalTags - 5 } : { visibleCount: totalTags, hiddenCount: 0 };
|
|
68
73
|
}
|
|
69
74
|
const firstLineTop = offsetTops[0];
|
|
70
75
|
const secondLineTop = offsetTops[1];
|
|
@@ -80,7 +85,7 @@ function useTagVisibility(ref, value) {
|
|
|
80
85
|
hiddenCount: Math.max(totalTags - visibleCount, 0)
|
|
81
86
|
};
|
|
82
87
|
},
|
|
83
|
-
[]
|
|
88
|
+
[getInitialEstimate]
|
|
84
89
|
);
|
|
85
90
|
const calculateMaxVisible = React.useCallback(() => {
|
|
86
91
|
const container = ref.current;
|
|
@@ -99,7 +104,6 @@ function useTagVisibility(ref, value) {
|
|
|
99
104
|
const calculateWhenVisible = () => {
|
|
100
105
|
requestAnimationFrame(() => requestAnimationFrame(calculateMaxVisible));
|
|
101
106
|
};
|
|
102
|
-
calculateWhenVisible();
|
|
103
107
|
const observer = new IntersectionObserver((entries) => {
|
|
104
108
|
if (entries.some((entry) => entry.isIntersecting)) calculateWhenVisible();
|
|
105
109
|
});
|
|
@@ -107,6 +111,9 @@ function useTagVisibility(ref, value) {
|
|
|
107
111
|
if (ref.current) {
|
|
108
112
|
observer.observe(ref.current);
|
|
109
113
|
resizeObserver.observe(ref.current);
|
|
114
|
+
if (ref.current.offsetParent !== null) {
|
|
115
|
+
calculateWhenVisible();
|
|
116
|
+
}
|
|
110
117
|
}
|
|
111
118
|
return () => {
|
|
112
119
|
observer.disconnect();
|
|
@@ -117,6 +124,9 @@ function useTagVisibility(ref, value) {
|
|
|
117
124
|
const timeout = setTimeout(calculateMaxVisible, 150);
|
|
118
125
|
return () => clearTimeout(timeout);
|
|
119
126
|
}, [value.length, calculateMaxVisible]);
|
|
127
|
+
React.useLayoutEffect(() => {
|
|
128
|
+
calculateMaxVisible();
|
|
129
|
+
}, [value.length, calculateMaxVisible]);
|
|
120
130
|
return { maxVisibleCount, hiddenCount };
|
|
121
131
|
}
|
|
122
132
|
function TagInput(props) {
|
|
@@ -132,8 +142,8 @@ function TagInput(props) {
|
|
|
132
142
|
...restProps
|
|
133
143
|
} = props;
|
|
134
144
|
const ref = React.useRef(null);
|
|
135
|
-
|
|
136
|
-
const visibleCount =
|
|
145
|
+
useTagVisibility(ref, value);
|
|
146
|
+
const visibleCount = Math.min(10, value.length);
|
|
137
147
|
const displayTags = value.slice(0, visibleCount);
|
|
138
148
|
const actualHiddenCount = Math.max(value.length - visibleCount, 0);
|
|
139
149
|
const textareaRadius = radius === "full" ? "large" : radius;
|