fix(Infinite): fix Infinite recycle point

naver · Mar 9, 2018 · e5b8af3 · e5b8af3
1 parent fc5aea0
commit e5b8af3
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 9 deletions.
diff --git a/src/Infinite.js b/src/Infinite.js
@@ -22,6 +22,7 @@ class Infinite {
 		this.options = Object.assign({
 			useRecycle: true,
 			threshold: 100,
+			horizontal: false,
 		}, options);
 		this._items = itemManger;
 		this.clear();
@@ -89,19 +90,22 @@ class Infinite {
 		const threshold = this.options.threshold;
 		const endScrollPos = scrollPos + size;
 		const targetItem = items.getData(isForward ? endCursor : startCursor);
-		const outlines = targetItem.outlines[isForward ? "end" : "start"];
-		const targetPos = Math[isForward ? "min" : "max"](...outlines);
+		// const outlines = targetItem.outlines[isForward ? "end" : "start"];
+		const edgeItem = targetItem.items[targetItem.outlines[isForward ? "endIndex" : "startIndex"]];
+		const sizeName = this.options.horizontal ? "width" : "height";
+		const posName = this.options.horizontal ? "left" : "top";
+		const edgeItemSize = edgeItem.rect[sizeName] || edgeItem.size[sizeName];
+		const edgePos = isForward ? edgeItem.rect[posName] : edgeItem.rect[posName] + edgeItemSize;
+
+		// Math[isForward ? "min" : "max"](...outlines);
 
 		if (isForward) {
-			if (endScrollPos >= targetPos - threshold) {
+			if (endScrollPos >= edgePos - threshold) {
 				append && append({cache: length > endCursor + 1 && items.getData(endCursor + 1)});
 			}
-		} else if (scrollPos <= targetPos + threshold) {
+		} else if (scrollPos <= edgePos + threshold) {
 			prepend && prepend({cache: (startCursor > 0) && items.getData(startCursor - 1)});
 		}
-		if (!isProcessing) {
-			this.recycle(scrollPos, isForward);
-		}
 	}
 	setCursor(cursor, index) {
 		if (!this.options.useRecycle) {

diff --git a/src/InfiniteGrid.js b/src/InfiniteGrid.js
@@ -23,8 +23,8 @@ import {
 	DEFENSE_BROWSER,
 	IGNORE_CLASSNAME,
 } from "./consts";
-import {toArray, $, innerWidth, innerHeight, matchHTML} from "./utils";
 import Infinite from "./Infinite";
+import {toArray, $, innerWidth, innerHeight, matchHTML} from "./utils";
 
 // IE8
 // https://stackoverflow.com/questions/43216659/babel-ie8-inherit-issue-with-object-create
@@ -130,6 +130,7 @@ class InfiniteGrid extends Component {
 			});
 
 		this._infinite = new Infinite(this._items, {
+			horizontal: this.options.horizontal,
 			useRecycle: this.options.useRecycle,
 			threshold: this.options.threshold,
 			append: param => this._requestAppend(param),

diff --git a/src/Watcher.js b/src/Watcher.js
@@ -96,7 +96,7 @@ export default class Watcher {
 		return this._containerOffset;
 	}
 	_setContainerOffset() {
-		this._containerOffset = this.options.isOverflowScroll ? 0 : this.container[`offset${this.options.isVertical ? "Top" : "Left"}`];
+		this._containerOffset = this.options.isOverflowScroll ? 0 : this.options.container[`offset${this.options.isVertical ? "Top" : "Left"}`];
 	}
 	_onResize() {
 		if (this._timer.resize) {