danvics/zerobyte
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

fix(file-tree): display load more if root folder has 500+ items (#526)

Browse source 
Close #518
This commit is contained in:
Nico 2026-02-16 19:25:41 +01:00 committed by GitHub
parent fdd8edec70
commit 66ed89d39e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 43 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
app/client/components/__test__/file-tree.test.tsx
View file

@ -15,7 +15,12 @@ describe("FileTree Pagination", () => {
<FileTree <FileTree
files={testFiles} files={testFiles}
expandedFolders={new Set(["/root"])} expandedFolders={new Set(["/root"])}
getFolderPagination={() => ({ hasMore: true, isLoadingMore: false })} getFolderPagination={(path) => {
if (path === "/root") {
return { hasMore: true, isLoadingMore: false };
}
return { hasMore: false, isLoadingMore: false };
}}
/>, />,
); );
@ -67,13 +72,39 @@ describe("FileTree Pagination", () => {
<FileTree <FileTree
files={testFiles} files={testFiles}
expandedFolders={new Set(["/root"])} expandedFolders={new Set(["/root"])}
getFolderPagination={() => ({ hasMore: true, isLoadingMore: true })} getFolderPagination={(path) => {
if (path === "/root") {
return { hasMore: true, isLoadingMore: true };
}
return { hasMore: false, isLoadingMore: false };
}}
/>, />,
); );
expect(screen.getByText("Loading more...")).toBeTruthy(); expect(screen.getByText("Loading more...")).toBeTruthy();
}); });
test("shows load more button for root-level files when root has more", () => {
const rootFiles: FileEntry[] = [
{ name: "file1", path: "/file1", type: "file" },
{ name: "file2", path: "/file2", type: "file" },
];
render(
<FileTree
files={rootFiles}
getFolderPagination={(path) => {
if (path === "/") {
return { hasMore: true, isLoadingMore: false };
}
return { hasMore: false, isLoadingMore: false };
}}
/>,
);
expect(screen.getByText("Load more files")).toBeTruthy();
});
test("load more button appears for nested folders with hasMore", () => { test("load more button appears for nested folders with hasMore", () => {
const nestedFiles: FileEntry[] = [ const nestedFiles: FileEntry[] = [
{ name: "root", path: "/root", type: "folder" }, { name: "root", path: "/root", type: "folder" },
@ -103,7 +134,12 @@ describe("FileTree Pagination", () => {
<FileTree <FileTree
files={testFiles} files={testFiles}
expandedFolders={new Set([])} expandedFolders={new Set([])}
getFolderPagination={() => ({ hasMore: true, isLoadingMore: false })} getFolderPagination={(path) => {
if (path === "/root") {
return { hasMore: true, isLoadingMore: false };
}
return { hasMore: false, isLoadingMore: false };
}}
/>, />,
); );

11
app/client/components/file-tree.tsx
View file

@ -316,13 +316,10 @@ export const FileTree = memo((props: Props) => {
for (let i = 0; i < filteredFileList.length; i++) { for (let i = 0; i < filteredFileList.length; i++) {
const item = filteredFileList[i]; const item = filteredFileList[i];
const parentPath = item.fullPath.slice(0, item.fullPath.lastIndexOf("/")) || "/"; const parentPath = item.fullPath.slice(0, item.fullPath.lastIndexOf("/")) || "/";
const pagination = getFolderPagination?.(parentPath);
if (parentPath !== "/") { if (pagination?.hasMore && !collapsedFolders.has(parentPath)) {
const pagination = getFolderPagination?.(parentPath); // Update the last index for this parent
if (pagination?.hasMore && !collapsedFolders.has(parentPath)) { map.set(parentPath, i);
// Update the last index for this parent
map.set(parentPath, i);
}
} }
} }