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 e14d20f..a4d9661 100644 --- a/lib/LazyloadListView.js +++ b/lib/LazyloadListView.js @@ -1,27 +1,23 @@ -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 } 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"; + +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 +32,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/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} /> + ); } } diff --git a/package.json b/package.json index 59086ad..0bc7d04 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,9 @@ "url": "https://github.com/magicismight/react-native-lazyload" }, "dependencies": { - "react-native-scrollable-mixin": "^1.0.1" + "prop-types": "^15.7.2", + "react-native-scrollable-mixin": "^1.0.1", + "deprecated-react-native-listview": "0.0.5" }, "keywords": [ "react-component",