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

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _uikitReactNativeFoundation = require("@sendbird/uikit-react-native-foundation");
var _useContext = require("../../hooks/useContext");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const AVATAR_LIMIT = 5;
const createRepliedUserAvatars = mostRepliedUsers => {
  if (!mostRepliedUsers || mostRepliedUsers.length === 0) return null;
  const {
    palette
  } = (0, _uikitReactNativeFoundation.useUIKitTheme)();
  return mostRepliedUsers.slice(0, AVATAR_LIMIT).map((user, index) => {
    if (index < AVATAR_LIMIT - 1) {
      return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Box, {
        style: styles.avatarContainer,
        key: index
      }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Avatar, {
        size: 20,
        uri: user === null || user === void 0 ? void 0 : user.profileUrl
      }));
    } else {
      return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Box, {
        style: styles.avatarContainer,
        key: index
      }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Avatar, {
        size: 20,
        uri: user === null || user === void 0 ? void 0 : user.profileUrl
      }), /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Box, {
        style: styles.avatarOverlay,
        backgroundColor: palette.overlay01
      }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Icon, {
        icon: 'plus',
        size: 14,
        style: styles.plusIcon,
        color: 'white'
      })));
    }
  });
};
const GroupChannelMessageReplyInfo = ({
  channel,
  message,
  onPress
}) => {
  const {
    STRINGS
  } = (0, _useContext.useLocalization)();
  const {
    select,
    palette
  } = (0, _uikitReactNativeFoundation.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 || onPress(message);
  };
  return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.PressBox, {
    onPress: onPressReply,
    style: styles.replyContainer
  }, createRepliedUserAvatars(message.threadInfo.mostRepliedUsers), /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, {
    caption3: true,
    color: select({
      light: palette.primary300,
      dark: palette.primary200
    })
  }, replyCountText));
};
const styles = (0, _uikitReactNativeFoundation.createStyleSheet)({
  replyContainer: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  avatarContainer: {
    marginEnd: 4
  },
  avatarOverlay: {
    position: 'absolute',
    top: 0,
    start: 0,
    end: 0,
    bottom: 0,
    borderRadius: 10
  },
  plusIcon: {
    position: 'absolute',
    top: 3,
    start: 3,
    end: 0,
    bottom: 0
  }
});
var _default = exports.default = /*#__PURE__*/_react.default.memo(GroupChannelMessageReplyInfo);
//# sourceMappingURL=GroupChannelMessageReplyInfo.js.map