Add provider dummy grid screen using react-native-super-grid and FlatList

examples/react-native-expo/package-lock.json

@@ -2782,7 +2782,7 @@
         "qs": "^6.5.0",
         "react-native-branch": "2.2.5",
         "react-native-gesture-handler": "1.0.8",
-        "react-native-maps": "github:expo/react-native-maps#cb9d9ec23d4d176bddd6d465a583462f9c1056a0",
+        "react-native-maps": "github:expo/react-native-maps#v0.22.0-exp.0",
         "react-native-reanimated": "1.0.0-alpha.10",
         "react-native-screens": "1.0.0-alpha.15",
         "react-native-svg": "8.0.8",
@@ -3295,7 +3295,8 @@
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -3313,11 +3314,13 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -3330,15 +3333,18 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -3441,7 +3447,8 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -3451,6 +3458,7 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -3463,17 +3471,20 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -3490,6 +3501,7 @@
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -3562,7 +3574,8 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -3572,6 +3585,7 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -3647,7 +3661,8 @@
         },
         "safe-buffer": {
           "version": "5.1.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -3677,6 +3692,7 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -3694,6 +3710,7 @@
         "strip-ansi": {
           "version": "3.0.1",
           "bundled": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -3732,11 +3749,13 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         }
       }
     },
@@ -5660,6 +5679,14 @@
       "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-1.0.0-alpha.15.tgz",
       "integrity": "sha512-S2OM/ieD+Krk+0/Z2Vz2rTUWYud5hJgCRZqXRtqEfMgEcGI4FBopXp7mwXCGbA2PFLjZwZSwLlsZ6RX30WnjRw=="
     },
+    "react-native-super-grid": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/react-native-super-grid/-/react-native-super-grid-3.0.1.tgz",
+      "integrity": "sha512-Ighto5pM6Gzg8uPYPjXBIoOoavWdOAVy/21tPQ2Y8GI1YBr4D24Ofp7i2TIDvQClrQBQRZvBY83xgI1tcLOx5w==",
+      "requires": {
+        "prop-types": "^15.6.0"
+      }
+    },
     "react-native-svg": {
       "version": "8.0.8",
       "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-8.0.8.tgz",

examples/react-native-expo/package.json

@@ -15,7 +15,8 @@
     "base-64": "^0.1.0",
     "expo": "^31.0.2",
     "react": "16.5.0",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz"
+    "react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz",
+    "react-native-super-grid": "^3.0.1"
   },
   "devDependencies": {
     "@babel/runtime": "^7.2.0",

examples/react-native-expo/react-native/file-picker/index.js

@@ -12,6 +12,8 @@ import {
 import takePicture from './takePicture'
 import selectImage from './selectImage'
 import selectDocument from './selectDocument'
+// import Provider from './provider'
+import ProviderGrid from './provider-grid'
 
 export default class UppyReactNativeFilePicker extends React.Component {
   constructor () {
@@ -76,6 +78,9 @@ export default class UppyReactNativeFilePicker extends React.Component {
 
   openProvider (id) {
     console.log('OPEN PROVIDER:', id)
+    this.setState({
+      openProvider: id
+    })
   }
 
   chooseProvider (id) {
@@ -96,52 +101,55 @@ export default class UppyReactNativeFilePicker extends React.Component {
     }
   }
 
-  render () {
-    if (this.state.openProvider) {
-      return 'show provider'
-    }
+  renderSourceList () {
+    return (
+      <ScrollView
+        contentContainerStyle={{
+          flex: '1',
+          marginTop: 22,
+          justifyContent: 'center'
+        }}>
+        <TouchableOpacity
+          style={{
+            alignItems: 'center',
+            backgroundColor: '#DDDDDD',
+            marginBottom: 10,
+            padding: 10
+          }}
+          onPress={ev => this.props.onRequestClose()}>
+          <Text>Close</Text>
+        </TouchableOpacity>
+        {this.state.providers.map((item, index) => {
+          return (
+            <TouchableOpacity
+              style={{
+                alignItems: 'center',
+                backgroundColor: '#DDDDDD',
+                marginBottom: 10,
+                padding: 10
+              }}
+              key={index}
+              onPress={ev => this.chooseProvider(item.id)}>
+              <Text>{item.title}</Text>
+            </TouchableOpacity>
+          )
+        })}
+      </ScrollView>
+    )
+  }
 
+  render () {
     return (
       <Modal
         animationType="slide"
         transparent={false}
         visible={this.props.show}
+        supportedOrientations={['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right']}
         onRequestClose={() => {
           Expo.Alert.alert('Modal has been closed.')
           this.props.onRequestClose()
         }}>
-        <ScrollView
-          contentContainerStyle={{
-            flex: '1',
-            marginTop: 22,
-            justifyContent: 'center'
-          }}>
-          <TouchableOpacity
-            style={{
-              alignItems: 'center',
-              backgroundColor: '#DDDDDD',
-              marginBottom: 10,
-              padding: 10
-            }}
-            onPress={ev => this.props.onRequestClose()}>
-            <Text>Close</Text>
-          </TouchableOpacity>
-          {this.state.providers.map((item, index) => {
-            return (
-              <TouchableOpacity
-                style={{
-                  alignItems: 'center',
-                  backgroundColor: '#DDDDDD',
-                  marginBottom: 10,
-                  padding: 10
-                }}
-                key={index}
-                onPress={ev => this.chooseProvider(item.id)}>
-                <Text>{item.title}</Text>
-              </TouchableOpacity>
-            )
-          })}
-        </ScrollView>
+        {this.state.openProvider ? <ProviderGrid id={this.state.openProvider} /> : this.renderSourceList()}
       </Modal>
     )
   }

examples/react-native-expo/react-native/file-picker/provider-grid.js

@@ -0,0 +1,60 @@
+import React from 'react'
+import { StyleSheet, View, Text } from 'react-native'
+import { FlatGrid } from 'react-native-super-grid'
+
+export default class Example extends React.Component {
+  render () {
+    const items = [
+      { name: 'TURQUOISE', code: '#1abc9c' }, { name: 'EMERALD', code: '#2ecc71' },
+      { name: 'PETER RIVER', code: '#3498db' }, { name: 'AMETHYST', code: '#9b59b6' },
+      { name: 'WET ASPHALT', code: '#34495e' }, { name: 'GREEN SEA', code: '#16a085' },
+      { name: 'NEPHRITIS', code: '#27ae60' }, { name: 'BELIZE HOLE', code: '#2980b9' },
+      { name: 'WISTERIA', code: '#8e44ad' }, { name: 'MIDNIGHT BLUE', code: '#2c3e50' },
+      { name: 'SUN FLOWER', code: '#f1c40f' }, { name: 'CARROT', code: '#e67e22' },
+      { name: 'ALIZARIN', code: '#e74c3c' }, { name: 'CLOUDS', code: '#ecf0f1' },
+      { name: 'CONCRETE', code: '#95a5a6' }, { name: 'ORANGE', code: '#f39c12' },
+      { name: 'PUMPKIN', code: '#d35400' }, { name: 'POMEGRANATE', code: '#c0392b' },
+      { name: 'SILVER', code: '#bdc3c7' }, { name: 'ASBESTOS', code: '#7f8c8d' }
+    ]
+
+    return (
+      <FlatGrid
+        itemDimension={130}
+        items={items}
+        style={styles.gridView}
+        // staticDimension={300}
+        // fixed
+        // spacing={20}
+        renderItem={({ item, index }) => (
+          <View style={[styles.itemContainer, { backgroundColor: item.code }]}>
+            <Text style={styles.itemName}>{item.name}</Text>
+            <Text style={styles.itemCode}>{item.code}</Text>
+          </View>
+        )}
+      />
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  gridView: {
+    marginTop: 20,
+    flex: 1
+  },
+  itemContainer: {
+    justifyContent: 'flex-end',
+    borderRadius: 5,
+    padding: 10,
+    height: 150
+  },
+  itemName: {
+    fontSize: 16,
+    color: '#fff',
+    fontWeight: '600'
+  },
+  itemCode: {
+    fontWeight: '600',
+    fontSize: 12,
+    color: '#fff'
+  }
+})

examples/react-native-expo/react-native/file-picker/provider.js

@@ -0,0 +1,68 @@
+import React from 'react'
+// import Expo from 'expo'
+import {
+  StyleSheet,
+  FlatList,
+  View,
+  Image } from 'react-native'
+
+export default class UppyReactNativeFilePicker extends React.Component {
+  constructor () {
+    super()
+
+    this.state = {
+      instagram: {
+        user: 'bla@gmail.com',
+        items: [
+          { caption: Date.now(), url: 'http://lorempixel.com/200/200/cats/1' },
+          { caption: Date.now(), url: 'http://lorempixel.com/200/200/cats/2' },
+          { caption: Date.now(), url: 'http://lorempixel.com/200/200/cats/3' },
+          { caption: Date.now(), url: 'http://lorempixel.com/200/200/cats/4' },
+          { caption: Date.now(), url: 'http://lorempixel.com/200/200/cats/5' },
+          { caption: Date.now(), url: 'http://lorempixel.com/200/200/' },
+          { caption: Date.now(), url: 'http://lorempixel.com/200/200/' },
+          { caption: Date.now(), url: 'http://lorempixel.com/200/200/' },
+          { caption: Date.now(), url: 'http://lorempixel.com/200/200/' }
+        ]
+      }
+    }
+  }
+
+  renderGrid (items) {
+    return (
+      <View style={styles.container}>
+        <FlatList
+          data={items}
+          renderItem={({item}) => (
+            <View style={{ flex: 1, flexDirection: 'column', margin: 1 }}>
+              <Image style={styles.item} source={{uri: item.url}} />
+            </View>
+          )}
+          keyExtractor={(item, index) => index.toString()}
+          numColumns={3}
+        />
+      </View>
+    )
+  }
+
+  renderRow () {
+
+  }
+
+  render () {
+    return this.renderGrid(this.state.instagram.items)
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    flex: 1,
+    paddingTop: 30
+  },
+  item: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: 100
+  }
+})