@plusscommunities/pluss-core-app 8.0.29 → 8.0.35

package/dist/module/components/PlussChat.js

@@ -0,0 +1,1078 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+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, Image, ImageBackground, TouchableOpacity, KeyboardAvoidingView, Platform, ScrollView, Alert, TextInput } from "react-native";
+import { GiftedChat, Bubble, MessageText, Send, InputToolbar } from "react-native-gifted-chat";
+import { connect } from "react-redux";
+import _ from "lodash";
+import moment from "moment";
+import { Icon } from "@rneui/themed";
+import { withSafeAreaInsets } from "react-native-safe-area-context";
+import { Spinner } from "./Spinner";
+import { ProfilePic } from "./ProfilePic";
+import PlussChatTime from "./PlussChatTime";
+import { PDFPopup } from "./PDFPopup";
+import { Attachment } from "./Attachment";
+import PlussChatMessage from "./PlussChatMessage";
+import { Text } from ".";
+import { ConfirmPopup } from "./ConfirmPopup";
+import { TEXT_DARK, LINEGREY, TEXT_DARKEST, getMainBrandingColourFromState, getLightBrandingColourFromState, BG_GREY, TEXT_BLUEGREY } from "../colours";
+import { getEnabledTabsFromState, get1400, getThumb300, imageExists, isVideo, getImageSource, getFileName } from "../helper";
+import Config, { Services } from "../config";
+import ImageUploader from "./ImageUploader";
+import ImageUploadProgress from "./ImageUploadProgress";
+import { ImagePopup } from "./ImagePopup";
+import { VideoPopup } from "./VideoPopup";
+const IMAGE_SIZE_SMALL = 55;
+const IMAGE_SIZE_LARGE = 110;
+const IMAGES_PER_ROW = 4;
+const IMAGE_MARGIN = 2;
+const IMAGE_PREVIEW_AREA_HEIGHT = 105;
+const IMAGE_PREVIEW_SIZE = IMAGE_PREVIEW_AREA_HEIGHT - 25;
+class PlussChat extends Component {
+  constructor(props) {
+    var _this$props$insets;
+    super(props);
+    _defineProperty(this, "onPressEvent", event => {
+      Services.navigation.navigate("eventDetail", {
+        event
+      });
+    });
+    _defineProperty(this, "onPressAttachment", attachment => {
+      switch (attachment.Type) {
+        case "Event":
+          Services.navigation.navigate("eventDetail", {
+            event: attachment
+          });
+          break;
+        case "Place":
+          Services.navigation.navigate("placeDetail", {
+            place: attachment
+          });
+          break;
+        default:
+          return;
+      }
+    });
+    _defineProperty(this, "hasImagesAttached", (imagesToUpload = null) => {
+      return !_.isEmpty(imagesToUpload || this.state.imagesToUpload);
+    });
+    _defineProperty(this, "hasImagesReady", (imagesToUpload = null) => {
+      const upload = imagesToUpload || this.state.imagesToUpload;
+      return this.hasImagesAttached(upload) && upload.every(i => !i.uploading && i.thumbNailExists);
+    });
+    _defineProperty(this, "waitForThumbnails", () => {
+      if (this.checkThumb) return;
+      this.checkThumb = setInterval(async () => {
+        const imagesToUpload = [];
+        await Promise.all(this.state.imagesToUpload.map(image => {
+          return new Promise(async resolve => {
+            const newImage = {
+              ...image
+            };
+            imagesToUpload.push(newImage);
+            if (newImage.url && !newImage.thumbNailExists) {
+              newImage.uploading = false;
+              newImage.allowRetry = false;
+              newImage.thumbNailExists = await imageExists(newImage.thumbNailUrl);
+              resolve(newImage.thumbNailExists);
+            }
+            resolve(true);
+          });
+        }));
+        const thumbnailsExist = imagesToUpload.every(image => !image.url || image.thumbNailExists);
+        if (thumbnailsExist) {
+          clearInterval(this.checkThumb);
+          this.checkThumb = null;
+          this.setState({
+            imagesToUpload
+          });
+        }
+      }, 2000);
+    });
+    _defineProperty(this, "onOpenAttachment", a => {
+      this.setState({
+        selectedPDF: a
+      });
+    });
+    _defineProperty(this, "onCloseAttachment", () => {
+      this.setState({
+        selectedPDF: null
+      });
+    });
+    _defineProperty(this, "onFocusInput", () => {
+      this.setState({
+        keyboardOpen: true
+      });
+      if (this.props.keyboardOpen) {
+        this.props.keyboardOpen();
+      }
+    });
+    _defineProperty(this, "onBlurInput", () => {
+      this.setState({
+        keyboardOpen: false
+      });
+    });
+    _defineProperty(this, "onUploadStarted", (uploadUri, imageUri) => {
+      const imagesToUpload = [...this.state.imagesToUpload, {
+        uploading: true,
+        uploadProgress: "0%",
+        uploadUri,
+        imageUri,
+        allowRetry: true
+      }];
+      this.setState({
+        imagesToUpload
+      });
+    });
+    _defineProperty(this, "onUploadProgress", progress => {
+      const imagesToUpload = [...this.state.imagesToUpload];
+      imagesToUpload.map(img => {
+        if (img.uploadUri === progress.uri) {
+          img.uploadProgress = progress.percentage;
+          img.uploading = true;
+          img.allowRetry = true;
+        }
+      });
+      this.setState({
+        imagesToUpload
+      });
+    });
+    _defineProperty(this, "onUploadSuccess", async (uri, uploadUri) => {
+      const imagesToUpload = [...this.state.imagesToUpload];
+      imagesToUpload.map(img => {
+        if (img.uploadUri === uploadUri && img.uploading) {
+          img.url = uri.replace("/general/", "/general1400/");
+          img.thumbNailExists = false;
+          img.thumbNailUrl = getThumb300(img.url);
+          img.allowRetry = true;
+        }
+      });
+      this.setState({
+        imagesToUpload
+      }, () => this.waitForThumbnails());
+    });
+    _defineProperty(this, "onUploadFailed", uploadUri => {
+      const imagesToUpload = [...this.state.imagesToUpload];
+      imagesToUpload.map(img => {
+        if (img.uploadUri === uploadUri) {
+          img.uploading = true; // Requried for retry
+          img.uploadProgress = "";
+          img.allowRetry = true;
+        }
+      });
+      this.setState({
+        imagesToUpload
+      });
+    });
+    _defineProperty(this, "onLibrarySelected", uri => {
+      const imagesToUpload = [...this.state.imagesToUpload, {
+        uploading: false,
+        allowRetry: false,
+        url: get1400(uri),
+        thumbNailExists: true,
+        thumbNailUrl: getThumb300(uri)
+      }];
+      this.setState({
+        imagesToUpload
+      });
+    });
+    _defineProperty(this, "onPressImage", (images, selected) => {
+      this.setState({
+        imagePopupSource: images,
+        imagePopupIndex: images.indexOf(selected),
+        imagePopupOpen: true
+      });
+    });
+    _defineProperty(this, "onReply", message => {
+      this.setState({
+        replyingTo: message
+      });
+    });
+    _defineProperty(this, "onDelete", message => {
+      // Only proceed if delete handler is provided
+      if (!this.props.onDeleteMessage) {
+        return;
+      }
+
+      // Only allow deletion of own messages
+      if (message.user._id !== this.props.user.uid) {
+        return;
+      }
+      this.setState({
+        showDeleteMessageConfirm: true,
+        messageToDelete: message
+      });
+    });
+    _defineProperty(this, "onCancelDeleteMessage", () => {
+      this.setState({
+        showDeleteMessageConfirm: false,
+        messageToDelete: null
+      });
+    });
+    _defineProperty(this, "onConfirmDeleteMessage", async () => {
+      const {
+        messageToDelete
+      } = this.state;
+      if (!messageToDelete) return;
+      this.setState({
+        showDeleteMessageConfirm: false
+      });
+      try {
+        // Call the parent's delete handler if provided
+        if (this.props.onDeleteMessage) {
+          await this.props.onDeleteMessage(messageToDelete);
+        }
+        this.setState({
+          messageToDelete: null
+        });
+      } catch (error) {
+        // Handle error gracefully if parent handler fails
+        console.log("onConfirmDeleteMessage error", error);
+        // Error is already handled by parent component
+        this.setState({
+          messageToDelete: null
+        });
+      }
+    });
+    _defineProperty(this, "onRemoveImage", url => {
+      const imagesToUpload = this.state.imagesToUpload.filter(image => image.url !== url);
+      this.setState({
+        imagesToUpload
+      });
+    });
+    _defineProperty(this, "toggleFullscreenVideo", url => {
+      if (typeof url !== "string") url = "";
+      this.setState({
+        showFullscreenVideo: url.length > 0,
+        currentVideoUrl: url
+      });
+    });
+    const bottomInset = ((_this$props$insets = this.props.insets) === null || _this$props$insets === void 0 ? void 0 : _this$props$insets.bottom) ?? 0;
+    const isSingleTab = this.props.tabCount === 1 && bottomInset > 0;
+    this.MIN_COMPOSER_HEIGHT = Platform.select({
+      ios: isSingleTab ? 42 : 33,
+      android: 41
+    });
+    this.state = {
+      currentUser: {
+        _id: this.props.user.uid,
+        name: this.props.user.displayName,
+        avatar: !_.isUndefined(this.props.user.profilePic) && !_.isEmpty(this.props.user.profilePic) ? this.props.user.profilePic : Config.env.tinyChatDefault
+      },
+      messages: [],
+      imagePopupSource: [],
+      imagePopupIndex: 0,
+      imagePopupOpen: false,
+      imagesToUpload: [],
+      showFullscreenVideo: false,
+      currentVideoUrl: "",
+      showDeleteMessageConfirm: false,
+      messageToDelete: null,
+      composerHeight: this.MIN_COMPOSER_HEIGHT
+    };
+    this.checkThumb = null;
+  }
+  UNSAFE_componentWillMount() {
+    this.updateMessages(this.props);
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    // Only update if messages actually changed
+    if (nextProps.messages !== this.props.messages) {
+      this.updateMessages(nextProps);
+    }
+  }
+  updateMessages(props) {
+    // Only update if messages actually changed
+    if (!_.isUndefined(props.messages) && !_.isEqual(props.messages, this.state.messages)) {
+      this.setState({
+        messages: props.messages
+      });
+    }
+  }
+
+  /***
+   *
+   * Messaging functionality
+   */
+  onSend(messages = []) {
+    // if (this.chatKey) {
+    //     this.sendMessage(messages[0]);
+    // }
+  }
+  showUploadMenu() {
+    this.imageUploader.showUploadMenu();
+  }
+  closeGallery() {
+    this.setState({
+      imagePopupSource: [],
+      imagePopupIndex: 0,
+      imagePopupOpen: false
+    });
+  }
+  sendMessages(messages) {
+    if (this.hasImagesAttached()) {
+      // Don't allow send if attached images aren't ready
+      if (!this.hasImagesReady()) return;
+      messages[0].image = this.state.imagesToUpload.map(image => image.url);
+    }
+    if (_.isEmpty(messages[0].text)) {
+      messages[0].text = "";
+    }
+    if (!messages[0].text && !messages[0].image) return;
+    if (this.state.replyingTo) {
+      messages[0].replyingTo = this.state.replyingTo;
+    }
+    this.props.onSend(messages);
+    this.setState({
+      imagesToUpload: [],
+      replyingTo: null
+    });
+  }
+
+  /**
+   *
+   * Render Functions
+   */
+  renderBubble(bubbleProps) {
+    const wrapperStyle = {};
+    if (!_.isEmpty(bubbleProps.currentMessage.text) && !_.isEmpty(bubbleProps.currentMessage.image)) {
+      wrapperStyle.paddingTop = 8;
+      wrapperStyle.paddingBottom = 16;
+      wrapperStyle.minWidth = 142; // 110 image width + 16 padding either side
+    }
+    if (!_.isEmpty(bubbleProps.currentMessage.attachments)) {
+      wrapperStyle.paddingTop = 8;
+      wrapperStyle.paddingBottom = 16;
+      wrapperStyle.paddingHorizontal = 16;
+    }
+    return /*#__PURE__*/React.createElement(Bubble, _extends({}, bubbleProps, {
+      renderMessageImage: () => null,
+      isCustomViewBottom: true,
+      wrapperStyle: {
+        left: {
+          backgroundColor: LINEGREY,
+          borderRadius: 25,
+          ...wrapperStyle
+        },
+        right: {
+          backgroundColor: this.props.colourBrandingLight,
+          borderRadius: 25,
+          ...wrapperStyle
+        }
+      },
+      containerToNextStyle: {
+        left: {
+          borderBottomLeftRadius: 5
+        },
+        right: {
+          borderBottomRightRadius: 5
+        }
+      },
+      containerToPreviousStyle: {
+        left: {
+          borderTopLeftRadius: 5
+        },
+        right: {
+          borderTopRightRadius: 5
+        }
+      }
+    }));
+  }
+  renderMessage(props) {
+    return /*#__PURE__*/React.createElement(PlussChatMessage, _extends({
+      key: props.RowId,
+      colourBrandingMain: this.props.colourBrandingMain,
+      onPressReply: () => {
+        this.onReply(props.currentMessage);
+      },
+      onPressDelete: this.props.onDeleteMessage ? () => {
+        this.onDelete(props.currentMessage);
+      } : null
+    }, props));
+  }
+  renderMessageText(messageTextProps) {
+    // If message is deleted, show placeholder text
+    const props = messageTextProps.currentMessage.deleted ? {
+      ...messageTextProps,
+      currentMessage: {
+        ...messageTextProps.currentMessage,
+        text: "[Message deleted]"
+      }
+    } : messageTextProps;
+    return /*#__PURE__*/React.createElement(MessageText, _extends({}, props, {
+      textStyle: {
+        left: {
+          fontFamily: "sf-regular",
+          fontSize: 16,
+          color: TEXT_DARKEST,
+          marginTop: 10,
+          marginBottom: 10,
+          marginLeft: 15,
+          marginRight: 15
+        },
+        right: {
+          fontFamily: "sf-regular",
+          fontSize: 16,
+          color: this.props.colourBrandingMain,
+          marginTop: 10,
+          marginBottom: 10,
+          marginLeft: 15,
+          marginRight: 15
+        }
+      },
+      linkStyle: {
+        left: {
+          color: TEXT_DARKEST
+        },
+        right: {
+          color: this.props.colourBrandingMain
+        }
+      },
+      textProps: {
+        selectable: true
+      }
+    }));
+  }
+  renderTime() {
+    return null;
+  }
+  renderDay(dayProps) {
+    return /*#__PURE__*/React.createElement(PlussChatTime, _extends({}, dayProps, {
+      textStyle: {
+        fontFamily: "sf-semibold",
+        color: TEXT_DARK,
+        fontSize: 12
+      }
+    }));
+  }
+  renderCustomView({
+    currentMessage,
+    position
+  }) {
+    // Don't show images or attachments for deleted messages
+    if (currentMessage.deleted) {
+      return null;
+    }
+    if (currentMessage.image) {
+      const images = typeof currentMessage.image === "string" ? [currentMessage.image] : currentMessage.image;
+      const containerWidth = (() => {
+        if (images.length === 0) return 0;
+        if (images.length === 1) return IMAGE_SIZE_LARGE;
+        if (images.length <= IMAGES_PER_ROW) return (IMAGE_SIZE_SMALL + IMAGE_MARGIN) * images.length;
+        return (IMAGE_SIZE_SMALL + IMAGE_MARGIN) * IMAGES_PER_ROW;
+      })();
+      return /*#__PURE__*/React.createElement(View, {
+        style: [styles.imagesContainer, {
+          width: containerWidth,
+          paddingVertical: currentMessage.text ? 0 : 20
+        }]
+      }, images.map(img => {
+        const thumb = getThumb300(img);
+        if (isVideo(img)) {
+          return /*#__PURE__*/React.createElement(TouchableOpacity, {
+            key: thumb,
+            onPress: this.toggleFullscreenVideo.bind(this, img)
+          }, /*#__PURE__*/React.createElement(ImageBackground, {
+            style: images.length > 1 ? styles.messageImageSmall : styles.messageImageLarge,
+            source: {
+              uri: thumb
+            }
+          }, /*#__PURE__*/React.createElement(View, {
+            style: styles.imagePlayContainer
+          }, /*#__PURE__*/React.createElement(Icon, {
+            name: "play",
+            type: "font-awesome",
+            iconStyle: styles.imageControlIcon
+          }))));
+        }
+        return /*#__PURE__*/React.createElement(TouchableOpacity, {
+          key: thumb,
+          onPress: () => this.onPressImage(images, img)
+        }, /*#__PURE__*/React.createElement(Image, {
+          source: {
+            uri: thumb
+          },
+          style: images.length > 1 ? styles.messageImageSmall : styles.messageImageLarge
+        }));
+      }));
+    }
+    if (!_.isEmpty(currentMessage.attachments)) {
+      return /*#__PURE__*/React.createElement(View, null, currentMessage.attachments.map((url, i) => {
+        return /*#__PURE__*/React.createElement(Attachment, {
+          onPress: () => {
+            this.onOpenAttachment(url);
+          },
+          key: i,
+          title: getFileName(url)
+        });
+      }));
+    }
+    if (currentMessage.event) {
+      return /*#__PURE__*/React.createElement(TouchableOpacity, {
+        onPress: this.onPressEvent.bind(this, currentMessage.event)
+      }, /*#__PURE__*/React.createElement(View, {
+        style: styles.eventContainer[position]
+      }, /*#__PURE__*/React.createElement(Image, {
+        style: [styles.eventImage, styles.eventImageMargin[position]],
+        source: {
+          uri: currentMessage.event.Thumbnail
+        }
+      }), /*#__PURE__*/React.createElement(View, {
+        style: styles.eventInfo
+      }, /*#__PURE__*/React.createElement(Text, {
+        numberOfLines: 3,
+        style: [styles.eventTitle, styles.eventInfoAlign[position], {
+          color: this.props.colourBrandingMain
+        }]
+      }, currentMessage.event.Title), /*#__PURE__*/React.createElement(Text, {
+        style: [styles.eventDate, styles.eventInfoAlign[position], {
+          color: this.props.colourBrandingMain
+        }]
+      }, moment.utc(currentMessage.event.StartTime).local().format("ddd D MMM")))));
+    }
+    if (currentMessage.attachment) {
+      return /*#__PURE__*/React.createElement(TouchableOpacity, {
+        onPress: this.onPressAttachment.bind(this, currentMessage.attachment)
+      }, /*#__PURE__*/React.createElement(View, {
+        style: styles.eventContainer[position]
+      }, /*#__PURE__*/React.createElement(Image, {
+        style: [styles.eventImage, styles.eventImageMargin[position]],
+        source: {
+          uri: currentMessage.attachment.Thumbnail
+        }
+      }), /*#__PURE__*/React.createElement(View, {
+        style: styles.eventInfo
+      }, /*#__PURE__*/React.createElement(Text, {
+        numberOfLines: 3,
+        style: [styles.eventTitle, styles.eventInfoAlign[position], {
+          color: this.props.colourBrandingMain
+        }]
+      }, currentMessage.attachment.Title), currentMessage.attachment.StartTime && /*#__PURE__*/React.createElement(Text, {
+        style: [styles.eventDate, styles.eventInfoAlign[position], {
+          color: this.props.colourBrandingMain
+        }]
+      }, moment.utc(currentMessage.attachment.StartTime).local().format("ddd D MMM")))));
+    }
+    return null;
+  }
+  renderSend(props) {
+    const buttonTopOffset = this.state.replyingTo ? 46 : 4;
+    const showSendButton = !_.isEmpty(props.text) || this.hasImagesReady(props.imagesToUpload);
+    return /*#__PURE__*/React.createElement(View, {
+      style: {
+        position: "absolute",
+        top: buttonTopOffset,
+        right: 8,
+        flexDirection: "row",
+        alignItems: "center"
+      }
+    }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+      onPress: this.showUploadMenu.bind(this),
+      style: [styles.sendContainer, {
+        right: _.isEmpty(props.text) && !this.hasImagesReady(props.imagesToUpload) ? 0 : this.MIN_COMPOSER_HEIGHT,
+        width: this.MIN_COMPOSER_HEIGHT,
+        height: this.MIN_COMPOSER_HEIGHT
+      }]
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "picture-o",
+      type: "font-awesome",
+      iconStyle: [styles.send, {
+        width: this.MIN_COMPOSER_HEIGHT
+      }]
+    })), showSendButton && /*#__PURE__*/React.createElement(Send, _extends({}, props, {
+      alwaysShowSend: true,
+      onSend: props.onSend,
+      text: props.text || " ",
+      containerStyle: [styles.sendContainer, {
+        width: this.MIN_COMPOSER_HEIGHT,
+        height: this.MIN_COMPOSER_HEIGHT
+      }]
+    }), /*#__PURE__*/React.createElement(Icon, {
+      name: "paper-plane",
+      type: "font-awesome",
+      iconStyle: [styles.send, {
+        width: this.MIN_COMPOSER_HEIGHT
+      }]
+    })));
+  }
+  renderAccessory(props) {
+    const hasAttachment = this.hasImagesAttached(props.imagesToUpload);
+    if (!hasAttachment) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(ScrollView, {
+      horizontal: true,
+      style: styles.uploadImagesContainer
+    }, props.imagesToUpload.map(image => {
+      if (image.uploading) {
+        return /*#__PURE__*/React.createElement(ImageUploadProgress, {
+          key: image.uploadUri,
+          uploader: this.imageUploader,
+          image: image,
+          color: this.props.colourBrandingMain,
+          style: {
+            width: IMAGE_PREVIEW_SIZE,
+            marginRight: 10
+          },
+          progressTextStyle: {
+            fontSize: 10
+          }
+        });
+      }
+      const isVideoUrl = isVideo(image.url);
+      return /*#__PURE__*/React.createElement(View, {
+        key: image.url,
+        style: styles.accessoryImageContainer
+      }, /*#__PURE__*/React.createElement(ImageBackground, {
+        style: styles.accessoryImage,
+        imageStyle: styles.accessoryImageBorder,
+        source: getImageSource(image.thumbNailExists ? image.thumbNailUrl : image.url)
+      }, isVideoUrl && /*#__PURE__*/React.createElement(View, {
+        style: styles.imagePlayContainer
+      }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+        onPress: this.toggleFullscreenVideo.bind(this, image.url)
+      }, /*#__PURE__*/React.createElement(Icon, {
+        name: "play",
+        type: "font-awesome",
+        iconStyle: styles.imageControlIcon
+      })))), /*#__PURE__*/React.createElement(TouchableOpacity, {
+        style: styles.previewItemRemoveButton,
+        onPress: () => this.onRemoveImage(image.url),
+        hitSlop: {
+          top: 8,
+          right: 8,
+          bottom: 8,
+          left: 8
+        }
+      }, /*#__PURE__*/React.createElement(View, {
+        style: [styles.previewItemRemoveContainer, {
+          backgroundColor: this.props.colourBrandingMain
+        }]
+      }, /*#__PURE__*/React.createElement(Icon, {
+        name: "times",
+        type: "font-awesome",
+        iconStyle: styles.previewItemRemoveIcon
+      }))));
+    }));
+  }
+  renderInputToolbar(props) {
+    const hasAttachment = this.hasImagesAttached(props.imagesToUpload);
+    return /*#__PURE__*/React.createElement(InputToolbar, _extends({}, props, {
+      containerStyle: styles.inputContainer,
+      renderComposer: this.renderComposer.bind(this),
+      renderAccessory: hasAttachment ? this.renderAccessory.bind(this) : null,
+      accessoryStyle: hasAttachment && styles.accessory
+    }));
+  }
+  renderFooter() {
+    // if (this.state.keyboardOpen) {
+    //     return null;
+    // }
+    // fixes an issue where there's no gap between bottom message and reply container
+    return /*#__PURE__*/React.createElement(View, {
+      style: {
+        height: 10
+      }
+    });
+  }
+  renderLoading() {
+    return /*#__PURE__*/React.createElement(View, {
+      style: {
+        marginTop: 15,
+        justifyContent: "center",
+        alignContent: "center"
+      }
+    }, /*#__PURE__*/React.createElement(Spinner, {
+      size: "small",
+      color: this.props.colourBrandingMain
+    }));
+  }
+  renderAvatar(props) {
+    return /*#__PURE__*/React.createElement(View, {
+      style: {
+        marginRight: 2
+      }
+    }, /*#__PURE__*/React.createElement(ProfilePic, {
+      ProfilePic: props.currentMessage.user.avatar,
+      Diameter: 28
+    }));
+  }
+  renderComposer(props) {
+    var _this$state$replyingT, _this$state$replyingT2;
+    return /*#__PURE__*/React.createElement(View, {
+      style: {
+        width: "100%"
+      }
+    }, this.state.replyingTo && /*#__PURE__*/React.createElement(View, {
+      style: styles.replyingTo
+    }, /*#__PURE__*/React.createElement(Text, {
+      type: "body"
+    }, "Replying to", " ", _.isEmpty((_this$state$replyingT = this.state.replyingTo) === null || _this$state$replyingT === void 0 || (_this$state$replyingT = _this$state$replyingT.user) === null || _this$state$replyingT === void 0 ? void 0 : _this$state$replyingT.name) ? "message" : (_this$state$replyingT2 = this.state.replyingTo) === null || _this$state$replyingT2 === void 0 || (_this$state$replyingT2 = _this$state$replyingT2.user) === null || _this$state$replyingT2 === void 0 ? void 0 : _this$state$replyingT2.name), /*#__PURE__*/React.createElement(TouchableOpacity, {
+      style: styles.replyingRemoveButton,
+      onPress: () => this.onReply(null),
+      hitSlop: {
+        top: 8,
+        right: 8,
+        bottom: 8,
+        left: 8
+      }
+    }, /*#__PURE__*/React.createElement(View, {
+      style: [styles.replyingRemoveContainer, {
+        backgroundColor: this.props.colourBrandingMain
+      }]
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "times",
+      type: "font-awesome",
+      iconStyle: styles.replyingRemoveIcon
+    })))), /*#__PURE__*/React.createElement(View, {
+      style: {
+        flexDirection: "row",
+        alignItems: "flex-end",
+        width: "100%",
+        paddingBottom: 8
+      }
+    }, /*#__PURE__*/React.createElement(View, {
+      style: [styles.input, {
+        flex: 1,
+        marginRight: _.isEmpty(props.text) && !this.hasImagesReady(props.imagesToUpload) ? 16 + this.MIN_COMPOSER_HEIGHT : 2 * (this.MIN_COMPOSER_HEIGHT + 8),
+        paddingHorizontal: 12,
+        paddingVertical: Platform.select({
+          ios: 8,
+          android: 6
+        })
+      }]
+    }, /*#__PURE__*/React.createElement(TextInput, {
+      maxFontSizeMultiplier: 1.2,
+      placeholder: "Type a message...",
+      multiline: true,
+      value: props.text,
+      onChangeText: props.onTextChanged,
+      style: [styles.inputText, {
+        lineHeight: 20,
+        minHeight: this.MIN_COMPOSER_HEIGHT - 16,
+        maxHeight: 100
+      }],
+      onFocus: this.onFocusInput.bind(this),
+      onBlur: this.onBlurInput.bind(this),
+      placeholderTextColor: "#999"
+    }))));
+  }
+
+  /***
+   * Main Render
+   */
+  renderChat() {
+    const minInputToolbarHeight = this.MIN_COMPOSER_HEIGHT + 32 + (this.state.replyingTo ? 38 : 0) + (this.hasImagesAttached() ? IMAGE_PREVIEW_AREA_HEIGHT : 0);
+    return /*#__PURE__*/React.createElement(GiftedChat, {
+      isKeyboardInternallyHandled: false,
+      alwaysShowSend: false,
+      keyboardShouldPersistTaps: "never",
+      renderAvatarOnTop: true,
+      minInputToolbarHeight: minInputToolbarHeight,
+      minComposerHeight: this.MIN_COMPOSER_HEIGHT,
+      bottomOffset: 0,
+      onSend: this.sendMessages.bind(this),
+      messages: this.state.messages,
+      user: this.state.currentUser,
+      renderBubble: this.renderBubble.bind(this),
+      renderMessage: this.renderMessage.bind(this),
+      renderMessageText: this.renderMessageText.bind(this),
+      renderTime: this.renderTime.bind(this),
+      renderDay: this.renderDay.bind(this),
+      renderCustomView: this.renderCustomView.bind(this),
+      renderSend: this.renderSend.bind(this),
+      renderInputToolbar: this.renderInputToolbar.bind(this),
+      renderFooter: this.renderFooter.bind(this),
+      renderLoading: this.renderLoading.bind(this),
+      renderAvatar: this.renderAvatar.bind(this),
+      imagesToUpload: this.state.imagesToUpload
+    });
+  }
+  renderImageUploader() {
+    return /*#__PURE__*/React.createElement(ImageUploader, {
+      ref: ref => this.imageUploader = ref,
+      onUploadStarted: this.onUploadStarted,
+      onUploadProgress: this.onUploadProgress,
+      onUploadSuccess: this.onUploadSuccess,
+      onUploadFailed: this.onUploadFailed,
+      onLibrarySelected: this.onLibrarySelected,
+      quality: 0.8,
+      allowsEditing: false,
+      fileName: "imageInput",
+      popupTitle: "Add Image",
+      userId: this.props.user.uid,
+      multiple: true,
+      allowVideo: true
+    });
+  }
+  renderImagePopup() {
+    const {
+      imagePopupOpen,
+      imagePopupSource,
+      imagePopupIndex
+    } = this.state;
+    return /*#__PURE__*/React.createElement(ImagePopup, {
+      visible: imagePopupOpen,
+      images: imagePopupSource,
+      index: imagePopupIndex,
+      onClose: this.closeGallery.bind(this)
+    });
+  }
+  renderVideoPlayerPopup() {
+    const {
+      showFullscreenVideo,
+      currentVideoUrl
+    } = this.state;
+    if (!currentVideoUrl) return;
+    return /*#__PURE__*/React.createElement(VideoPopup, {
+      uri: currentVideoUrl,
+      visible: showFullscreenVideo,
+      onClose: this.toggleFullscreenVideo
+    });
+  }
+  renderPDF() {
+    if (_.isEmpty(this.state.selectedPDF)) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(PDFPopup, {
+      source: this.state.selectedPDF,
+      onClose: this.onCloseAttachment,
+      title: getFileName(this.state.selectedPDF),
+      pdfCount: 1
+    });
+  }
+  renderDeleteConfirmPopup() {
+    return /*#__PURE__*/React.createElement(ConfirmPopup, {
+      visible: this.state.showDeleteMessageConfirm,
+      onConfirm: this.onConfirmDeleteMessage,
+      onCancel: this.onCancelDeleteMessage,
+      text: "Are you sure you want to delete this message?",
+      yesText: "Delete",
+      noText: "Cancel"
+    });
+  }
+  render() {
+    return /*#__PURE__*/React.createElement(KeyboardAvoidingView, {
+      behavior: "padding",
+      style: styles.chatContainer
+    }, this.renderChat(), this.renderImageUploader(), this.renderImagePopup(), this.renderVideoPlayerPopup(), this.renderPDF(), this.renderDeleteConfirmPopup());
+  }
+}
+const styles = {
+  chatContainer: {
+    flex: 1,
+    justifyContent: "center"
+  },
+  eventContainer: {
+    left: {
+      paddingTop: 5,
+      paddingLeft: 15,
+      paddingRight: 15,
+      paddingBottom: 5,
+      flexDirection: "row"
+    },
+    right: {
+      paddingTop: 5,
+      paddingLeft: 15,
+      paddingRight: 15,
+      paddingBottom: 5,
+      flexDirection: "row-reverse"
+    }
+  },
+  eventImage: {
+    width: 80,
+    height: 80,
+    resizeMode: "cover",
+    borderRadius: 2
+  },
+  eventImageMargin: {
+    right: {
+      marginLeft: 15
+    },
+    left: {
+      marginRight: 15
+    }
+  },
+  eventInfo: {
+    minHeight: 80,
+    width: 150
+  },
+  eventTitle: {
+    fontSize: 12,
+    fontFamily: "sf-bold",
+    backgroundColor: "rgba(255,255,255,0)"
+  },
+  eventInfoAlign: {
+    left: {
+      textAlign: "left"
+    },
+    right: {
+      textAlign: "right"
+    }
+  },
+  messageImageLarge: {
+    width: IMAGE_SIZE_LARGE,
+    height: IMAGE_SIZE_LARGE,
+    borderRadius: 2,
+    alignSelf: "center"
+  },
+  messageImageSmall: {
+    width: IMAGE_SIZE_SMALL,
+    height: IMAGE_SIZE_SMALL,
+    borderRadius: 2,
+    alignSelf: "center",
+    marginRight: IMAGE_MARGIN,
+    marginBottom: IMAGE_MARGIN
+  },
+  eventDate: {
+    fontSize: 12,
+    fontFamily: "sf-regular",
+    backgroundColor: "rgba(255,255,255,0)"
+  },
+  inputContainer: {
+    backgroundColor: "#fff",
+    paddingVertical: 8,
+    paddingHorizontal: 8
+  },
+  inputText: {
+    color: TEXT_DARKEST,
+    fontSize: 14,
+    fontFamily: "sf-medium"
+  },
+  input: {
+    margin: 0,
+    backgroundColor: BG_GREY,
+    borderRadius: 5,
+    flex: 1
+  },
+  composerContainer: {
+    flex: 1
+  },
+  composerInputWrapper: {
+    flex: 1,
+    flexDirection: "row"
+  },
+  replyingTo: {
+    minHeight: 30,
+    flexDirection: "row",
+    alignItems: "center",
+    borderBottomWidth: 1,
+    borderBottomColor: LINEGREY,
+    marginBottom: 8
+  },
+  replyingRemoveButton: {
+    marginLeft: 10
+  },
+  replyingRemoveContainer: {
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 10,
+    width: 20,
+    height: 20,
+    borderWidth: 2,
+    borderColor: "#fff"
+  },
+  replyingRemoveIcon: {
+    fontSize: 10,
+    color: "#fff",
+    marginBottom: 1
+  },
+  sendContainer: {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    height: 30,
+    width: 30,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "#fff"
+  },
+  send: {
+    fontSize: 15,
+    color: TEXT_BLUEGREY,
+    fontSize: 24,
+    textAlign: "center"
+  },
+  accessory: {
+    height: IMAGE_PREVIEW_AREA_HEIGHT,
+    borderTopWidth: 1,
+    borderTopColor: LINEGREY,
+    paddingTop: 8,
+    marginTop: 8
+  },
+  accessoryImageContainer: {
+    paddingRight: 8,
+    paddingTop: 8,
+    marginRight: 5
+  },
+  accessoryImage: {
+    width: IMAGE_PREVIEW_SIZE,
+    height: IMAGE_PREVIEW_SIZE
+  },
+  accessoryImageBorder: {
+    borderRadius: 2
+  },
+  settingDropDownOpen: {
+    height: "auto"
+  },
+  imagesContainer: {
+    marginLeft: 10,
+    marginRight: 10,
+    flexDirection: "row",
+    flexWrap: "wrap"
+  },
+  uploadImagesContainer: {
+    flexDirection: "row",
+    overflow: "visible"
+  },
+  previewItemRemoveButton: {
+    position: "absolute",
+    top: 0,
+    right: 0
+  },
+  previewItemRemoveContainer: {
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 10,
+    width: 20,
+    height: 20,
+    borderWidth: 2,
+    borderColor: "#fff"
+  },
+  previewItemRemoveIcon: {
+    fontSize: 10,
+    color: "#fff",
+    marginBottom: 1
+  },
+  imagePlayContainer: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  imageControlIcon: {
+    color: "#fff",
+    fontSize: 20,
+    textShadowColor: "rgba(0,0,0,0.3)",
+    textShadowOffset: {
+      width: 2,
+      height: 2
+    }
+  }
+};
+const mapStateToProps = state => {
+  return {
+    user: state.user,
+    colourBrandingMain: getMainBrandingColourFromState(state),
+    colourBrandingLight: getLightBrandingColourFromState(state),
+    tabCount: getEnabledTabsFromState(state).length
+  };
+};
+export default connect(mapStateToProps, {})(withSafeAreaInsets(PlussChat));
+//# sourceMappingURL=PlussChat.js.map