@sendbird/uikit-react-native/lib/module/components/GroupChannelMessageRenderer/GroupChannelMessageReplyInfo.js

Sendbird UIKit for React Native: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.

import React from 'react';
import { Avatar, Box, Icon, PressBox, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
import { useLocalization } from '../../hooks/useContext';
const AVATAR_LIMIT = 5;
const createRepliedUserAvatars = mostRepliedUsers => {
  if (!mostRepliedUsers || mostRepliedUsers.length === 0) return null;
  const {
    palette
  } = useUIKitTheme();
  return mostRepliedUsers.slice(0, AVATAR_LIMIT).map((user, index) => {
    if (index < AVATAR_LIMIT - 1) {
      return /*#__PURE__*/React.createElement(Box, {
        style: styles.avatarContainer,
        key: index
      }, /*#__PURE__*/React.createElement(Avatar, {
        size: 20,
        uri: user === null || user === void 0 ? void 0 : user.profileUrl
      }));
    } else {
      return /*#__PURE__*/React.createElement(Box, {
        style: styles.avatarContainer,
        key: index
      }, /*#__PURE__*/React.createElement(Avatar, {
        size: 20,
        uri: user === null || user === void 0 ? void 0 : user.profileUrl
      }), /*#__PURE__*/React.createElement(Box, {
        style: styles.avatarOverlay,
        backgroundColor: palette.overlay01
      }, /*#__PURE__*/React.createElement(Icon, {
        icon: 'plus',
        size: 14,
        style: styles.plusIcon,
        color: 'white'
      })));
    }
  });
};
const GroupChannelMessageReplyInfo = _ref => {
  let {
    channel,
    message,
    onPress
  } = _ref;
  const {
    STRINGS
  } = useLocalization();
  const {
    select,
    palette
  } = useUIKitTheme();
  if (!channel || !message.threadInfo || !message.threadInfo.replyCount) return null;
  const replyCountText = STRINGS.GROUP_CHANNEL_THREAD.REPLY_COUNT(message.threadInfo.replyCount || 0, 99);
  const onPressReply = () => {
    onPress === null || onPress === void 0 ? void 0 : onPress(message);
  };
  return /*#__PURE__*/React.createElement(PressBox, {
    onPress: onPressReply,
    style: styles.replyContainer
  }, createRepliedUserAvatars(message.threadInfo.mostRepliedUsers), /*#__PURE__*/React.createElement(Text, {
    caption3: true,
    color: select({
      light: palette.primary300,
      dark: palette.primary200
    })
  }, replyCountText));
};
const styles = createStyleSheet({
  replyContainer: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  avatarContainer: {
    marginRight: 4
  },
  avatarOverlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    borderRadius: 10
  },
  plusIcon: {
    position: 'absolute',
    top: 3,
    left: 3,
    right: 0,
    bottom: 0
  }
});
export default /*#__PURE__*/React.memo(GroupChannelMessageReplyInfo);
//# sourceMappingURL=GroupChannelMessageReplyInfo.js.map