Skip to content

fix: Overflow counting process #26

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 29, 2022
Merged

fix: Overflow counting process #26

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 19 additions & 9 deletions src/Overflow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,11 +176,19 @@ function Overflow<ItemType = any>(
[renderItem],
);

function updateDisplayCount(count: number, notReady?: boolean) {
function updateDisplayCount(
count: number,
suffixFixedStartVal: number,
notReady?: boolean,
) {
// React 18 will sync render even when the value is same in some case.
// We take `mergedData` as deps which may cause dead loop if it's dynamic generate.
// ref: https://github.com/ant-design/ant-design/issues/36559
if (displayCount === count) {
if (
displayCount === count &&
(suffixFixedStartVal === undefined ||
suffixFixedStartVal === suffixFixedStart)
) {
return;
}

Expand All @@ -190,6 +198,10 @@ function Overflow<ItemType = any>(

onVisibleChange?.(count);
}

if (suffixFixedStartVal !== undefined) {
setSuffixFixedStart(suffixFixedStartVal);
}
}

// ================================= Size =================================
Expand Down Expand Up @@ -233,8 +245,7 @@ function Overflow<ItemType = any>(

// When data count change to 0, reset this since not loop will reach
if (!len) {
updateDisplayCount(0);
setSuffixFixedStart(null);
updateDisplayCount(0, null);
return;
}

Expand All @@ -248,7 +259,7 @@ function Overflow<ItemType = any>(

// Break since data not ready
if (currentItemWidth === undefined) {
updateDisplayCount(i - 1, true);
updateDisplayCount(i - 1, undefined, true);
break;
}

Expand All @@ -263,13 +274,12 @@ function Overflow<ItemType = any>(
totalWidth + getItemWidth(lastIndex)! <= mergedContainerWidth)
) {
// Additional check if match the end
updateDisplayCount(lastIndex);
setSuffixFixedStart(null);
updateDisplayCount(lastIndex, null);
break;
} else if (totalWidth + mergedRestWidth > mergedContainerWidth) {
// Can not hold all the content to show rest
updateDisplayCount(i - 1);
setSuffixFixedStart(
updateDisplayCount(
i - 1,
totalWidth - currentItemWidth - suffixWidth + restWidth,
);
break;
Expand Down