Skip to content

Commit 899753e

Browse files
daybrushdaybrush
committed
feat: add useDetachedRecycle option
1 parent a577cf0 commit 899753e

File tree

14 files changed

+1418
-186
lines changed

14 files changed

+1418
-186
lines changed

‎package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,10 @@
4545
"lerna": "^4.0.0",
4646
"typescript": "^4.5.0 <4.6.0"
4747
},
48+
"resolutions": {
49+
"@types/lodash": "4.14.30",
50+
"@storybook/addon-essentials": "6.1.11"
51+
},
4852
"workspaces": {
4953
"packages": [
5054
"packages/*",

‎packages/infinitegrid/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@egjs/infinitegrid",
3-
"version": "4.12.0",
3+
"version": "4.13.0-beta.8",
44
"description": "A module used to arrange elements including content infinitely according to grid type. With this module, you can implement various grids composed of different card elements whose sizes vary. It guarantees performance by maintaining the number of DOMs the module is handling under any circumstance",
55
"module": "dist/infinitegrid.esm.js",
66
"main": "dist/infinitegrid.cjs.js",
@@ -122,7 +122,7 @@
122122
"@cfcs/core": "^0.0.5",
123123
"@egjs/children-differ": "^1.0.1",
124124
"@egjs/component": "^3.0.0",
125-
"@egjs/grid": "~1.16.0",
125+
"@egjs/grid": "1.17.0-beta.3",
126126
"@egjs/list-differ": "^1.0.0"
127127
}
128128
}

‎packages/infinitegrid/src/Infinite.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -394,6 +394,38 @@ export class Infinite extends Component<InfiniteEvents> {
394394
|| visibleResult.removed.length > 0
395395
|| visibleResult.changed.length > 0;
396396
}
397+
398+
const defaultDirection = this.options.defaultDirection;
399+
let prevOutline: number[] = [];
400+
const outlinedItems = [...nextItems];
401+
402+
if (defaultDirection === "start") {
403+
outlinedItems.reverse();
404+
}
405+
outlinedItems.forEach((item, i) => {
406+
if (i > 0 && prevOutline.length) {
407+
if (defaultDirection === "start") {
408+
if (!item.endOutline.length) {
409+
item.endOutline = [...prevOutline];
410+
}
411+
if (!item.startOutline.length) {
412+
item.startOutline = [...item.endOutline];
413+
}
414+
} else {
415+
if (!item.startOutline.length) {
416+
item.startOutline = [...prevOutline];
417+
}
418+
if (!item.endOutline.length) {
419+
item.endOutline = [...item.startOutline];
420+
}
421+
}
422+
}
423+
if (defaultDirection === "start") {
424+
prevOutline = item.startOutline;
425+
} else {
426+
prevOutline = item.endOutline;
427+
}
428+
});
397429
this.setItems(nextItems);
398430
this.setCursors(nextStartCursor, nextEndCursor);
399431
return isChange;

‎packages/infinitegrid/src/InfiniteGrid.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,7 @@ class InfiniteGrid<Options extends InfiniteGridOptions = InfiniteGridOptions> ex
9494
renderer: null,
9595
threshold: 100,
9696
useRecycle: true,
97+
useDetachedRecycle: false,
9798
scrollContainer: null,
9899
isReachStart: false,
99100
isReachEnd: false,
@@ -697,6 +698,7 @@ class InfiniteGrid<Options extends InfiniteGridOptions = InfiniteGridOptions> ex
697698
}
698699
this._syncInfinite();
699700
this.groupManager.setCursors(infinite.getStartCursor(), infinite.getEndCursor());
701+
700702
if (isUpdate) {
701703
this._update();
702704
} else {
@@ -771,6 +773,10 @@ class InfiniteGrid<Options extends InfiniteGridOptions = InfiniteGridOptions> ex
771773

772774
if (orgItem.mountState !== MOUNT_STATE.UNCHECKED) {
773775
orgItem.mountState = MOUNT_STATE.UNMOUNTED;
776+
777+
if (this.options.useDetachedRecycle) {
778+
orgItem.element = null;
779+
}
774780
}
775781
});
776782

‎packages/infinitegrid/src/consts.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ export const ITEM_INFO_PROPERTIES: Record<keyof InfiniteGridItemInfo, true> = {
4242

4343

4444
export const INFINITEGRID_METHODS = [
45+
"resizeScroll",
4546
"insertByGroupIndex",
4647
"updateItems",
4748
"getItems",

‎packages/infinitegrid/src/types.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,12 @@ export interface InfiniteGridOptions extends GridOptions {
8080
* @default true
8181
*/
8282
useRecycle?: boolean;
83+
/**
84+
* When using `useRecycle` option, remove elements of invisible items. If you want to improve performance (memory issues), enable it.
85+
* @ko `useRecycle`옵션을 사용하는 경우 보이지 않는 아이템들의 element를 제거한다. 성능(메모리 이슈)을 높이고 싶다면 활성화 해라.
86+
* @default false
87+
*/
88+
useDetachedRecycle?: boolean;
8389
/**
8490
* @default false
8591
*/

‎packages/infinitegrid/test/manual/masonrygrid.html‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -154,14 +154,22 @@ <h1 class="header">
154154
});
155155

156156
ig.setPlaceholder({ html: `<div class="placeholder">Placeholder</div>` })
157+
ig.on("requestPrepend", e => {
158+
console.log("PP");
159+
});
157160
ig.on("requestAppend", e => {
158161
if (e.isVirtual) {
159162
console.log("placeholder");
160163
ig.append(getItems(e.nextGroupKey, 10), e.nextGroupKey);
161164
} else {
162165
const nextGroupKey = (+e.groupKey || 0) + 1;
163166

164-
ig.append(getItems(nextGroupKey, 10), nextGroupKey);
167+
console.log(nextGroupKey);
168+
if (nextGroupKey < 10) {
169+
ig.append(getItems(nextGroupKey, 10), nextGroupKey);
170+
} else {
171+
e.reachEnd();
172+
}
165173
}
166174
});
167175

‎packages/infinitegrid/test/unit/Infinite.spec.ts‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Infinite } from "../../src/Infinite";
22
import { cleanup } from "./utils/utils";
33
import * as sinon from "sinon";
44

5-
describe("test Infinite", () => {
5+
describe.only("test Infinite", () => {
66
let infinite: Infinite | null;
77

88
afterEach(() => {
@@ -47,6 +47,34 @@ describe("test Infinite", () => {
4747
expect(items2.map((item) => item.key)).to.be.deep.equals([1, 2]);
4848
expect(items3.map((item) => item.key)).to.be.deep.equals([2, 3]);
4949
});
50+
it("should check if outline is empty but arbitrary outline and size are calculated", () => {
51+
// Given, When
52+
infinite = new Infinite({});
53+
infinite.syncItems([
54+
{
55+
key: 1,
56+
startOutline: [0],
57+
endOutline: [300],
58+
},
59+
{
60+
key: 2,
61+
startOutline: [],
62+
endOutline: [],
63+
},
64+
{
65+
key: 3,
66+
startOutline: [],
67+
endOutline: [],
68+
},
69+
]);
70+
71+
// Then
72+
expect(infinite.getScrollSize()).to.be.deep.equals(300);
73+
expect(infinite.getItems()[1].startOutline).to.be.deep.equals([300]);
74+
expect(infinite.getItems()[1].endOutline).to.be.deep.equals([300]);
75+
expect(infinite.getItems()[2].startOutline).to.be.deep.equals([300]);
76+
expect(infinite.getItems()[2].endOutline).to.be.deep.equals([300]);
77+
});
5078
it("should check whether rendered visible items change according to scroll pos", () => {
5179
infinite = new Infinite({});
5280
infinite.setItems([

‎packages/infinitegrid/test/unit/InfiniteGrid.spec.ts‎

Lines changed: 35 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -36,12 +36,12 @@ describe("test InfiniteGrid", () => {
3636
// Given
3737
container!.innerHTML = `
3838
<div class="wrapper" style="width: 100%; height: 500px;">
39-
<div>1</div>
40-
<div>2</div>
41-
<div>3</div>
42-
<div>4</div>
43-
<div>5</div>
44-
<div>6</div>
39+
<div>11</div>
40+
<div>22</div>
41+
<div>33</div>
42+
<div>44</div>
43+
<div>55</div>
44+
<div>66</div>
4545
</div>
4646
`;
4747
const wrapper = container!.querySelector<HTMLElement>(".wrapper")!;
@@ -60,12 +60,12 @@ describe("test InfiniteGrid", () => {
6060
container!.innerHTML = `
6161
<div class="scroller" style="width: 100%; height: 500px;">
6262
<div class="wrapper" style="width: 100%;">
63-
<div>1</div>
64-
<div>2</div>
65-
<div>3</div>
66-
<div>4</div>
67-
<div>5</div>
68-
<div>6</div>
63+
<div>11</div>
64+
<div>22</div>
65+
<div>33</div>
66+
<div>44</div>
67+
<div>55</div>
68+
<div>66</div>
6969
</div>
7070
</div>
7171
`;
@@ -99,12 +99,12 @@ describe("test InfiniteGrid", () => {
9999
// Given
100100
const igContainer = ig!.getContainerElement();
101101

102-
igContainer.innerHTML = `<div>1</div>
103-
<div>2</div>
104-
<div>3</div>
105-
<div>4</div>
106-
<div>5</div>
107-
<div>6</div>`;
102+
igContainer.innerHTML = `<div>11</div>
103+
<div>22</div>
104+
<div>33</div>
105+
<div>44</div>
106+
<div>55</div>
107+
<div>66</div>`;
108108
const children = toArray(igContainer.children);
109109

110110
// When
@@ -134,12 +134,12 @@ describe("test InfiniteGrid", () => {
134134
// Given
135135
const igContainer = ig!.getContainerElement();
136136

137-
igContainer.innerHTML = `<div>1</div>
138-
<div>2</div>
139-
<div>3</div>
140-
<div>4</div>
141-
<div>5</div>
142-
<div>6</div>`;
137+
igContainer.innerHTML = `<div>11</div>
138+
<div>22</div>
139+
<div>33</div>
140+
<div>44</div>
141+
<div>55</div>
142+
<div>66</div>`;
143143
// When
144144
ig!.renderItems();
145145
ig!.removeByIndex(0);
@@ -162,15 +162,19 @@ describe("test InfiniteGrid", () => {
162162
return {
163163
groupKey: Math.floor(child / 3),
164164
key: child,
165-
html: `<div>${child}</div>`,
165+
html: `<div>${child}${child}</div>`,
166166
};
167167
}));
168168
// When
169169
ig!.setCursors(0, 1);
170170

171171
const e = await waitEvent<OnRenderComplete>(ig!, "renderComplete");
172+
172173
const children = toArray(igContainer.children);
173174

175+
ig?.getItems().forEach(itm => {
176+
console.log(itm.cssRect, itm.mountState, itm.updateState);
177+
})
174178
// Then
175179
expect(e.startCursor).to.be.equals(0);
176180
expect(e.endCursor).to.be.equals(1);
@@ -1541,9 +1545,9 @@ describe("test InfiniteGrid", () => {
15411545
// Given
15421546
container!.innerHTML = `
15431547
<div class="wrapper" style="width: 100%; height: 500px;">
1544-
<div>1</div>
1545-
<div>2</div>
1546-
<div>3</div>
1548+
<div>11</div>
1549+
<div>22</div>
1550+
<div>33</div>
15471551
</div>
15481552
`;
15491553
const spy = sinon.spy();
@@ -1574,9 +1578,9 @@ describe("test InfiniteGrid", () => {
15741578
// Given
15751579
container!.innerHTML = `
15761580
<div class="wrapper" style="width: 100%; height: 500px;">
1577-
<div>1</div>
1578-
<div>2</div>
1579-
<div>3</div>
1581+
<div>11</div>
1582+
<div>22</div>
1583+
<div>33</div>
15801584
</div>
15811585
`;
15821586
const wrapper = container!.querySelector<HTMLElement>(".wrapper")!;

‎packages/infinitegrid/test/unit/ScrollManager.spec.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ describe("test ScrollManager", () => {
3131
expect(scrollManager.getScrollContainer().style.overflow).to.be.equals("");
3232
expect(scrollManager.getScrollContainer()).to.be.equals(document.body);
3333
expect(scrollManager.getContentSize()).to.be.equals(400);
34+
3435
});
3536

3637
it("should check if container is virtual container(div) and scrollContainer is wrapper", () => {

0 commit comments

Comments
 (0)