fix(react-infinitegrid): fix refresh group (#273)

packages/react-infinitegrid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@egjs/react-infinitegrid",
-  "version": "1.5.0-rc",
+  "version": "1.5.0",
   "description": "A react component that can easily use egjs-infinitegrid",
   "types": "declaration/index.d.ts",
   "module": "dist/esm/index.js",

packages/react-infinitegrid/src/InfiniteGrid.js

@@ -526,6 +526,16 @@ export default class InfiniteGrid extends Component {
 			// update group
 			state.isUpdate = true;
 		}
+		if (!state.layout && !state.isUpdate) {
+			const length = Math.min(prevLength, groups.length);
+
+			for (let i = 0; i < length; ++i) {
+				if (prevGroups[i].groupKey !== groups[i].groupKey) {
+					state.isUpdate = true;
+					break;
+				}
+			}
+		}
 		state.children = propsChildren;
 		state.groupKeys = groupKeys;
 		state.groups = groups;

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

@@ -9,6 +9,8 @@ import Example from "./Example";
 import NoItemExample from "./NoItemExample";
 import EqualSizeExample from "./EqualSizeExample";
 import OneGroupExample from "./OneGroupExample";
+import RefreshExample from "./RefreshExample";
+
 use(matchSnapshot);
 
 
@@ -585,8 +587,37 @@ describe(`test layout`, function () {
 		// changed
 		const positions4 = getPositions(wrapper);
 
+		// Then
 		expect(positions).to.be.eql(positions2);
 		expect(positions2).to.be.not.eql(positions3);
 		expect(positions3).to.be.not.eql(positions4);
 	});
+	it ("should check refreshGroup", async () => {
+		// Given
+		this.el.style.width = "300px";
+		const rendered = ReactDOM.render(<RefreshExample/>, this.el);
+
+
+		// When
+		await wait(300);
+
+		// 1, 2, 3, 4, 5, "100", 6 , 7, 8, ...
+		const arr = toArray(this.el.querySelector(".wrapper").children).map(el => el.dataset.groupkey);
+		const pos = toArray(this.el.querySelector(".wrapper").children).map(el => el.style.top);
+
+
+		rendered.setState({count: 30, j: 3});
+		await wait(300);
+		// change groups' order
+		// 1, 2, 3, "100", 4, 5, 6, 7, 8, ...
+		const arr2 = toArray(this.el.querySelector(".wrapper").children).map(el => el.dataset.groupkey);
+		const pos2 = toArray(this.el.querySelector(".wrapper").children).map(el => el.style.top);
+		// Then
+		// 5 => 3
+		expect(arr[5]).to.be.equals("100");
+		expect(arr[5]).to.be.equals(arr2[3]);
+		expect(arr).to.be.not.eql(arr2);
+		expect(pos[5]).to.be.not.eql(pos2[3]);
+		expect(pos).to.be.not.eql(pos2);
+	});
 });

packages/react-infinitegrid/test/RefreshExample.js

@@ -0,0 +1,37 @@
+import {GridLayout} from "../src";
+import React, {Component} from "react";
+
+function renderItem(i) {
+	return <div key={i} data-groupkey={i} className="item" style={{width: "100%", height: "100px"}}>item{i}</div>;
+}
+function renderSpec() {
+	return <div key={100} data-groupkey="100" className="item itemsp" style={{style: "100%", height: "300px"}}>itemSP</div>;
+}
+function renderItems(count, j) {
+	const arr = [];
+
+	for (let i = 0; i < count; ++i) {
+		arr[i] = renderItem(i);
+	}
+
+	arr.splice(j, 0, renderSpec());
+
+	return arr;
+}
+
+export default class Exmaple extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			count: 30,
+			j: 5,
+		};
+	}
+
+
+	render() {
+		return (<GridLayout className="wrapper">
+			{renderItems(this.state.count, this.state.j)}
+		</GridLayout>);
+	}
+}