Merge 407fb99 into 2478f9a

packages/react-infinitegrid/README.md

@@ -3,10 +3,12 @@
 A react component that can easily use [egjs-infinitegrid](https://github.com/naver/egjs-infinitegrid)
 
 * [GridLayout Demo](https://codesandbox.io/s/030opyqkvw)
+* [GridLayout with Parallax Demo](https://codesandbox.io/s/v3y0jr2ony)
 * [JustifiedLayout Demo(typescript)](https://codesandbox.io/s/5w7vrr0kwk)
 * [Youtube Demo](https://codesandbox.io/s/935xz7zy8r)
 * [API Documentation](https://github.com/naver/egjs-infinitegrid/wiki/react-infinitegrid-API-documentation)
 
+
 ## Install
 ```bash
 $ npm install @egjs/react-infinitegrid  --save

packages/react-infinitegrid/declaration/InfiniteGrid.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import {IInfiniteGridItem} from "@egjs/infinitegrid";
 
 interface InfiniteGridProps {
 	tag?: string,
@@ -13,21 +14,63 @@ interface InfiniteGridProps {
 	horizontal?: boolean,
 	loading?: object | boolean,
 	transitionDuration?: number,
-	onAppend?: (param?: any) => void,
-	onPrepend?: (param?: any) => void,
-	onLayoutComplete?: (param?: any) => void,
-	onImageError?: (param?: any) => void,
-	onChange?: (param?: any) => void,
+	onAppend?: (param: OnAppendParameter) => void,
+	onPrepend?: (param: OnPrependParameter) => void,
+	onLayoutComplete?: (param: OnLayoutCompleteParameter) => void,
+	onImageError?: (param: any) => void,
+	onChange?: (param: OnChangeParameter) => void,
 	status?: object,
 	useFit?: boolean,
 	[others: string]: any,
 }
 
+interface OnAppendParameter {
+	currentTarget?: InfiniteGrid;
+	groupKey?: number | string;
+	startLoading?: (loadingStyle: object) => void;
+	endLoading?: (loadingStyle: object) => void;
+}
+interface OnPrependParameter {
+	currentTarget?: InfiniteGrid;
+	groupKey?: number | string;
+	startLoading?: (loadingStyle: object) => void;
+	endLoading?: (loadingStyle: object) => void;
+}
+interface OnChangeParameter {
+	currentTarget?: InfiniteGrid;
+	groupKey?: number | string;
+	isForward?: boolean;
+	horizontal?: boolean;
+	scrollPos?: number;
+	orgScrollPos?: number;
+}
+interface OnImageErrorParameter {
+	currentTarget?: InfiniteGrid;
+	target?: HTMLElement;
+	element?: HTMLElement;
+	item?: IInfiniteGridItem;
+	itemIndex?: number;
+}
+interface OnLayoutCompleteParameter {
+	currentTarget?: InfiniteGrid;
+	fromCache?: boolean;
+	target?: IInfiniteGridItem[];
+	isAppend?: boolean;
+	isTrusted?: boolean;
+	isLayout?: boolean;
+	isScroll?: boolean;
+	scrollPos?: number;
+	orgScrollPos?: number;
+	size?: number;
+	endLoading?: (loadginStyle: object) => void;
+}
+
 declare class InfiniteGrid extends React.Component<InfiniteGridProps> {
 	layout(isRelayout?: boolean): this;
 	resize(): this;
 	setStatus(status: object, applyScrollPos?: boolean): this;
 	getStatus(): object;
+	getItems(includeCached?: boolean): IInfiniteGridItem[];
 	clear(): this;
 }
 declare class GridLayout extends InfiniteGrid {}

packages/react-infinitegrid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@egjs/react-infinitegrid",
-  "version": "1.3.0",
+  "version": "1.4.0-rc3",
   "description": "A react component that can easily use egjs-infinitegrid",
   "types": "declaration/index.d.ts",
   "module": "dist/esm/index.js",
@@ -12,11 +12,11 @@
   "license": "MIT",
   "homepage": "https://github.com/naver/egjs-infinitegrid",
   "dependencies": {
-    "@egjs/infinitegrid": "^3.5.1"
+    "@egjs/infinitegrid": "^3.5.2"
   },
   "peerDependencies": {
-    "react": "^15.4.2 || ^16.0.0",
-    "react-dom": "^15.4.2 || ^16.0.0"
+    "react": "^15.4.2 || ^16.0.0 || ^17.0.0",
+    "react-dom": "^15.4.2 || ^16.0.0 || 17.0.0"
   },
   "keywords": [
     "react",

packages/react-infinitegrid/src/InfiniteGrid.js

@@ -193,6 +193,9 @@ export default class InfiniteGrid extends Component {
 		this._renderer && this._renderer.destroy();
 		this._manager && this._manager.destroy();
 	}
+	getItems(includeCached) {
+		return includeCached ? this._items.pluck("items") : this._infinite.getVisibleItems();
+	}
 	getStatus(startKey = "", endKey = "") {
 		const state = Object.assign({}, this.state);
 		const datas = {};
@@ -654,6 +657,7 @@ export default class InfiniteGrid extends Component {
 			return;
 		}
 		this.props.onAppend({
+			currentTarget: this,
 			groupKey: this.state.endKey,
 			startLoading: loadingStyle => {
 				this.startLoading(true, loadingStyle);
@@ -701,6 +705,7 @@ export default class InfiniteGrid extends Component {
 			this._fit(true);
 		}
 		this.props.onPrepend({
+			currentTarget: this,
 			groupKey: this.state.startKey,
 			startLoading: loadingStyle => {
 				this.startLoading(false, loadingStyle);
@@ -797,12 +802,16 @@ export default class InfiniteGrid extends Component {
 				const component = group ? group.children[index] : -1;
 				const componentIndex = this.state.children.indexOf(component);
 
-				this.props.onImageError({target, element, item, itemIndex: componentIndex});
+				this.props.onImageError({
+					currentTarget: this, target, element, item, itemIndex: componentIndex,
+				});
 			},
 		});
 	}
 	_onCheck({isForward, scrollPos, horizontal, orgScrollPos}) {
-		this.props.onChange({isForward, horizontal, scrollPos, orgScrollPos});
+		this.props.onChange({
+			currentTarget: this, isForward, horizontal, scrollPos, orgScrollPos,
+		});
 		if (this._isProcessing()) {
 			return;
 		}
@@ -882,6 +891,7 @@ export default class InfiniteGrid extends Component {
 			this._infinite.recycle(scrollPos, isAppend);
 		}
 		this.props.onLayoutComplete({
+			currentTarget: this,
 			target: items,
 			fromCache,
 			isAppend,

packages/react-infinitegrid/test/InfiniteGrid.test.js

@@ -128,6 +128,45 @@ describe(`test layout`, function () {
 			});
 		}, 100);
 	});
+	it (`should check getItems method`, async() => {
+		// Given
+		this.el.style.width = "300px";
+		const rendered = ReactDOM.render(<GridLayout className="test1" align="center" isOverflowScroll={true} style={{height: "500px"}}>
+			<div style={{width: "120px", height: "100px"}}></div>
+			<div style={{width: "120px", height: "100px"}}></div>
+			<div style={{width: "120px", height: "200px"}}></div>
+			<div style={{width: "120px", height: "100px"}}></div>
+			<div style={{width: "120px", height: "400px"}}></div>
+			<div style={{width: "120px", height: "440px"}}></div>
+			<div style={{width: "120px", height: "130px"}}></div>
+			<div style={{width: "120px", height: "100px"}}></div>
+
+			<div data-groupkey="1" style={{width: "120px", height: "200px"}}></div>
+			<div data-groupkey="1" style={{width: "120px", height: "100px"}}></div>
+			<div data-groupkey="1" style={{width: "120px", height: "400px"}}></div>
+			<div data-groupkey="1" style={{width: "120px", height: "440px"}}></div>
+			<div data-groupkey="1" style={{width: "120px", height: "130px"}}></div>
+			<div data-groupkey="1" style={{width: "120px", height: "100px"}}></div>
+		</GridLayout>, this.el);
+
+		await wait();
+		// When
+		// all items
+		const items = rendered.getItems(true);
+
+		// group 0's items
+		const items2 = rendered.getItems();
+
+		// group 1's items
+		rendered._infinite.setCursor("start", 1);
+		rendered._infinite.setCursor("end", 1);
+		const items3 = rendered.getItems();
+
+		// Then
+		expect(items.length).to.be.equals(14);
+		expect(items2.length).to.be.equals(8);
+		expect(items3.length).to.be.equals(6);
+	});
 	it (`should check getStatus(startKey, endKey)`, async () => {
 		// Given
 		this.el.style.width = "300px";