@plusscommunities/pluss-core-app 8.0.1-beta.0 → 8.0.2-auth.0

package/dist/module/components/ImageUploader.js

@@ -1,35 +1,37 @@
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import React, { Component } from 'react';
-import { View, ScrollView, TouchableOpacity, Text, Platform, Linking, Modal, Dimensions, StyleSheet, ImageBackground } from 'react-native';
-import { connect } from 'react-redux';
-import { Icon } from '@rneui/themed';
-import _ from 'lodash';
-import { Camera } from 'expo-camera';
-import * as MediaLibrary from 'expo-media-library';
-import * as ImageManipulator from 'expo-image-manipulator';
-import * as ImagePicker from 'expo-image-picker';
-import ImageBrowser from './expo-image-picker-multiple/ImageBrowser';
-import ExpoImageManipulator from './react-native-expo-image-cropper/ExpoImageManipulator';
-import Header from './Header';
-import { Popup } from './Popup';
-import { PopupMenu } from './PopupMenu';
-import { InlineButton } from './InlineButton';
-import { getValueOrDefault, getThumb300, isVideo } from '../helper';
-import { getMainBrandingColourFromState, BOXGREY, INACTIVE_BUTTON, TEXT_BLUEGREY, TEXT_DARK, LINEGREY } from '../colours';
-import Config from '../config';
-import { fileActions } from '../apis';
-import { stockImagesLoaded, imageLibraryLoaded } from '../actions';
-const SCREEN_WIDTH = Dimensions.get('window').width;
-const SCREEN_HEIGHT = Dimensions.get('window').height;
+import React, { Component } from "react";
+import { Text } from "@plusscommunities/pluss-core-app/components";
+import { View, ScrollView, TouchableOpacity, Platform, Linking, Modal, Dimensions, StyleSheet, ImageBackground } from "react-native";
+import { connect } from "react-redux";
+import { withSafeAreaInsets } from "react-native-safe-area-context";
+import { Icon } from "@rneui/themed";
+import _ from "lodash";
+import { Camera } from "expo-camera";
+import * as MediaLibrary from "expo-media-library";
+import * as ImageManipulator from "expo-image-manipulator";
+import * as ImagePicker from "expo-image-picker";
+import ImageBrowser from "./expo-image-picker-multiple/ImageBrowser";
+import ExpoImageManipulator from "./react-native-expo-image-cropper/ExpoImageManipulator";
+import Header from "./Header";
+import { Popup } from "./Popup";
+import { PopupMenu } from "./PopupMenu";
+import { InlineButton } from "./InlineButton";
+import { getValueOrDefault, getThumb300, isVideo } from "../helper";
+import { getMainBrandingColourFromState, BOXGREY, INACTIVE_BUTTON, TEXT_BLUEGREY, TEXT_DARK, LINEGREY } from "../colours";
+import Config from "../config";
+import { fileActions } from "../apis";
+import { stockImagesLoaded, imageLibraryLoaded } from "../actions";
+const SCREEN_WIDTH = Dimensions.get("window").width;
+const SCREEN_HEIGHT = Dimensions.get("window").height;
 const DEFAULT_ASPECT = [1, 1];
 const DEFAULT_ALLOWS_EDITING = true;
 const DEFAULT_ALLOWS_IOS_CAMERA_EDITING = false;
 const DEFAULT_EXIF = true;
-const DEFULAT_IMAGE_TYPE = 'jpeg';
-const DEFAULT_IMAGE_NAME = 'image';
-const DEFAULT_VIDEO_NAME = 'video';
+const DEFULAT_IMAGE_TYPE = "jpeg";
+const DEFAULT_IMAGE_NAME = "image";
+const DEFAULT_VIDEO_NAME = "video";
 const DEFAULT_SIZE = {
   width: 1400
 };
@@ -50,12 +52,12 @@ class ImageUploader extends Component {
           this.setState({
             loadingLocalFolders: false,
             localAlbums: [{
-              title: 'All Photos',
-              id: ''
+              title: "All Photos",
+              id: ""
             }, ...localAlbums]
           });
         } catch (error) {
-          console.log('loadLocalAlbums - error', error);
+          console.log("loadLocalAlbums - error", error);
           this.setState({
             loadingLocalFolders: false
           });
@@ -72,7 +74,7 @@ class ImageUploader extends Component {
           const libraryRes = await fileActions.getMediaFolders(this.props.user.site);
           this.props.imageLibraryLoaded(libraryRes.data);
         } catch (error) {
-          console.log('loadRemoteAlbums - error', error);
+          console.log("loadRemoteAlbums - error", error);
         } finally {
           this.setState({
             loadingRemoteFolders: false
@@ -87,9 +89,9 @@ class ImageUploader extends Component {
           if (this.props.onUploadProgress) this.props.onUploadProgress(progress);
         });
         this.props.onUploadSuccess(Config.env.baseUploadsUrl + res.key, uploadUri);
-        console.log('upload(retry) success', Config.env.baseUploadsUrl + res.key);
+        console.log("upload(retry) success", Config.env.baseUploadsUrl + res.key);
       } catch (e) {
-        console.log('retryUpload error', e);
+        console.log("retryUpload error", e);
         this.props.onUploadFailed(uploadUri);
       }
     });
@@ -120,9 +122,9 @@ class ImageUploader extends Component {
           if (this.props.onUploadProgress) this.props.onUploadProgress(progress);
         });
         this.props.onUploadSuccess(Config.env.baseUploadsUrl + res.key, uploadUri);
-        console.log('upload success', Config.env.baseUploadsUrl + res.key);
+        console.log("upload success", Config.env.baseUploadsUrl + res.key);
       } catch (e) {
-        console.log('handleImagePicked error', e);
+        console.log("handleImagePicked error", e);
         this.props.onUploadFailed(uploadUri);
       }
     });
@@ -158,9 +160,9 @@ class ImageUploader extends Component {
             if (this.props.onUploadProgress) this.props.onUploadProgress(progress);
           });
           this.props.onUploadSuccess(Config.env.baseUploadsUrl + res.key, uploadUri);
-          console.log('upload success', Config.env.baseUploadsUrl + res.key);
+          console.log("upload success", Config.env.baseUploadsUrl + res.key);
         } catch (e) {
-          console.log('handleMultiImagePicked error', e);
+          console.log("handleMultiImagePicked error", e);
           this.props.onUploadFailed(uploadUri);
         }
       }
@@ -168,7 +170,7 @@ class ImageUploader extends Component {
     _defineProperty(this, "handleVideoPicked", async uri => {
       let uploadUri;
       try {
-        const fileType = uri.substring(uri.lastIndexOf('.') + 1);
+        const fileType = uri.substring(uri.lastIndexOf(".") + 1);
         const fileName = `${getValueOrDefault(this.props.fileName, DEFAULT_VIDEO_NAME)}.${fileType}`;
         uploadUri = fileActions.getUploadUrl(this.props.userId, fileName);
         this.props.onUploadStarted(uploadUri, uri);
@@ -177,9 +179,9 @@ class ImageUploader extends Component {
           if (this.props.onUploadProgress) this.props.onUploadProgress(progress);
         });
         this.props.onUploadSuccess(Config.env.baseUploadsUrl + res.key, uploadUri);
-        console.log('upload success', Config.env.baseUploadsUrl + res.key);
+        console.log("upload success", Config.env.baseUploadsUrl + res.key);
       } catch (e) {
-        console.log('handleVideoPicked error', e);
+        console.log("handleVideoPicked error", e);
         this.props.onUploadFailed(uploadUri);
       }
     });
@@ -187,8 +189,8 @@ class ImageUploader extends Component {
       var _this$state$localAlbu;
       const cameraPermission = await Camera.requestCameraPermissionsAsync();
       const rollPermission = await MediaLibrary.requestPermissionsAsync();
-      if (cameraPermission.status !== 'granted' || Platform.OS === 'ios' && rollPermission.status !== 'granted') {
-        this.showWarningPopup(cameraPermission.status !== 'granted', rollPermission.status !== 'granted');
+      if (cameraPermission.status !== "granted" || Platform.OS === "ios" && rollPermission.status !== "granted") {
+        this.showWarningPopup(cameraPermission.status !== "granted", rollPermission.status !== "granted");
         return false;
       }
       if (((_this$state$localAlbu = this.state.localAlbums) === null || _this$state$localAlbu === void 0 ? void 0 : _this$state$localAlbu.length) <= 0) this.loadLocalAlbums();
@@ -200,7 +202,7 @@ class ImageUploader extends Component {
     _defineProperty(this, "openCamera", async () => {
       if (!(await this.askPermissionsAsync())) return;
       let editingAllowed = this.isEditingEnabled();
-      if (Platform.OS === 'ios') {
+      if (Platform.OS === "ios") {
         editingAllowed = getValueOrDefault(this.props.allowsEditingIOSCamera, getValueOrDefault(this.props.allowsEditing, DEFAULT_ALLOWS_IOS_CAMERA_EDITING));
       }
       const result = await ImagePicker.launchCameraAsync({
@@ -231,21 +233,26 @@ class ImageUploader extends Component {
             showPhotos: true,
             selected: [],
             showRemote: true,
-            selectedAlbumId: ''
+            selectedAlbumId: ""
           });
         }, 1000);
       });
     });
     _defineProperty(this, "openPhotos", async () => {
-      if (Platform.OS === 'android') {
+      if (Platform.OS === "android") {
+        const multiple = !!this.props.multiple;
         const result = await ImagePicker.launchImageLibraryAsync({
           allowsEditing: this.isEditingEnabled(),
+          allowsMultipleSelection: multiple,
+          ...(multiple && {
+            selectionLimit: getValueOrDefault(this.props.imagesLimit, 10)
+          }),
           aspect: getValueOrDefault(this.props.aspect, DEFAULT_ASPECT),
           exif: getValueOrDefault(this.props.exif, DEFAULT_EXIF),
           mediaTypes: this.props.allowVideo ? ImagePicker.MediaTypeOptions.All : ImagePicker.MediaTypeOptions.Images
         });
-        if (!result.cancelled) {
-          if (result.assets.length === 1 && result.assets[0].type === 'video') {
+        if (!(result.canceled || result.cancelled) && !_.isEmpty(result.assets)) {
+          if (result.assets.length === 1 && result.assets[0].type === "video") {
             this.handleVideoPicked(result.assets[0].uri);
           } else {
             this.handleMultiImagePicked(result.assets);
@@ -264,7 +271,7 @@ class ImageUploader extends Component {
             showPhotos: true,
             selected: [],
             showRemote: false,
-            selectedAlbumId: ''
+            selectedAlbumId: ""
           });
         }, 1000);
       });
@@ -310,7 +317,7 @@ class ImageUploader extends Component {
     _defineProperty(this, "onSelectionChange", (selected, videoSelected, onAttach) => {
       this.setState({
         selected,
-        selectedType: videoSelected ? 'video' : 'image',
+        selectedType: videoSelected ? "video" : "image",
         onAttach
       });
     });
@@ -347,19 +354,19 @@ class ImageUploader extends Component {
     });
     _defineProperty(this, "buildOptions", () => {
       const options = [{
-        text: 'Take photo',
+        text: "Take photo",
         onPress: this.openCamera
       }];
       if (this.props.allowVideo) options.push({
-        text: 'Record video',
+        text: "Record video",
         onPress: this.openVideoCamera
       });
       options.push({
-        text: 'Camera Roll',
+        text: "Camera Roll",
         onPress: this.openPhotos
       });
       if (!this.props.hideLibrary) options.push({
-        text: 'Image Library',
+        text: "Image Library",
         onPress: this.openLibrary
       });
       return options;
@@ -385,9 +392,9 @@ class ImageUploader extends Component {
       showPhotos: false,
       showRemote: false,
       selected: [],
-      selectedType: '',
+      selectedType: "",
       onAttach: null,
-      selectedAlbumId: '',
+      selectedAlbumId: "",
       showSelectAlbum: false,
       showCropper: false,
       localAlbums: [],
@@ -410,16 +417,16 @@ class ImageUploader extends Component {
     });
   }
   showWarningPopup(camera, roll) {
-    if (Platform.OS !== 'ios') {
+    if (Platform.OS !== "ios") {
       return;
     }
-    let innerWarning = '';
+    let innerWarning = "";
     if (camera && roll) {
-      innerWarning = 'both your camera and photo library';
+      innerWarning = "both your camera and photo library";
     } else if (camera) {
-      innerWarning = 'your camera';
+      innerWarning = "your camera";
     } else if (roll) {
-      innerWarning = 'your photo library';
+      innerWarning = "your photo library";
     } else {
       // nothing to warn about
       return;
@@ -434,7 +441,7 @@ class ImageUploader extends Component {
     });
   }
   goToPermissionSettings() {
-    Linking.openURL('app-settings:');
+    Linking.openURL("app-settings:");
     this.setState({
       warning: null
     });
@@ -479,7 +486,7 @@ class ImageUploader extends Component {
       showRemote
     } = this.state;
     const selectedAlbum = (showRemote ? this.props.imageLibrary : localAlbums).find(album => album.id === selectedAlbumId);
-    const selectedAlbumText = selectedAlbum ? selectedAlbum.title : '';
+    const selectedAlbumText = selectedAlbum ? selectedAlbum.title : "";
     return /*#__PURE__*/React.createElement(TouchableOpacity, {
       onPress: this.onSelectAlbum
     }, /*#__PURE__*/React.createElement(View, {
@@ -522,13 +529,19 @@ class ImageUploader extends Component {
     });
   }
   renderAttachButton() {
+    var _this$props$insets;
     const {
       selected,
       selectedType
     } = this.state;
     const canAttach = selected.length > 0 && !_.isEmpty(selectedType);
-    const attachText = `Attach ${canAttach ? selected.length : ''} ${canAttach ? selectedType : ''}${selected.length > 1 ? 's' : ''}`;
+    const attachText = `Attach ${canAttach ? selected.length : ""} ${canAttach ? selectedType : ""}${selected.length > 1 ? "s" : ""}`;
+    const bottom = Platform.OS === "android" ? ((_this$props$insets = this.props.insets) === null || _this$props$insets === void 0 ? void 0 : _this$props$insets.bottom) ?? 0 : 0;
     return /*#__PURE__*/React.createElement(View, {
+      style: {
+        backgroundColor: "#fff"
+      }
+    }, /*#__PURE__*/React.createElement(View, {
       style: styles.buttonContainer
     }, /*#__PURE__*/React.createElement(InlineButton, {
       color: canAttach ? this.props.colourBrandingMain : INACTIVE_BUTTON,
@@ -536,9 +549,14 @@ class ImageUploader extends Component {
       fillTouchable: true,
       large: true,
       disabled: !canAttach
-    }, attachText));
+    }, attachText)), bottom > 0 && /*#__PURE__*/React.createElement(View, {
+      style: {
+        height: bottom
+      }
+    }));
   }
   renderSelectAlbumPopup() {
+    var _this$props$insets2;
     const {
       showSelectAlbum,
       localAlbums,
@@ -574,6 +592,8 @@ class ImageUploader extends Component {
     }, /*#__PURE__*/React.createElement(View, {
       style: [styles.albumOptionContainer, {
         marginHorizontal: 0
+      }, Platform.OS === "android" && {
+        paddingBottom: 16 + (((_this$props$insets2 = this.props.insets) === null || _this$props$insets2 === void 0 ? void 0 : _this$props$insets2.bottom) ?? 0)
       }]
     }, /*#__PURE__*/React.createElement(Text, {
       style: [styles.albumOptionText, {
@@ -587,13 +607,15 @@ class ImageUploader extends Component {
       transparent: true,
       animationType: "slide",
       onRequestClose: this.hidePhotos
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.modalContainer
     }, /*#__PURE__*/React.createElement(Header, {
       leftIcon: "angle-left",
       onPressLeft: this.hidePhotos,
-      text: this.props.popupTitle || 'Attach image'
+      text: this.props.popupTitle || "Attach image"
     }), /*#__PURE__*/React.createElement(View, {
       style: styles.contentContainer
-    }, this.renderSelectionPreview(), this.renderSelectedAlbum(), this.renderBrowser()), this.renderAttachButton(), this.renderSelectAlbumPopup());
+    }, this.renderSelectionPreview(), this.renderSelectedAlbum(), this.renderBrowser()), this.renderAttachButton()), this.renderSelectAlbumPopup());
   }
   render() {
     const {
@@ -608,11 +630,11 @@ class ImageUploader extends Component {
         title: "Permissions missing",
         text: warning,
         options: [{
-          text: 'Go to settings',
+          text: "Go to settings",
           action: this.goToPermissionSettings.bind(this),
           bold: true
         }, {
-          text: 'Ignore',
+          text: "Ignore",
           action: this.closeWarningPopup.bind(this)
         }]
       });
@@ -643,6 +665,9 @@ class ImageUploader extends Component {
   }
 }
 const styles = StyleSheet.create({
+  modalContainer: {
+    flex: 1
+  },
   contentContainer: {
     flex: 1,
     backgroundColor: BOXGREY
@@ -655,44 +680,44 @@ const styles = StyleSheet.create({
   },
   selectedItemContainer: {
     flex: 1,
-    backgroundColor: '#0008'
+    backgroundColor: "#0008"
   },
   selectedMarkerContainer: {
-    position: 'absolute',
+    position: "absolute",
     top: 6,
     right: 6,
     width: 20,
     height: 20,
     borderRadius: 10,
-    alignItems: 'center',
-    justifyContent: 'center'
+    alignItems: "center",
+    justifyContent: "center"
   },
   selectedItemText: {
-    fontFamily: 'sf-semibold',
+    fontFamily: "sf-semibold",
     fontSize: 12,
-    color: '#fff',
+    color: "#fff",
     marginBottom: 1
   },
   selectedItemIcon: {
     fontSize: 12,
-    color: '#fff',
+    color: "#fff",
     marginBottom: 1
   },
   buttonContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
+    alignItems: "center",
+    justifyContent: "center",
     height: 60,
     paddingHorizontal: 14,
-    backgroundColor: '#fff'
+    backgroundColor: "#fff"
   },
   selectAlbumButton: {
     paddingTop: 13,
     paddingHorizontal: 14,
-    flexDirection: 'row',
-    alignItems: 'center'
+    flexDirection: "row",
+    alignItems: "center"
   },
   selectAlbumButtonText: {
-    fontFamily: 'sf-medium',
+    fontFamily: "sf-medium",
     fontSize: 14,
     color: TEXT_BLUEGREY,
     marginRight: 6
@@ -702,20 +727,20 @@ const styles = StyleSheet.create({
     color: TEXT_BLUEGREY
   },
   selectAlbumModal: {
-    position: 'absolute',
+    position: "absolute",
     bottom: 0,
     left: 0,
     right: 0,
     top: 0,
-    backgroundColor: 'rgba(0,0,0,0.5)',
+    backgroundColor: "rgba(0,0,0,0.5)",
     zIndex: 1000
   },
   selectAlbumContainer: {
-    position: 'absolute',
+    position: "absolute",
     bottom: 0,
     left: 0,
     right: 0,
-    backgroundColor: '#fff',
+    backgroundColor: "#fff",
     borderTopLeftRadius: 12,
     borderTopRightRadius: 12,
     maxHeight: SCREEN_HEIGHT / 2
@@ -726,9 +751,9 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1
   },
   selectAlbumTitle: {
-    fontFamily: 'sf-semibold',
+    fontFamily: "sf-semibold",
     fontSize: 16,
-    textAlign: 'center',
+    textAlign: "center",
     color: TEXT_DARK
   },
   albumOptionContainer: {
@@ -738,9 +763,9 @@ const styles = StyleSheet.create({
     borderTopWidth: 1
   },
   albumOptionText: {
-    fontFamily: 'sf-regular',
+    fontFamily: "sf-regular",
     fontSize: 16,
-    textAlign: 'center',
+    textAlign: "center",
     color: TEXT_DARK
   },
   selectionPreviewContainer: {
@@ -754,28 +779,28 @@ const styles = StyleSheet.create({
   previewItemImage: {
     width: 50,
     height: 50,
-    alignItems: 'center',
-    justifyContent: 'center',
+    alignItems: "center",
+    justifyContent: "center",
     borderRadius: 4,
-    overflow: 'hidden'
+    overflow: "hidden"
   },
   previewItemRemoveButton: {
-    position: 'absolute',
+    position: "absolute",
     top: -8,
     right: -8
   },
   previewItemRemoveContainer: {
-    justifyContent: 'center',
-    alignItems: 'center',
+    justifyContent: "center",
+    alignItems: "center",
     borderRadius: 10,
     width: 20,
     height: 20,
     borderWidth: 2,
-    borderColor: '#fff'
+    borderColor: "#fff"
   },
   previewItemRemoveIcon: {
     fontSize: 10,
-    color: '#fff',
+    color: "#fff",
     marginBottom: 1
   }
 });
@@ -787,7 +812,7 @@ const mapStateToProps = state => {
   const imageLibrary = media.imageLibrary.filter(folder => !folder.Public).map(album => {
     return {
       title: album.Name,
-      id: album.RowId || '',
+      id: album.RowId || "",
       images: album.RowId ? album.Images : media.stockImages
     };
   });
@@ -802,5 +827,5 @@ export default connect(mapStateToProps, {
   imageLibraryLoaded
 }, null, {
   forwardRef: true
-})(ImageUploader);
+})(withSafeAreaInsets(ImageUploader));
 //# sourceMappingURL=ImageUploader.js.map