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

LiveLike React Native package

import React, { useCallback } from 'react';
import { Image, StyleSheet, TouchableOpacity, View } from 'react-native';
import { useStyles, useTheme, useReactionSpace, useReactionPacks, useMessageItemPopover } from '../../hooks';
import { PopoverType } from '../../types';
import { LLUserReactionCounts } from '../LLReactionPicker';
export function LLChatMessageItemFooter(_ref) {
  let {
    message: messageDetails,
    styles: stylesProp,
    UserReactionsCountComponentStyles,
    UserReactionsCountComponent = LLUserReactionCounts
  } = _ref;
  const messageItemFooterStyles = useStyles({
    componentStylesFn: getMessageItemFooterStyles,
    stylesProp
  });
  const {
    themeAssets
  } = useTheme();
  const {
    hidePopover,
    showPopover,
    popoverDetail
  } = useMessageItemPopover({
    messageId: messageDetails.id
  });
  const {
    reactionSpace
  } = useReactionSpace({
    targetGroupId: messageDetails.chat_room_id
  });
  const {
    reactionPacks
  } = useReactionPacks({
    reactionSpaceId: reactionSpace === null || reactionSpace === void 0 ? void 0 : reactionSpace.id
  });
  const onShowReactionPicker = useCallback(() => {
    showPopover({
      messageId: messageDetails.id,
      popoverType: PopoverType.Reactions
    });
  }, []);
  const isDeletedMessage = !!messageDetails.isDeleted;
  if (isDeletedMessage || !reactionPacks.length || !reactionSpace) {
    return null;
  }
  return /*#__PURE__*/React.createElement(View, {
    style: messageItemFooterStyles.footerContainer
  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
    onPress: onShowReactionPicker,
    accessibilityLabel: "Show reactions picker"
  }, /*#__PURE__*/React.createElement(Image, {
    style: messageItemFooterStyles.addReactionIcon,
    source: themeAssets.reaction
  })), /*#__PURE__*/React.createElement(UserReactionsCountComponent, {
    targetGroupId: messageDetails.chat_room_id,
    targetId: messageDetails.id,
    showReactionPicker: popoverDetail && popoverDetail.popoverType === PopoverType.Reactions,
    onReactionItemPress: hidePopover,
    styles: UserReactionsCountComponentStyles
  }));
}
const getMessageItemFooterStyles = _ref2 => {
  let {
    theme
  } = _ref2;
  return StyleSheet.create({
    footerContainer: {
      flexDirection: 'row',
      alignItems: 'flex-start',
      marginTop: 10
    },
    addReactionIcon: {
      height: 22,
      width: 22,
      marginTop: 2,
      marginBottom: 6
    }
  });
};
//# sourceMappingURL=LLChatMessageItemFooter.js.map