From 33218656a7c63c8b44ccf1cd44167340e73c5d5a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejo=20Castan=CC=83o?= Date: Sun, 21 Jul 2019 20:48:37 +0200 Subject: [PATCH 1/5] Using deprecated-react-native-listview --- lib/LazyloadListView.js | 42 ++++++++++++++++++++--------------------- package.json | 3 ++- 2 files changed, 22 insertions(+), 23 deletions(-) diff --git a/lib/LazyloadListView.js b/lib/LazyloadListView.js index e14d20f..9087744 100644 --- a/lib/LazyloadListView.js +++ b/lib/LazyloadListView.js @@ -1,27 +1,22 @@ -import React, { - Component, - PropTypes -} from 'react'; -import { - ListView -} from 'react-native'; -import ScrollableMixin from 'react-native-scrollable-mixin'; -import LazyloadScrollView from './LazyloadScrollView'; - -class LazyloadListView extends Component{ - static displayName = 'LazyloadListView'; +import React, { Component, PropTypes } from "react"; +import ListView from "deprecated-react-native-listview"; +import ScrollableMixin from "react-native-scrollable-mixin"; +import LazyloadScrollView from "./LazyloadScrollView"; + +class LazyloadListView extends Component { + static displayName = "LazyloadListView"; static propTypes = { ...ListView.propTypes }; - refresh () { + refresh() { this._scrollView.refresh(); } get scrollProperties() { return this._listView.scrollProperties; - }; + } /** * IMPORTANT: You must return the scroll responder of the underlying @@ -36,14 +31,17 @@ class LazyloadListView extends Component{ } render() { - return this.props.name ? } - ref={ele => this._listView = ele} - /> : this._listView = ele} - />; + return this.props.name ? ( + ( + + )} + ref={ele => (this._listView = ele)} + /> + ) : ( + (this._listView = ele)} /> + ); } } diff --git a/package.json b/package.json index 59086ad..c81ea4e 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,8 @@ "url": "https://github.com/magicismight/react-native-lazyload" }, "dependencies": { - "react-native-scrollable-mixin": "^1.0.1" + "react-native-scrollable-mixin": "^1.0.1", + "deprecated-react-native-listview": "^0.5.5" }, "keywords": [ "react-component", From ca30281c4a5f69a53e3e7e3612d2fc17fcc704a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejo=20Castan=CC=83o?= Date: Sun, 21 Jul 2019 21:08:20 +0200 Subject: [PATCH 2/5] Using proptypes from original import --- lib/Anim.js | 10 ++---- lib/LazyloadImage.js | 47 +++++++++++++------------- lib/LazyloadListView.js | 3 +- lib/LazyloadScrollView.js | 71 +++++++++++++++++---------------------- lib/LazyloadView.js | 61 ++++++++++++++++++--------------- 5 files changed, 92 insertions(+), 100 deletions(-) diff --git a/lib/Anim.js b/lib/Anim.js index 99c570d..8fe1cb4 100644 --- a/lib/Anim.js +++ b/lib/Anim.js @@ -1,9 +1,6 @@ -import React, { - PropTypes -} from 'react'; -import ReactNative, { - LayoutAnimation -} from 'react-native'; +import React from "react"; +import ReactNative, { LayoutAnimation } from "react-native"; +import PropTypes from "prop-types"; export default PropTypes.shape({ duration: PropTypes.number, @@ -13,4 +10,3 @@ export default PropTypes.shape({ type: PropTypes.oneOf(Object.keys(LayoutAnimation.Types)), property: PropTypes.oneOf(Object.keys(LayoutAnimation.Properties)) }); - diff --git a/lib/LazyloadImage.js b/lib/LazyloadImage.js index 8c751d1..b941f82 100644 --- a/lib/LazyloadImage.js +++ b/lib/LazyloadImage.js @@ -1,17 +1,15 @@ -import React, { - Component, - PropTypes -} from 'react'; -import { - Image, - Platform -} from 'react-native'; -import LazyloadView from './LazyloadView'; -import Anim from './Anim'; -const emptySource = {uri:'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'}; +import React, { Component } from "react"; +import { Image, Platform } from "react-native"; +import PropTypes from "prop-types"; +import LazyloadView from "./LazyloadView"; +import Anim from "./Anim"; +const emptySource = { + uri: + "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" +}; -class LazyloadImage extends LazyloadView{ - static displayName = 'LazyloadImage'; +class LazyloadImage extends LazyloadView { + static displayName = "LazyloadImage"; static propTypes = { host: PropTypes.string, @@ -31,18 +29,19 @@ class LazyloadImage extends LazyloadView{ render() { let key = null; if (this.props.animation) { - key = this.state.visible ? 'visible' : 'invisible'; + key = this.state.visible ? "visible" : "invisible"; } - return this.props.host ? this._root = ele} - {...this.props} - onLayout={this._onLayout} - key={key} - source={this.state.visible ? this.props.source : emptySource} - /> : this._root = ele} - {...this.props} - />; + return this.props.host ? ( + (this._root = ele)} + {...this.props} + onLayout={this._onLayout} + key={key} + source={this.state.visible ? this.props.source : emptySource} + /> + ) : ( + (this._root = ele)} {...this.props} /> + ); } } diff --git a/lib/LazyloadListView.js b/lib/LazyloadListView.js index 9087744..a4d9661 100644 --- a/lib/LazyloadListView.js +++ b/lib/LazyloadListView.js @@ -1,4 +1,5 @@ -import React, { Component, PropTypes } from "react"; +import React, { Component } from "react"; +import PropTypes from "prop-types"; import ListView from "deprecated-react-native-listview"; import ScrollableMixin from "react-native-scrollable-mixin"; import LazyloadScrollView from "./LazyloadScrollView"; diff --git a/lib/LazyloadScrollView.js b/lib/LazyloadScrollView.js index 681b3ba..109accf 100644 --- a/lib/LazyloadScrollView.js +++ b/lib/LazyloadScrollView.js @@ -1,22 +1,17 @@ -import React, { - Component, - PropTypes -} from 'react'; -import ReactNative, { - ScrollView, - Dimensions -} from 'react-native'; -import ScrollableMixin from 'react-native-scrollable-mixin'; -import LazyloadManager from './LazyloadManager'; - -class LazyloadScrollView extends Component{ - static displayName = 'LazyloadScrollView'; +import React, { Component } from "react"; +import ReactNative, { ScrollView, Dimensions } from "react-native"; +import PropTypes from "prop-types"; +import ScrollableMixin from "react-native-scrollable-mixin"; +import LazyloadManager from "./LazyloadManager"; + +class LazyloadScrollView extends Component { + static displayName = "LazyloadScrollView"; static propTypes = { name: PropTypes.string, renderDistance: PropTypes.number, recycle: PropTypes.bool, - recycleDistance : PropTypes.number, + recycleDistance: PropTypes.number, horizontal: PropTypes.bool, ...ScrollView.propTypes }; @@ -24,12 +19,10 @@ class LazyloadScrollView extends Component{ static defaultProps = { renderDistance: 0, recycle: true, - recycleDistance: Dimensions.get('window').height * 4, + recycleDistance: Dimensions.get("window").height * 4, horizontal: false }; - - constructor() { super(); @@ -41,7 +34,7 @@ class LazyloadScrollView extends Component{ } componentWillUnmount = () => { - if(this._manager){ + if (this._manager) { this._manager.destroy(); this._manager = null; } @@ -66,13 +59,8 @@ class LazyloadScrollView extends Component{ _onLayout = (e, node) => { this.props.onLayout && this.props.onLayout(e, node); - let {width, height} = e.nativeEvent.layout; - let { - name, - renderDistance, - recycle, - recycleDistance - } = this.props; + let { width, height } = e.nativeEvent.layout; + let { name, renderDistance, recycle, recycleDistance } = this.props; this._manager = new LazyloadManager( { @@ -87,28 +75,31 @@ class LazyloadScrollView extends Component{ }, ReactNative.findNodeHandle(this) ); - }; _onScroll = e => { this.props.onScroll && this.props.onScroll(e); - let {x, y} = e.nativeEvent.contentOffset; - this.currentPosition = {x, y}; - this._manager && this._manager.calculate({x, y}); + let { x, y } = e.nativeEvent.contentOffset; + this.currentPosition = { x, y }; + this._manager && this._manager.calculate({ x, y }); }; render() { - return this.props.name ? this._scrollResponder = ele} - name={null} - onScroll={this._onScroll} - onLayout={this._onLayout} - scrollEventThrottle={this.props.scrollEventThrottle || 16} - /> : this._scrollResponder = ele} - />; + return this.props.name ? ( + (this._scrollResponder = ele)} + name={null} + onScroll={this._onScroll} + onLayout={this._onLayout} + scrollEventThrottle={this.props.scrollEventThrottle || 16} + /> + ) : ( + (this._scrollResponder = ele)} + /> + ); } } diff --git a/lib/LazyloadView.js b/lib/LazyloadView.js index 6ef57bc..2d0a60d 100644 --- a/lib/LazyloadView.js +++ b/lib/LazyloadView.js @@ -1,18 +1,13 @@ -import React, { - Component, - PropTypes -} from 'react'; -import { - View, - LayoutAnimation -} from 'react-native'; -import LazyloadManager from './LazyloadManager'; -import Anim from './Anim'; +import React, { Component } from "react"; +import { View, LayoutAnimation } from "react-native"; +import PropTypes from "prop-types"; +import LazyloadManager from "./LazyloadManager"; +import Anim from "./Anim"; let id = 0; -class LazyloadView extends Component{ - static displayName = 'LazyloadView'; +class LazyloadView extends Component { + static displayName = "LazyloadView"; static propTypes = { host: PropTypes.string, @@ -35,7 +30,7 @@ class LazyloadView extends Component{ duration: 350, create: { property: LayoutAnimation.Properties.opacity, - type: 'easeIn' + type: "easeIn" } } }; @@ -49,7 +44,7 @@ class LazyloadView extends Component{ visible: this._visible }; } - }; + } componentWillUnmount = () => { if (this.props.host) { @@ -58,7 +53,7 @@ class LazyloadView extends Component{ this._unmounted = true; }; - shouldComponentUpdate = (nextProps) => { + shouldComponentUpdate = nextProps => { return this._visible || !nextProps.host; }; @@ -73,8 +68,15 @@ class LazyloadView extends Component{ clearTimeout(this._timeout); // If we have a callback, call it with the visibility state change - if (this.props.onVisibilityChange && typeof this.props.onVisibilityChange === 'function') { - this.props.onVisibilityChange(this._visible, this.ref, this.props); + if ( + this.props.onVisibilityChange && + typeof this.props.onVisibilityChange === "function" + ) { + this.props.onVisibilityChange( + this._visible, + this.ref, + this.props + ); } this._timeout = setTimeout(() => { @@ -82,7 +84,9 @@ class LazyloadView extends Component{ return; } - visible && this.props.animation && LayoutAnimation.configureNext(this.props.animation); + visible && + this.props.animation && + LayoutAnimation.configureNext(this.props.animation); this.setState({ visible }); @@ -126,16 +130,17 @@ class LazyloadView extends Component{ }; render() { - return this.props.host ? this._root = ele} - onLayout={this._onLayout} - > - {this.state.visible ? this.props.children : null} - : this._root = ele} - {...this.props} - />; + return this.props.host ? ( + (this._root = ele)} + onLayout={this._onLayout} + > + {this.state.visible ? this.props.children : null} + + ) : ( + (this._root = ele)} {...this.props} /> + ); } } From 69f1bde02a3952de36bf50e7e00545fe2d04a740 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejo=20Castan=CC=83o?= Date: Sun, 21 Jul 2019 21:10:13 +0200 Subject: [PATCH 3/5] Add prop-types to dependencies --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index c81ea4e..25d076a 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "url": "https://github.com/magicismight/react-native-lazyload" }, "dependencies": { + "prop-types": "^15.7.2", "react-native-scrollable-mixin": "^1.0.1", "deprecated-react-native-listview": "^0.5.5" }, From f50278f37fa0fb970d5d8e90de35c586e9698d6d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejo=20Castan=CC=83o?= Date: Sun, 21 Jul 2019 21:11:31 +0200 Subject: [PATCH 4/5] Fix listview version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 25d076a..47d2537 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "dependencies": { "prop-types": "^15.7.2", "react-native-scrollable-mixin": "^1.0.1", - "deprecated-react-native-listview": "^0.5.5" + "deprecated-react-native-listview": "^0.0.5" }, "keywords": [ "react-component", From 4c012d82ca997133edd3ae9f13995c1eaca2ab30 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejo=20Castan=CC=83o?= Date: Sun, 21 Jul 2019 21:12:43 +0200 Subject: [PATCH 5/5] Remove ^ --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 47d2537..0bc7d04 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "dependencies": { "prop-types": "^15.7.2", "react-native-scrollable-mixin": "^1.0.1", - "deprecated-react-native-listview": "^0.0.5" + "deprecated-react-native-listview": "0.0.5" }, "keywords": [ "react-component",