lecom-ui 5.2.96 → 5.2.98
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.
|
@@ -55,26 +55,11 @@ function useTagVisibility(ref, value) {
|
|
|
55
55
|
() => getInitialEstimate(value.length)
|
|
56
56
|
);
|
|
57
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]);
|
|
63
58
|
const calculateVisibleTags = React.useCallback(
|
|
64
59
|
(children, totalTags) => {
|
|
65
|
-
if (children.length === 0 || totalTags === 0)
|
|
60
|
+
if (children.length === 0 || totalTags === 0)
|
|
66
61
|
return { visibleCount: 0, hiddenCount: 0 };
|
|
67
|
-
}
|
|
68
|
-
if (totalTags <= 3) {
|
|
69
|
-
return { visibleCount: totalTags, hiddenCount: 0 };
|
|
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
|
-
}
|
|
62
|
+
if (totalTags <= 3) return { visibleCount: totalTags, hiddenCount: 0 };
|
|
78
63
|
const offsetTops = [...new Set(children.map((c) => c.offsetTop))].sort(
|
|
79
64
|
(a, b) => a - b
|
|
80
65
|
);
|
|
@@ -94,13 +79,9 @@ function useTagVisibility(ref, value) {
|
|
|
94
79
|
}
|
|
95
80
|
const maxSecondLineVisible = Math.min(secondLineCount, 2);
|
|
96
81
|
const visibleCount = firstLineCount + maxSecondLineVisible;
|
|
97
|
-
if (visibleCount >= totalTags) {
|
|
98
|
-
return { visibleCount: totalTags, hiddenCount: 0 };
|
|
99
|
-
}
|
|
100
|
-
const hiddenCount2 = totalTags - visibleCount;
|
|
101
82
|
return {
|
|
102
83
|
visibleCount,
|
|
103
|
-
hiddenCount:
|
|
84
|
+
hiddenCount: Math.max(totalTags - visibleCount, 0)
|
|
104
85
|
};
|
|
105
86
|
},
|
|
106
87
|
[]
|
|
@@ -119,34 +100,36 @@ function useTagVisibility(ref, value) {
|
|
|
119
100
|
setHiddenCount(newHiddenCount);
|
|
120
101
|
}, [ref, calculateVisibleTags, value.length]);
|
|
121
102
|
React.useLayoutEffect(() => {
|
|
122
|
-
|
|
103
|
+
const calculateWhenVisible = () => {
|
|
104
|
+
requestAnimationFrame(() => {
|
|
105
|
+
requestAnimationFrame(() => {
|
|
106
|
+
calculateMaxVisible();
|
|
107
|
+
});
|
|
108
|
+
});
|
|
109
|
+
};
|
|
110
|
+
const observer = new IntersectionObserver((entries) => {
|
|
111
|
+
if (entries.some((entry) => entry.isIntersecting)) {
|
|
112
|
+
calculateWhenVisible();
|
|
113
|
+
}
|
|
114
|
+
});
|
|
123
115
|
const resizeObserver = new ResizeObserver(() => {
|
|
124
116
|
calculateMaxVisible();
|
|
125
117
|
});
|
|
126
118
|
if (ref.current) {
|
|
119
|
+
observer.observe(ref.current);
|
|
127
120
|
resizeObserver.observe(ref.current);
|
|
128
121
|
}
|
|
129
122
|
return () => {
|
|
123
|
+
observer.disconnect();
|
|
130
124
|
resizeObserver.disconnect();
|
|
131
125
|
};
|
|
132
126
|
}, [value, calculateMaxVisible, ref]);
|
|
133
127
|
React.useEffect(() => {
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
});
|
|
140
|
-
}
|
|
141
|
-
}, [value.length, calculateMaxVisible, ref]);
|
|
142
|
-
React.useEffect(() => {
|
|
143
|
-
if (ref.current && value.length > 5) {
|
|
144
|
-
const timeoutId = setTimeout(() => {
|
|
145
|
-
calculateMaxVisible();
|
|
146
|
-
}, 50);
|
|
147
|
-
return () => clearTimeout(timeoutId);
|
|
148
|
-
}
|
|
149
|
-
}, [value.length, calculateMaxVisible, ref]);
|
|
128
|
+
const timeout = setTimeout(() => {
|
|
129
|
+
calculateMaxVisible();
|
|
130
|
+
}, 150);
|
|
131
|
+
return () => clearTimeout(timeout);
|
|
132
|
+
}, [value.length, calculateMaxVisible]);
|
|
150
133
|
return { maxVisibleCount, hiddenCount };
|
|
151
134
|
}
|
|
152
135
|
function TagInput(props) {
|