refactor all the things, move styles to StyleSheet, move instagram out of the way

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

@@ -1,19 +1,14 @@
 import React from 'react'
-import Expo from 'expo'
 import {
-  // StyleSheet,
+  StyleSheet,
   Modal,
   Text,
-  // View,
   ScrollView,
-  // Button,
-  // Image
   TouchableOpacity } from 'react-native'
 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 () {
@@ -38,11 +33,6 @@ export default class UppyReactNativeFilePicker extends React.Component {
 
   componentDidMount () {
     this.uppy = this.props.uppy
-
-    this.uppy.on('info-visible', () => {
-      const info = this.uppy.getState().info
-      console.log('uppy-info', info)
-    })
   }
 
   takePicture () {
@@ -90,14 +80,14 @@ export default class UppyReactNativeFilePicker extends React.Component {
   }
 
   openProvider (id) {
-    console.log('OPEN PROVIDER:', id)
+    console.log('Open provider:', id)
     this.setState({
       openProvider: id
     })
   }
 
   chooseProvider (id) {
-    console.log('PROVIDER SELECTED:', id)
+    console.log('Provider selected:', id)
 
     switch (id) {
       case 'LocalImages':
@@ -117,42 +107,21 @@ export default class UppyReactNativeFilePicker extends React.Component {
   renderSourceList () {
     return (
       <ScrollView
-        contentContainerStyle={{
-          flex: '1',
-          marginTop: 22,
-          justifyContent: 'center'
-        }}>
+        contentContainerStyle={styles.providerList}>
         {this.state.providers.map((item, index) => {
           return (
             <TouchableOpacity
-              style={{
-                alignItems: 'center',
-                backgroundColor: '#0077cc',
-                marginBottom: 15,
-                marginLeft: 50,
-                marginRight: 50,
-                padding: 10,
-                borderRadius: 5
-              }}
+              style={styles.providerButton}
               key={index}
               onPress={ev => this.chooseProvider(item.id)}>
-              <Text style={{color: '#fff'}}>{item.title}</Text>
+              <Text style={styles.providerButtonText}>{item.title}</Text>
             </TouchableOpacity>
           )
         })}
         <TouchableOpacity
-          style={{
-            alignItems: 'center',
-            borderWidth: 1,
-            borderColor: '#0077cc',
-            marginBottom: 15,
-            marginLeft: 50,
-            marginRight: 50,
-            padding: 10,
-            borderRadius: 5
-          }}
+          style={styles.cancelButton}
           onPress={ev => this.props.onRequestClose()}>
-          <Text style={{color: '#0077cc'}}>Cancel</Text>
+          <Text style={styles.cancelButtonText}>Cancel</Text>
         </TouchableOpacity>
       </ScrollView>
     )
@@ -165,15 +134,12 @@ export default class UppyReactNativeFilePicker extends React.Component {
         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()
-        }}>
+        onRequestClose={this.props.onRequestClose}>
         {this.state.openProvider
           ? <Provider
             providerID={this.state.openProvider}
             uppy={this.uppy}
-            onSuccess={() => {
+            onDone={() => {
               this.setState({
                 openProvider: null
               })
@@ -186,3 +152,36 @@ export default class UppyReactNativeFilePicker extends React.Component {
     )
   }
 }
+
+const styles = StyleSheet.create({
+  providerList: {
+    flex: 1,
+    marginTop: 22,
+    justifyContent: 'center'
+  },
+  providerButton: {
+    alignItems: 'center',
+    backgroundColor: '#0077cc',
+    marginBottom: 15,
+    marginLeft: 50,
+    marginRight: 50,
+    padding: 10,
+    borderRadius: 5
+  },
+  providerButtonText: {
+    color: '#fff'
+  },
+  cancelButton: {
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: '#0077cc',
+    marginBottom: 15,
+    marginLeft: 50,
+    marginRight: 50,
+    padding: 10,
+    borderRadius: 5
+  },
+  cancelButtonText: {
+    color: '#0077cc'
+  }
+})

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

@@ -0,0 +1,111 @@
+import React from 'react'
+import {
+  AsyncStorage,
+  View,
+  FlatList,
+  Image,
+  WebView } from 'react-native'
+import Instagram from '@uppy/instagram'
+
+function getQueryParamValueFromUrl (name, url) {
+  name = name.replace(/[[]/, '\\[').replace(/[\]]/, '\\]')
+  var regexS = '[\\?&]' + name + '=([^&#]*)'
+  var regex = new RegExp(regexS)
+  var results = regex.exec(url)
+  return results == null ? null : results[1]
+}
+
+// how instagram provider can be render, not ready
+export default class UppyRNInstagram 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/' }
+        ]
+      }
+    }
+  }
+
+  componentDidMount () {
+    const uppy = this.props.uppy
+    const options = Object.assign(
+      { id: 'uppyRN:Instagram' },
+      this.props,
+      { storage: AsyncStorage }
+    )
+    delete options.uppy
+    uppy.use(Instagram, options)
+    this.plugin = uppy.getPlugin(options.id)
+
+    this.setState({
+      authUrl: this.plugin.provider.authUrl()
+    })
+  }
+
+  componentWillUnmount () {
+    const uppy = this.props.uppy
+    uppy.removePlugin(this.plugin)
+  }
+
+  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>
+    )
+  }
+
+  renderInstagram () {
+    console.log(this.state.authUrl)
+    return <WebView
+      source={{ uri: this.state.authUrl }}
+      style={{ marginTop: 20 }}
+      onNavigationStateChange={(ev) => {
+        const url = ev.url
+        const token = getQueryParamValueFromUrl('uppyAuthToken', url)
+        console.log(token)
+        this.plugin.provider.setAuthToken(token)
+        console.log(this.plugin.provider.list('recent'))
+        // return this.renderGrid(this.state.instagram.items)
+      }}
+    />
+  }
+
+  render () {
+    return this.renderInstagram()
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    flex: 1,
+    paddingTop: 30
+  },
+  item: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: 100
+  }
+})

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

@@ -2,6 +2,7 @@ import React from 'react'
 import { StyleSheet, View, Text } from 'react-native'
 import { FlatGrid } from 'react-native-super-grid'
 
+// test grid, can be used for instagram
 export default class Example extends React.Component {
   render () {
     const items = [

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

@@ -1,112 +1,12 @@
 import React from 'react'
-import {
-  AsyncStorage,
-  WebView } from 'react-native'
-import Instagram from '@uppy/instagram'
 import Url from './url'
 
-function getQueryParamValueFromUrl (name, url) {
-  name = name.replace(/[[]/, '\\[').replace(/[\]]/, '\\]')
-  var regexS = '[\\?&]' + name + '=([^&#]*)'
-  var regex = new RegExp(regexS)
-  var results = regex.exec(url)
-  return results == null ? null : results[1]
-}
-
+// container wrapper for providers, only Url for now
 export default class UppyRNProvider 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/' }
-        ]
-      }
-    }
-  }
-
-  componentDidMount () {
-    const uppy = this.props.uppy
-    const options = Object.assign(
-      { id: 'uppyRN:Instagram' },
-      this.props,
-      { storage: AsyncStorage }
-    )
-    delete options.uppy
-    uppy.use(Instagram, options)
-    this.plugin = uppy.getPlugin(options.id)
-
-    this.setState({
-      authUrl: this.plugin.provider.authUrl()
-    })
-  }
-
-  componentWillUnmount () {
-    const uppy = this.props.uppy
-    uppy.removePlugin(this.plugin)
-  }
-
-  // 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>
-  //   )
-  // }
-
-  renderInstagram () {
-    console.log(this.state.authUrl)
-    return <WebView
-      source={{ uri: this.state.authUrl }}
-      style={{ marginTop: 20 }}
-      onNavigationStateChange={(ev) => {
-        const url = ev.url
-        const token = getQueryParamValueFromUrl('uppyAuthToken', url)
-        console.log(token)
-        this.plugin.provider.setAuthToken(token)
-        console.log(this.plugin.provider.list('recent'))
-        // return this.renderGrid(this.state.instagram.items)
-      }}
-    />
-  }
-
   render () {
     if (this.props.providerID === 'Url') {
       return <Url {...this.props} />
     }
-
-    return this.renderInstagram()
+    // return this.renderInstagram()
   }
 }
-
-// const styles = StyleSheet.create({
-//   container: {
-//     justifyContent: 'center',
-//     flex: 1,
-//     paddingTop: 30
-//   },
-//   item: {
-//     justifyContent: 'center',
-//     alignItems: 'center',
-//     height: 100
-//   }
-// })

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

@@ -39,7 +39,7 @@ export default class UppyRNUrl extends React.Component {
 
   onPressImport () {
     this.plugin.addFile(this.state.url)
-      .then(this.props.onSuccess)
+      .then(this.props.onDone)
       .catch((err) => {
         console.log(err)
       })
@@ -57,11 +57,15 @@ export default class UppyRNUrl extends React.Component {
           placeholder="Enter URL to import a file"
         />
         <TouchableOpacity
-          style={styles.button}
+          style={styles.buttonImport}
           onPress={this.onPressImport}>
-          <Text style={styles.buttonText}>Import</Text>
+          <Text style={styles.buttonImportText}>Import</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={styles.buttonCancel}
+          onPress={ev => this.props.onDone()}>
+          <Text style={styles.buttonCancelText}>Cancel</Text>
         </TouchableOpacity>
-        <Text>{this.state.text}</Text>
       </View>
     )
   }
@@ -82,13 +86,24 @@ const styles = StyleSheet.create({
     borderRadius: 4,
     marginBottom: 15
   },
-  button: {
+  buttonImport: {
     alignItems: 'center',
     backgroundColor: '#2275d7',
+    paddingHorizontal: 25,
+    paddingVertical: 8,
+    borderRadius: 5,
+    marginBottom: 10
+  },
+  buttonCancel: {
+    alignItems: 'center',
     paddingHorizontal: 15,
-    paddingVertical: 8
+    paddingVertical: 8,
+    borderRadius: 5
   },
-  buttonText: {
+  buttonImportText: {
     color: '#fff'
+  },
+  buttonCancelText: {
+    color: '#0077cc'
   }
 })