chore: convert examples to hooks (#830)

DylanVann · Sep 27, 2021 · 5946d33 · 5946d33
1 parent 291876b
commit 5946d33
Show file tree

Hide file tree

Showing 17 changed files with 376 additions and 467 deletions.
diff --git a/ReactNativeFastImageExample/.eslintrc.js b/ReactNativeFastImageExample/.eslintrc.js
@@ -3,5 +3,6 @@ module.exports = {
     extends: '@react-native-community',
     rules: {
         semi: ['error', 'never'],
+        'react-native/no-inline-styles': 'off',
     },
 }
diff --git a/ReactNativeFastImageExample/__tests__/App-test.tsx b/ReactNativeFastImageExample/__tests__/App-test.tsx
@@ -10,5 +10,5 @@ import App from '../src'
 import renderer from 'react-test-renderer'
 
 it('renders correctly', () => {
-  renderer.create(<App />)
+    renderer.create(<App />)
 })
diff --git a/ReactNativeFastImageExample/src/AutoSizeExample.tsx b/ReactNativeFastImageExample/src/AutoSizeExample.tsx
@@ -1,10 +1,10 @@
-import React, { Component } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import { StyleSheet, View } from 'react-native'
-import withCacheBust from './withCacheBust'
 import SectionFlex from './SectionFlex'
 import FastImage, { FastImageProps } from 'react-native-fast-image'
 import Section from './Section'
 import FeatureText from './FeatureText'
+import { useCacheBust } from './useCacheBust'
 
 const GIF_URL =
     'https://cdn-images-1.medium.com/max/1600/1*-CY5bU4OqiJRox7G00sftw.gif'
@@ -16,79 +16,64 @@ interface AutoSizingImageProps extends FastImageProps {
     style?: any
 }
 
-interface AutoSizingImageState {
-    height: number
-    width: number
-}
-
-class AutoSizingImage extends Component<
-    AutoSizingImageProps,
-    AutoSizingImageState
-> {
-    state = {
+const AutoSizingImage = (props: AutoSizingImageProps) => {
+    const [dimensions, setDimensions] = useState({
         height: 0,
         width: 0,
-    }
+    })
 
-    onLoad = (e: any) => {
-        const {
-            nativeEvent: { width, height },
-        } = e
-        this.setState({ width, height })
-        if (this.props.onLoad) {
-            this.props.onLoad(e)
-        }
-    }
+    const propsOnLoad = props.onLoad
+    const onLoad = useCallback(
+        (e: any) => {
+            const {
+                nativeEvent: { width, height },
+            } = e
+            setDimensions({ width, height })
+            if (propsOnLoad) {
+                propsOnLoad(e)
+            }
+        },
+        [propsOnLoad],
+    )
 
-    getHeight = () => {
-        if (!this.state.height) {
-            return this.props.defaultHeight === undefined
-                ? 300
-                : this.props.defaultHeight
+    const height = useMemo(() => {
+        if (!dimensions.height) {
+            return props.defaultHeight === undefined ? 300 : props.defaultHeight
         }
-        const ratio = this.state.height / this.state.width
-        const height = this.props.width * ratio
-        return height
-    }
-
-    render() {
-        const height = this.getHeight()
-        return (
-            <FastImage
-                {...this.props}
-                onLoad={this.onLoad}
-                style={[{ width: this.props.width, height }, this.props.style]}
-            />
-        )
-    }
+        const ratio = dimensions.height / dimensions.width
+        return props.width * ratio
+    }, [dimensions.height, dimensions.width, props.defaultHeight, props.width])
+    return (
+        <FastImage
+            {...props}
+            onLoad={onLoad}
+            style={[{ width: props.width, height }, props.style]}
+        />
+    )
 }
 
-interface AutoSizeExampleProps {
-    onPressReload: () => void
-    bust: boolean
+export const AutoSizeExample = () => {
+    const { bust, url } = useCacheBust(GIF_URL)
+    return (
+        <View>
+            <Section>
+                <FeatureText text="• AutoSize." />
+            </Section>
+            <SectionFlex onPress={bust}>
+                <AutoSizingImage
+                    style={styles.image}
+                    width={200}
+                    source={{ uri: url }}
+                />
+            </SectionFlex>
+        </View>
+    )
 }
 
-const AutoSizeExample = ({ onPressReload, bust }: AutoSizeExampleProps) => (
-    <View>
-        <Section>
-            <FeatureText text="• AutoSize." />
-        </Section>
-        <SectionFlex onPress={onPressReload}>
-            <AutoSizingImage
-                style={styles.image}
-                width={200}
-                source={{ uri: GIF_URL + bust }}
-            />
-        </SectionFlex>
-    </View>
-)
-
 const styles = StyleSheet.create({
     image: {
         backgroundColor: '#ddd',
         margin: 20,
         flex: 0,
     },
 })
-
-export default withCacheBust(AutoSizeExample)
diff --git a/ReactNativeFastImageExample/src/BorderRadiusExample.tsx b/ReactNativeFastImageExample/src/BorderRadiusExample.tsx
@@ -1,43 +1,38 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
-import withCacheBust from './withCacheBust'
 import SectionFlex from './SectionFlex'
 import FastImage from 'react-native-fast-image'
 import Section from './Section'
 import FeatureText from './FeatureText'
+import { useCacheBust } from './useCacheBust'
 
 const IMAGE_URL = 'https://media.giphy.com/media/GEsoqZDGVoisw/giphy.gif'
 
-interface BorderRadiusExampleProps {
-    onPressReload: () => void
-    bust: string
+export const BorderRadiusExample = () => {
+    const { query, bust } = useCacheBust('')
+    return (
+        <View>
+            <Section>
+                <FeatureText text="• Border radius." />
+            </Section>
+            <SectionFlex onPress={bust}>
+                <FastImage
+                    style={styles.imageSquare}
+                    source={{
+                        uri: IMAGE_URL + query,
+                    }}
+                />
+                <FastImage
+                    style={styles.imageRectangular}
+                    source={{
+                        uri: IMAGE_URL + query,
+                    }}
+                />
+            </SectionFlex>
+        </View>
+    )
 }
 
-const BorderRadiusExample = ({
-    onPressReload,
-    bust,
-}: BorderRadiusExampleProps) => (
-    <View>
-        <Section>
-            <FeatureText text="• Border radius." />
-        </Section>
-        <SectionFlex onPress={onPressReload}>
-            <FastImage
-                style={styles.imageSquare}
-                source={{
-                    uri: IMAGE_URL + bust,
-                }}
-            />
-            <FastImage
-                style={styles.imageRectangular}
-                source={{
-                    uri: IMAGE_URL + bust,
-                }}
-            />
-        </SectionFlex>
-    </View>
-)
-
 const styles = StyleSheet.create({
     imageSquare: {
         borderRadius: 50,
@@ -64,5 +59,3 @@ const styles = StyleSheet.create({
         right: 0,
     },
 })
-
-export default withCacheBust(BorderRadiusExample)
diff --git a/ReactNativeFastImageExample/src/DefaultImageGrid.tsx b/ReactNativeFastImageExample/src/DefaultImageGrid.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Image } from 'react-native'
-import ImageGrid from './ImageGrid'
+import { ImageGrid } from './ImageGrid'
 
 const DefaultImageGrid = () => <ImageGrid ImageComponent={Image} />
 

diff --git a/ReactNativeFastImageExample/src/FastImageExamples.tsx b/ReactNativeFastImageExample/src/FastImageExamples.tsx
@@ -1,17 +1,17 @@
 import React from 'react'
 import { ScrollView, StatusBar, StyleSheet, Text, View } from 'react-native'
 import Section from './Section'
-import PriorityExample from './PriorityExample'
-import GifExample from './GifExample'
-import BorderRadiusExample from './BorderRadiusExample'
 import FeatureText from './FeatureText'
-import ProgressExample from './ProgressExample'
-import PreloadExample from './PreloadExample'
-import ResizeModeExample from './ResizeModeExample'
-import TintColorExample from './TintColorExample'
-import LocalImagesExample from './LocalImagesExample'
 import StatusBarUnderlay, { STATUS_BAR_HEIGHT } from './StatusBarUnderlay'
-import AutoSizeExample from './AutoSizeExample'
+import { PriorityExample } from './PriorityExample'
+import { GifExample } from './GifExample'
+import { BorderRadiusExample } from './BorderRadiusExample'
+import { ProgressExample } from './ProgressExample'
+import { PreloadExample } from './PreloadExample'
+import { ResizeModeExample } from './ResizeModeExample'
+import { TintColorExample } from './TintColorExample'
+import { LocalImagesExample } from './LocalImagesExample'
+import { AutoSizeExample } from './AutoSizeExample'
 
 const FastImageExample = () => (
     <View style={styles.container}>

diff --git a/ReactNativeFastImageExample/src/FastImageGrid.tsx b/ReactNativeFastImageExample/src/FastImageGrid.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import FastImage from 'react-native-fast-image'
-import ImageGrid from './ImageGrid'
+import { ImageGrid } from './ImageGrid'
 
 const FastImageGrid = () => <ImageGrid ImageComponent={FastImage} />
 

diff --git a/ReactNativeFastImageExample/src/GifExample.tsx b/ReactNativeFastImageExample/src/GifExample.tsx
@@ -1,30 +1,28 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
-import withCacheBust from './withCacheBust'
 import SectionFlex from './SectionFlex'
 import FastImage from 'react-native-fast-image'
 import Section from './Section'
 import FeatureText from './FeatureText'
+import { useCacheBust } from './useCacheBust'
 
 const GIF_URL =
     'https://cdn-images-1.medium.com/max/1600/1*-CY5bU4OqiJRox7G00sftw.gif'
 
-interface GifExampleProps {
-    onPressReload: () => void
-    bust: boolean
+export const GifExample = () => {
+    const { url, bust } = useCacheBust(GIF_URL)
+    return (
+        <View>
+            <Section>
+                <FeatureText text="• GIF support." />
+            </Section>
+            <SectionFlex onPress={bust}>
+                <FastImage style={styles.image} source={{ uri: url }} />
+            </SectionFlex>
+        </View>
+    )
 }
 
-const GifExample = ({ onPressReload, bust }: GifExampleProps) => (
-    <View>
-        <Section>
-            <FeatureText text="• GIF support." />
-        </Section>
-        <SectionFlex onPress={onPressReload}>
-            <FastImage style={styles.image} source={{ uri: GIF_URL + bust }} />
-        </SectionFlex>
-    </View>
-)
-
 const styles = StyleSheet.create({
     image: {
         backgroundColor: '#ddd',
@@ -34,5 +32,3 @@ const styles = StyleSheet.create({
         flex: 0,
     },
 })
-
-export default withCacheBust(GifExample)