@plusscommunities/pluss-core-app 1.4.9 → 1.5.0

package/dist/module/components/PlussChat.js

@@ -0,0 +1,997 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import React, { Component } from 'react';
+import { View, Image, ImageBackground, TouchableOpacity, Text, KeyboardAvoidingView, Platform, ScrollView } from 'react-native';
+import { GiftedChat, Bubble, MessageText, Send, InputToolbar, Composer } from 'react-native-gifted-chat';
+import { connect } from 'react-redux';
+import _ from 'lodash';
+import moment from 'moment';
+import { Icon } from 'react-native-elements';
+import { getBottomSpace } from 'react-native-iphone-x-helper';
+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_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;
+
+    super(props);
+    _this = this;
+
+    _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", function () {
+      let imagesToUpload = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+      return !_.isEmpty(imagesToUpload || _this.state.imagesToUpload);
+    });
+
+    _defineProperty(this, "hasImagesReady", function () {
+      let imagesToUpload = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 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, "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 isSingleTab = this.props.tabCount === 1 && getBottomSpace() > 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: ''
+    };
+    this.checkThumb = null;
+  }
+
+  UNSAFE_componentWillMount() {
+    this.updateMessages(this.props);
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.updateMessages(nextProps);
+  }
+
+  updateMessages(props) {
+    const newState = {};
+
+    if (!_.isUndefined(props.messages)) {
+      newState.messages = props.messages;
+    }
+
+    this.setState(newState);
+  }
+  /***
+   *
+   * Messaging functionality
+   */
+
+
+  onSend() {// if (this.chatKey) {
+    //     this.sendMessage(messages[0]);
+    // }
+
+    let messages = arguments.length > 0 && arguments[0] !== undefined ? arguments[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;
+    this.props.onSend(messages);
+    this.setState({
+      imagesToUpload: []
+    });
+  }
+  /**
+   *
+   * 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
+    }, props));
+  }
+
+  renderMessageText(messageTextProps) {
+    return /*#__PURE__*/React.createElement(MessageText, _extends({}, messageTextProps, {
+      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
+        }
+      }
+    }));
+  }
+
+  renderTime() {
+    return null;
+  }
+
+  renderDay(dayProps) {
+    return /*#__PURE__*/React.createElement(PlussChatTime, _extends({}, dayProps, {
+      textStyle: {
+        fontFamily: 'sf-semibold',
+        color: TEXT_DARK,
+        fontSize: 12
+      }
+    }));
+  }
+
+  renderCustomView(_ref) {
+    let {
+      currentMessage,
+      position
+    } = _ref;
+
+    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)) {
+      console.log('rendering attachments');
+      console.log(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) {
+    return /*#__PURE__*/React.createElement(View, {
+      style: {
+        position: 'absolute',
+        top: 0,
+        right: 0
+      }
+    }, (!_.isEmpty(props.text) || this.hasImagesReady(props.imagesToUpload)) && /*#__PURE__*/React.createElement(Send, _extends({}, props, {
+      alwaysShowSend: true,
+      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
+      }]
+    })), /*#__PURE__*/React.createElement(TouchableOpacity, {
+      onPress: this.showUploadMenu.bind(this),
+      style: [styles.sendContainer, {
+        right: _.isEmpty(props.text) && !this.hasImagesReady(props.imagesToUpload) ? 0 : 8 + 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
+      }]
+    })));
+  }
+
+  renderAccessory(props) {
+    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) {
+    if (!this.hasImagesAttached(props.imagesToUpload)) {
+      return /*#__PURE__*/React.createElement(InputToolbar, _extends({}, props, {
+        containerStyle: styles.inputContainer,
+        renderComposer: this.renderComposer.bind(this)
+      }));
+    }
+
+    return /*#__PURE__*/React.createElement(InputToolbar, _extends({}, props, {
+      containerStyle: styles.inputContainer,
+      renderComposer: this.renderComposer.bind(this),
+      renderAccessory: this.renderAccessory.bind(this),
+      accessoryStyle: 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) {
+    //console.log(props.composerHeight);
+    return /*#__PURE__*/React.createElement(View, {
+      style: [styles.input, {
+        //height: props.composerHeight + 10,
+        //borderRadius: (this.MIN_COMPOSER_HEIGHT + 10) / 2,
+        marginRight: _.isEmpty(props.text) && !this.hasImagesReady(props.imagesToUpload) ? 8 + this.MIN_COMPOSER_HEIGHT : 2 * (this.MIN_COMPOSER_HEIGHT + 8),
+        justifyContent: 'center'
+      }, Platform.OS === 'ios' && {
+        height: props.composerHeight + 10
+      }]
+    }, /*#__PURE__*/React.createElement(Composer, _extends({}, props, {
+      //composerHeight={props.composerHeight}
+      placeholder: "Type a message...",
+      textInputStyle: styles.inputText,
+      textInputProps: {
+        onFocus: this.onFocusInput.bind(this),
+        onBlur: this.onBlurInput.bind(this)
+      }
+    })));
+  }
+  /***
+   * Main Render
+   */
+
+
+  renderChat() {
+    const {
+      tabCount,
+      noTab
+    } = this.props;
+    const iosBottomOffset = (tabCount === 1 || noTab ? -10 : 52) + getBottomSpace();
+    const minInputToolbarHeight = this.MIN_COMPOSER_HEIGHT + 16 + (this.hasImagesAttached() ? IMAGE_PREVIEW_AREA_HEIGHT : 0);
+    return /*#__PURE__*/React.createElement(GiftedChat, {
+      alwaysShowSend: false,
+      keyboardShouldPersistTaps: 'never',
+      renderAvatarOnTop: true,
+      minInputToolbarHeight: minInputToolbarHeight,
+      bottomOffset: Platform.OS === 'android' ? 0 : iosBottomOffset,
+      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),
+      ref: "imagePopup"
+    });
+  }
+
+  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
+    });
+  }
+
+  render() {
+    if (Platform.OS === 'android' && !this.props.noAndroidAvoid) {
+      return /*#__PURE__*/React.createElement(KeyboardAvoidingView, {
+        behavior: Platform.OS === 'ios' && 'padding',
+        style: styles.chatContainer
+      }, this.renderChat(), this.renderImageUploader(), this.renderImagePopup(), this.renderVideoPlayerPopup(), this.renderPDF());
+    }
+
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles.chatContainer
+    }, this.renderChat(), this.renderImageUploader(), this.renderImagePopup(), this.renderVideoPlayerPopup(), this.renderPDF());
+  }
+
+}
+
+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
+  },
+  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, {})(PlussChat);
+//# sourceMappingURL=PlussChat.js.map