Merge b5916c5 into 72042fb

naver · Jan 9, 2019 · 5c8b0f9 · 5c8b0f9
2 parents 72042fb + b5916c5
commit 5c8b0f9
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 15 deletions.
diff --git a/packages/react-infinitegrid/__snapshots__/test layout.md b/packages/react-infinitegrid/__snapshots__/test layout.md
@@ -42,6 +42,18 @@
 
 #### `should check getStatus and call setStatus method`
 
+```
+"<div class=\"test1\" style=\"height: 500px; position: relative; overflow: hidden scroll;\">
+<div class=\"_eg-infinitegrid-container_\">
+<div class=\"testtarget\" 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></div>"
+```
+
 ```
 Object {
   "_infinite": Object {
@@ -623,13 +635,13 @@ Object {
 ```
 "<div class=\"test1\" style=\"height: 500px; position: relative; overflow: hidden scroll;\">
 <div class=\"_eg-infinitegrid-container_\" style=\"height: 740px;\">
-<div class=\"testtarget\" data-groupkey=\"0\" style=\"width: 120px; height: 100px; position: absolute; left: 30px; top: 0px;\"></div>
-<div data-groupkey=\"0\" style=\"width: 120px; height: 200px; position: absolute; left: 150px; top: 0px;\"></div>
-<div data-groupkey=\"0\" style=\"width: 120px; height: 100px; position: absolute; left: 30px; top: 100px;\"></div>
-<div data-groupkey=\"0\" style=\"width: 120px; height: 400px; position: absolute; left: 30px; top: 200px;\"></div>
-<div data-groupkey=\"0\" style=\"width: 120px; height: 440px; position: absolute; left: 150px; top: 200px;\"></div>
-<div data-groupkey=\"0\" style=\"width: 120px; height: 130px; position: absolute; left: 30px; top: 600px;\"></div>
-<div data-groupkey=\"0\" style=\"width: 120px; height: 100px; position: absolute; left: 150px; top: 640px;\"></div></div></div>"
+<div class=\"testtarget\" style=\"width: 120px; height: 100px; position: absolute; left: 30px; top: 0px;\" data-groupkey=\"0\"></div>
+<div style=\"width: 120px; height: 200px; position: absolute; left: 150px; top: 0px;\" data-groupkey=\"0\"></div>
+<div style=\"width: 120px; height: 100px; position: absolute; left: 30px; top: 100px;\" data-groupkey=\"0\"></div>
+<div style=\"width: 120px; height: 400px; position: absolute; left: 30px; top: 200px;\" data-groupkey=\"0\"></div>
+<div style=\"width: 120px; height: 440px; position: absolute; left: 150px; top: 200px;\" data-groupkey=\"0\"></div>
+<div style=\"width: 120px; height: 130px; position: absolute; left: 30px; top: 600px;\" data-groupkey=\"0\"></div>
+<div style=\"width: 120px; height: 100px; position: absolute; left: 150px; top: 640px;\" data-groupkey=\"0\"></div></div></div>"
 ```
 
 #### `should check getStatus and setStatus`
@@ -1363,17 +1375,17 @@ Object {
 ```
 "<div style=\"height: 600px; position: relative; overflow: hidden scroll;\">
 <div class=\"_eg-infinitegrid-container_\">
-<div class=\"item\" style=\"width: 100px; height: 100px;\">item1</div>
-<div class=\"item\" style=\"width: 100px; height: 200px;\">item1</div>
-<div class=\"item\" style=\"width: 100px; height: 300px;\">item1</div></div></div>"
+<div class=\"item\" data-groupkey=\"1\" style=\"width: 100px; height: 100px; position: absolute; left: -999999px; top: -999999px;\">item1</div>
+<div class=\"item\" data-groupkey=\"1\" style=\"width: 100px; height: 200px; position: absolute; left: -999999px; top: -999999px;\">item1</div>
+<div class=\"item\" data-groupkey=\"1\" style=\"width: 100px; height: 300px; position: absolute; left: -999999px; top: -999999px;\">item1</div></div></div>"
 ```
 
 ```
 "<div style=\"height: 600px; position: relative; overflow: hidden scroll;\">
 <div class=\"_eg-infinitegrid-container_\" style=\"height: 1100px;\">
-<div class=\"item\" style=\"width: 100px; height: 100px; position: absolute; left: 0px; top: 0px;\" data-groupkey=\"1\">item1</div>
-<div class=\"item\" style=\"width: 100px; height: 200px; position: absolute; left: 100px; top: 0px;\" data-groupkey=\"1\">item1</div>
-<div class=\"item\" style=\"width: 100px; height: 300px; position: absolute; left: 200px; top: 0px;\" data-groupkey=\"1\">item1</div>
+<div class=\"item\" data-groupkey=\"1\" style=\"width: 100px; height: 100px; position: absolute; left: 0px; top: 0px;\">item1</div>
+<div class=\"item\" data-groupkey=\"1\" style=\"width: 100px; height: 200px; position: absolute; left: 100px; top: 0px;\">item1</div>
+<div class=\"item\" data-groupkey=\"1\" style=\"width: 100px; height: 300px; position: absolute; left: 200px; top: 0px;\">item1</div>
 <div class=\"item\" data-groupkey=\"2\" style=\"width: 100px; height: 100px; position: absolute; left: 300px; top: 0px;\">item2</div>
 <div class=\"item\" data-groupkey=\"2\" style=\"width: 100px; height: 200px; position: absolute; left: 400px; top: 0px;\">item2</div>
 <div class=\"item\" data-groupkey=\"2\" style=\"width: 100px; height: 300px; position: absolute; left: 0px; top: 100px;\">item2</div>

diff --git a/packages/react-infinitegrid/package.json b/packages/react-infinitegrid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@egjs/react-infinitegrid",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "description": "A react component that can easily use egjs-infinitegrid",
   "types": "declaration/index.d.ts",
   "module": "dist/esm/index.js",

diff --git a/packages/react-infinitegrid/src/InfiniteGrid.js b/packages/react-infinitegrid/src/InfiniteGrid.js
@@ -73,6 +73,7 @@ export default class InfiniteGrid extends Component {
 		const LayoutType = this.props.type;
 
 		this.clear();
+		this.state.isFirstRender = true;
 		const options = {};
 		const layoutProps = this.constructor.layoutProps;
 
@@ -316,7 +317,8 @@ export default class InfiniteGrid extends Component {
 			processing: DONE,
 			layout: false,
 			datas: {},
-			isFirstRender: true,
+			// Set isFirstRender to false when calling clear dynamically.
+			isFirstRender: false,
 			isUpdate: false,
 		};
 		if (this._infinite) {
@@ -989,7 +991,11 @@ export default class InfiniteGrid extends Component {
 
 		const items = this._getVisibleItems();
 		const status = this.props.status;
+		const length = items.length;
 
+		if (!length) {
+			this.state.isFirstRender = false;
+		}
 		if (status) {
 			this.setStatus(status);
 		} else if (items.length) {

diff --git a/packages/react-infinitegrid/test/InfiniteGrid.test.js b/packages/react-infinitegrid/test/InfiniteGrid.test.js
@@ -65,6 +65,8 @@ describe(`test layout`, function () {
 			<div style={{width: "120px", height: "130px"}}></div>
 			<div style={{width: "120px", height: "100px"}}></div>
 		</GridLayout>, this.el);
+		expect(cleanHTML(this.el.innerHTML)).to.matchSnapshot();
+
 		setTimeout(() => {
 			const status = rendered.getStatus();
 			const html = this.el.innerHTML;