@plusscommunities/pluss-core-app 8.0.29 → 8.0.31

package/dist/module/components/ImageUploader.js

@@ -0,0 +1,831 @@
+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 { 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 DEFAULT_SIZE = {
+  width: 1400
+};
+const DEFAULT_COMPRESSION = 0.8;
+class ImageUploader extends Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "loadLocalAlbums", async () => {
+      const hasPermission = await MediaLibrary.getPermissionsAsync();
+      if (!hasPermission.granted) return;
+      this.setState({
+        loadingLocalFolders: true
+      }, async () => {
+        try {
+          const localAlbums = await MediaLibrary.getAlbumsAsync({
+            includeSmartAlbums: true
+          });
+          this.setState({
+            loadingLocalFolders: false,
+            localAlbums: [{
+              title: "All Photos",
+              id: ""
+            }, ...localAlbums]
+          });
+        } catch (error) {
+          console.log("loadLocalAlbums - error", error);
+          this.setState({
+            loadingLocalFolders: false
+          });
+        }
+      });
+    });
+    _defineProperty(this, "loadRemoteAlbums", () => {
+      this.setState({
+        loadingRemoteFolders: true
+      }, async () => {
+        try {
+          const stockImages = await fileActions.getStockPhotos();
+          this.props.stockImagesLoaded(stockImages);
+          const libraryRes = await fileActions.getMediaFolders(this.props.user.site);
+          this.props.imageLibraryLoaded(libraryRes.data);
+        } catch (error) {
+          console.log("loadRemoteAlbums - error", error);
+        } finally {
+          this.setState({
+            loadingRemoteFolders: false
+          });
+        }
+      });
+    });
+    _defineProperty(this, "retryUpload", async (mediaUri, uploadUri) => {
+      try {
+        const uri = isVideo(uploadUri) ? mediaUri : (await this.resizeImageAsync(mediaUri)).uri;
+        const res = await fileActions.uploadUserMediaWithProgress(uri, uploadUri, progress => {
+          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);
+      } catch (e) {
+        console.log("retryUpload error", e);
+        this.props.onUploadFailed(uploadUri);
+      }
+    });
+    _defineProperty(this, "resizeImageAsync", async uri => {
+      const actions = [{
+        resize: getValueOrDefault(this.props.size, DEFAULT_SIZE)
+      }];
+      const saveOptions = {
+        format: DEFULAT_IMAGE_TYPE,
+        compress: getValueOrDefault(this.props.quality, DEFAULT_COMPRESSION),
+        base64: true
+      };
+      return await ImageManipulator.manipulateAsync(uri, actions, saveOptions);
+    });
+    _defineProperty(this, "handleImagePicked", async imageUri => {
+      let uploadUri;
+      try {
+        const fileName = `${getValueOrDefault(this.props.fileName, DEFAULT_IMAGE_NAME)}.${DEFULAT_IMAGE_TYPE}`;
+        uploadUri = fileActions.getUploadUrl(this.props.userId, fileName);
+        this.props.onUploadStarted(uploadUri, imageUri);
+        this.hideUploadMenu();
+        const resized = await this.resizeImageAsync(imageUri);
+        if (this.props.onlySelectImage) {
+          this.props.onImageSelected(resized, fileName);
+          return;
+        }
+        const res = await fileActions.uploadUserMediaWithProgress(resized.uri, uploadUri, progress => {
+          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);
+      } catch (e) {
+        console.log("handleImagePicked error", e);
+        this.props.onUploadFailed(uploadUri);
+      }
+    });
+    _defineProperty(this, "handleMultiImagePicked", async imagesSelected => {
+      // Signal start of all images selected
+      const imagesUploaded = imagesSelected.map(image => {
+        const fileName = `${getValueOrDefault(this.props.fileName, DEFAULT_IMAGE_NAME)}.${DEFULAT_IMAGE_TYPE}`;
+        const uploadUri = fileActions.getUploadUrl(this.props.userId, fileName);
+        if (!this.props.onlySelectImage) this.props.onUploadStarted(uploadUri, image.uri);
+        return {
+          imageUri: image.uri,
+          uploadUri,
+          fileName
+        };
+      });
+      this.hideUploadMenu();
+
+      // Sequentially upload all imagesUploaded
+      for (let i = 0; i < imagesUploaded.length; i++) {
+        const image = imagesUploaded[i];
+        const {
+          imageUri,
+          uploadUri,
+          fileName
+        } = image;
+        try {
+          const resized = await this.resizeImageAsync(imageUri);
+          if (this.props.onlySelectImage) {
+            this.props.onImageSelected(resized, fileName);
+            return;
+          }
+          const res = await fileActions.uploadUserMediaWithProgress(resized.uri, uploadUri, progress => {
+            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);
+        } catch (e) {
+          console.log("handleMultiImagePicked error", e);
+          this.props.onUploadFailed(uploadUri);
+        }
+      }
+    });
+    _defineProperty(this, "handleVideoPicked", async uri => {
+      let uploadUri;
+      try {
+        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);
+        this.hideUploadMenu();
+        const res = await fileActions.uploadUserMediaWithProgress(uri, uploadUri, progress => {
+          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);
+      } catch (e) {
+        console.log("handleVideoPicked error", e);
+        this.props.onUploadFailed(uploadUri);
+      }
+    });
+    _defineProperty(this, "askPermissionsAsync", async () => {
+      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");
+        return false;
+      }
+      if (((_this$state$localAlbu = this.state.localAlbums) === null || _this$state$localAlbu === void 0 ? void 0 : _this$state$localAlbu.length) <= 0) this.loadLocalAlbums();
+      return true;
+    });
+    _defineProperty(this, "isEditingEnabled", () => {
+      return !this.props.multiple && !this.props.allowVideo && getValueOrDefault(this.props.allowsEditing, DEFAULT_ALLOWS_EDITING);
+    });
+    _defineProperty(this, "openCamera", async () => {
+      if (!(await this.askPermissionsAsync())) return;
+      let editingAllowed = this.isEditingEnabled();
+      if (Platform.OS === "ios") {
+        editingAllowed = getValueOrDefault(this.props.allowsEditingIOSCamera, getValueOrDefault(this.props.allowsEditing, DEFAULT_ALLOWS_IOS_CAMERA_EDITING));
+      }
+      const result = await ImagePicker.launchCameraAsync({
+        allowsEditing: editingAllowed,
+        aspect: getValueOrDefault(this.props.aspect, DEFAULT_ASPECT),
+        exif: getValueOrDefault(this.props.exif, DEFAULT_EXIF)
+      });
+      if (!result.canceled && !_.isEmpty(result.assets)) {
+        this.handleImagePicked(result.assets[0].uri);
+      }
+    });
+    _defineProperty(this, "openVideoCamera", async () => {
+      if (!(await this.askPermissionsAsync())) return;
+      const result = await ImagePicker.launchCameraAsync({
+        allowsEditing: this.isEditingEnabled(),
+        mediaTypes: ImagePicker.MediaTypeOptions.Videos
+      });
+      if (!result.canceled && !_.isEmpty(result.assets)) {
+        this.handleImagePicked(result.assets[0].uri);
+      }
+    });
+    _defineProperty(this, "openLibrary", async () => {
+      this.setState({
+        showUploadMenu: false
+      }, () => {
+        setTimeout(() => {
+          this.setState({
+            showPhotos: true,
+            selected: [],
+            showRemote: true,
+            selectedAlbumId: ""
+          });
+        }, 1000);
+      });
+    });
+    _defineProperty(this, "openPhotos", async () => {
+      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.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);
+          }
+        }
+        return;
+      }
+
+      // iOS behaviour
+      if (!(await this.askPermissionsAsync())) return;
+      this.setState({
+        showUploadMenu: false
+      }, () => {
+        setTimeout(() => {
+          this.setState({
+            showPhotos: true,
+            selected: [],
+            showRemote: false,
+            selectedAlbumId: ""
+          });
+        }, 1000);
+      });
+    });
+    _defineProperty(this, "hidePhotos", () => {
+      this.setState({
+        showPhotos: false
+      });
+    });
+    _defineProperty(this, "openCropper", () => {
+      // Switching modals - requires a timeout to ensure the modal is closed before opening the next one
+      this.setState({
+        showPhotos: false
+      }, () => {
+        setTimeout(() => {
+          this.setState({
+            showCropper: true
+          });
+        }, 1000);
+      });
+    });
+    _defineProperty(this, "toggleCropper", () => {
+      this.setState({
+        showCropper: !this.state.showCropper
+      });
+    });
+    _defineProperty(this, "onSelectAlbum", () => {
+      this.setState({
+        showSelectAlbum: true
+      });
+    });
+    _defineProperty(this, "onSelectAlbumClosed", () => {
+      this.setState({
+        showSelectAlbum: false
+      });
+    });
+    _defineProperty(this, "onAlbumSelected", selectedAlbumId => {
+      this.setState({
+        showSelectAlbum: false,
+        selectedAlbumId
+      });
+    });
+    _defineProperty(this, "onSelectionChange", (selected, videoSelected, onAttach) => {
+      this.setState({
+        selected,
+        selectedType: videoSelected ? "video" : "image",
+        onAttach
+      });
+    });
+    _defineProperty(this, "onSelected", async callback => {
+      if (this.isEditingEnabled()) {
+        this.openCropper();
+      } else {
+        const mediaSelected = await callback;
+        // console.log('mediaSelected', mediaSelected);
+        if (this.state.showRemote) {
+          if (this.props.onLibrarySelected) {
+            mediaSelected.map(media => {
+              this.props.onLibrarySelected(media.uri);
+            });
+          }
+        } else {
+          if (mediaSelected[0].mediaType === MediaLibrary.MediaType.video) {
+            const uri = mediaSelected[0].localUri || mediaSelected[0].uri;
+            this.handleVideoPicked(uri);
+          } else {
+            this.handleMultiImagePicked(mediaSelected);
+          }
+        }
+        this.hidePhotos();
+      }
+    });
+    _defineProperty(this, "onRemoveImage", uri => {
+      const selected = [...this.state.selected];
+      const deleteIndex = selected.indexOf(uri);
+      selected.splice(deleteIndex, 1);
+      this.setState({
+        selected
+      });
+    });
+    _defineProperty(this, "buildOptions", () => {
+      const options = [{
+        text: "Take photo",
+        onPress: this.openCamera
+      }];
+      if (this.props.allowVideo) options.push({
+        text: "Record video",
+        onPress: this.openVideoCamera
+      });
+      options.push({
+        text: "Camera Roll",
+        onPress: this.openPhotos
+      });
+      if (!this.props.hideLibrary) options.push({
+        text: "Image Library",
+        onPress: this.openLibrary
+      });
+      return options;
+    });
+    _defineProperty(this, "renderSelectedComponent", selectedItemNumber => {
+      return /*#__PURE__*/React.createElement(View, {
+        style: styles.selectedItemContainer
+      }, /*#__PURE__*/React.createElement(View, {
+        style: [styles.selectedMarkerContainer, {
+          backgroundColor: this.props.colourBrandingMain
+        }]
+      }, this.props.multiple ? /*#__PURE__*/React.createElement(Text, {
+        style: styles.selectedItemText
+      }, selectedItemNumber) : /*#__PURE__*/React.createElement(Icon, {
+        name: "check",
+        type: "font-awesome",
+        iconStyle: styles.selectedItemIcon
+      })));
+    });
+    this.state = {
+      showUploadMenu: false,
+      warning: null,
+      showPhotos: false,
+      showRemote: false,
+      selected: [],
+      selectedType: "",
+      onAttach: null,
+      selectedAlbumId: "",
+      showSelectAlbum: false,
+      showCropper: false,
+      localAlbums: [],
+      loadingLocalFolders: false,
+      loadingRemoteFolders: false
+    };
+  }
+  componentDidMount() {
+    this.loadLocalAlbums();
+    this.loadRemoteAlbums();
+  }
+  showUploadMenu() {
+    this.setState({
+      showUploadMenu: true
+    });
+  }
+  hideUploadMenu() {
+    this.setState({
+      showUploadMenu: false
+    });
+  }
+  showWarningPopup(camera, roll) {
+    if (Platform.OS !== "ios") {
+      return;
+    }
+    let innerWarning = "";
+    if (camera && roll) {
+      innerWarning = "both your camera and photo library";
+    } else if (camera) {
+      innerWarning = "your camera";
+    } else if (roll) {
+      innerWarning = "your photo library";
+    } else {
+      // nothing to warn about
+      return;
+    }
+    this.setState({
+      warning: `You must grant access to ${innerWarning}. Tap Go to settings to change your permission settings.`
+    });
+  }
+  closeWarningPopup() {
+    this.setState({
+      warning: null
+    });
+  }
+  goToPermissionSettings() {
+    Linking.openURL("app-settings:");
+    this.setState({
+      warning: null
+    });
+  }
+  renderSelectionPreview() {
+    const {
+      selected,
+      showRemote
+    } = this.state;
+    return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(ScrollView, {
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      contentContainerStyle: styles.selectionPreviewContainer
+    }, selected && selected.map(uri => {
+      const imageUri = showRemote ? getThumb300(uri) : uri;
+      return /*#__PURE__*/React.createElement(View, {
+        key: uri,
+        style: styles.previewItemContainer
+      }, /*#__PURE__*/React.createElement(ImageBackground, {
+        style: styles.previewItemImage,
+        source: {
+          uri: imageUri
+        }
+      }), /*#__PURE__*/React.createElement(TouchableOpacity, {
+        style: styles.previewItemRemoveButton,
+        onPress: () => this.onRemoveImage(uri)
+      }, /*#__PURE__*/React.createElement(View, {
+        style: [styles.previewItemRemoveContainer, {
+          backgroundColor: this.props.colourBrandingMain
+        }]
+      }, /*#__PURE__*/React.createElement(Icon, {
+        name: "times",
+        type: "font-awesome",
+        iconStyle: styles.previewItemRemoveIcon
+      }))));
+    })));
+  }
+  renderSelectedAlbum() {
+    const {
+      localAlbums,
+      selectedAlbumId,
+      showRemote
+    } = this.state;
+    const selectedAlbum = (showRemote ? this.props.imageLibrary : localAlbums).find(album => album.id === selectedAlbumId);
+    const selectedAlbumText = selectedAlbum ? selectedAlbum.title : "";
+    return /*#__PURE__*/React.createElement(TouchableOpacity, {
+      onPress: this.onSelectAlbum
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.selectAlbumButton
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.selectAlbumButtonText
+    }, selectedAlbumText), /*#__PURE__*/React.createElement(Icon, {
+      name: "angle-down",
+      type: "font-awesome",
+      iconStyle: styles.selectAlbumButtonIcon
+    })));
+  }
+  renderBrowser() {
+    const {
+      selected,
+      selectedAlbumId,
+      showRemote
+    } = this.state;
+    const {
+      imagesLimit,
+      multiple,
+      allowVideo,
+      imageLibrary
+    } = this.props;
+    const width = (SCREEN_WIDTH - 10 * 2) / 4;
+    return /*#__PURE__*/React.createElement(ImageBrowser, {
+      max: !multiple ? 1 : imagesLimit,
+      loadCount: 30,
+      onChange: this.onSelectionChange,
+      renderSelectedComponent: this.renderSelectedComponent,
+      callback: this.onSelected,
+      selected: selected,
+      allowVideo: allowVideo,
+      style: styles.browserContainer,
+      itemStyle: styles.itemContainer,
+      itemWidth: width,
+      itemHeight: width,
+      album: selectedAlbumId,
+      remoteAlbums: showRemote ? imageLibrary : null
+    });
+  }
+  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 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,
+      onPress: this.state.onAttach,
+      fillTouchable: true,
+      large: true,
+      disabled: !canAttach
+    }, attachText)), bottom > 0 && /*#__PURE__*/React.createElement(View, {
+      style: {
+        height: bottom
+      }
+    }));
+  }
+  renderSelectAlbumPopup() {
+    var _this$props$insets2;
+    const {
+      showSelectAlbum,
+      localAlbums,
+      showRemote
+    } = this.state;
+    if (!showSelectAlbum) return null;
+    return /*#__PURE__*/React.createElement(Modal, {
+      visible: true,
+      transparent: true,
+      animationType: "slide",
+      onRequestClose: this.onSelectAlbumClosed
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.selectAlbumModal
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.selectAlbumContainer
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.selectAlbumTitleContainer
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.selectAlbumTitle
+    }, "Select Album")), /*#__PURE__*/React.createElement(ScrollView, null, (showRemote ? this.props.imageLibrary : localAlbums).map((album, index) => {
+      return /*#__PURE__*/React.createElement(TouchableOpacity, {
+        key: album.id,
+        onPress: () => this.onAlbumSelected(album.id)
+      }, /*#__PURE__*/React.createElement(View, {
+        style: [styles.albumOptionContainer, index === 0 && {
+          borderTopWidth: 0
+        }]
+      }, /*#__PURE__*/React.createElement(Text, {
+        style: styles.albumOptionText
+      }, album.title)));
+    })), /*#__PURE__*/React.createElement(TouchableOpacity, {
+      onPress: this.onSelectAlbumClosed
+    }, /*#__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, {
+        color: this.props.colourBrandingMain
+      }]
+    }, "Cancel"))))));
+  }
+  renderPhotos() {
+    return /*#__PURE__*/React.createElement(Modal, {
+      visible: true,
+      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"
+    }), /*#__PURE__*/React.createElement(View, {
+      style: styles.contentContainer
+    }, this.renderSelectionPreview(), this.renderSelectedAlbum(), this.renderBrowser()), this.renderAttachButton()), this.renderSelectAlbumPopup());
+  }
+  render() {
+    const {
+      warning,
+      showUploadMenu,
+      showPhotos,
+      showCropper,
+      selected
+    } = this.state;
+    if (warning != null) {
+      return /*#__PURE__*/React.createElement(Popup, {
+        title: "Permissions missing",
+        text: warning,
+        options: [{
+          text: "Go to settings",
+          action: this.goToPermissionSettings.bind(this),
+          bold: true
+        }, {
+          text: "Ignore",
+          action: this.closeWarningPopup.bind(this)
+        }]
+      });
+    }
+    if (showUploadMenu) {
+      const options = this.buildOptions();
+      return /*#__PURE__*/React.createElement(PopupMenu, {
+        onClose: this.hideUploadMenu.bind(this),
+        options: options,
+        title: this.props.popupTitle,
+        cancelText: "Cancel"
+      });
+    }
+    if (showPhotos) return this.renderPhotos();
+    if (showCropper) {
+      return /*#__PURE__*/React.createElement(ExpoImageManipulator, {
+        photo: {
+          uri: selected[0]
+        },
+        onToggleModal: this.toggleCropper,
+        isVisible: showCropper,
+        onPictureChoosed: data => {
+          this.handleImagePicked(data.uri);
+        }
+      });
+    }
+    return null;
+  }
+}
+const styles = StyleSheet.create({
+  modalContainer: {
+    flex: 1
+  },
+  contentContainer: {
+    flex: 1,
+    backgroundColor: BOXGREY
+  },
+  browserContainer: {
+    padding: 10
+  },
+  itemContainer: {
+    padding: 4
+  },
+  selectedItemContainer: {
+    flex: 1,
+    backgroundColor: "#0008"
+  },
+  selectedMarkerContainer: {
+    position: "absolute",
+    top: 6,
+    right: 6,
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  selectedItemText: {
+    fontFamily: "sf-semibold",
+    fontSize: 12,
+    color: "#fff",
+    marginBottom: 1
+  },
+  selectedItemIcon: {
+    fontSize: 12,
+    color: "#fff",
+    marginBottom: 1
+  },
+  buttonContainer: {
+    alignItems: "center",
+    justifyContent: "center",
+    height: 60,
+    paddingHorizontal: 14,
+    backgroundColor: "#fff"
+  },
+  selectAlbumButton: {
+    paddingTop: 13,
+    paddingHorizontal: 14,
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  selectAlbumButtonText: {
+    fontFamily: "sf-medium",
+    fontSize: 14,
+    color: TEXT_BLUEGREY,
+    marginRight: 6
+  },
+  selectAlbumButtonIcon: {
+    fontSize: 20,
+    color: TEXT_BLUEGREY
+  },
+  selectAlbumModal: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+    backgroundColor: "rgba(0,0,0,0.5)",
+    zIndex: 1000
+  },
+  selectAlbumContainer: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: "#fff",
+    borderTopLeftRadius: 12,
+    borderTopRightRadius: 12,
+    maxHeight: SCREEN_HEIGHT / 2
+  },
+  selectAlbumTitleContainer: {
+    padding: 16,
+    borderColor: LINEGREY,
+    borderBottomWidth: 1
+  },
+  selectAlbumTitle: {
+    fontFamily: "sf-semibold",
+    fontSize: 16,
+    textAlign: "center",
+    color: TEXT_DARK
+  },
+  albumOptionContainer: {
+    marginHorizontal: 16,
+    paddingVertical: 16,
+    borderColor: LINEGREY,
+    borderTopWidth: 1
+  },
+  albumOptionText: {
+    fontFamily: "sf-regular",
+    fontSize: 16,
+    textAlign: "center",
+    color: TEXT_DARK
+  },
+  selectionPreviewContainer: {
+    paddingTop: 14,
+    paddingRight: 2,
+    paddingLeft: 14
+  },
+  previewItemContainer: {
+    marginRight: 12
+  },
+  previewItemImage: {
+    width: 50,
+    height: 50,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 4,
+    overflow: "hidden"
+  },
+  previewItemRemoveButton: {
+    position: "absolute",
+    top: -8,
+    right: -8
+  },
+  previewItemRemoveContainer: {
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 10,
+    width: 20,
+    height: 20,
+    borderWidth: 2,
+    borderColor: "#fff"
+  },
+  previewItemRemoveIcon: {
+    fontSize: 10,
+    color: "#fff",
+    marginBottom: 1
+  }
+});
+const mapStateToProps = state => {
+  const {
+    user,
+    media
+  } = state;
+  const imageLibrary = media.imageLibrary.filter(folder => !folder.Public).map(album => {
+    return {
+      title: album.Name,
+      id: album.RowId || "",
+      images: album.RowId ? album.Images : media.stockImages
+    };
+  });
+  return {
+    user,
+    imageLibrary,
+    colourBrandingMain: getMainBrandingColourFromState(state)
+  };
+};
+export default connect(mapStateToProps, {
+  stockImagesLoaded,
+  imageLibraryLoaded
+}, null, {
+  forwardRef: true
+})(withSafeAreaInsets(ImageUploader));
+//# sourceMappingURL=ImageUploader.js.map