From ddf36adc99884d12e795986771e0d0d04b641219 Mon Sep 17 00:00:00 2001 From: Ashvin Suthar Date: Mon, 4 Jan 2021 10:45:49 +0530 Subject: [PATCH 1/3] Support for higher version of react-list component --- src/LazyList.js | 31 ++++++++++++++++--------------- 1 file changed, 16 insertions(+), 15 deletions(-) diff --git a/src/LazyList.js b/src/LazyList.js index e134b41..3c3e912 100644 --- a/src/LazyList.js +++ b/src/LazyList.js @@ -3,7 +3,6 @@ import PropTypes from 'prop-types' const proxyMethods = [ 'getOffset', - 'getScrollParent', 'getScroll', 'setScroll', 'getViewportSize', @@ -17,7 +16,7 @@ const proxyMethods = [ 'getVisibleRange' ] -function requestPage (call, page, cb) { +function requestPage(call, page, cb) { const promise = call(page, cb) if (promise && promise.then) { promise @@ -32,7 +31,7 @@ function requestPage (call, page, cb) { * [0, 1].slice(1, 3) === [1] * eagerSlice([0, 1], 1, 3) === [1, undefined, undefined] */ -function eagerSlice (list, start, end) { +function eagerSlice(list, start, end) { const sliced = [] for (let i = start; i < end; i++) { sliced.push(list[i]) @@ -44,7 +43,7 @@ function eagerSlice (list, start, end) { * Adds simple lazy loading to react-list. */ class LazyList extends React.Component { - constructor (props) { + constructor(props) { super(props) this._list = null @@ -52,19 +51,21 @@ class LazyList extends React.Component { this.updateFrame = this.updateFrame.bind(this) } - componentDidMount () { + componentDidMount() { this.updateScrollParent() this.updateFrame() } - componentDidUpdate () { + componentDidUpdate() { this.updateScrollParent() this.updateFrame() } - updateScrollParent () { - const prev = this.scrollParent - this.scrollParent = this.getScrollParent() + updateScrollParent() { + const prev = this.scrollParent; + const list = this.getList(); + this.scrollParent = list.scrollParent; + if (prev === this.scrollParent) { return } @@ -76,21 +77,21 @@ class LazyList extends React.Component { } } - getList () { + getList() { return this._list } - isLoadingPage (page) { + isLoadingPage(page) { return !!this._loadingPages[page] } - itemNeedsLoad (idx) { + itemNeedsLoad(idx) { const { items, pageSize } = this.props const page = Math.floor(idx / pageSize) return items[idx] != null || this.isLoadingPage(page) } - updateFrame () { + updateFrame() { const { pageSize, loadMargin, items, length, @@ -129,7 +130,7 @@ class LazyList extends React.Component { }) } - render () { + render() { return React.cloneElement(this.props.children, { ref: (list) => { this._list = list @@ -175,4 +176,4 @@ proxyMethods.forEach((name) => { } }) -export default LazyList +export default LazyList \ No newline at end of file From f5fb35bc362260d6850489eaf6d7203e3ff92466 Mon Sep 17 00:00:00 2001 From: Ashvin Suthar Date: Mon, 4 Jan 2021 10:52:29 +0530 Subject: [PATCH 2/3] test fixes --- src/LazyList.js | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/src/LazyList.js b/src/LazyList.js index 3c3e912..25d8b94 100644 --- a/src/LazyList.js +++ b/src/LazyList.js @@ -16,7 +16,7 @@ const proxyMethods = [ 'getVisibleRange' ] -function requestPage(call, page, cb) { +function requestPage (call, page, cb) { const promise = call(page, cb) if (promise && promise.then) { promise @@ -31,7 +31,7 @@ function requestPage(call, page, cb) { * [0, 1].slice(1, 3) === [1] * eagerSlice([0, 1], 1, 3) === [1, undefined, undefined] */ -function eagerSlice(list, start, end) { +function eagerSlice (list, start, end) { const sliced = [] for (let i = start; i < end; i++) { sliced.push(list[i]) @@ -43,7 +43,7 @@ function eagerSlice(list, start, end) { * Adds simple lazy loading to react-list. */ class LazyList extends React.Component { - constructor(props) { + constructor (props) { super(props) this._list = null @@ -51,20 +51,20 @@ class LazyList extends React.Component { this.updateFrame = this.updateFrame.bind(this) } - componentDidMount() { + componentDidMount () { this.updateScrollParent() this.updateFrame() } - componentDidUpdate() { + componentDidUpdate () { this.updateScrollParent() this.updateFrame() } - updateScrollParent() { - const prev = this.scrollParent; - const list = this.getList(); - this.scrollParent = list.scrollParent; + updateScrollParent () { + const prev = this.scrollParent + const list = this.getList() + this.scrollParent = list.scrollParent if (prev === this.scrollParent) { return @@ -77,21 +77,21 @@ class LazyList extends React.Component { } } - getList() { + getList () { return this._list } - isLoadingPage(page) { + isLoadingPage (page) { return !!this._loadingPages[page] } - itemNeedsLoad(idx) { + itemNeedsLoad (idx) { const { items, pageSize } = this.props const page = Math.floor(idx / pageSize) return items[idx] != null || this.isLoadingPage(page) } - updateFrame() { + updateFrame () { const { pageSize, loadMargin, items, length, @@ -130,7 +130,7 @@ class LazyList extends React.Component { }) } - render() { + render () { return React.cloneElement(this.props.children, { ref: (list) => { this._list = list @@ -176,4 +176,4 @@ proxyMethods.forEach((name) => { } }) -export default LazyList \ No newline at end of file +export default LazyList From 2c4d91a03f1a81c4d15d5d642b68534b2510f61c Mon Sep 17 00:00:00 2001 From: Ashvin Suthar Date: Mon, 4 Jan 2021 10:57:05 +0530 Subject: [PATCH 3/3] Added deps version and documentation updates --- package.json | 4 ++-- readme.md | 3 --- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 8e9570e..049e75a 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "cross-env": "^7.0.0", "react": "^16.3.2", "react-dom": "^16.3.2", - "react-list": "^0.8.8 < 0.8.10", + "react-list": "^0.8.8 < 0.8.10 || ^0.8.10", "rollup": "^1.0.0", "rollup-plugin-babel": "^4.0.2", "standard": "^14.0.0" @@ -36,7 +36,7 @@ "peerDependencies": { "react": "^0.14.0 || ^15.0.0 || ^16.0.0", "react-dom": "^0.14.0 || ^ 15.0.0 || ^16.0.0", - "react-list": "^0.7.0 || ^0.8.0 < 0.8.10" + "react-list": "^0.7.0 || ^0.8.0 < 0.8.10 || ^0.8.10" }, "standard": { "parser": "babel-eslint" diff --git a/readme.md b/readme.md index 750f0e9..9ee79e6 100644 --- a/readme.md +++ b/readme.md @@ -24,9 +24,6 @@ infinite scrolling. npm install --save react-list-lazy-load ``` -> :warning: At the moment, react-list-lazy-load only works with react-list -> versions up to v0.8.9. Versions v0.8.10 and up are not yet supported. - ## Usage [Demo](https://u-wave.github.io/react-list-lazy-load) - [Demo source code](./example.js)