From be7ac53ea1aaa3b8da4feb324290ef88f8a82d0d Mon Sep 17 00:00:00 2001 From: Younkue Date: Tue, 19 Jun 2018 12:05:39 +0900 Subject: [PATCH 1/4] fix(react-infinitegrid): fix size error --- packages/react-infinitegrid/package.json | 2 +- .../react-infinitegrid/src/InfiniteGrid.js | 28 +++++++++++++++++-- 2 files changed, 27 insertions(+), 3 deletions(-) diff --git a/packages/react-infinitegrid/package.json b/packages/react-infinitegrid/package.json index e849c0095..6c07530b5 100644 --- a/packages/react-infinitegrid/package.json +++ b/packages/react-infinitegrid/package.json @@ -1,6 +1,6 @@ { "name": "@egjs/react-infinitegrid", - "version": "1.0.0", + "version": "1.0.2", "description": "A react component that can easily use egjs-infinitegrid", "types": "declaration/index.d.ts", "main": "dist/index.js", diff --git a/packages/react-infinitegrid/src/InfiniteGrid.js b/packages/react-infinitegrid/src/InfiniteGrid.js index 86655191f..2c93d2257 100644 --- a/packages/react-infinitegrid/src/InfiniteGrid.js +++ b/packages/react-infinitegrid/src/InfiniteGrid.js @@ -24,6 +24,13 @@ function newItem(groupKey, key, itemIndex) { function makeKey(component, groupKey, itemIndex) { return component.key || `__egjs_infinitegrid_${groupKey}_${itemIndex}`; } +function _updateSize(items) { + // DOMRenderer temporary code + items.forEach(item => { + item.size.width = parseInt(item.size.width, 10); + item.size.height = parseInt(item.size.height, 10); + }); +} export default class InfiniteGrid extends Component { static propTypes = { tag: PropTypes.string, @@ -243,6 +250,11 @@ export default class InfiniteGrid extends Component { watcher.setStatus(_watcher, applyScrollPos); watcher.attachEvent(); + ItemManager.pluck(state.groups, "items").forEach(item => { + if (!item.orgSize || item.rect.top < DUMMY_POSITION / 10) { + item.mount = false; + } + }); if (isReLayout) { renderer.resize(); this._setSize(renderer.getViewportSize()); @@ -471,16 +483,21 @@ export default class InfiniteGrid extends Component { return item.orgSize && item.rect.top > DUMMY_POSITION / 10; }); + + if (!layoutGroups.length) { + return []; + } let outline = layoutGroups[0].outlines.start; if (isRelayout) { outline = [outline.length ? Math.min(...outline) : 0]; if (!isConstantSize && items.length) { renderer.updateSize(items); + _updateSize(items); } } this._layout.layout(layoutGroups, outline); - return this; + return layoutGroups; } _clearOutlines(startCursor = -1, endCursor = -1) { const datas = this._items.get(); @@ -523,7 +540,13 @@ export default class InfiniteGrid extends Component { itemManager.get(startCursor, isRelayout && isResize ? endCursor : itemManager.size()); // LayoutManger interface - this._relayout(isRelayout, data, isResize ? items : []); + const layoutGroups = this._relayout(isRelayout, data, isResize ? items : []); + + if (!layoutGroups.length) { + this.state.requestIndex = 0; + this._insert(true); + return this; + } if (isLayoutAll) { this._fit(); } else if (isRelayout && isResize) { @@ -712,6 +735,7 @@ export default class InfiniteGrid extends Component { return; } this._renderer.updateSize(items); + _updateSize(items); const cursor = isAppend ? "end" : "start"; const prevGroup = state.groups[groups[0].index + (isAppend ? -1 : 1)]; let outline = prevGroup ? prevGroup.outlines[cursor] : [0]; From 1c176716c8de064f820b793f564a256f3b013c9f Mon Sep 17 00:00:00 2001 From: Younkue Date: Fri, 22 Jun 2018 17:27:05 +0900 Subject: [PATCH 2/4] feat(react-infinitegrid): add resize method --- .../declaration/InfiniteGrid.d.ts | 1 + packages/react-infinitegrid/package-lock.json | 8 +- packages/react-infinitegrid/package.json | 4 +- .../react-infinitegrid/src/InfiniteGrid.js | 6 + .../test/InfiniteGrid.test.js | 293 +++++++++--------- .../react-infinitegrid/test/TestHelper.js | 8 +- 6 files changed, 159 insertions(+), 161 deletions(-) diff --git a/packages/react-infinitegrid/declaration/InfiniteGrid.d.ts b/packages/react-infinitegrid/declaration/InfiniteGrid.d.ts index 74e868163..e492946dc 100644 --- a/packages/react-infinitegrid/declaration/InfiniteGrid.d.ts +++ b/packages/react-infinitegrid/declaration/InfiniteGrid.d.ts @@ -23,6 +23,7 @@ interface InfiniteGridProps { declare class InfiniteGrid extends React.Component { layout(isRelayout?: boolean): this; + resize(): this; setStatus(status: object, applyScrollPos?: boolean): this; getStatus(): object; clear(): this; diff --git a/packages/react-infinitegrid/package-lock.json b/packages/react-infinitegrid/package-lock.json index 48252e482..938cbbec8 100644 --- a/packages/react-infinitegrid/package-lock.json +++ b/packages/react-infinitegrid/package-lock.json @@ -1,6 +1,6 @@ { "name": "@egjs/react-infinitegrid", - "version": "1.0.0", + "version": "1.0.2", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -206,9 +206,9 @@ } }, "@egjs/infinitegrid": { - "version": "3.3.5", - "resolved": "https://registry.npmjs.org/@egjs/infinitegrid/-/infinitegrid-3.3.5.tgz", - "integrity": "sha512-ZNkWD/6Mh6y0mjpWF/siLDuOPWP5i1OEoLFGaZ2Mn93Kxtf4oV5fY4GL7ZLR+H0T4CmQ82A00rZdDdSofls2dA==", + "version": "3.3.6", + "resolved": "https://registry.npmjs.org/@egjs/infinitegrid/-/infinitegrid-3.3.6.tgz", + "integrity": "sha512-I7eq6l89KDg0c9h0/I6mj74Y8fJ4R7eqjuld7T3urtkqODbGQHbEeP2/ZzIydwSc8dBwJ1eWJJyUekwGFUDahw==", "requires": { "@egjs/component": "2.1.1" } diff --git a/packages/react-infinitegrid/package.json b/packages/react-infinitegrid/package.json index 6c07530b5..ae9ebd4a3 100644 --- a/packages/react-infinitegrid/package.json +++ b/packages/react-infinitegrid/package.json @@ -1,6 +1,6 @@ { "name": "@egjs/react-infinitegrid", - "version": "1.0.2", + "version": "1.1.0", "description": "A react component that can easily use egjs-infinitegrid", "types": "declaration/index.d.ts", "main": "dist/index.js", @@ -10,7 +10,7 @@ "license": "MIT", "homepage": "https://github.com/naver/egjs-infinitegrid", "dependencies": { - "@egjs/infinitegrid": "^3.3.5" + "@egjs/infinitegrid": "^3.3.6" }, "peerDependencies": { "react": "^15.4.2 || ^16.0.0", diff --git a/packages/react-infinitegrid/src/InfiniteGrid.js b/packages/react-infinitegrid/src/InfiniteGrid.js index 2c93d2257..f08bc2cbd 100644 --- a/packages/react-infinitegrid/src/InfiniteGrid.js +++ b/packages/react-infinitegrid/src/InfiniteGrid.js @@ -514,6 +514,12 @@ export default class InfiniteGrid extends Component { group.outlines.end = []; }); } + resize() { + this._watcher.resize(); + if (this._renderer.isNeededResize()) { + this.layout(true); + } + } layout(isRelayout = true) { if (!this._layout) { return this; diff --git a/packages/react-infinitegrid/test/InfiniteGrid.test.js b/packages/react-infinitegrid/test/InfiniteGrid.test.js index a77cb91da..6939b4158 100644 --- a/packages/react-infinitegrid/test/InfiniteGrid.test.js +++ b/packages/react-infinitegrid/test/InfiniteGrid.test.js @@ -4,7 +4,7 @@ import ReactDOM from "react-dom"; import {GridLayout} from "../src/index"; import {use, expect, assert} from "chai"; import { matchSnapshot } from "chai-karma-snapshot"; -import {cleanHTML, awaitTimer, concatItems} from "./TestHelper"; +import {cleanHTML, concatItems, wait} from "./TestHelper"; import Example from "./Example"; import NoItemExample from "./NoItemExample"; import EqualSizeExample from "./EqualSizeExample"; @@ -106,18 +106,11 @@ describe(`test layout`, function () {
, this.el); - let status; - let html; - let status2; - let html2; - let status3; - let html3; - // When - await awaitTimer(() => { - status = rendered.getStatus("2", "3"); - html = cleanHTML(this.el.innerHTML); - }, 100); + await wait(); + const status = rendered.getStatus("2", "3"); + const html = cleanHTML(this.el.innerHTML); + this.el = sandbox({ id: "__react-content", @@ -133,10 +126,9 @@ describe(`test layout`, function () {
, this.el); - await awaitTimer(() => { - status2 = rendered2.getStatus("2", "3"); - html2 = cleanHTML(this.el.innerHTML); - }, 100); + await wait(); + const status2 = rendered2.getStatus("2", "3"); + const html2 = cleanHTML(this.el.innerHTML); this.el = sandbox({ id: "__react-content", @@ -149,10 +141,9 @@ describe(`test layout`, function () {
, this.el); - await awaitTimer(() => { - status3 = rendered3.getStatus("2", "3"); - html3 = cleanHTML(this.el.innerHTML); - }, 100); + await wait(); + const status3 = rendered3.getStatus("2", "3"); + const html3 = cleanHTML(this.el.innerHTML); // Then try { @@ -176,33 +167,29 @@ describe(`test layout`, function () { console.error(e); } }); - it (`should check scroll`, done => { + it (`should check scroll`, async() => { this.el.style.width = "300px"; const rendered = ReactDOM.render(, this.el); rendered.grid._container.scrollTop = 0; - setTimeout(() => { - const html = cleanHTML(this.el.innerHTML); - const groups = rendered.grid.state.groups.length; - const startIndex = rendered.grid.state.startIndex; - const endIndex = rendered.grid.state.endIndex; - - - rendered.grid._container.scrollTop = 1000; - setTimeout(() => { - const html2 = cleanHTML(this.el.innerHTML); - - expect(groups).to.be.equals(5); - expect(startIndex).to.be.equals(0); - expect(endIndex).to.be.equals(4); - expect(html).to.matchSnapshot(); - expect(html2).to.matchSnapshot(); - - done(); - }, 600); - }, 100); + await wait(); + const html = cleanHTML(this.el.innerHTML); + const groups = rendered.grid.state.groups.length; + const startIndex = rendered.grid.state.startIndex; + const endIndex = rendered.grid.state.endIndex; + + + rendered.grid._container.scrollTop = 1000; + await wait(600); + const html2 = cleanHTML(this.el.innerHTML); + + expect(groups).to.be.equals(5); + expect(startIndex).to.be.equals(0); + expect(endIndex).to.be.equals(4); + expect(html).to.matchSnapshot(); + expect(html2).to.matchSnapshot(); }); it ("should check layout method and event", done => { // Given @@ -237,7 +224,7 @@ describe(`test layout`, function () { rendered.layout(true); }, 200); }); - it ("should check test no item", done => { + it ("should check test no item", async() => { this.el.style.width = "300px"; const rendered = ReactDOM.render(, this.el); @@ -249,43 +236,41 @@ describe(`test layout`, function () { rendered.setState({mount: true}); - setTimeout(() => { - const html2 = cleanHTML(this.el.innerHTML); - const state2 = Object.assign({}, rendered.grid.state); + await wait(); + const html2 = cleanHTML(this.el.innerHTML); + const state2 = Object.assign({}, rendered.grid.state); - rendered.setState({mount: false}); - setTimeout(() => { - const html3 = cleanHTML(this.el.innerHTML); - const state3 = Object.assign({}, rendered.grid.state); + rendered.setState({mount: false}); - // Then - expect(html).to.matchSnapshot(); - expect(html2).to.matchSnapshot(); - expect(html3).to.matchSnapshot(); - - expect(state1.groups.length).to.be.equals(0); - expect(state1.startKey).to.be.equals(""); - expect(state1.endKey).to.be.equals(""); - expect(state1.startIndex).to.be.equals(-1); - expect(state1.endIndex).to.be.equals(-1); - - expect(state2.groups.length).to.be.equals(2); - expect(state2.startKey).to.be.equals("1"); - expect(state2.endKey).to.be.equals("2"); - expect(state2.startIndex).to.be.equals(0); - expect(state2.endIndex).to.be.equals(1); - - expect(state3.groups.length).to.be.equals(0); - expect(state3.startKey).to.be.equals(""); - expect(state3.endKey).to.be.equals(""); - expect(state3.startIndex).to.be.equals(-1); - expect(state3.endIndex).to.be.equals(-1); - expect(html).to.be.equals(html3); - done(); - }, 100); - }, 100); + await wait(); + const html3 = cleanHTML(this.el.innerHTML); + const state3 = Object.assign({}, rendered.grid.state); + + // Then + expect(html).to.matchSnapshot(); + expect(html2).to.matchSnapshot(); + expect(html3).to.matchSnapshot(); + + expect(state1.groups.length).to.be.equals(0); + expect(state1.startKey).to.be.equals(""); + expect(state1.endKey).to.be.equals(""); + expect(state1.startIndex).to.be.equals(-1); + expect(state1.endIndex).to.be.equals(-1); + + expect(state2.groups.length).to.be.equals(2); + expect(state2.startKey).to.be.equals("1"); + expect(state2.endKey).to.be.equals("2"); + expect(state2.startIndex).to.be.equals(0); + expect(state2.endIndex).to.be.equals(1); + + expect(state3.groups.length).to.be.equals(0); + expect(state3.startKey).to.be.equals(""); + expect(state3.endKey).to.be.equals(""); + expect(state3.startIndex).to.be.equals(-1); + expect(state3.endIndex).to.be.equals(-1); + expect(html).to.be.equals(html3); }); - it ("should check test one item", done => { + it ("should check test one item", async () => { // Given this.el.style.width = "300px"; const rendered = ReactDOM.render( @@ -295,43 +280,37 @@ describe(`test layout`, function () { const state = Object.assign({}, rendered.state); // Then - setTimeout(() => { - expect(html).to.matchSnapshot(); - expect(this.el.innerHTML).to.matchSnapshot(); - expect(state.groups.length).to.be.equals(1); - expect(state.startKey).to.be.equals("1"); - expect(state.endKey).to.be.equals("1"); - expect(state.startIndex).to.be.equals(0); - expect(state.endIndex).to.be.equals(0); - done(); - }, 100); + await wait(); + expect(html).to.matchSnapshot(); + expect(this.el.innerHTML).to.matchSnapshot(); + expect(state.groups.length).to.be.equals(1); + expect(state.startKey).to.be.equals("1"); + expect(state.endKey).to.be.equals("1"); + expect(state.startIndex).to.be.equals(0); + expect(state.endIndex).to.be.equals(0); }); - it ("should check test no item and onAppend", done => { + it ("should check test no item and onAppend", async() => { const onAppend = sinon.spy(); const rendered = ReactDOM.render(, this.el); const callCount = onAppend.callCount; const html = cleanHTML(this.el.innerHTML); - setTimeout(() => { - const callCount2 = onAppend.callCount; - const html2 = cleanHTML(this.el.innerHTML); - rendered.setState({list: []}); + await wait(); + const callCount2 = onAppend.callCount; + const html2 = cleanHTML(this.el.innerHTML); + rendered.setState({list: []}); - setTimeout(() => { - const callCount3 = onAppend.callCount; - const html3 = cleanHTML(this.el.innerHTML); - - expect(callCount < callCount2).to.be.true; - expect(callCount2 < callCount3).to.be.true; - expect(html).to.matchSnapshot(); - expect(html2).to.matchSnapshot(); - expect(html3).to.matchSnapshot(); - expect(html2).to.be.equals(html3); - done(); - }, 100); + await wait(); + const callCount3 = onAppend.callCount; + const html3 = cleanHTML(this.el.innerHTML); - }, 100); + expect(callCount < callCount2).to.be.true; + expect(callCount2 < callCount3).to.be.true; + expect(html).to.matchSnapshot(); + expect(html2).to.matchSnapshot(); + expect(html3).to.matchSnapshot(); + expect(html2).to.be.equals(html3); }); it ("should check layout with resize", done => { const onLayoutComplete = sinon.spy(e => { @@ -353,65 +332,53 @@ describe(`test layout`, function () { // When rendered.setState({layout: true}); }); - it ("should check isEqaulSize option", done => { + it ("should check isEqaulSize option", async() => { // Given const rendered = ReactDOM.render(, this.el); - setTimeout(() => { - const html = cleanHTML(this.el.innerHTML); - const sizes = rendered.grid.state.groups[0].items.map(item => Object.assign({}, item.size)); - // When - rendered.setState({mount: true}); - --rendered.grid._renderer._size.viewport; - rendered.grid.layout(true); + await wait(); + + const html = cleanHTML(this.el.innerHTML); + const sizes = rendered.grid.state.groups[0].items.map(item => Object.assign({}, item.size)); + // When + rendered.setState({mount: true}); + --rendered.grid._renderer._size.viewport; + rendered.grid.layout(true); - setTimeout(() => { - const sizes2 = rendered.grid.state.groups[0].items.map(item => Object.assign({}, item.size)); - const html2 = cleanHTML(this.el.innerHTML); - - - expect(html).to.matchSnapshot(); - expect(html2).to.matchSnapshot(); - sizes.forEach(size => { - expect(size).to.be.deep.equals({width: 150, height: 120}); - }); - sizes2.forEach(size => { - expect(size).to.be.deep.equals({width: 100, height: 100}); - }) - done(); - }, 100) - }, 100); + await wait(); + const sizes2 = rendered.grid.state.groups[0].items.map(item => Object.assign({}, item.size)); + const html2 = cleanHTML(this.el.innerHTML); + + + expect(html).to.matchSnapshot(); + expect(html2).to.matchSnapshot(); + sizes.forEach(size => { + expect(size).to.be.deep.equals({width: 150, height: 120}); + }); + sizes2.forEach(size => { + expect(size).to.be.deep.equals({width: 100, height: 100}); + }); }); it("should check one groupKey", async () => { const rendered = ReactDOM.render(, this.el); const html = cleanHTML(this.el.innerHTML); - let html2; - let html3; - let html4; - - // when const height = 0; - let height2; - let height3; - let height4; rendered.append(); - await awaitTimer(() => { - html2 = cleanHTML(this.el.innerHTML); - height2 = Math.max(...rendered.grid.state.groups[0].outlines.end); - rendered.append(); - }); - await awaitTimer(() => { - html3 = cleanHTML(this.el.innerHTML); - height3 = Math.max(...rendered.grid.state.groups[0].outlines.end); - rendered.append(); - }); - await awaitTimer(() => { - html4 = cleanHTML(this.el.innerHTML); - height4 = Math.max(...rendered.grid.state.groups[0].outlines.end); - }) + await wait(); + const html2 = cleanHTML(this.el.innerHTML); + const height2 = Math.max(...rendered.grid.state.groups[0].outlines.end); + rendered.append(); + await wait(); + const html3 = cleanHTML(this.el.innerHTML); + const height3 = Math.max(...rendered.grid.state.groups[0].outlines.end); + rendered.append(); + await wait(); + const html4 = cleanHTML(this.el.innerHTML); + const height4 = Math.max(...rendered.grid.state.groups[0].outlines.end); + // then console.log(height2, height3, height4); expect(html).to.matchSnapshot(); @@ -424,4 +391,30 @@ describe(`test layout`, function () { expect(height3).to.be.above(height2); expect(height4).to.be.above(height3); }); + it("should check watcher offset", async () => { + // Given + let grid; + const rendered = ReactDOM.render( +
+ (grid = e)}> +
1
+ +
, this.el); + + await wait(); + + // When + const offset1 = grid._watcher.getContainerOffset(); + + rendered.style.top = "200px"; + const offset2 = grid._watcher.getContainerOffset(); + + grid.resize(); + const offset3 = grid._watcher.getContainerOffset(); + + // Then + expect(offset1).to.be.equals(400); + expect(offset2).to.be.equals(400); + expect(offset3).to.be.equals(200); + }); }); \ No newline at end of file diff --git a/packages/react-infinitegrid/test/TestHelper.js b/packages/react-infinitegrid/test/TestHelper.js index de3eeb4f3..68f8a1d96 100644 --- a/packages/react-infinitegrid/test/TestHelper.js +++ b/packages/react-infinitegrid/test/TestHelper.js @@ -1,13 +1,11 @@ export function cleanHTML(html) { return html.replace(/(\>)(\<[^\/])/g, "$1\n$2"); } -export function awaitTimer(callback, delay = 100) { +export function wait(time = 100) { return new Promise(resolve => { setTimeout(() => { - const rv = callback(); - - resolve(rv); - }, delay); + resolve(); + }, time); }); } export function itemToArray(item) { From 8413338c7341887104672c0fa8d98a9c3c806a61 Mon Sep 17 00:00:00 2001 From: Younkue Date: Tue, 26 Jun 2018 13:14:51 +0900 Subject: [PATCH 3/4] fix(react-infinitegrid): fix useFit and setStatus --- packages/react-infinitegrid/package.json | 2 +- .../react-infinitegrid/src/InfiniteGrid.js | 27 ++++++++++++------- 2 files changed, 19 insertions(+), 10 deletions(-) diff --git a/packages/react-infinitegrid/package.json b/packages/react-infinitegrid/package.json index ae9ebd4a3..8686816f4 100644 --- a/packages/react-infinitegrid/package.json +++ b/packages/react-infinitegrid/package.json @@ -1,6 +1,6 @@ { "name": "@egjs/react-infinitegrid", - "version": "1.1.0", + "version": "1.1.2", "description": "A react component that can easily use egjs-infinitegrid", "types": "declaration/index.d.ts", "main": "dist/index.js", diff --git a/packages/react-infinitegrid/src/InfiniteGrid.js b/packages/react-infinitegrid/src/InfiniteGrid.js index f08bc2cbd..d0dd6051d 100644 --- a/packages/react-infinitegrid/src/InfiniteGrid.js +++ b/packages/react-infinitegrid/src/InfiniteGrid.js @@ -165,7 +165,7 @@ export default class InfiniteGrid extends Component { } else { const scrollPos = this._watcher.getScrollPos(); - this._scroll(scrollPos, true); + this._scroll(scrollPos); } } } @@ -250,7 +250,9 @@ export default class InfiniteGrid extends Component { watcher.setStatus(_watcher, applyScrollPos); watcher.attachEvent(); - ItemManager.pluck(state.groups, "items").forEach(item => { + const items = ItemManager.pluck(state.groups, "items"); + + items.forEach(item => { if (!item.orgSize || item.rect.top < DUMMY_POSITION / 10) { item.mount = false; } @@ -262,8 +264,9 @@ export default class InfiniteGrid extends Component { this.layout(true); } else { this._clearOutlines(); + items.forEach(item => { item.mount = false; }); state.processing |= APPEND; - state.requestIndex = 0; + state.requestIndex = Math.max(0, state.startIndex); this._insert(true); } } else { @@ -689,12 +692,12 @@ export default class InfiniteGrid extends Component { base < 0 && this._watcher.scrollBy(-base); } // called by visible - _fit(useFit = this.props.useFit) { + _fit(isForce) { let base = this._getEdgeValue("start"); const margin = (this._loading && this._loading.getSize(false)) || 0; - const {isConstantSize, isEqualSize, useRecycle} = this.props; + const {isConstantSize, isEqualSize, useRecycle, useFit} = this.props; - if (!useRecycle || !useFit || isConstantSize || isEqualSize) { + if (!isForce && (!useRecycle || !useFit || isConstantSize || isEqualSize)) { if (base < margin) { this._fitItems(base - margin, margin); } @@ -783,10 +786,10 @@ export default class InfiniteGrid extends Component { } _onCheck({isForward, scrollPos, horizontal, orgScrollPos}) { this.props.onChange({isForward, horizontal, scrollPos, orgScrollPos}); - this._scroll(scrollPos, isForward); + this._scroll(scrollPos); } // Infinite interface for isEqualSize or isConstantSize - _scroll(scrollPos, isForward) { + _scroll(scrollPos) { const startCursor = this._infinite.getCursor("start"); const endCursor = this._infinite.getCursor("end"); @@ -807,6 +810,12 @@ export default class InfiniteGrid extends Component { const prepend = this._requestPrepend; const datas = items.get(); const endScrollPos = Math.max(scrollPos, 0) + size; + const startItem = datas[startCursor]; + const endItem = datas[endCursor]; + + if (!startItem || !endItem) { + return; + } const startEdgePos = Math.max(...datas[startCursor].outlines.start); const endEdgePos = Math.min(...datas[endCursor].outlines.end); const visibles = datas.map((group, i) => { @@ -974,7 +983,7 @@ export default class InfiniteGrid extends Component { if (groups.length) { const scrollPos = this._watcher.getScrollPos(); - this._scroll(scrollPos, true); + this._scroll(scrollPos); } else { this._requestAppend({}); } From 99266fa32162b46937f1306fa80821efc8aba95c Mon Sep 17 00:00:00 2001 From: Younkue Date: Fri, 29 Jun 2018 16:34:16 +0900 Subject: [PATCH 4/4] fix(react-infinitegrid): fix refreshgroups --- packages/react-infinitegrid/package.json | 2 +- .../react-infinitegrid/src/InfiniteGrid.js | 43 +++++++++++++++---- 2 files changed, 36 insertions(+), 9 deletions(-) diff --git a/packages/react-infinitegrid/package.json b/packages/react-infinitegrid/package.json index 8686816f4..0fb1cdbbf 100644 --- a/packages/react-infinitegrid/package.json +++ b/packages/react-infinitegrid/package.json @@ -1,6 +1,6 @@ { "name": "@egjs/react-infinitegrid", - "version": "1.1.2", + "version": "1.1.3", "description": "A react component that can easily use egjs-infinitegrid", "types": "declaration/index.d.ts", "main": "dist/index.js", diff --git a/packages/react-infinitegrid/src/InfiniteGrid.js b/packages/react-infinitegrid/src/InfiniteGrid.js index d0dd6051d..632fac052 100644 --- a/packages/react-infinitegrid/src/InfiniteGrid.js +++ b/packages/react-infinitegrid/src/InfiniteGrid.js @@ -99,11 +99,12 @@ export default class InfiniteGrid extends Component { if (nextState.processing & (APPEND | PREPEND) || nextState.layout) { return true; } - const children = Children.toArray(this.state.children); + const children = this.state.children; const nextChildren = Children.toArray(props.children); const length = children.length; + const nextLength = nextChildren.length; - if (length !== nextChildren.length || + if (length !== nextLength || (length && !children.every((component, i) => { const nextComponent = nextChildren[i]; const key = component.key; @@ -118,6 +119,8 @@ export default class InfiniteGrid extends Component { nextState.requestIndex = 0; } this._refreshGroups(nextChildren, nextState); + } else if (length && length === nextLength) { + this._refreshChildren(nextChildren, nextState); } return true; } @@ -175,7 +178,6 @@ export default class InfiniteGrid extends Component { componentWillUnmount() { this.clear(); this._container = null; - this._infinite && this._infinite.clear(); this._watcher && this._watcher.destroy(); this._items && this._items.clear(); this._renderer && this._renderer.destroy(); @@ -289,6 +291,10 @@ export default class InfiniteGrid extends Component { datas: {}, isUpdate: false, }; + if (this._infinite) { + this._infinite.clear(); + this._setSize(); + } return this; } _mountElement = (itemKey, element) => { @@ -359,6 +365,25 @@ export default class InfiniteGrid extends Component { _getVisibleItems() { return ItemManager.pluck(this._getVisibleGroups(), "items"); } + _refreshChildren(propsChildren = Children.toArray(this.props.children), state = this.state) { + const {groupKeys, groups} = state; + + groups.forEach(group => { + group.children = []; + }); + propsChildren.forEach(item => { + const props = item.props; + const groupKey = props.groupKey || props["data-groupkey"] || 0; + const group = groupKeys[groupKey]; + + if (!group) { + return; + } + group.children.push(item); + }); + + state.children = propsChildren; + } _refreshGroups(propsChildren = Children.toArray(this.props.children), state = this.state) { if (!propsChildren) { return; @@ -431,6 +456,10 @@ export default class InfiniteGrid extends Component { startIndex = groupKeys[groupKey].index; } }); + if (startIndex === -1 && groups[0]) { + startKey = groups[0].groupKey; + startIndex = 0; + } } } if (endIndex === -1) { @@ -545,8 +574,8 @@ export default class InfiniteGrid extends Component { // layout datas const startCursor = infinite.getCursor("start"); const endCursor = infinite.getCursor("end"); - const data = isLayoutAll ? itemManager.get() : - itemManager.get(startCursor, isRelayout && isResize ? endCursor : itemManager.size()); + const data = isLayoutAll || !(isRelayout && isResize) ? itemManager.get() : + itemManager.get(startCursor, endCursor); // LayoutManger interface const layoutGroups = this._relayout(isRelayout, data, isResize ? items : []); @@ -836,9 +865,7 @@ export default class InfiniteGrid extends Component { const startPos = Math.min(...start); const endPos = Math.max(...end); - if ((scrollPos <= startPos && startPos <= endScrollPos + threshold) || - (scrollPos - threshold <= endPos && endPos <= endScrollPos) - ) { + if (startPos - threshold <= endScrollPos && scrollPos <= endPos + threshold) { return true; } return false;