chore: Convert example to TypeScript (#648)

2026-09-01 06:11:14 +00:00 · 2020-03-12 02:27:37 -04:00
parent dc3d66e1a0
commit bf55742e5f
40 changed files with 672 additions and 644 deletions
@@ -0,0 +1,146 @@
+import React, { Component } from 'react'
+import {
+    StyleSheet,
+    View,
+    Text,
+    TouchableOpacity,
+    ViewProps,
+} from 'react-native'
+import withCacheBust from './withCacheBust'
+import FastImage, { FastImageProps, Source } from 'react-native-fast-image'
+import Section from './Section'
+import FeatureText from './FeatureText'
+import FieldsBase64 from './images/fields'
+import ImagePicker from 'react-native-image-picker'
+import BulletText from './BulletText'
+
+// @ts-ignore
+import FieldsImage from './images/fields.jpg'
+// @ts-ignore
+import FieldsWebP from './images/fields.webp'
+// @ts-ignore
+import JellyfishGIF from './images/jellyfish.gif'
+// @ts-ignore
+import JellyfishWebP from './images/jellyfish.webp'
+
+const options = {
+    title: 'Select Avatar',
+    customButtons: [{ name: 'fb', title: 'Choose Photo from Facebook' }],
+    storageOptions: {
+        skipBackup: true,
+        path: 'images',
+    },
+}
+
+const Image = ({ source, ...p }: FastImageProps) => (
+    <FastImage style={styles.imageSquare} source={source} {...p} />
+)
+
+const Row: React.ComponentType<ViewProps> = (p: ViewProps) => (
+    <View style={styles.row} {...p} />
+)
+
+interface ExampleProps {
+    name: string
+    source: any
+}
+
+const Example = ({ name, source }: ExampleProps) => (
+    <Row>
+        <BulletText>{name}</BulletText>
+        <Image source={source} />
+    </Row>
+)
+
+interface PhotoExampleState {
+    image?: Source
+}
+
+class PhotoExample extends Component<{}, PhotoExampleState> {
+    state: PhotoExampleState = {}
+
+    pick = () => {
+        ImagePicker.showImagePicker(options, response => {
+            if (response.didCancel) {
+                console.log('ImagePicker - User cancelled.')
+            } else if (response.error) {
+                console.log(`ImagePicker - Error ${response.error}.`)
+            } else if (response.customButton) {
+                console.log(`ImagePicker - Tapped ${response.customButton}`)
+            } else {
+                const uri = response.uri
+                this.setState({
+                    image: { uri: uri },
+                })
+            }
+        })
+    }
+
+    render() {
+        return (
+            <Row>
+                <BulletText>photo library</BulletText>
+                <TouchableOpacity onPress={this.pick}>
+                    <Image
+                        style={styles.imageSquare}
+                        source={this.state.image || 0}
+                    >
+                        <Text style={styles.pickPhoto}>Pick Photo</Text>
+                    </Image>
+                </TouchableOpacity>
+            </Row>
+        )
+    }
+}
+
+const LocalImagesExample = () => (
+    <View>
+        <Section>
+            <FeatureText>• Local images.</FeatureText>
+        </Section>
+        <View style={styles.container}>
+            <Example name="Require" source={require('./images/fields.jpg')} />
+            <Example name="Import" source={FieldsImage} />
+            <Example name="GIF" source={JellyfishGIF} />
+            <Example name="Animated WebP" source={JellyfishWebP} />
+            <Example name="Base64" source={{ uri: FieldsBase64 }} />
+            <Example name="WebP" source={FieldsWebP} />
+            <PhotoExample />
+        </View>
+    </View>
+)
+
+const styles = StyleSheet.create({
+    pickPhoto: { color: 'white', fontWeight: '900' },
+    row: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginBottom: 20,
+    },
+    container: {
+        backgroundColor: '#eee',
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingTop: 10,
+        paddingBottom: 10,
+    },
+    imageSquare: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: 100,
+        backgroundColor: '#ddd',
+        margin: 20,
+        marginTop: 10,
+        width: 100,
+        flex: 0,
+    },
+    plus: {
+        width: 30,
+        height: 30,
+        position: 'absolute',
+        bottom: 0,
+        right: 0,
+    },
+})
+
+export default withCacheBust(LocalImagesExample)