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

LiveLike React Native package

import React, { memo, useCallback } from 'react';
import { StyleSheet, TouchableOpacity, View } from 'react-native';
import { isChatUserMessageResponsePayload, userProfile } from '@livelike/javascript';
import { LLChatMessageItemHeader } from './LLChatMessageItemHeader';
import { LLChatMessageItemBody } from './LLChatMessageItemBody';
import { LLChatMessageItemFooter } from './LLChatMessageItemFooter';
import { LLChatMessageMenu, LLChatMessageMenuOption } from '../LLChatMessageMenu';
import { useChatMessageMenuItemActions, useMessageItemPopover, useStyles, useTheme } from '../../hooks';
import { PopoverType } from '../../types';
export const LLChatMessageItem = /*#__PURE__*/memo(_ref => {
  let {
    message: messageDetails,
    styles: stylesProp,
    MessageItemBodyComponentStyles,
    MessageItemHeaderComponentStyles,
    MessageItemFooterComponentStyles,
    MessageItemBodyComponent = LLChatMessageItemBody,
    MessageItemHeaderComponent = LLChatMessageItemHeader,
    MessageItemFooterComponent = LLChatMessageItemFooter,
    MessageItemMenuComponent = LLChatMessageMenu,
    MessageItemMenuOptionComponent = LLChatMessageMenuOption
  } = _ref;
  const {
    themeAssets
  } = useTheme();
  const messageItemStyles = useStyles({
    componentStylesFn: getMessageItemStyles,
    stylesProp
  });
  const {
    popoverDetail,
    showPopover,
    hidePopover
  } = useMessageItemPopover({
    messageId: messageDetails.id
  });
  const isSelfMessage = messageDetails.sender_id === userProfile.id;
  const isDeletedMessage = !!messageDetails.isDeleted;
  const isMenuPopoverVisible = popoverDetail && popoverDetail.popoverType === PopoverType.Menu;
  const onShowMessageItemMenu = useCallback(() => {
    showPopover({
      messageId: messageDetails.id,
      popoverType: PopoverType.Menu
    });
  }, [messageDetails.id, showPopover]);
  const {
    deleteMessageApiFn,
    reportMessageApiFn,
    blockUnblockApiFn,
    blockId
  } = useChatMessageMenuItemActions({
    messageDetails
  });
  if (!isChatUserMessageResponsePayload(messageDetails)) {
    return null;
  }
  return /*#__PURE__*/React.createElement(View, {
    style: [messageItemStyles.messageItemContainer, isSelfMessage && messageItemStyles.selfMessageItemContainer]
  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
    onLongPress: onShowMessageItemMenu,
    onPress: hidePopover,
    activeOpacity: 0.7
  }, /*#__PURE__*/React.createElement(MessageItemHeaderComponent, {
    message: messageDetails,
    styles: MessageItemHeaderComponentStyles,
    isSelfMessage: isSelfMessage
  }), /*#__PURE__*/React.createElement(MessageItemBodyComponent, {
    message: messageDetails,
    styles: MessageItemBodyComponentStyles,
    isSelfMessage: isSelfMessage
  }), /*#__PURE__*/React.createElement(MessageItemFooterComponent, {
    message: messageDetails,
    styles: MessageItemFooterComponentStyles
  })), /*#__PURE__*/React.createElement(MessageItemMenuComponent, {
    visible: isMenuPopoverVisible
  }, isSelfMessage && !isDeletedMessage && /*#__PURE__*/React.createElement(MessageItemMenuOptionComponent, {
    onClickApiFn: deleteMessageApiFn,
    icon: themeAssets.bin,
    textDesc: "Delete message"
  }), !isSelfMessage && !isDeletedMessage && /*#__PURE__*/React.createElement(MessageItemMenuOptionComponent, {
    onClickApiFn: reportMessageApiFn,
    icon: themeAssets.flag,
    textDesc: "Report message"
  }), !isSelfMessage && /*#__PURE__*/React.createElement(MessageItemMenuOptionComponent, {
    onClickApiFn: blockUnblockApiFn,
    icon: themeAssets.blockUser,
    textDesc: blockId ? 'Unblock Profile' : 'Block profile',
    divider: {
      top: !isDeletedMessage
    }
  })));
});
const getMessageItemStyles = _ref2 => {
  let {
    theme
  } = _ref2;
  return StyleSheet.create({
    messageItemContainer: {
      display: 'flex',
      flex: 1,
      flexDirection: 'column',
      paddingVertical: 10,
      paddingHorizontal: 14,
      marginVertical: 7,
      marginHorizontal: 12,
      borderRadius: 8,
      backgroundColor: theme.secondaryBackground
    },
    selfMessageItemContainer: {}
  });
};
//# sourceMappingURL=LLChatMessageItem.js.map