From ef07749a7c23261811575fc71be3caa8fa1c19a2 Mon Sep 17 00:00:00 2001
From: Rayhan Yulanda <rayhanyulanda@gmail.com>
Date: Thu, 22 Aug 2019 13:25:43 +0700
Subject: [PATCH 1/2] Add some feature

Adding defaultUri and editable in config
---
 lib/ImageFactory.js | 466 +++++++++++++++++++++++---------------------
 1 file changed, 241 insertions(+), 225 deletions(-)

diff --git a/lib/ImageFactory.js b/lib/ImageFactory.js
index 53db913..bca18e5 100644
--- a/lib/ImageFactory.js
+++ b/lib/ImageFactory.js
@@ -2,13 +2,13 @@
 
 import React from 'react';
 import {
-  ActionSheetIOS,
-  View,
-  Text,
-  Button,
-  Animated,
-  StyleSheet,
-  Platform
+    ActionSheetIOS,
+    View,Image,
+    Text,
+    Button,
+    Animated,
+    StyleSheet,
+    Platform
 } from 'react-native';
 import ImagePicker from 'react-native-image-crop-picker';
 import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons';
@@ -17,237 +17,253 @@ import BottomSheet from 'react-native-js-bottom-sheet';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 
 type Props = {
-  title: string
+    title: string
 };
 type State = {
-  image: ?string
+    image: ?string
 };
 
 const Component = t.form.Component;
 
 class ImageFactory extends Component<Props, State> {
-  bottomSheet: BottomSheet;
-
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      image: undefined,
-      height: new Animated.Value(0),
-      overflow: 'visible'
-    };
-  }
-
-  _onPressImage = () => {
-    const options = this.props.options.config.options || [
-      'Open camera',
-      'Select from the gallery',
-      'Cancel'
-    ];
-    ActionSheetIOS.showActionSheetWithOptions(
-      {
-        options,
-        cancelButtonIndex: 2
-      },
-      (buttonIndex: number) => {
-        if (buttonIndex === 0) {
-          ImagePicker.openCamera({}).then((image: Object) =>
-            this._getImageFromStorage(image.path)
-          );
-        } else if (buttonIndex === 1) {
-          ImagePicker.openPicker({}).then((image: Object) =>
-            this._getImageFromStorage(image.path)
-          );
-        }
-      }
-    );
-  };
-
-  shouldComponentUpdate(nextProps: Props, nextState: State) {
-    return true;
-  }
-
-  _startAnimation = () => {
-    Animated.sequence([
-      Animated.timing(this.state.height, {
-        toValue: 0,
-        duration: 250
-      }),
-      Animated.timing(this.state.height, {
-        toValue: 150,
-        duration: 500,
-        delay: 75
-      })
-    ]).start();
-  };
-
-  _renderOptions = (): Array<Object> => {
-    const options = this.props.options.config.options || [
-      'Open camera',
-      'Select from the gallery',
-      'Cancel'
-    ];
-
-    return [
-      {
-        title: options[0],
-        onPress: () =>
-          ImagePicker.openCamera({}).then((image: Object) =>
-            this._getImageFromStorage(image.path)
-          ) && this.bottomSheet.close(),
-        icon: (
-          <MaterialIcons name={'photo-camera'} size={24} style={styles.icon} />
-        )
-      },
-      {
-        title: options[1],
-        onPress: () =>
-          ImagePicker.openPicker({}).then((image: Object) =>
-            this._getImageFromStorage(image.path)
-          ) && this.bottomSheet.close(),
-        icon: (
-          <MaterialIcons name={'photo-library'} size={24} style={styles.icon} />
-        )
-      }
-    ];
-  };
-
-  _getImageFromStorage = (path: string) => {
-    this.setState({ image: path, overflow: 'hidden' }, () =>
-      this._startAnimation()
-    );
-    super.getLocals().onChange(path);
-  };
-
-  getTemplate() {
-    return (locals: Object) => {
-      const stylesheet = locals.stylesheet;
-      let formGroupStyle = stylesheet.formGroup.normal;
-      let controlLabelStyle = stylesheet.controlLabel.normal;
-      let textboxStyle = stylesheet.textbox.normal;
-      let helpBlockStyle = stylesheet.helpBlock.normal;
-      let errorBlockStyle = stylesheet.errorBlock;
-      let topContainer = stylesheet.imagePicker
-        ? stylesheet.imagePicker.topContainer
-        : styles.topContainer;
-      let container = stylesheet.imagePicker
-        ? stylesheet.imagePicker.container
-        : styles.container;
-      let cameraColor =
-        locals.config && locals.config.cameraColor
-          ? locals.config.cameraColor
-          : '#333';
-      let buttonTextColor =
-        locals.config && locals.config.buttonTextColor
-          ? locals.config.buttonTextColor
-          : '#333';
-
-      if (locals.hasError) {
-        controlLabelStyle = stylesheet.controlLabel.error;
-        formGroupStyle = stylesheet.formGroup.error;
-        textboxStyle = stylesheet.textbox.error;
-        helpBlockStyle = stylesheet.helpBlock.error;
-      }
-
-      const style: Object = this.props.options.config.style || {};
-      return (
-        <View style={this.props.options.config.containerStyle || {}}>
-          {locals.label ? (
-            <Text
-              style={[
-                controlLabelStyle,
-                locals.error ? { color: '#a94442' } : {}
-              ]}>
-              {locals.label}
-            </Text>
-          ) : null}
-          <View
-            style={[
-              topContainer,
-              locals.hasError ? { borderColor: '#a94442' } : {}
-            ]}>
-            <Animated.Image
-              resizeMode="cover"
-              source={{
-                uri: this.state.image
-              }}
-              style={[
-                styles.image,
-                {
-                  height: this.state.height
+    bottomSheet: BottomSheet;
+
+    constructor(props: Props) {
+        super(props);
+        this.state = {
+            image: undefined,
+            height: new Animated.Value(0),
+            overflow: 'visible',
+            loading: true,
+        };
+    }
+
+    _onPressImage = () => {
+        const options = this.props.options.config.options || [
+            'Open camera',
+            'Select from the gallery',
+            'Cancel'
+        ];
+        ActionSheetIOS.showActionSheetWithOptions(
+            {
+                options,
+                cancelButtonIndex: 2
+            },
+            (buttonIndex: number) => {
+                if (buttonIndex === 0) {
+                    ImagePicker.openCamera({}).then((image: Object) =>
+                        this._getImageFromStorage(image.path)
+                    );
+                } else if (buttonIndex === 1) {
+                    ImagePicker.openPicker({}).then((image: Object) =>
+                        this._getImageFromStorage(image.path)
+                    );
                 }
-              ]}
-            />
-            <View
-              style={[
-                { overflow: this.state.overflow },
-                container,
-                locals.hasError ? { backgroundColor: '#E28E8E' } : {}
-              ]}>
-              <SimpleLineIcons
-                name={'camera'}
-                size={28}
-                style={styles.icon}
-                color={cameraColor}
-              />
-            </View>
-          </View>
-          <Button
-            onPress={
-              Platform.OS === 'ios'
-                ? this._onPressImage
-                : () => this.bottomSheet.open()
             }
-            color={buttonTextColor}
-            title={locals.config.title}
-          />
-          {locals.help || locals.config.help ? (
-            <Text style={helpBlockStyle}>
-              {locals.help || locals.config.help}
-            </Text>
-          ) : null}
-          {Platform.OS === 'android' ? (
-            <BottomSheet
-              ref={(ref: any) => {
-                this.bottomSheet = ref;
-              }}
-              title={locals.config.title}
-              options={this._renderOptions()}
-              coverScreen={true}
-              titleFontFamily={style.titleFontFamily}
-              styleContainer={style.styleContainer}
-              fontFamily={style.fontFamily}
-            />
-          ) : null}
-        </View>
-      );
+        );
+    };
+
+    shouldComponentUpdate(nextProps: Props, nextState: State) {
+        return true;
+    }
+
+    _startAnimation = () => {
+        Animated.sequence([
+            Animated.timing(this.state.height, {
+                toValue: 0,
+                duration: 250
+            }),
+            Animated.timing(this.state.height, {
+                toValue: 150,
+                duration: 500,
+                delay: 75
+            })
+        ]).start();
+    };
+
+    _renderOptions = (): Array<Object> => {
+        const options = this.props.options.config.options || [
+            'Open camera',
+            'Select from the gallery',
+            'Cancel'
+        ];
+
+        return [
+            {
+                title: options[0],
+                onPress: () =>
+                    ImagePicker.openCamera({}).then((image: Object) =>
+                        this._getImageFromStorage(image.path)
+                    ) && this.bottomSheet.close(),
+                icon: (
+                    <MaterialIcons name={'photo-camera'} size={24} style={styles.icon} />
+                )
+            },
+            {
+                title: options[1],
+                onPress: () =>
+                    ImagePicker.openPicker({}).then((image: Object) =>
+                        this._getImageFromStorage(image.path)
+                    ) && this.bottomSheet.close(),
+                icon: (
+                    <MaterialIcons name={'photo-library'} size={24} style={styles.icon} />
+                )
+            }
+        ];
+    };
+
+    _getImageFromStorage = (path: string) => {
+        this.setState({ image: path, overflow: 'hidden' }, () =>
+            this._startAnimation()
+        );
+        super.getLocals().onChange(path);
     };
-  }
+
+    getTemplate() {
+        return (locals: Object) => {
+            const stylesheet = locals.stylesheet;
+            let formGroupStyle = stylesheet.formGroup.normal;
+            let controlLabelStyle = stylesheet.controlLabel.normal;
+            let textboxStyle = stylesheet.textbox.normal;
+            let helpBlockStyle = stylesheet.helpBlock.normal;
+            let errorBlockStyle = stylesheet.errorBlock;
+            let topContainer = stylesheet.imagePicker
+                ? stylesheet.imagePicker.topContainer
+                : styles.topContainer;
+            let container = stylesheet.imagePicker
+                ? stylesheet.imagePicker.container
+                : styles.container;
+            let cameraColor =
+                locals.config && locals.config.cameraColor
+                    ? locals.config.cameraColor
+                    : '#333';
+            let buttonTextColor =
+                locals.config && locals.config.buttonTextColor
+                    ? locals.config.buttonTextColor
+                    : '#333';
+
+            if (locals.hasError) {
+                controlLabelStyle = stylesheet.controlLabel.error;
+                formGroupStyle = stylesheet.formGroup.error;
+                textboxStyle = stylesheet.textbox.error;
+                helpBlockStyle = stylesheet.helpBlock.error;
+            }
+
+            const style: Object = this.props.options.config.style || {};
+            return (
+                <View style={this.props.options.config.containerStyle || {}}>
+                    {locals.label ? (
+                        <Text
+                            style={[
+                                controlLabelStyle,
+                                locals.error ? { color: '#a94442' } : {}
+                            ]}>
+                            {locals.label}
+                        </Text>
+                    ) : null}
+                    <View
+                        style={[
+                            topContainer,
+                            locals.hasError ? { borderColor: '#a94442' } : {}
+                        ]}>
+                        <Animated.Image
+                            resizeMode="cover"
+                            source={{
+                                uri: this.state.image
+                            }}
+                            style={[
+                                styles.image,
+                                {
+                                    height: this.state.height
+                                }
+                            ]}
+                        />
+                        <View
+                            style={[
+                                { overflow: this.state.overflow },
+                                container,
+                                locals.hasError ? { backgroundColor: '#E28E8E' } : {}
+                            ]}>
+                            {(this.props.options.config.defaultUri == null || this.props.options.config.defaultUri == undefined) ?
+                                <SimpleLineIcons
+                                    name={'camera'}
+                                    size={28}
+                                    style={styles.icon}
+                                    color={cameraColor}
+                                />
+                                :
+                                <Image
+                                    style={{width: 150, height: 150}}
+                                    source={{uri: this.props.options.config.defaultUri}}
+                                    //source={this.state.loading ? require('./loading.gif') : {uri: this.props.options.config.defaultUri}}
+                                    //onLoadStart={(e) => this.setState({loading: true})}
+                                    // onLoad={(e) => this.setState({loading: true})}
+                                    //onLoadEnd={(e) => this.setState({loading: false})}
+                                />
+                            }
+                        </View>
+                    </View>
+                    {this.props.options.config.editable ?
+                        <Button
+                            onPress={
+                                Platform.OS === 'ios'
+                                    ? this._onPressImage
+                                    : () => this.bottomSheet.open()
+                            }
+                            color={buttonTextColor}
+                            title={locals.config.title}
+                        />
+                        :
+                        <View/>
+                    }
+                    {locals.help || locals.config.help ? (
+                        <Text style={helpBlockStyle}>
+                            {locals.help || locals.config.help}
+                        </Text>
+                    ) : null}
+                    {Platform.OS === 'android' ? (
+                        <BottomSheet
+                            ref={(ref: any) => {
+                                this.bottomSheet = ref;
+                            }}
+                            title={locals.config.title}
+                            options={this._renderOptions()}
+                            coverScreen={true}
+                            titleFontFamily={style.titleFontFamily}
+                            styleContainer={style.styleContainer}
+                            fontFamily={style.fontFamily}
+                        />
+                    ) : null}
+                </View>
+            );
+        };
+    }
 }
 
 const styles = StyleSheet.create({
-  topContainer: {
-    overflow: 'hidden',
-    borderRadius: 4,
-    marginBottom: 12,
-    height: 150,
-    borderColor: 'grey',
-    borderWidth: 1
-  },
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: '#e6e6e6',
-    height: 100,
-    borderRadius: 4
-  },
-  icon: {
-    textAlign: 'center',
-    textAlignVertical: 'center'
-  },
-  image: {
-    height: 150
-  }
+    topContainer: {
+        overflow: 'hidden',
+        borderRadius: 4,
+        marginBottom: 12,
+        height: 150,
+        borderColor: 'grey',
+        borderWidth: 1
+    },
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: '#e6e6e6',
+        height: 100,
+        borderRadius: 4
+    },
+    icon: {
+        textAlign: 'center',
+        textAlignVertical: 'center'
+    },
+    image: {
+        height: 150
+    }
 });
 
 export default ImageFactory;

From 02e7c54f87b04d916211c78f0f4d26df1a26fc48 Mon Sep 17 00:00:00 2001
From: Rayhan Yulanda <rayhanyulanda@gmail.com>
Date: Thu, 22 Aug 2019 13:34:48 +0700
Subject: [PATCH 2/2] Update README.md

Update some feature
---
 README.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index c5a01fb..d2f7f36 100644
--- a/README.md
+++ b/README.md
@@ -57,7 +57,10 @@ class App extends React.Component<Props, State> {
               // Used on Android to style BottomSheet
               style: {
                 titleFontFamily: 'Roboto'
-              }
+              }, //optional
+              containerStyle:{marginBottom: 10}, //optional
+              editable: true, //optional, default true
+              defaultUri: 'https://images.pexels.com/photos/736230/pexels-photo-736230.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
             },
             error: 'No image provided',
             factory: ImageFactory