Skip to content

Commit

Permalink
fix: if you have data to prepend, request it (#281)
Browse files Browse the repository at this point in the history 
* fix: if you have data to pepend, request it
  • Loading branch information
@daybrush
daybrush authored May 10, 2019
1 parent 7c87fbf commit f284f15
Show file tree
Hide file tree
Showing 2 changed files with 92 additions and 22 deletions.
18 changes: 14 additions & 4 deletions src/Infinite.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,10 +116,20 @@ class Infinite {
prepend({ cache: datas.slice(startIndex, Math.min(startCursor, endIndex + 1)) });
} else if (endCursor < endIndex) {
append({ cache: datas.slice(Math.max(startIndex, endCursor + 1), endIndex + 1) });
} else if (endScrollPos >= endEdgePos - threshold) {
append({ cache: datas.slice(endCursor + 1, endCursor + 2) });
} else if (scrollPos <= startEdgePos + threshold) {
prepend({ cache: datas.slice(startCursor - 1, startCursor) });
} else {
// if you have data(no cachedAppendData, has cachedPrependData) to pepend, request it.
const cachedAppendData = datas.slice(endCursor + 1, endCursor + 2);
const cachedPrependData = datas.slice(startCursor - 1, startCursor);
const isPrepend = scrollPos <= startEdgePos + threshold;

if (
endScrollPos >= endEdgePos - threshold
&& (!isPrepend || cachedAppendData.length || !cachedPrependData.length)
) {
append({ cache: cachedAppendData });
} else if (isPrepend) {
prepend({ cache: cachedPrependData });
}
}
}
public setCursor(cursor: CursorType, index: number) {
Expand Down
96 changes: 78 additions & 18 deletions test/unit/Infinite.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ import {wait, createElement} from "./helper/TestHelper";
});
this.infinite.setCursor("start", 0);
this.infinite.setCursor("end", 0);

// When
this.infinite.scroll(80);
this.infinite.scroll(100);
Expand Down Expand Up @@ -60,7 +60,7 @@ import {wait, createElement} from "./helper/TestHelper";
},
});
this.items.append({
groupKey: 0,
groupKey: 1,
items: [],
outlines: {
start: [1000],
Expand Down Expand Up @@ -88,7 +88,7 @@ import {wait, createElement} from "./helper/TestHelper";
this.infinite.options.prepend = spy;
// Given
this.items.prepend({
groupKey: 0,
groupKey: 1,
items: [],
outlines: {
start: [1000],
Expand All @@ -106,7 +106,7 @@ import {wait, createElement} from "./helper/TestHelper";

this.infinite.setCursor("start", 0);
this.infinite.setCursor("end", 1);

// When
this.infinite.scroll(2000);
this.infinite.scroll(1000);
Expand Down Expand Up @@ -135,7 +135,7 @@ import {wait, createElement} from "./helper/TestHelper";
});
// Given
this.items.prepend({
groupKey: 0,
groupKey: 1,
items: [],
outlines: {
start: [1000],
Expand All @@ -153,7 +153,7 @@ import {wait, createElement} from "./helper/TestHelper";

this.infinite.setCursor("start", 1);
this.infinite.setCursor("end", 1);

// When
this.infinite.scroll(2000);
this.infinite.scroll(1000);
Expand All @@ -171,6 +171,66 @@ import {wait, createElement} from "./helper/TestHelper";
expect(this.infinite.options.append.callCount).to.be.equal(1);
expect(this.infinite.options.prepend.callCount).to.be.equal(useRecycle ? 7 : 3);
});
it(`should check infinite prepend for small size(cache)`, async () => {
this.infinite.options.append = sinon.spy();
this.infinite.options.prepend = sinon.spy(({cache}) => {
if (useRecycle) {
expect(cache.length).to.be.not.equal(0)
expect(cache[0].outlines.start[0]).to.be.equal(0);
} else {
expect(cache.length).to.be.equal(0);
}
});
// Given
this.items.prepend({
groupKey: 1,
items: [],
outlines: {
start: [1000],
end: [1100],
},
});
this.items.prepend({
groupKey: 0,
items: [],
outlines: {
start: [0],
end: [1000],
},
});

this.infinite.setCursor("start", 1);
this.infinite.setCursor("end", 1);

// When
// request append
this.infinite.scroll(2000);
// useRecycle: true, request prepend
// useRecycle: false, request append
this.infinite.scroll(1000);
// useRecycle: true, request prepend
// useRecycle: false request append
this.infinite.scroll(400);
// useRecycle: true, request prepend
// useRecycle: false
this.infinite.scroll(threshold + 2);
// useRecycle: true, request prepend
// useRecycle: false, request prepend
this.infinite.scroll(threshold);
// useRecycle: true, request prepend
// useRecycle: false, request prepend
this.infinite.scroll(threshold - 50);
// useRecycle: true, request prepend
// useRecycle: false, request prepend
this.infinite.scroll(0);

// Then
expect(this.infinite.getCursor("start")).to.be.equal(useRecycle ? 1 : 0);
expect(this.infinite.getCursor("end")).to.be.equal(1);
await wait();
expect(this.infinite.options.append.callCount).to.be.equal(useRecycle ? 1: 2);
expect(this.infinite.options.prepend.callCount).to.be.equal(useRecycle ? 6 : 3);
});
it("should check scroll append multiple", async () => {
// Given
this.items.append({
Expand Down Expand Up @@ -247,7 +307,7 @@ import {wait, createElement} from "./helper/TestHelper";
expect(cache[1].groupKey).to.be.equals(1);
expect(cache[2].groupKey).to.be.equals(2);
});

this.infinite.setCursor("start", 3);
this.infinite.setCursor("end", 3);
this.infinite.scroll(0);
Expand All @@ -267,15 +327,15 @@ import {wait, createElement} from "./helper/TestHelper";
},
});
this.items.append({
groupKey: 0,
groupKey: 1,
items: [{el: 1}],
outlines: {
start: [1000, 1100],
end: [2000, 2100],
},
});
this.items.append({
groupKey: 0,
groupKey: 2,
items: [{el: 1}],
outlines: {
start: [2000, 2100],
Expand Down Expand Up @@ -391,15 +451,15 @@ import {wait, createElement} from "./helper/TestHelper";
},
});
this.items.append({
groupKey: 0,
groupKey: 1,
items: [{el: 1}],
outlines: {
start: [1000, 1100],
end: [2000, 2100],
},
});
this.items.append({
groupKey: 0,
groupKey: 2,
items: [{el: 1}],
outlines: {
start: [2000, 2100],
Expand Down Expand Up @@ -429,15 +489,15 @@ import {wait, createElement} from "./helper/TestHelper";
},
});
this.items.append({
groupKey: 0,
groupKey: 1,
items: [{el: 1}],
outlines: {
start: [1000, 1100],
end: [2000, 2100],
},
});
this.items.append({
groupKey: 0,
groupKey: 2,
items: [{el: 1}],
outlines: {
start: [2000, 2100],
Expand Down Expand Up @@ -482,15 +542,15 @@ import {wait, createElement} from "./helper/TestHelper";
},
});
this.items.append({
groupKey: 0,
groupKey: 1,
items: [{el: 1}],
outlines: {
start: [1000, 1100],
end: [2000, 2100],
},
});
this.items.append({
groupKey: 0,
groupKey: 2,
items: [{el: 1}],
outlines: {
start: [2000, 2100],
Expand Down Expand Up @@ -545,7 +605,7 @@ import {wait, createElement} from "./helper/TestHelper";
// Given
const start = this.infinite.getEdgeValue("start");
const end = this.infinite.getEdgeValue("end");

this.items.append({
groupKey: 0,
items: [{el: 1}],
Expand Down Expand Up @@ -576,7 +636,7 @@ import {wait, createElement} from "./helper/TestHelper";
// Given
const visibleItems = this.infinite.getVisibleItems();
const visibleData = this.infinite.getVisibleData();

this.items.append({
groupKey: 0,
items: [{el: 1}],
Expand Down Expand Up @@ -604,4 +664,4 @@ import {wait, createElement} from "./helper/TestHelper";
});
});
});
});
});

0 comments on commit f284f15

Please sign in to comment.