@sendbird/uikit-react 3.6.4-rc-0 → 3.6.4

package/dist/ui/MessageContent.js

@@ -1,424 +0,0 @@
-import { b as _extends, _ as _objectSpread2 } from '../_rollupPluginBabelHelpers-cc035350.js';
-import React__default, { useContext, useRef, useState } from 'react';
-import { f as format } from '../index-5a62f6b7.js';
-import Avatar from './Avatar.js';
-import UserProfile from './UserProfile.js';
-import { M as MessageStatus } from '../index-0aa8cbad.js';
-import MessageItemMenu from './MessageItemMenu.js';
-import MessageItemReactionMenu from './MessageItemReactionMenu.js';
-import ContextMenu, { MenuItems } from './ContextMenu.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../index-f50d7ab0.js';
-import EmojiReactions from './EmojiReactions.js';
-import AdminMessage from './AdminMessage.js';
-import TextMessageItemBody from './TextMessageItemBody.js';
-import FileMessageItemBody from './FileMessageItemBody.js';
-import ThumbnailMessageItemBody from './ThumbnailMessageItemBody.js';
-import OGMessageItemBody from './OGMessageItemBody.js';
-import UnknownMessageItemBody from './UnknownMessageItemBody.js';
-import QuoteMessage from './QuoteMessage.js';
-import { s as getUIKitMessageTypes, h as getClassName, u as getSenderName, v as isOGMessage, w as isTextMessage, r as getUIKitMessageType, d as isVoiceMessage, m as isThumbnailMessage } from '../index-99ab01f6.js';
-import { a as UserProfileContext } from '../UserProfileContext-74e9a128.js';
-import { u as useLocalization } from '../LocalizationContext-1701e5c8.js';
-import useSendbirdStateContext from '../useSendbirdStateContext.js';
-import { u as useLongPress } from '../useLongPress-6d0b6619.js';
-import { M as MobileMenu } from '../index-35696958.js';
-import { u as useMediaQueryContext } from '../MediaQueryContext-e5b401d0.js';
-import ThreadReplies from './ThreadReplies.js';
-import { T as ThreadReplySelectType } from '../const-7c266a95.js';
-import { VoiceMessageItemBody } from './VoiceMessageItemBody.js';
-import { n as noop } from '../utils-05aa9060.js';
-import '../index-ff8f2f61.js';
-import './ImageRenderer.js';
-import './Icon.js';
-import 'prop-types';
-import '../uuid-8b344dd2.js';
-import '../sendbirdSelectors.js';
-import '../topics-0b30f52b.js';
-import './Button.js';
-import '../stringSet-e9bb0333.js';
-import './Loader.js';
-import '../utils/message/getOutgoingMessageState.js';
-import '../index-7e5538e6.js';
-import '../index-3f8e1a51.js';
-import './IconButton.js';
-import '../types-28e84810.js';
-import './ReactionButton.js';
-import 'react-dom';
-import './SortByRow.js';
-import './ReactionBadge.js';
-import './BottomSheet.js';
-import '../index-44c86e58.js';
-import './UserListItem.js';
-import './MutedAvatarOverlay.js';
-import './Checkbox.js';
-import './Tooltip.js';
-import './TooltipWrapper.js';
-import '../Message/context.js';
-import '../tokenize-d12690c3.js';
-import '../index-a31ee68d.js';
-import '../index.module-d24badee.js';
-import './MentionLabel.js';
-import './LinkLabel.js';
-import '../consts-3a33a0a8.js';
-import './TextButton.js';
-import '../color-ea3bf5b8.js';
-import '../consts-b3274b3d.js';
-import '../withSendbird.js';
-import './ProgressBar.js';
-import '../VoicePlayer/useVoicePlayer.js';
-import '../index-02ceed0a.js';
-import '../consts-44eaef6b.js';
-import '../VoiceRecorder/context.js';
-import './Modal.js';
-import './PlaybackTime.js';
-
-// should initialize in UserProfileContext.jsx
-
-function MessageContent(_ref) {
-  var _sender, _message$threadInfo, _message$isAdminMessa, _channel$members2, _channel$members2$fin, _channel$joinedAt, _message$parentMessag2, _message$parentMessag3, _channel$url, _message$reactions, _message$isUserMessag, _message$isFileMessag;
-  let {
-    className,
-    userId,
-    channel,
-    message,
-    disabled = false,
-    chainTop = false,
-    chainBottom = false,
-    isReactionEnabled = false,
-    disableQuoteMessage = false,
-    replyType,
-    threadReplySelectType,
-    nicknamesMap,
-    emojiContainer,
-    scrollToMessage,
-    showEdit,
-    showRemove,
-    showFileViewer,
-    resendMessage,
-    toggleReaction,
-    setQuoteMessage,
-    onReplyInThread,
-    onQuoteMessageClick,
-    onMessageHeightChange
-  } = _ref;
-  const messageTypes = getUIKitMessageTypes();
-  const {
-    dateLocale
-  } = useLocalization();
-  const {
-    config
-  } = (useSendbirdStateContext === null || useSendbirdStateContext === void 0 ? void 0 : useSendbirdStateContext()) || {};
-  const {
-    disableUserProfile,
-    renderUserProfile
-  } = useContext(UserProfileContext);
-  const avatarRef = useRef(null);
-  const contentRef = useRef(null);
-  const {
-    isMobile
-  } = useMediaQueryContext();
-  const [showMenu, setShowMenu] = useState(false);
-  const [mouseHover, setMouseHover] = useState(false);
-  const [supposedHover, setSupposedHover] = useState(false);
-  const isByMe = userId === (message === null || message === void 0 ? void 0 : (_sender = message.sender) === null || _sender === void 0 ? void 0 : _sender.userId) || (message === null || message === void 0 ? void 0 : message.sendingStatus) === 'pending' || (message === null || message === void 0 ? void 0 : message.sendingStatus) === 'failed';
-  const isByMeClassName = isByMe ? 'outgoing' : 'incoming';
-  const chainTopClassName = chainTop ? 'chain-top' : '';
-  const isReactionEnabledInChannel = isReactionEnabled && !(channel !== null && channel !== void 0 && channel.isEphemeral);
-  const isReactionEnabledClassName = isReactionEnabledInChannel ? 'use-reactions' : '';
-  const supposedHoverClassName = supposedHover ? 'sendbird-mouse-hover' : '';
-  const useReplying = !!((replyType === 'QUOTE_REPLY' || replyType === 'THREAD') && message !== null && message !== void 0 && message.parentMessageId && message !== null && message !== void 0 && message.parentMessage && !disableQuoteMessage);
-  const useReplyingClassName = useReplying ? 'use-quote' : '';
-  const isOgMessageEnabledInGroupChannel = (channel === null || channel === void 0 ? void 0 : channel.isGroupChannel()) && config.groupChannel.enableOgtag;
-
-  // Thread replies
-  const displayThreadReplies = (message === null || message === void 0 ? void 0 : (_message$threadInfo = message.threadInfo) === null || _message$threadInfo === void 0 ? void 0 : _message$threadInfo.replyCount) > 0 && replyType === 'THREAD';
-
-  // onMouseDown: (e: React.MouseEvent<T>) => void;
-  // onTouchStart: (e: React.TouchEvent<T>) => void;
-  // onMouseUp: (e: React.MouseEvent<T>) => void;
-  // onMouseLeave: (e: React.MouseEvent<T>) => void;
-  // onTouchEnd: (e: React.TouchEvent<T>) => void;
-  const longPress = useLongPress({
-    onLongPress: () => {
-      if (isMobile) {
-        setShowMenu(true);
-      }
-    },
-    onClick: noop
-  }, {
-    delay: 300,
-    shouldPreventDefault: false
-  });
-  if (message !== null && message !== void 0 && (_message$isAdminMessa = message.isAdminMessage) !== null && _message$isAdminMessa !== void 0 && _message$isAdminMessa.call(message) || (message === null || message === void 0 ? void 0 : message.messageType) === 'admin') {
-    return /*#__PURE__*/React__default.createElement(AdminMessage, {
-      message: message
-    });
-  }
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: getClassName([className, 'sendbird-message-content', isByMeClassName]),
-    onMouseOver: () => setMouseHover(true),
-    onMouseLeave: () => setMouseHover(false)
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: getClassName(['sendbird-message-content__left', isReactionEnabledClassName, isByMeClassName, useReplyingClassName])
-  }, !isByMe && !chainBottom &&
-  /*#__PURE__*/
-  /** user profile */
-  React__default.createElement(ContextMenu, {
-    menuTrigger: toggleDropdown => {
-      var _channel$members, _channel$members$find, _message$sender2;
-      return /*#__PURE__*/React__default.createElement(Avatar, {
-        className: `sendbird-message-content__left__avatar ${displayThreadReplies ? 'use-thread-replies' : ''}`
-        // @ts-ignore
-        ,
-        src: (channel === null || channel === void 0 ? void 0 : (_channel$members = channel.members) === null || _channel$members === void 0 ? void 0 : (_channel$members$find = _channel$members.find(member => {
-          var _message$sender;
-          return (member === null || member === void 0 ? void 0 : member.userId) === (message === null || message === void 0 ? void 0 : (_message$sender = message.sender) === null || _message$sender === void 0 ? void 0 : _message$sender.userId);
-        })) === null || _channel$members$find === void 0 ? void 0 : _channel$members$find.profileUrl) || (message === null || message === void 0 ? void 0 : (_message$sender2 = message.sender) === null || _message$sender2 === void 0 ? void 0 : _message$sender2.profileUrl) || ''
-        // TODO: Divide getting profileUrl logic to utils
-        ,
-        ref: avatarRef,
-        width: "28px",
-        height: "28px",
-        onClick: () => {
-          if (!disableUserProfile) toggleDropdown();
-        }
-      });
-    },
-    menuItems: closeDropdown => /*#__PURE__*/React__default.createElement(MenuItems
-    /**
-    * parentRef: For catching location(x, y) of MenuItems
-    * parentContainRef: For toggling more options(menus & reactions)
-    */, {
-      parentRef: avatarRef,
-      parentContainRef: avatarRef,
-      closeDropdown: closeDropdown,
-      style: {
-        paddingTop: '0px',
-        paddingBottom: '0px'
-      }
-    }, renderUserProfile
-    // @ts-ignore
-    ? renderUserProfile({
-      user: message === null || message === void 0 ? void 0 : message.sender,
-      close: closeDropdown
-    })
-    // @ts-ignore
-    : /*#__PURE__*/React__default.createElement(UserProfile, {
-      user: message.sender,
-      onSuccess: closeDropdown
-    }))
-  }), isByMe && !isMobile && /*#__PURE__*/React__default.createElement("div", {
-    className: getClassName(['sendbird-message-content-menu', isReactionEnabledClassName, supposedHoverClassName, isByMeClassName])
-  }, /*#__PURE__*/React__default.createElement(MessageItemMenu, {
-    className: "sendbird-message-content-menu__normal-menu",
-    channel: channel,
-    message: message,
-    isByMe: isByMe,
-    replyType: replyType,
-    disabled: disabled,
-    showEdit: showEdit,
-    showRemove: showRemove,
-    resendMessage: resendMessage,
-    setQuoteMessage: setQuoteMessage,
-    setSupposedHover: setSupposedHover,
-    onReplyInThread: _ref2 => {
-      let {
-        message
-      } = _ref2;
-      if (threadReplySelectType === ThreadReplySelectType.THREAD) {
-        onReplyInThread({
-          message
-        });
-      } else if (threadReplySelectType === ThreadReplySelectType.PARENT) {
-        var _message$parentMessag;
-        scrollToMessage((_message$parentMessag = message.parentMessage) === null || _message$parentMessag === void 0 ? void 0 : _message$parentMessag.createdAt, message.parentMessageId);
-      }
-    }
-  }), isReactionEnabledInChannel && /*#__PURE__*/React__default.createElement(MessageItemReactionMenu, {
-    className: "sendbird-message-content-menu__reaction-menu",
-    message: message,
-    userId: userId,
-    spaceFromTrigger: {},
-    emojiContainer: emojiContainer,
-    toggleReaction: toggleReaction,
-    setSupposedHover: setSupposedHover
-  }))), /*#__PURE__*/React__default.createElement("div", _extends({
-    className: "sendbird-message-content__middle"
-  }, isMobile ? _objectSpread2({}, longPress) : {}, {
-    ref: contentRef
-  }), !isByMe && !chainTop && !useReplying && /*#__PURE__*/React__default.createElement(Label, {
-    className: "sendbird-message-content__middle__sender-name",
-    type: LabelTypography.CAPTION_2,
-    color: LabelColors.ONBACKGROUND_2
-  },
-  // @ts-ignore
-  (channel === null || channel === void 0 ? void 0 : (_channel$members2 = channel.members) === null || _channel$members2 === void 0 ? void 0 : (_channel$members2$fin = _channel$members2.find(member => {
-    var _message$sender3;
-    return (member === null || member === void 0 ? void 0 : member.userId) === (message === null || message === void 0 ? void 0 : (_message$sender3 = message.sender) === null || _message$sender3 === void 0 ? void 0 : _message$sender3.userId);
-  })) === null || _channel$members2$fin === void 0 ? void 0 : _channel$members2$fin.nickname) || getSenderName(message)
-  // TODO: Divide getting profileUrl logic to utils
-  ), useReplying ? /*#__PURE__*/React__default.createElement("div", {
-    className: getClassName(['sendbird-message-content__middle__quote-message', isByMe ? 'outgoing' : 'incoming', useReplyingClassName])
-  }, /*#__PURE__*/React__default.createElement(QuoteMessage, {
-    className: "sendbird-message-content__middle__quote-message__quote",
-    message: message,
-    userId: userId,
-    isByMe: isByMe,
-    isUnavailable: replyType === 'THREAD' && ((_channel$joinedAt = channel === null || channel === void 0 ? void 0 : channel.joinedAt) !== null && _channel$joinedAt !== void 0 ? _channel$joinedAt : 0 * 1000) > ((_message$parentMessag2 = (_message$parentMessag3 = message.parentMessage) === null || _message$parentMessag3 === void 0 ? void 0 : _message$parentMessag3.createdAt) !== null && _message$parentMessag2 !== void 0 ? _message$parentMessag2 : 0),
-    onClick: () => {
-      var _message$parentMessag4;
-      if (replyType === 'THREAD' && threadReplySelectType === ThreadReplySelectType.THREAD) {
-        onQuoteMessageClick === null || onQuoteMessageClick === void 0 ? void 0 : onQuoteMessageClick({
-          message: message
-        });
-      }
-      if ((replyType === 'QUOTE_REPLY' || replyType === 'THREAD' && threadReplySelectType === ThreadReplySelectType.PARENT) && message !== null && message !== void 0 && (_message$parentMessag4 = message.parentMessage) !== null && _message$parentMessag4 !== void 0 && _message$parentMessag4.createdAt && message !== null && message !== void 0 && message.parentMessageId) {
-        scrollToMessage(message.parentMessage.createdAt, message.parentMessageId);
-      }
-    }
-  })) : null, /*#__PURE__*/React__default.createElement("div", {
-    className: getClassName(['sendbird-message-content__middle__body-container'])
-  }, isByMe && !chainBottom && /*#__PURE__*/React__default.createElement("div", {
-    className: getClassName(['sendbird-message-content__middle__body-container__created-at', 'left', supposedHoverClassName])
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "sendbird-message-content__middle__body-container__created-at__component-container"
-  }, /*#__PURE__*/React__default.createElement(MessageStatus, {
-    message: message,
-    channel: channel
-  }))), isOgMessageEnabledInGroupChannel && isOGMessage(message) ? /*#__PURE__*/React__default.createElement(OGMessageItemBody, {
-    className: "sendbird-message-content__middle__message-item-body",
-    message: message,
-    isByMe: isByMe,
-    mouseHover: mouseHover,
-    isMentionEnabled: (config === null || config === void 0 ? void 0 : config.isMentionEnabled) || false,
-    isReactionEnabled: isReactionEnabledInChannel,
-    onMessageHeightChange: onMessageHeightChange
-  }) : isTextMessage(message) && /*#__PURE__*/React__default.createElement(TextMessageItemBody, {
-    className: "sendbird-message-content__middle__message-item-body",
-    message: message,
-    isByMe: isByMe,
-    mouseHover: mouseHover,
-    isMentionEnabled: (config === null || config === void 0 ? void 0 : config.isMentionEnabled) || false,
-    isReactionEnabled: isReactionEnabledInChannel
-  }), getUIKitMessageType(message) === messageTypes.FILE && /*#__PURE__*/React__default.createElement(FileMessageItemBody, {
-    className: "sendbird-message-content__middle__message-item-body",
-    message: message,
-    isByMe: isByMe,
-    mouseHover: mouseHover,
-    isReactionEnabled: isReactionEnabledInChannel
-  }), isVoiceMessage(message) && /*#__PURE__*/React__default.createElement(VoiceMessageItemBody, {
-    className: "sendbird-message-content__middle__message-item-body",
-    message: message,
-    channelUrl: (_channel$url = channel === null || channel === void 0 ? void 0 : channel.url) !== null && _channel$url !== void 0 ? _channel$url : '',
-    isByMe: isByMe,
-    isReactionEnabled: isReactionEnabledInChannel
-  }), isThumbnailMessage(message) && /*#__PURE__*/React__default.createElement(ThumbnailMessageItemBody, {
-    className: "sendbird-message-content__middle__message-item-body",
-    message: message,
-    isByMe: isByMe,
-    mouseHover: mouseHover,
-    isReactionEnabled: isReactionEnabledInChannel,
-    showFileViewer: showFileViewer,
-    style: isMobile ? {
-      width: '100%'
-    } : {}
-  }), getUIKitMessageType(message) === messageTypes.UNKNOWN && /*#__PURE__*/React__default.createElement(UnknownMessageItemBody, {
-    className: "sendbird-message-content__middle__message-item-body",
-    message: message,
-    isByMe: isByMe,
-    mouseHover: mouseHover,
-    isReactionEnabled: isReactionEnabledInChannel
-  }), isReactionEnabledInChannel && (message === null || message === void 0 ? void 0 : (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : _message$reactions.length) > 0 && /*#__PURE__*/React__default.createElement("div", {
-    className: getClassName(['sendbird-message-content-reactions', !isByMe || isThumbnailMessage(message) || isOGMessage(message) ? '' : 'primary', mouseHover ? 'mouse-hover' : ''])
-  }, /*#__PURE__*/React__default.createElement(EmojiReactions, {
-    userId: userId,
-    message: message,
-    channel: channel,
-    isByMe: isByMe,
-    emojiContainer: emojiContainer,
-    memberNicknamesMap: nicknamesMap,
-    toggleReaction: toggleReaction
-  })), !isByMe && !chainBottom && /*#__PURE__*/React__default.createElement(Label, {
-    className: getClassName(['sendbird-message-content__middle__body-container__created-at', 'right', supposedHoverClassName]),
-    type: LabelTypography.CAPTION_3,
-    color: LabelColors.ONBACKGROUND_2
-  }, format((message === null || message === void 0 ? void 0 : message.createdAt) || 0, 'p', {
-    locale: dateLocale
-  }))), displayThreadReplies && /*#__PURE__*/React__default.createElement(ThreadReplies, {
-    className: "sendbird-message-content__middle__thread-replies",
-    threadInfo: message === null || message === void 0 ? void 0 : message.threadInfo,
-    onClick: () => onReplyInThread === null || onReplyInThread === void 0 ? void 0 : onReplyInThread({
-      message: message
-    })
-  })), /*#__PURE__*/React__default.createElement("div", {
-    className: getClassName(['sendbird-message-content__right', chainTopClassName, isReactionEnabledClassName, useReplyingClassName])
-  }, !isByMe && !isMobile && /*#__PURE__*/React__default.createElement("div", {
-    className: getClassName(['sendbird-message-content-menu', chainTopClassName, supposedHoverClassName, isByMeClassName])
-  }, isReactionEnabledInChannel && /*#__PURE__*/React__default.createElement(MessageItemReactionMenu, {
-    className: "sendbird-message-content-menu__reaction-menu",
-    message: message,
-    userId: userId,
-    spaceFromTrigger: {},
-    emojiContainer: emojiContainer,
-    toggleReaction: toggleReaction,
-    setSupposedHover: setSupposedHover
-  }), /*#__PURE__*/React__default.createElement(MessageItemMenu, {
-    className: "sendbird-message-content-menu__normal-menu",
-    channel: channel,
-    message: message,
-    isByMe: isByMe,
-    replyType: replyType,
-    disabled: disabled,
-    showRemove: showRemove,
-    resendMessage: resendMessage,
-    setQuoteMessage: setQuoteMessage,
-    setSupposedHover: setSupposedHover,
-    onReplyInThread: _ref3 => {
-      let {
-        message
-      } = _ref3;
-      if (threadReplySelectType === ThreadReplySelectType.THREAD) {
-        onReplyInThread({
-          message
-        });
-      } else if (threadReplySelectType === ThreadReplySelectType.PARENT) {
-        var _message$parentMessag5;
-        scrollToMessage((_message$parentMessag5 = message.parentMessage) === null || _message$parentMessag5 === void 0 ? void 0 : _message$parentMessag5.createdAt, message.parentMessageId);
-      }
-    }
-  }))), showMenu && ((message === null || message === void 0 ? void 0 : (_message$isUserMessag = message.isUserMessage) === null || _message$isUserMessag === void 0 ? void 0 : _message$isUserMessag.call(message)) || (message === null || message === void 0 ? void 0 : (_message$isFileMessag = message.isFileMessage) === null || _message$isFileMessag === void 0 ? void 0 : _message$isFileMessag.call(message))) && /*#__PURE__*/React__default.createElement(MobileMenu, {
-    parentRef: contentRef,
-    channel: channel,
-    hideMenu: () => {
-      setShowMenu(false);
-    },
-    message: message,
-    isReactionEnabled: isReactionEnabledInChannel,
-    isByMe: isByMe,
-    userId: userId,
-    replyType: replyType,
-    disabled: disabled,
-    showRemove: showRemove,
-    emojiContainer: emojiContainer,
-    resendMessage: resendMessage,
-    setQuoteMessage: setQuoteMessage,
-    toggleReaction: toggleReaction,
-    showEdit: showEdit,
-    onReplyInThread: _ref4 => {
-      let {
-        message
-      } = _ref4;
-      if (threadReplySelectType === ThreadReplySelectType.THREAD) {
-        onReplyInThread === null || onReplyInThread === void 0 ? void 0 : onReplyInThread({
-          message
-        });
-      } else if (threadReplySelectType === ThreadReplySelectType.PARENT) {
-        var _message$parentMessag6;
-        scrollToMessage === null || scrollToMessage === void 0 ? void 0 : scrollToMessage((message === null || message === void 0 ? void 0 : (_message$parentMessag6 = message.parentMessage) === null || _message$parentMessag6 === void 0 ? void 0 : _message$parentMessag6.createdAt) || 0, (message === null || message === void 0 ? void 0 : message.parentMessageId) || 0);
-      }
-    }
-  }));
-}
-
-export { MessageContent as default };
-//# sourceMappingURL=MessageContent.js.map