Use ES6 classes instead of the deprecated React.createClass

artis-auxilium · Aug 5, 2017 · 4e2b831 · 4e2b831
1 parent 9e12f3f
commit 4e2b831
Show file tree

Hide file tree

Showing 3 changed files with 112 additions and 93 deletions.
diff --git a/CachedImage.js b/CachedImage.js
@@ -14,7 +14,6 @@ const ImageCacheManager = require('./ImageCacheManager');
 
 const {
     View,
-    Image,
     ImageBackground,
     ActivityIndicator,
     NetInfo,
@@ -42,65 +41,41 @@ function getImageProps(props) {
 
 const CACHED_IMAGE_REF = 'cachedImage';
 
-const CachedImage = React.createClass({
-    propTypes: {
-        renderImage: React.PropTypes.func.isRequired,
-        activityIndicatorProps: React.PropTypes.object.isRequired,
+class CachedImage extends React.Component {
+
+    static propTypes = {
+        renderImage: PropTypes.func.isRequired,
+        activityIndicatorProps: PropTypes.object.isRequired,
 
         // ImageCacheManager options
         ...ImageCacheManagerOptionsPropTypes,
-    },
-
-    contextTypes: {
-        getImageCacheManager: PropTypes.func,
-    },
+    };
 
-    getDefaultProps() {
-        return {
-            renderImage: props => ImageBackground ?
-                (<ImageBackground ref={CACHED_IMAGE_REF} {...props}/>) :
-                (<Image ref={CACHED_IMAGE_REF} {...props}/>),
+    static defaultProps = {
+            renderImage: props => (<ImageBackground imageStyle={props.style} ref={'cachedImage'} {...props} />),
             activityIndicatorProps: {},
-        };
-    },
+    };
 
-    setNativeProps(nativeProps) {
-        try {
-            this.refs[CACHED_IMAGE_REF].setNativeProps(nativeProps);
-        } catch (e) {
-            console.error(e);
-        }
-    },
-
-    getImageCacheManagerOptions() {
-        return _.pick(this.props, _.keys(ImageCacheManagerOptionsPropTypes));
-    },
-
-    getImageCacheManager() {
-        // try to get ImageCacheManager from context
-        if (this.context && this.context.getImageCacheManager) {
-            return this.context.getImageCacheManager();
-        }
-        // create a new one if context is not available
-        const options = this.getImageCacheManagerOptions();
-        return ImageCacheManager(options);
-    },
+    static contextTypes = {
+        getImageCacheManager: PropTypes.func,
+    };
 
-    getInitialState() {
+    constructor(props) {
+        super(props);
         this._isMounted = false;
-        return {
+        this.state = {
             isCacheable: true,
             cachedImagePath: null,
             networkAvailable: true
         };
-    },
 
-    safeSetState(newState) {
-        if (!this._isMounted) {
-            return;
-        }
-        return this.setState(newState);
-    },
+        this.getImageCacheManagerOptions = this.getImageCacheManagerOptions.bind(this);
+        this.getImageCacheManager = this.getImageCacheManager.bind(this);
+        this.safeSetState = this.safeSetState.bind(this);
+        this.handleConnectivityChange = this.handleConnectivityChange.bind(this);
+        this.processSource = this.processSource.bind(this);
+        this.renderLoader = this.renderLoader.bind(this);
+    }
 
     componentWillMount() {
         this._isMounted = true;
@@ -114,24 +89,53 @@ const CachedImage = React.createClass({
             });
 
         this.processSource(this.props.source);
-    },
+    }
 
     componentWillUnmount() {
         this._isMounted = false;
         NetInfo.isConnected.removeEventListener('change', this.handleConnectivityChange);
-    },
+    }
 
     componentWillReceiveProps(nextProps) {
         if (!_.isEqual(this.props.source, nextProps.source)) {
             this.processSource(nextProps.source);
         }
-    },
+    }
+
+    setNativeProps(nativeProps) {
+        try {
+            this.refs[CACHED_IMAGE_REF].setNativeProps(nativeProps);
+        } catch (e) {
+            console.error(e);
+        }
+    }
+
+    getImageCacheManagerOptions() {
+        return _.pick(this.props, _.keys(ImageCacheManagerOptionsPropTypes));
+    }
+
+    getImageCacheManager() {
+        // try to get ImageCacheManager from context
+        if (this.context && this.context.getImageCacheManager) {
+            return this.context.getImageCacheManager();
+        }
+        // create a new one if context is not available
+        const options = this.getImageCacheManagerOptions();
+        return ImageCacheManager(options);
+    }
+
+    safeSetState(newState) {
+        if (!this._isMounted) {
+            return;
+        }
+        return this.setState(newState);
+    }
 
     handleConnectivityChange(isConnected) {
         this.safeSetState({
             networkAvailable: isConnected
         });
-    },
+    }
 
     processSource(source) {
         const url = _.get(source, ['uri'], null);
@@ -151,7 +155,7 @@ const CachedImage = React.createClass({
                     isCacheable: false
                 });
             });
-    },
+    }
 
     render() {
         if (this.state.isCacheable && !this.state.cachedImagePath) {
@@ -176,7 +180,7 @@ const CachedImage = React.createClass({
             style,
             source
         });
-    },
+    }
 
     renderLoader() {
         const imageProps = getImageProps(this.props);
@@ -222,6 +226,7 @@ const CachedImage = React.createClass({
             )
         });
     }
-});
+
+}
 
 module.exports = CachedImage;
diff --git a/CachedImageExample/index.js b/CachedImageExample/index.js
@@ -72,34 +72,39 @@ function formatBytes(bytes, decimals) {
 
 const defaultImageCacheManager = ImageCacheManager();
 
-const CachedImageExample = React.createClass({
+class CachedImageExample extends React.Component {
+
+    constructor(props) {
+        super(props);
 
-    getInitialState() {
         const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
-        return {
+        this.state = {
             showNextImage: false,
             dataSource: ds.cloneWithRows(images)
         };
-    },
+
+        this.cacheImages = this.cacheImages.bind(this);
+
+    }
 
     componentWillMount() {
         defaultImageCacheManager.downloadAndCacheUrl(image1);
-    },
+    }
 
     clearCache() {
         defaultImageCacheManager.clearCache()
             .then(() => {
                 ReactNative.Alert.alert('Cache cleared');
             });
-    },
+    }
 
     getCacheInfo() {
         defaultImageCacheManager.getCacheInfo()
             .then(({size, files}) => {
                 // console.log(size, files);
                 ReactNative.Alert.alert('Cache Info', `files: ${files.length}\nsize: ${formatBytes(size)}`);
             });
-    },
+    }
 
     cacheImages() {
         this.setState({
@@ -109,7 +114,7 @@ const CachedImageExample = React.createClass({
                 dataSource: this.state.dataSource.cloneWithRows(images)
             });
         });
-    },
+    }
 
     renderRow(uri) {
         return (
@@ -119,7 +124,7 @@ const CachedImageExample = React.createClass({
                 style={styles.image}
             />
         );
-    },
+    }
 
     render() {
         return (
@@ -164,6 +169,7 @@ const CachedImageExample = React.createClass({
             </ScrollView>
         );
     }
-});
+
+}
 
 AppRegistry.registerComponent('CachedImageExample', () => CachedImageExample);
diff --git a/ImageCacheProvider.js b/ImageCacheProvider.js
@@ -11,8 +11,8 @@ const ImageCacheManagerOptionsPropTypes = require('./ImageCacheManagerOptionsPro
 const ImageCacheManager = require('./ImageCacheManager');
 const ImageCachePreloader = require('./ImageCachePreloader');
 
-const ImageCacheProvider = React.createClass({
-    propTypes: {
+class ImageCacheProvider extends React.Component {
+    static propTypes = {
         // only a single child so we can render it
         children: PropTypes.element.isRequired,
 
@@ -24,23 +24,26 @@ const ImageCacheProvider = React.createClass({
         numberOfConcurrentPreloads: PropTypes.number.isRequired,
 
         onPreloadComplete: PropTypes.func.isRequired,
-    },
+    };
 
-    childContextTypes: {
+    static defaultProps = {
+        urlsToPreload: [],
+        numberOfConcurrentPreloads: 0,
+        onPreloadComplete: _.noop,
+    };
+
+    static childContextTypes = {
         getImageCacheManager: PropTypes.func,
-    },
+    };
 
-    getImageCacheManagerOptions() {
-        return _.pick(this.props, _.keys(ImageCacheManagerOptionsPropTypes));
-    },
+    constructor(props) {
+        super(props);
 
-    getImageCacheManager() {
-        if (!this.imageCacheManager) {
-            const options = this.getImageCacheManagerOptions();
-            this.imageCacheManager = ImageCacheManager(options);
-        }
-        return this.imageCacheManager;
-    },
+        this.getImageCacheManagerOptions = this.getImageCacheManagerOptions.bind(this);
+        this.getImageCacheManager = this.getImageCacheManager.bind(this);
+        this.preloadImages = this.preloadImages.bind(this);
+
+    }
 
     getChildContext() {
         const self = this;
@@ -49,19 +52,11 @@ const ImageCacheProvider = React.createClass({
                 return self.getImageCacheManager();
             }
         };
-    },
-
-    getDefaultProps() {
-        return {
-            urlsToPreload: [],
-            numberOfConcurrentPreloads: 0,
-            onPreloadComplete: _.noop,
-        };
-    },
+    }
 
     componentWillMount() {
         this.preloadImages();
-    },
+    }
 
     componentWillReceiveProps(nextProps) {
         // reset imageCacheManager in case any option changed
@@ -70,17 +65,30 @@ const ImageCacheProvider = React.createClass({
         if (this.props.urlsToPreload !== nextProps.urlsToPreload) {
             this.preloadImages();
         }
-    },
+    }
+
+    getImageCacheManagerOptions() {
+        return _.pick(this.props, _.keys(ImageCacheManagerOptionsPropTypes));
+    }
+
+    getImageCacheManager() {
+        if (!this.imageCacheManager) {
+            const options = this.getImageCacheManagerOptions();
+            this.imageCacheManager = ImageCacheManager(options);
+        }
+        return this.imageCacheManager;
+    }
 
     preloadImages() {
         const imageCacheManager = this.getImageCacheManager();
         ImageCachePreloader.preloadImages(this.props.urlsToPreload, imageCacheManager, this.props.numberOfConcurrentPreloads)
             .then(() => this.props.onPreloadComplete());
-    },
+    }
 
     render() {
         return React.Children.only(this.props.children);
-    },
-});
+    }
+
+}
 
 module.exports = ImageCacheProvider;