Skip to content

Commit

Permalink
address PR feedback
Browse files Browse the repository at this point in the history
  • Loading branch information
@SpencerWhitehead7
SpencerWhitehead7 committed Oct 28, 2024
1 parent 513b1d6 commit 1ae3ec6
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 48 deletions.
28 changes: 14 additions & 14 deletions packages/virtual/src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@ type VirtualListConfig<T extends readonly any[]> = {
};

type VirtualListReturn<T extends readonly any[]> = [
{
containerHeight: Accessor<number>;
viewerTop: Accessor<number>;
visibleItems: Accessor<T>;
},
Accessor<{
containerHeight: number;
viewerTop: number;
visibleItems: T;
}>,
onScroll: (
e: Event & {
target: DOMElement;
Expand Down Expand Up @@ -55,11 +55,11 @@ export function createVirtualList<T extends readonly any[]>({
);

return [
{
containerHeight: () => items.length * rowHeight,
viewerTop: () => getFirstIdx() * rowHeight,
visibleItems: () => items.slice(getFirstIdx(), getLastIdx()) as unknown as T,
},
() => ({
containerHeight: items.length * rowHeight,
viewerTop: getFirstIdx() * rowHeight,
visibleItems: items.slice(getFirstIdx(), getLastIdx()) as unknown as T,
}),
e => {
setOffset(e.target.scrollTop);
},
Expand Down Expand Up @@ -89,7 +89,7 @@ type VirtualListProps<T extends readonly any[], U extends JSX.Element> = {
export function VirtualList<T extends readonly any[], U extends JSX.Element>(
props: VirtualListProps<T, U>,
): JSX.Element {
const [{ containerHeight, viewerTop, visibleItems }, onScroll] = createVirtualList({
const [virtual, onScroll] = createVirtualList({
items: props.each,
rootHeight: props.rootHeight,
rowHeight: props.rowHeight,
Expand All @@ -108,16 +108,16 @@ export function VirtualList<T extends readonly any[], U extends JSX.Element>(
style={{
position: "relative",
width: "100%",
height: `${containerHeight()}px`,
height: `${virtual().containerHeight}px`,
}}
>
<div
style={{
position: "absolute",
top: `${viewerTop()}px`,
top: `${virtual().viewerTop}px`,
}}
>
<For fallback={props.fallback} each={visibleItems()}>
<For fallback={props.fallback} each={virtual().visibleItems}>
{props.children}
</For>
</div>
Expand Down
68 changes: 34 additions & 34 deletions packages/virtual/test/index.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,100 +22,100 @@ function getScrollContainer() {

describe("createVirtualList", () => {
test("returns containerHeight representing the size of the list container element within the root", () => {
const [{ containerHeight }] = createVirtualList({
const [virtual] = createVirtualList({
items: TEST_LIST,
rootHeight: 20,
rowHeight: 10,
});

expect(containerHeight()).toEqual(10_000);
expect(virtual().containerHeight).toEqual(10_000);
});

test("returns viewerTop representing the location of the list viewer element within the list container", () => {
const [{ viewerTop }] = createVirtualList({
const [virtual] = createVirtualList({
items: TEST_LIST,
rootHeight: 20,
rowHeight: 10,
});

expect(viewerTop()).toEqual(0);
expect(virtual().viewerTop).toEqual(0);
});

test("returns visibleList representing the subset of items to render", () => {
const [{ visibleItems }] = createVirtualList({
const [virtual] = createVirtualList({
items: TEST_LIST,
rootHeight: 20,
rowHeight: 10,
});

expect(visibleItems()).toEqual([0, 1, 2]);
expect(virtual().visibleItems).toEqual([0, 1, 2]);
});

test("returns onScroll which sets viewerTop and visibleItems based on rootElement's scrolltop", () => {
const el = document.createElement("div");

const [{ viewerTop, visibleItems }, onScroll] = createVirtualList({
const [virtual, onScroll] = createVirtualList({
items: TEST_LIST,
rootHeight: 20,
rowHeight: 10,
});

expect(visibleItems()).toEqual([0, 1, 2]);
expect(viewerTop()).toEqual(0);
expect(virtual().visibleItems).toEqual([0, 1, 2]);
expect(virtual().viewerTop).toEqual(0);

el.scrollTop += 10;

// no change until onScroll is called
expect(visibleItems()).toEqual([0, 1, 2]);
expect(viewerTop()).toEqual(0);
expect(virtual().visibleItems).toEqual([0, 1, 2]);
expect(virtual().viewerTop).toEqual(0);

onScroll(TARGETED_SCROLL_EVENT(el));

expect(visibleItems()).toEqual([0, 1, 2, 3]);
expect(viewerTop()).toEqual(0);
expect(virtual().visibleItems).toEqual([0, 1, 2, 3]);
expect(virtual().viewerTop).toEqual(0);

el.scrollTop += 10;
onScroll(TARGETED_SCROLL_EVENT(el));

expect(visibleItems()).toEqual([1, 2, 3, 4]);
expect(viewerTop()).toEqual(10);
expect(virtual().visibleItems).toEqual([1, 2, 3, 4]);
expect(virtual().viewerTop).toEqual(10);

el.scrollTop -= 10;
onScroll(TARGETED_SCROLL_EVENT(el));

expect(visibleItems()).toEqual([0, 1, 2, 3]);
expect(viewerTop()).toEqual(0);
expect(virtual().visibleItems).toEqual([0, 1, 2, 3]);
expect(virtual().viewerTop).toEqual(0);

el.scrollTop -= 10;
onScroll(TARGETED_SCROLL_EVENT(el));

expect(visibleItems()).toEqual([0, 1, 2]);
expect(viewerTop()).toEqual(0);
expect(virtual().visibleItems).toEqual([0, 1, 2]);
expect(virtual().viewerTop).toEqual(0);
});

test("onScroll handles reaching the bottom of the list", () => {
const el = document.createElement("div");

const [{ viewerTop, visibleItems }, onScroll] = createVirtualList({
const [virtual, onScroll] = createVirtualList({
items: TEST_LIST,
rootHeight: 20,
rowHeight: 10,
});

expect(visibleItems()).toEqual([0, 1, 2]);
expect(viewerTop()).toEqual(0);
expect(virtual().visibleItems).toEqual([0, 1, 2]);
expect(virtual().viewerTop).toEqual(0);

el.scrollTop += 9_980;
onScroll(TARGETED_SCROLL_EVENT(el));

expect(visibleItems()).toEqual([997, 998, 999]);
expect(viewerTop()).toEqual(9_970);
expect(virtual().visibleItems).toEqual([997, 998, 999]);
expect(virtual().viewerTop).toEqual(9_970);
});

test("visibleList takes `overscanCount` into account", () => {
const el = document.createElement("div");

const [{ visibleItems }, onScroll] = createVirtualList({
const [virtual, onScroll] = createVirtualList({
items: TEST_LIST,
rootHeight: 20,
rowHeight: 10,
Expand All @@ -125,39 +125,39 @@ describe("createVirtualList", () => {
el.scrollTop += 100;
onScroll(TARGETED_SCROLL_EVENT(el));

expect(visibleItems()).toEqual([8, 9, 10, 11, 12, 13]);
expect(virtual().visibleItems).toEqual([8, 9, 10, 11, 12, 13]);
});

test("overscanCount defaults to 1 if undefined or zero", () => {
const [{ visibleItems: visibleItemsUndefined }] = createVirtualList({
const [virtualUndefined] = createVirtualList({
items: TEST_LIST,
rootHeight: 20,
rowHeight: 10,
});

expect(visibleItemsUndefined()).toEqual([0, 1, 2]);
expect(virtualUndefined().visibleItems).toEqual([0, 1, 2]);

const [{ visibleItems: visibleItemsZero }] = createVirtualList({
const [virtualZero] = createVirtualList({
items: TEST_LIST,
rootHeight: 20,
rowHeight: 10,
overscanCount: 0,
});

expect(visibleItemsZero()).toEqual([0, 1, 2]);
expect(virtualZero().visibleItems).toEqual([0, 1, 2]);
});

test("handles empty list", () => {
const [{ containerHeight, viewerTop, visibleItems }] = createVirtualList({
const [virtual] = createVirtualList({
items: [],
rootHeight: 20,
rowHeight: 10,
overscanCount: 0,
});

expect(containerHeight()).toEqual(0);
expect(viewerTop()).toEqual(0);
expect(visibleItems()).toEqual([]);
expect(virtual().containerHeight).toEqual(0);
expect(virtual().viewerTop).toEqual(0);
expect(virtual().visibleItems).toEqual([]);
});
});

Expand Down

0 comments on commit 1ae3ec6

Please sign in to comment.