@livelike/react-native/lib/module/components/LLChat.js

LiveLike React Native package

import React, { useEffect } from 'react';
import { StyleSheet, View } from 'react-native';
import { useChatRoom, useChatRoomActions, useLoadStickerPacksEffect, useStyles } from '../hooks';
import { LLChatMessageList } from './LLChatMessageList';
import { LLChatMessageComposer } from './LLChatMessageComposer';
import { LLChatHeader } from './LLChatHeader';
import { LLChatBanner } from './LLChatBanner';
export function LLChat(_ref) {
  let {
    roomId,
    userAvatarUrl,
    HeaderComponent = LLChatHeader,
    BannerComponent = LLChatBanner,
    MessageListComponent = LLChatMessageList,
    MessageComposerComponent = LLChatMessageComposer,
    styles: stylesProp,
    BannerComponentStyles,
    HeaderComponentStyles,
    MessageComposerComponentStyles,
    MessageListComponentStyles
  } = _ref;
  const {
    chatRoom
  } = useChatRoom({
    roomId
  });
  const chatStyles = useStyles({
    componentStylesFn: getChatStyles,
    stylesProp
  });
  useLoadStickerPacksEffect();
  const chatRoomActions = useChatRoomActions({
    roomId
  });
  useEffect(() => {
    if (roomId && userAvatarUrl) {
      chatRoomActions.updateChatConfig({
        roomId,
        userAvatarUrl
      });
    }
  }, [roomId, userAvatarUrl]);
  return /*#__PURE__*/React.createElement(View, {
    style: chatStyles.chatContainer
  }, chatRoom && /*#__PURE__*/React.createElement(HeaderComponent, {
    title: chatRoom.title,
    styles: HeaderComponentStyles
  }), /*#__PURE__*/React.createElement(BannerComponent, {
    styles: BannerComponentStyles
  }), /*#__PURE__*/React.createElement(MessageListComponent, {
    roomId: roomId,
    styles: MessageListComponentStyles
  }), /*#__PURE__*/React.createElement(MessageComposerComponent, {
    roomId: roomId,
    styles: MessageComposerComponentStyles
  }));
}
const getChatStyles = _ref2 => {
  let {
    theme
  } = _ref2;
  return StyleSheet.create({
    chatContainer: {
      width: '100%',
      flex: 1,
      flexDirection: 'column',
      alignContent: 'center',
      justifyContent: 'center',
      backgroundColor: theme.background
    }
  });
};
//# sourceMappingURL=LLChat.js.map