@sendbird/uikit-react 3.4.8 → 3.4.9-rc.0

package/ui/EmojiReactions.js

@@ -1,29 +1,227 @@
-import React__default, { useContext, useRef } from 'react';
-import Tooltip from './Tooltip.js';
-import TooltipWrapper from './TooltipWrapper.js';
+import React__default, { useState, useContext, useMemo, useRef } from 'react';
 import ReactionBadge from './ReactionBadge.js';
 import ReactionButton from './ReactionButton.js';
 import ImageRenderer from './ImageRenderer.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
 import ContextMenu, { EmojiListItems } from './ContextMenu.js';
-import { H as getEmojiMapAll, j as getClassName, I as isReactedBy, J as getEmojiTooltipString, y as getEmojiListAll } from '../index-d8fdbe6f.js';
-import { a as LocalizationContext } from '../LocalizationContext-ae38446a.js';
-import '../index-a900bd78.js';
+import { H as getEmojiUrl, I as isReactedBy, J as getEmojiTooltipString, G as getEmojiListAll, K as getEmojiMapAll, h as getClassName } from '../index-2d3d2283.js';
+import BottomSheet from './BottomSheet.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-c4af409f.js';
+import UserListItem from './UserListItem.js';
+import Tooltip from './Tooltip.js';
+import TooltipWrapper from './TooltipWrapper.js';
+import { u as useMediaQueryContext } from '../MediaQueryContext-744e0eb4.js';
+import { u as useLongPress } from '../useLongPress-b803e920.js';
+import { a as LocalizationContext } from '../LocalizationContext-8b7b48ec.js';
+import useSendbirdStateContext from '../useSendbirdStateContext.js';
+import { useMessageContext } from '../Message/context.js';
+import { b as _extends } from '../_rollupPluginBabelHelpers-8c286a7c.js';
+import '../utils-28a3bfad.js';
 import 'prop-types';
-import '../stringSet-6d89212b.js';
-import '../_rollupPluginBabelHelpers-eaf55eff.js';
 import 'react-dom';
 import './SortByRow.js';
-import '../uuid-c94bd88b.js';
+import '../uuid-295e6b8b.js';
 import '../utils/message/getOutgoingMessageState.js';
-import '../index-321e838f.js';
+import '../stringSet-387833a3.js';
+import '../index-a62f231a.js';
+import '../UserProfileContext-9040499b.js';
+import './Avatar.js';
+import './MutedAvatarOverlay.js';
+import './Checkbox.js';
+import './UserProfile.js';
+import '../sendbirdSelectors.js';
+import '../topics-019712e5.js';
+import './Button.js';
+import '../index-617179bd.js';
+import '../withSendbird.js';
+
+const ReactedMembersBottomSheet = _ref => {
+  var _message$reactions, _message$reactions2, _message$reactions2$f;
+  let {
+    message,
+    channel,
+    emojiKey = '',
+    hideMenu,
+    emojiContainer
+  } = _ref;
+  const {
+    members = []
+  } = channel;
+  const [selectedEmoji, setSelectedEmoji] = useState(emojiKey);
+  return /*#__PURE__*/React__default.createElement(BottomSheet, {
+    onBackdropClick: hideMenu
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-message__bottomsheet"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-message__bottomsheet__reacted-members"
+  }, (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : _message$reactions.map(reaction => {
+    const emojiUrl = getEmojiUrl(emojiContainer, reaction.key);
+    return /*#__PURE__*/React__default.createElement("div", {
+      key: reaction.key,
+      className: `
+                  sendbird-message__bottomsheet__reacted-members__item
+                  ${selectedEmoji === reaction.key ? 'sendbird-message__bottomsheet__reacted-members__item__selected' : ''}
+                `,
+      onClick: () => {
+        setSelectedEmoji(reaction.key);
+      }
+    }, /*#__PURE__*/React__default.createElement(ImageRenderer, {
+      url: emojiUrl,
+      width: "28px",
+      height: "28px",
+      placeHolder: style => /*#__PURE__*/React__default.createElement("div", {
+        style: style
+      }, /*#__PURE__*/React__default.createElement(Icon, {
+        type: IconTypes.QUESTION,
+        fillColor: IconColors.ON_BACKGROUND_3,
+        width: "28px",
+        height: "28px"
+      }))
+    }), /*#__PURE__*/React__default.createElement(Label, {
+      type: LabelTypography.BUTTON_2,
+      color: selectedEmoji === reaction.key ? LabelColors.PRIMARY : LabelColors.ONBACKGROUND_3
+    }, reaction.userIds.length));
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-message__bottomsheet__reactor-list"
+  },
+  // making a member list who reacted to the message with the `selectedEmoji`
+  ((_message$reactions2 = message.reactions) === null || _message$reactions2 === void 0 ? void 0 : (_message$reactions2$f = _message$reactions2.find(reaction => reaction.key === selectedEmoji)) === null || _message$reactions2$f === void 0 ? void 0 : _message$reactions2$f.userIds.map(userId => members.find(member => member.userId === userId)).filter(member => member !== undefined)).map(member => /*#__PURE__*/React__default.createElement(UserListItem, {
+    key: member.userId,
+    className: "sendbird-message__bottomsheet__reactor-list__item",
+    user: member,
+    avatarSize: "36px"
+  })))));
+};
+
+function ReactionItem(_ref) {
+  var _emojisMap$get;
+  let {
+    reaction,
+    memberNicknamesMap,
+    setEmojiKey,
+    toggleReaction,
+    emojisMap
+  } = _ref;
+  const store = useSendbirdStateContext();
+  const {
+    isMobile
+  } = useMediaQueryContext();
+  const messageStore = useMessageContext();
+  const message = messageStore === null || messageStore === void 0 ? void 0 : messageStore.message;
+  const {
+    stringSet
+  } = useContext(LocalizationContext);
+  const userId = store.config.userId;
+  const reactedByMe = isReactedBy(userId, reaction);
+  const handleOnClick = () => {
+    setEmojiKey('');
+    toggleReaction === null || toggleReaction === void 0 ? void 0 : toggleReaction(message, reaction.key, reactedByMe);
+  };
+  const longPress = useLongPress({
+    onLongPress: () => {
+      setEmojiKey(reaction.key);
+    },
+    onClick: handleOnClick
+  }, {
+    shouldPreventDefault: true,
+    shouldStopPropagation: true
+  });
+  return /*#__PURE__*/React__default.createElement(TooltipWrapper, {
+    className: "sendbird-emoji-reactions__reaction-badge",
+    hoverTooltip: reaction.userIds.length > 0 ? /*#__PURE__*/React__default.createElement(Tooltip, null, getEmojiTooltipString(reaction, userId, memberNicknamesMap, stringSet)) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null)
+  }, /*#__PURE__*/React__default.createElement("div", isMobile ? longPress : {
+    onClick: handleOnClick
+  }, /*#__PURE__*/React__default.createElement(ReactionBadge, {
+    count: reaction.userIds.length,
+    selected: reactedByMe
+  }, /*#__PURE__*/React__default.createElement(ImageRenderer, {
+    circle: true,
+    url: ((_emojisMap$get = emojisMap.get(reaction === null || reaction === void 0 ? void 0 : reaction.key)) === null || _emojisMap$get === void 0 ? void 0 : _emojisMap$get.url) || '',
+    width: "20px",
+    height: "20px",
+    defaultComponent: /*#__PURE__*/React__default.createElement(Icon, {
+      width: "20px",
+      height: "20px",
+      type: IconTypes.QUESTION
+    })
+  }))));
+}
+
+const AddReactionBadgeItem = _ref => {
+  let {
+    onClick
+  } = _ref;
+  const onlyClick = useLongPress({
+    onLongPress: () => {/* noop */},
+    onClick
+  }, {
+    shouldPreventDefault: true,
+    shouldStopPropagation: true
+  });
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: "sendbird-emoji-reactions__add-reaction-badge"
+  }, onlyClick), /*#__PURE__*/React__default.createElement(ReactionBadge, {
+    isAdd: true
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: IconTypes.EMOJI_MORE,
+    fillColor: IconColors.ON_BACKGROUND_3,
+    width: "20px",
+    height: "20px"
+  })));
+};
+
+const MobileEmojisBottomSheet = _ref => {
+  let {
+    userId,
+    message,
+    emojiContainer,
+    hideMenu,
+    toggleReaction
+  } = _ref;
+  const emojiAllList = useMemo(() => {
+    return getEmojiListAll(emojiContainer);
+  }, [emojiContainer]);
+  return /*#__PURE__*/React__default.createElement(BottomSheet, {
+    onBackdropClick: hideMenu
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-message__bottomsheet sendbird-message__emojis-bottomsheet"
+  }, emojiAllList.map(emoji => {
+    var _message$reactions$fi, _message$reactions, _message$reactions$fi2, _message$reactions$fi3;
+    const isReacted = (_message$reactions$fi = message === null || message === void 0 ? void 0 : (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : (_message$reactions$fi2 = _message$reactions.find(reaction => reaction.key === emoji.key)) === null || _message$reactions$fi2 === void 0 ? void 0 : (_message$reactions$fi3 = _message$reactions$fi2.userIds) === null || _message$reactions$fi3 === void 0 ? void 0 : _message$reactions$fi3.some(reactorId => reactorId === userId)) !== null && _message$reactions$fi !== void 0 ? _message$reactions$fi : false;
+    return /*#__PURE__*/React__default.createElement(ReactionButton, {
+      key: emoji.key,
+      width: "44px",
+      height: "44px",
+      selected: isReacted,
+      onClick: e => {
+        e === null || e === void 0 ? void 0 : e.stopPropagation();
+        toggleReaction === null || toggleReaction === void 0 ? void 0 : toggleReaction(message, emoji.key, isReacted);
+        hideMenu();
+      },
+      dataSbId: `ui_mobile_emoji_reactions_menu_${emoji.key}`
+    }, /*#__PURE__*/React__default.createElement(ImageRenderer, {
+      url: emoji.url,
+      width: "38px",
+      height: "38px",
+      placeHolder: style => /*#__PURE__*/React__default.createElement("div", {
+        style: style
+      }, /*#__PURE__*/React__default.createElement(Icon, {
+        type: IconTypes.QUESTION,
+        fillColor: IconColors.ON_BACKGROUND_3,
+        width: "28px",
+        height: "28px"
+      }))
+    }));
+  })));
+};
 
 const EmojiReactions = _ref => {
-  var _message$reactions, _message$reactions2;
+  var _message$reactions$le, _message$reactions, _message$reactions$le2, _message$reactions2, _message$reactions3;
   let {
-    className,
+    className = '',
     userId,
     message,
+    channel,
     emojiContainer,
     memberNicknamesMap,
     spaceFromTrigger = {
@@ -34,47 +232,33 @@ const EmojiReactions = _ref => {
     toggleReaction
   } = _ref;
   const {
-    stringSet
-  } = useContext(LocalizationContext);
-  const emojisMap = getEmojiMapAll(emojiContainer);
+    isMobile
+  } = useMediaQueryContext();
   const addReactionRef = useRef(null);
+  const [showEmojiList, setShowEmojiList] = useState(false);
+  const [selectedEmojiKey, setSelectedEmojiKey] = useState('');
+  const emojisMap = getEmojiMapAll(emojiContainer);
+  const showAddReactionBadge = ((_message$reactions$le = (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : _message$reactions.length) !== null && _message$reactions$le !== void 0 ? _message$reactions$le : 0) < emojisMap.size;
   return /*#__PURE__*/React__default.createElement("div", {
     className: getClassName([className, 'sendbird-emoji-reactions', isByMe ? 'outgoing' : 'incoming'])
-  }, (message === null || message === void 0 ? void 0 : (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : _message$reactions.length) > 0 && message.reactions.map(reaction => {
-    var _reaction$userIds, _emojisMap$get;
-    const reactedByMe = isReactedBy(userId, reaction);
-    return /*#__PURE__*/React__default.createElement(TooltipWrapper, {
-      className: "sendbird-emoji-reactions__reaction-badge",
+  }, ((_message$reactions$le2 = (_message$reactions2 = message.reactions) === null || _message$reactions2 === void 0 ? void 0 : _message$reactions2.length) !== null && _message$reactions$le2 !== void 0 ? _message$reactions$le2 : 0) > 0 && ((_message$reactions3 = message.reactions) === null || _message$reactions3 === void 0 ? void 0 : _message$reactions3.map(reaction => {
+    return /*#__PURE__*/React__default.createElement(ReactionItem, {
       key: reaction === null || reaction === void 0 ? void 0 : reaction.key,
-      hoverTooltip: (reaction === null || reaction === void 0 ? void 0 : (_reaction$userIds = reaction.userIds) === null || _reaction$userIds === void 0 ? void 0 : _reaction$userIds.length) > 0 && /*#__PURE__*/React__default.createElement(Tooltip, null, getEmojiTooltipString(reaction, userId, memberNicknamesMap, stringSet))
-    }, /*#__PURE__*/React__default.createElement(ReactionBadge, {
-      count: reaction.userIds.length,
-      selected: reactedByMe,
-      onClick: e => {
-        var _e$stopPropagation;
-        toggleReaction(message, reaction.key, reactedByMe);
-        e === null || e === void 0 ? void 0 : (_e$stopPropagation = e.stopPropagation) === null || _e$stopPropagation === void 0 ? void 0 : _e$stopPropagation.call(e);
-      }
-    }, /*#__PURE__*/React__default.createElement(ImageRenderer, {
-      circle: true,
-      url: ((_emojisMap$get = emojisMap.get(reaction === null || reaction === void 0 ? void 0 : reaction.key)) === null || _emojisMap$get === void 0 ? void 0 : _emojisMap$get.url) || '',
-      width: "20px",
-      height: "20px",
-      defaultComponent: /*#__PURE__*/React__default.createElement(Icon, {
-        width: "20px",
-        height: "20px",
-        type: IconTypes.QUESTION
-      })
-    })));
-  }), (message === null || message === void 0 ? void 0 : (_message$reactions2 = message.reactions) === null || _message$reactions2 === void 0 ? void 0 : _message$reactions2.length) < emojisMap.size && /*#__PURE__*/React__default.createElement(ContextMenu, {
+      reaction: reaction,
+      memberNicknamesMap: memberNicknamesMap,
+      setEmojiKey: setSelectedEmojiKey,
+      toggleReaction: toggleReaction,
+      emojisMap: emojisMap
+    });
+  })), !isMobile && showAddReactionBadge && /*#__PURE__*/React__default.createElement(ContextMenu, {
     menuTrigger: toggleDropdown => /*#__PURE__*/React__default.createElement(ReactionBadge, {
       className: "sendbird-emoji-reactions__add-reaction-badge",
       ref: addReactionRef,
       isAdd: true,
       onClick: e => {
-        var _e$stopPropagation2;
+        var _e$stopPropagation;
         toggleDropdown();
-        e === null || e === void 0 ? void 0 : (_e$stopPropagation2 = e.stopPropagation) === null || _e$stopPropagation2 === void 0 ? void 0 : _e$stopPropagation2.call(e);
+        e === null || e === void 0 ? void 0 : (_e$stopPropagation = e.stopPropagation) === null || _e$stopPropagation === void 0 ? void 0 : _e$stopPropagation.call(e);
       }
     }, /*#__PURE__*/React__default.createElement(Icon, {
       type: IconTypes.EMOJI_MORE,
@@ -86,10 +270,10 @@ const EmojiReactions = _ref => {
       parentRef: addReactionRef,
       parentContainRef: addReactionRef,
       closeDropdown: closeDropdown,
-      spacefromTrigger: spaceFromTrigger
+      spaceFromTrigger: spaceFromTrigger
     }, getEmojiListAll(emojiContainer).map(emoji => {
-      var _message$reactions3, _message$reactions3$f, _message$reactions3$f2;
-      const isReacted = message === null || message === void 0 ? void 0 : (_message$reactions3 = message.reactions) === null || _message$reactions3 === void 0 ? void 0 : (_message$reactions3$f = _message$reactions3.find(reaction => reaction.key === emoji.key)) === null || _message$reactions3$f === void 0 ? void 0 : (_message$reactions3$f2 = _message$reactions3$f.userIds) === null || _message$reactions3$f2 === void 0 ? void 0 : _message$reactions3$f2.some(reactorId => reactorId === userId);
+      var _message$reactions4, _message$reactions4$f, _message$reactions4$f2;
+      const isReacted = (message === null || message === void 0 ? void 0 : (_message$reactions4 = message.reactions) === null || _message$reactions4 === void 0 ? void 0 : (_message$reactions4$f = _message$reactions4.find(reaction => reaction.key === emoji.key)) === null || _message$reactions4$f === void 0 ? void 0 : (_message$reactions4$f2 = _message$reactions4$f.userIds) === null || _message$reactions4$f2 === void 0 ? void 0 : _message$reactions4$f2.some(reactorId => reactorId === userId)) || false;
       return /*#__PURE__*/React__default.createElement(ReactionButton, {
         key: emoji.key,
         width: "36px",
@@ -97,9 +281,10 @@ const EmojiReactions = _ref => {
         selected: isReacted,
         onClick: e => {
           closeDropdown();
-          toggleReaction(message, emoji.key, isReacted);
+          toggleReaction === null || toggleReaction === void 0 ? void 0 : toggleReaction(message, emoji.key, isReacted);
           e === null || e === void 0 ? void 0 : e.stopPropagation();
-        }
+        },
+        dataSbId: `ui_emoji_reactions_menu_${emoji.key}`
       }, /*#__PURE__*/React__default.createElement(ImageRenderer, {
         url: (emoji === null || emoji === void 0 ? void 0 : emoji.url) || '',
         width: "28px",
@@ -114,6 +299,26 @@ const EmojiReactions = _ref => {
         }))
       }));
     }))
+  }), isMobile && showAddReactionBadge && /*#__PURE__*/React__default.createElement(AddReactionBadgeItem, {
+    onClick: () => {
+      setShowEmojiList(true);
+    }
+  }), isMobile && showEmojiList && /*#__PURE__*/React__default.createElement(MobileEmojisBottomSheet, {
+    userId: userId,
+    message: message,
+    emojiContainer: emojiContainer,
+    hideMenu: () => {
+      setShowEmojiList(false);
+    },
+    toggleReaction: toggleReaction
+  }), isMobile && selectedEmojiKey && channel !== null && /*#__PURE__*/React__default.createElement(ReactedMembersBottomSheet, {
+    message: message,
+    channel: channel,
+    emojiKey: selectedEmojiKey,
+    hideMenu: () => {
+      setSelectedEmojiKey('');
+    },
+    emojiContainer: emojiContainer
   }));
 };
 

package/ui/EmojiReactions.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiReactions.js","sources":["../../src/ui/EmojiReactions/index.tsx"],"sourcesContent":["import './index.scss';\nimport React, { ReactElement, useContext, useRef } from 'react';\nimport type { FileMessage, Reaction, UserMessage } from '@sendbird/chat/message';\nimport type { Emoji, EmojiContainer } from '@sendbird/chat';\n\nimport Tooltip from '../Tooltip';\nimport TooltipWrapper from '../TooltipWrapper';\nimport ReactionBadge from '../ReactionBadge';\nimport ReactionButton from '../ReactionButton';\nimport ImageRenderer from '../ImageRenderer';\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport ContextMenu, { EmojiListItems } from '../ContextMenu';\n\nimport { getClassName, getEmojiListAll, getEmojiMapAll, getEmojiTooltipString, isReactedBy } from '../../utils';\nimport { LocalizationContext } from '../../lib/LocalizationContext';\n\ninterface Props {\n  className?: string | Array<string>;\n  userId: string;\n  message: UserMessage | FileMessage;\n  emojiContainer: EmojiContainer;\n  memberNicknamesMap: Map<string, string>;\n  spaceFromTrigger?: { x: number, y: number };\n  isByMe?: boolean;\n  toggleReaction?: (message: UserMessage | FileMessage, key: string, byMe: boolean) => void;\n}\n\nconst EmojiReactions = ({\n  className,\n  userId,\n  message,\n  emojiContainer,\n  memberNicknamesMap,\n  spaceFromTrigger = { x: 0, y: 0 },\n  isByMe = false,\n  toggleReaction,\n}: Props): ReactElement => {\n  const { stringSet } = useContext(LocalizationContext);\n  const emojisMap = getEmojiMapAll(emojiContainer);\n  const addReactionRef = useRef(null);\n\n  return (\n    <div className={getClassName([\n      className, 'sendbird-emoji-reactions',\n      isByMe ? 'outgoing' : 'incoming',\n    ])}>\n      {(message?.reactions?.length > 0) && (\n        message.reactions.map((reaction: Reaction): ReactElement => {\n          const reactedByMe = isReactedBy(userId, reaction);\n          return (\n            <TooltipWrapper\n              className=\"sendbird-emoji-reactions__reaction-badge\"\n              key={reaction?.key}\n              hoverTooltip={(reaction?.userIds?.length > 0) && (\n                <Tooltip>\n                  {getEmojiTooltipString(reaction, userId, memberNicknamesMap, stringSet)}\n                </Tooltip>\n              )}\n            >\n              <ReactionBadge\n                count={reaction.userIds.length}\n                selected={reactedByMe}\n                onClick={(e) => {\n                  toggleReaction(message, reaction.key, reactedByMe);\n                  e?.stopPropagation?.();\n                }}\n              >\n                <ImageRenderer\n                  circle\n                  url={emojisMap.get(reaction?.key)?.url || ''}\n                  width=\"20px\"\n                  height=\"20px\"\n                  defaultComponent={(\n                    <Icon width=\"20px\" height=\"20px\" type={IconTypes.QUESTION} />\n                  )}\n                />\n              </ReactionBadge>\n            </TooltipWrapper>\n          );\n        })\n      )}\n      {(message?.reactions?.length < emojisMap.size) && (\n        <ContextMenu\n          menuTrigger={(toggleDropdown: () => void): ReactElement => (\n            <ReactionBadge\n              className=\"sendbird-emoji-reactions__add-reaction-badge\"\n              ref={addReactionRef}\n              isAdd\n              onClick={(e) => {\n                toggleDropdown();\n                e?.stopPropagation?.();\n              }}\n            >\n              <Icon\n                type={IconTypes.EMOJI_MORE}\n                fillColor={IconColors.ON_BACKGROUND_3}\n                width=\"20px\"\n                height=\"20px\"\n              />\n            </ReactionBadge>\n          )}\n          menuItems={(closeDropdown: () => void): ReactElement => (\n            <EmojiListItems\n              parentRef={addReactionRef}\n              parentContainRef={addReactionRef}\n              closeDropdown={closeDropdown}\n              spacefromTrigger={spaceFromTrigger}\n            >\n              {getEmojiListAll(emojiContainer).map((emoji: Emoji): ReactElement => {\n                const isReacted: boolean = (message?.reactions\n                  ?.find((reaction: Reaction): boolean => reaction.key === emoji.key)?.userIds\n                  ?.some((reactorId: string): boolean => reactorId === userId));\n                return (\n                  <ReactionButton\n                    key={emoji.key}\n                    width=\"36px\"\n                    height=\"36px\"\n                    selected={isReacted}\n                    onClick={(e): void => {\n                      closeDropdown();\n                      toggleReaction(message, emoji.key, isReacted);\n                      e?.stopPropagation();\n                    }}\n                  >\n                    <ImageRenderer\n                      url={emoji?.url || ''}\n                      width=\"28px\"\n                      height=\"28px\"\n                      placeHolder={(style: Record<string, unknown>): ReactElement => (\n                        <div style={style}>\n                          <Icon\n                            type={IconTypes.QUESTION}\n                            fillColor={IconColors.ON_BACKGROUND_3}\n                            width=\"28px\"\n                            height=\"28px\"\n                          />\n                        </div>\n                      )}\n                    />\n                  </ReactionButton>\n                );\n              })}\n            </EmojiListItems>\n          )}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default EmojiReactions;\n"],"names":["EmojiReactions","_ref","_message$reactions","_message$reactions2","className","userId","message","emojiContainer","memberNicknamesMap","spaceFromTrigger","x","y","isByMe","toggleReaction","stringSet","useContext","LocalizationContext","emojisMap","getEmojiMapAll","addReactionRef","useRef","React","createElement","getClassName","reactions","length","map","reaction","_reaction$userIds","_emojisMap$get","reactedByMe","isReactedBy","TooltipWrapper","key","hoverTooltip","userIds","Tooltip","getEmojiTooltipString","ReactionBadge","count","selected","onClick","e","_e$stopPropagation","stopPropagation","call","ImageRenderer","circle","url","get","width","height","defaultComponent","Icon","type","IconTypes","QUESTION","size","ContextMenu","menuTrigger","toggleDropdown","ref","isAdd","_e$stopPropagation2","EMOJI_MORE","fillColor","IconColors","ON_BACKGROUND_3","menuItems","closeDropdown","EmojiListItems","parentRef","parentContainRef","spacefromTrigger","getEmojiListAll","emoji","_message$reactions3","_message$reactions3$f","_message$reactions3$f2","isReacted","find","some","reactorId","ReactionButton","placeHolder","style"],"mappings":"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"}
+{"version":3,"file":"EmojiReactions.js","sources":["../../src/ui/MobileMenu/ReactedMembersBottomSheet.tsx","../../src/ui/EmojiReactions/ReactionItem.tsx","../../src/ui/EmojiReactions/AddReactionBadgeItem.tsx","../../src/ui/MobileMenu/MobileEmojisBottomSheet.tsx","../../src/ui/EmojiReactions/index.tsx"],"sourcesContent":["import React, { ReactElement, useState } from 'react';\nimport { EmojiContainer } from '@sendbird/chat';\nimport { GroupChannel, Member } from '@sendbird/chat/groupChannel';\nimport { FileMessage, Reaction, UserMessage } from '@sendbird/chat/message';\n\nimport './mobile-menu-reacted-members.scss';\n\nimport BottomSheet from '../BottomSheet';\nimport { getEmojiUrl } from '../../utils';\nimport ImageRenderer from '../ImageRenderer';\nimport Icon, { IconColors, IconTypes } from '../Icon';\nimport Label, { LabelColors, LabelTypography } from '../Label';\nimport UserListItem from '../UserListItem';\n\nexport interface ReactedMembersBottomSheetProps {\n  message: UserMessage | FileMessage;\n  channel: GroupChannel;\n  emojiKey: string;\n  hideMenu: () => void;\n  emojiContainer?: EmojiContainer;\n}\n\nexport const ReactedMembersBottomSheet = ({\n  message,\n  channel,\n  emojiKey = '',\n  hideMenu,\n  emojiContainer,\n}: ReactedMembersBottomSheetProps): ReactElement => {\n  const { members = [] } = channel;\n  const [selectedEmoji, setSelectedEmoji] = useState(emojiKey);\n\n  return (\n    <BottomSheet onBackdropClick={hideMenu}>\n      <div className=\"sendbird-message__bottomsheet\">\n        <div className=\"sendbird-message__bottomsheet__reacted-members\">\n          {message.reactions?.map((reaction: Reaction): ReactElement => {\n            const emojiUrl = getEmojiUrl(emojiContainer, reaction.key);\n            return (\n              <div\n                key={reaction.key}\n                className={`\n                  sendbird-message__bottomsheet__reacted-members__item\n                  ${selectedEmoji === reaction.key ? 'sendbird-message__bottomsheet__reacted-members__item__selected' : ''}\n                `}\n                onClick={() => {\n                  setSelectedEmoji(reaction.key);\n                }}\n              >\n                <ImageRenderer\n                  url={emojiUrl}\n                  width=\"28px\"\n                  height=\"28px\"\n                  placeHolder={(style) => (\n                    <div style={style}>\n                      <Icon\n                        type={IconTypes.QUESTION}\n                        fillColor={IconColors.ON_BACKGROUND_3}\n                        width=\"28px\"\n                        height=\"28px\"\n                      />\n                    </div>\n                  )}\n                />\n                <Label\n                  type={LabelTypography.BUTTON_2}\n                  color={selectedEmoji === reaction.key ? LabelColors.PRIMARY : LabelColors.ONBACKGROUND_3}\n                >\n                  {reaction.userIds.length}\n                </Label>\n              </div>\n            );\n          })}\n        </div>\n        <div className=\"sendbird-message__bottomsheet__reactor-list\">\n          { // making a member list who reacted to the message with the `selectedEmoji`\n            (\n              message.reactions?.find(reaction => reaction.key === selectedEmoji)\n                ?.userIds.map((userId) => members.find((member) => member.userId === userId))\n                .filter((member) => member !== undefined) as Array<Member>\n            )\n              .map((member) => (\n                <UserListItem\n                  key={member.userId}\n                  className=\"sendbird-message__bottomsheet__reactor-list__item\"\n                  user={member}\n                  avatarSize=\"36px\"\n                />\n              ))\n          }\n        </div>\n      </div>\n    </BottomSheet>\n  );\n};\n","import React, { useContext } from 'react';\n\nimport { FileMessage, Reaction, UserMessage } from '@sendbird/chat/message';\n\nimport Tooltip from '../Tooltip';\nimport TooltipWrapper from '../TooltipWrapper';\nimport ReactionBadge from '../ReactionBadge';\nimport ImageRenderer from '../ImageRenderer';\nimport Icon, { IconTypes } from '../Icon';\nimport { useMediaQueryContext } from '../../lib/MediaQueryContext';\nimport useLongPress from '../../hooks/useLongPress';\nimport { LocalizationContext } from '../../lib/LocalizationContext';\nimport useSendbirdStateContext from '../../hooks/useSendbirdStateContext';\nimport { getEmojiTooltipString, isReactedBy } from '../../utils';\nimport { useMessageContext } from '../../modules/Message/context/MessageProvider';\nimport { Emoji } from '@sendbird/chat';\n\ntype Props = {\n  reaction: Reaction;\n  memberNicknamesMap: Map<string, string>;\n  setEmojiKey: React.Dispatch<React.SetStateAction<string>>;\n  toggleReaction?: (message: UserMessage | FileMessage, key: string, byMe: boolean) => void;\n  emojisMap: Map<string, Emoji>;\n};\n\nexport default function ReactionItem({\n  reaction,\n  memberNicknamesMap,\n  setEmojiKey,\n  toggleReaction,\n  emojisMap,\n}: Props) {\n  const store = useSendbirdStateContext();\n  const { isMobile } = useMediaQueryContext();\n  const messageStore = useMessageContext();\n  const message = messageStore?.message as UserMessage;\n  const { stringSet } = useContext(LocalizationContext);\n\n  const userId = store.config.userId;\n  const reactedByMe = isReactedBy(userId, reaction);\n\n  const handleOnClick = () => {\n    setEmojiKey('');\n    toggleReaction?.((message), reaction.key, reactedByMe);\n  };\n  const longPress = useLongPress({\n    onLongPress: () => {\n      setEmojiKey(reaction.key);\n    },\n    onClick: handleOnClick,\n  }, {\n    shouldPreventDefault: true,\n    shouldStopPropagation: true,\n  });\n\n  return (\n    <TooltipWrapper\n      className=\"sendbird-emoji-reactions__reaction-badge\"\n      hoverTooltip={(reaction.userIds.length > 0) ? (\n        <Tooltip>\n          {getEmojiTooltipString(reaction, userId, memberNicknamesMap, stringSet)}\n        </Tooltip>\n      ) : <></>}\n    >\n      <div\n        {...(\n          isMobile\n            ? longPress\n            : { onClick: handleOnClick }\n        )}\n      >\n        <ReactionBadge\n          count={reaction.userIds.length}\n          selected={reactedByMe}\n        >\n          <ImageRenderer\n            circle\n            url={emojisMap.get(reaction?.key)?.url || ''}\n            width=\"20px\"\n            height=\"20px\"\n            defaultComponent={(\n              <Icon width=\"20px\" height=\"20px\" type={IconTypes.QUESTION} />\n            )}\n          />\n        </ReactionBadge>\n      </div>\n    </TooltipWrapper>\n  );\n}\n","import React, {\n  KeyboardEvent,\n  MouseEvent,\n  TouchEvent,\n} from 'react';\nimport ReactionBadge from '../ReactionBadge';\nimport Icon, { IconColors, IconTypes } from '../Icon';\nimport useLongPress from '../../hooks/useLongPress';\n\nexport interface AddReactionBadgeItemProps {\n  onClick: (e: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement> | TouchEvent<HTMLDivElement>) => void;\n}\n\nexport const AddReactionBadgeItem = ({\n  onClick,\n}: AddReactionBadgeItemProps): React.ReactElement => {\n  const onlyClick = useLongPress({\n    onLongPress: () => { /* noop */ },\n    onClick,\n  }, {\n    shouldPreventDefault: true,\n    shouldStopPropagation: true,\n  });\n\n  return (\n    <div\n      className=\"sendbird-emoji-reactions__add-reaction-badge\"\n      {...onlyClick}\n    >\n      <ReactionBadge\n        isAdd\n      >\n        <Icon\n          type={IconTypes.EMOJI_MORE}\n          fillColor={IconColors.ON_BACKGROUND_3}\n          width=\"20px\"\n          height=\"20px\"\n        />\n      </ReactionBadge>\n    </div>\n  );\n};\n","import React, { ReactElement, useMemo } from 'react';\nimport { EmojiContainer } from '@sendbird/chat';\nimport { FileMessage, Reaction, UserMessage } from '@sendbird/chat/message';\n\nimport BottomSheet from '../BottomSheet';\nimport { getEmojiListAll } from '../../utils';\nimport ReactionButton from '../ReactionButton';\nimport ImageRenderer from '../ImageRenderer';\nimport Icon, { IconColors, IconTypes } from '../Icon';\n\nexport interface MobileEmojisBottomSheetProps {\n  userId: string;\n  message: UserMessage | FileMessage;\n  emojiContainer: EmojiContainer;\n  hideMenu: () => void;\n  toggleReaction?: (message: UserMessage | FileMessage, key: string, byMe: boolean) => void;\n}\n\nexport const MobileEmojisBottomSheet = ({\n  userId,\n  message,\n  emojiContainer,\n  hideMenu,\n  toggleReaction,\n}: MobileEmojisBottomSheetProps): ReactElement => {\n  const emojiAllList = useMemo(() => {\n    return getEmojiListAll(emojiContainer);\n  }, [emojiContainer]);\n  return (\n    <BottomSheet onBackdropClick={hideMenu}>\n      <div className=\"sendbird-message__bottomsheet sendbird-message__emojis-bottomsheet\">\n        {emojiAllList.map((emoji) => {\n          const isReacted: boolean = (message?.reactions\n            ?.find((reaction: Reaction): boolean => reaction.key === emoji.key)?.userIds\n            ?.some((reactorId: string): boolean => reactorId === userId)) ?? false;\n          return (\n            <ReactionButton\n              key={emoji.key}\n              width=\"44px\"\n              height=\"44px\"\n              selected={isReacted}\n              onClick={(e) => {\n                e?.stopPropagation();\n                toggleReaction?.(message, emoji.key, isReacted);\n                hideMenu();\n              }}\n              dataSbId={`ui_mobile_emoji_reactions_menu_${emoji.key}`}\n            >\n              <ImageRenderer\n                url={emoji.url}\n                width=\"38px\"\n                height=\"38px\"\n                placeHolder={(style: Record<string, unknown>): ReactElement => (\n                  <div style={style}>\n                    <Icon\n                      type={IconTypes.QUESTION}\n                      fillColor={IconColors.ON_BACKGROUND_3}\n                      width=\"28px\"\n                      height=\"28px\"\n                    />\n                  </div>\n                )}\n              />\n            </ReactionButton>\n          );\n        })}\n      </div>\n    </BottomSheet>\n  );\n};\n","import './index.scss';\nimport React, { ReactElement, useRef, useState } from 'react';\nimport type { Emoji, EmojiContainer } from '@sendbird/chat';\nimport type { FileMessage, Reaction, UserMessage } from '@sendbird/chat/message';\nimport type { GroupChannel } from '@sendbird/chat/groupChannel';\n\nimport ReactionBadge from '../ReactionBadge';\nimport ReactionButton from '../ReactionButton';\nimport ImageRenderer from '../ImageRenderer';\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport ContextMenu, { EmojiListItems } from '../ContextMenu';\nimport { Nullable, SpaceFromTriggerType } from '../../types';\n\nimport { getClassName, getEmojiListAll, getEmojiMapAll } from '../../utils';\nimport { ReactedMembersBottomSheet } from '../MobileMenu/ReactedMembersBottomSheet';\nimport ReactionItem from './ReactionItem';\nimport { useMediaQueryContext } from '../../lib/MediaQueryContext';\nimport { AddReactionBadgeItem } from './AddReactionBadgeItem';\nimport { MobileEmojisBottomSheet } from '../MobileMenu/MobileEmojisBottomSheet';\n\ninterface Props {\n  className?: string | Array<string>;\n  userId: string;\n  message: UserMessage | FileMessage;\n  channel: Nullable<GroupChannel>;\n  emojiContainer: EmojiContainer;\n  memberNicknamesMap: Map<string, string>;\n  spaceFromTrigger?: SpaceFromTriggerType;\n  isByMe?: boolean;\n  toggleReaction?: (message: UserMessage | FileMessage, key: string, byMe: boolean) => void;\n}\n\nconst EmojiReactions = ({\n  className = '',\n  userId,\n  message,\n  channel,\n  emojiContainer,\n  memberNicknamesMap,\n  spaceFromTrigger = { x: 0, y: 0 },\n  isByMe = false,\n  toggleReaction,\n}: Props): ReactElement => {\n  const { isMobile } = useMediaQueryContext();\n  const addReactionRef = useRef(null);\n  const [showEmojiList, setShowEmojiList] = useState(false);\n  const [selectedEmojiKey, setSelectedEmojiKey] = useState('');\n\n  const emojisMap = getEmojiMapAll(emojiContainer);\n  const showAddReactionBadge = (message.reactions?.length ?? 0) < emojisMap.size;\n\n  return (\n    <div className={getClassName([\n      className, 'sendbird-emoji-reactions',\n      isByMe ? 'outgoing' : 'incoming',\n    ])}>\n      {((message.reactions?.length ?? 0) > 0) && (\n        message.reactions?.map((reaction: Reaction): ReactElement => {\n          return (\n            <ReactionItem\n              key={reaction?.key}\n              reaction={reaction}\n              memberNicknamesMap={memberNicknamesMap}\n              setEmojiKey={setSelectedEmojiKey}\n              toggleReaction={toggleReaction}\n              emojisMap={emojisMap}\n            />\n          );\n        })\n      )}\n      {(!isMobile && showAddReactionBadge) && (\n        <ContextMenu\n          menuTrigger={(toggleDropdown: () => void): ReactElement => (\n            <ReactionBadge\n              className=\"sendbird-emoji-reactions__add-reaction-badge\"\n              ref={addReactionRef}\n              isAdd\n              onClick={(e) => {\n                toggleDropdown();\n                e?.stopPropagation?.();\n              }}\n            >\n              <Icon\n                type={IconTypes.EMOJI_MORE}\n                fillColor={IconColors.ON_BACKGROUND_3}\n                width=\"20px\"\n                height=\"20px\"\n              />\n            </ReactionBadge>\n          )}\n          menuItems={(closeDropdown: () => void): ReactElement => (\n            <EmojiListItems\n              parentRef={addReactionRef}\n              parentContainRef={addReactionRef}\n              closeDropdown={closeDropdown}\n              spaceFromTrigger={spaceFromTrigger}\n            >\n              {getEmojiListAll(emojiContainer).map((emoji: Emoji): ReactElement => {\n                const isReacted: boolean = (message?.reactions\n                  ?.find((reaction: Reaction): boolean => reaction.key === emoji.key)?.userIds\n                  ?.some((reactorId: string): boolean => reactorId === userId)) || false;\n                return (\n                  <ReactionButton\n                    key={emoji.key}\n                    width=\"36px\"\n                    height=\"36px\"\n                    selected={isReacted}\n                    onClick={(e): void => {\n                      closeDropdown();\n                      toggleReaction?.(message, emoji.key, isReacted);\n                      e?.stopPropagation();\n                    }}\n                    dataSbId={`ui_emoji_reactions_menu_${emoji.key}`}\n                  >\n                    <ImageRenderer\n                      url={emoji?.url || ''}\n                      width=\"28px\"\n                      height=\"28px\"\n                      placeHolder={(style: Record<string, unknown>): ReactElement => (\n                        <div style={style}>\n                          <Icon\n                            type={IconTypes.QUESTION}\n                            fillColor={IconColors.ON_BACKGROUND_3}\n                            width=\"28px\"\n                            height=\"28px\"\n                          />\n                        </div>\n                      )}\n                    />\n                  </ReactionButton>\n                );\n              })}\n            </EmojiListItems>\n          )}\n        />\n      )}\n      {(isMobile && showAddReactionBadge) && (\n        <AddReactionBadgeItem\n          onClick={() => {\n            setShowEmojiList(true);\n          }}\n        />\n      )}\n      {(isMobile && showEmojiList) && (\n        <MobileEmojisBottomSheet\n          userId={userId}\n          message={message}\n          emojiContainer={emojiContainer}\n          hideMenu={() => {\n            setShowEmojiList(false);\n          }}\n          toggleReaction={toggleReaction}\n        />\n      )}\n      {(isMobile && selectedEmojiKey && channel !== null) && (\n        <ReactedMembersBottomSheet\n          message={message}\n          channel={channel}\n          emojiKey={selectedEmojiKey}\n          hideMenu={() => {\n            setSelectedEmojiKey('');\n          }}\n          emojiContainer={emojiContainer}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default EmojiReactions;\n"],"names":["ReactedMembersBottomSheet","_ref","_message$reactions","_message$reactions2","_message$reactions2$f","message","channel","emojiKey","hideMenu","emojiContainer","members","selectedEmoji","setSelectedEmoji","useState","React","createElement","BottomSheet","onBackdropClick","className","reactions","map","reaction","emojiUrl","getEmojiUrl","key","onClick","ImageRenderer","url","width","height","placeHolder","style","Icon","type","IconTypes","QUESTION","fillColor","IconColors","ON_BACKGROUND_3","Label","LabelTypography","BUTTON_2","color","LabelColors","PRIMARY","ONBACKGROUND_3","userIds","length","find","userId","member","filter","undefined","UserListItem","user","avatarSize","ReactionItem","_emojisMap$get","memberNicknamesMap","setEmojiKey","toggleReaction","emojisMap","store","useSendbirdStateContext","isMobile","useMediaQueryContext","messageStore","useMessageContext","stringSet","useContext","LocalizationContext","config","reactedByMe","isReactedBy","handleOnClick","longPress","useLongPress","onLongPress","shouldPreventDefault","shouldStopPropagation","TooltipWrapper","hoverTooltip","Tooltip","getEmojiTooltipString","Fragment","ReactionBadge","count","selected","circle","get","defaultComponent","AddReactionBadgeItem","onlyClick","_extends","isAdd","EMOJI_MORE","MobileEmojisBottomSheet","emojiAllList","useMemo","getEmojiListAll","emoji","_message$reactions$fi","_message$reactions$fi2","_message$reactions$fi3","isReacted","some","reactorId","ReactionButton","e","stopPropagation","dataSbId","EmojiReactions","_message$reactions$le","_message$reactions$le2","_message$reactions3","spaceFromTrigger","x","y","isByMe","addReactionRef","useRef","showEmojiList","setShowEmojiList","selectedEmojiKey","setSelectedEmojiKey","getEmojiMapAll","showAddReactionBadge","size","getClassName","ContextMenu","menuTrigger","toggleDropdown","ref","_e$stopPropagation","call","menuItems","closeDropdown","EmojiListItems","parentRef","parentContainRef","_message$reactions4","_message$reactions4$f","_message$reactions4$f2"],"mappings":"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"}

package/ui/FileMessageItemBody.js

@@ -1,13 +1,13 @@
 import React__default from 'react';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../index-a900bd78.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-c4af409f.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
 import TextButton from './TextButton.js';
-import { j as getClassName, K as getUIKitFileType, t as truncateString } from '../index-d8fdbe6f.js';
-import { C as Colors } from '../color-c1b95a91.js';
-import { u as useMediaQueryContext } from '../MediaQueryContext-8d283dc2.js';
+import { h as getClassName, L as getUIKitFileType, t as truncateString } from '../index-2d3d2283.js';
+import { C as Colors } from '../color-be032457.js';
+import { u as useMediaQueryContext } from '../MediaQueryContext-744e0eb4.js';
 import 'prop-types';
-import '../stringSet-6d89212b.js';
-import '../_rollupPluginBabelHelpers-eaf55eff.js';
+import '../stringSet-387833a3.js';
+import '../_rollupPluginBabelHelpers-8c286a7c.js';
 import '../utils/message/getOutgoingMessageState.js';
 
 function FileMessageItemBody(_ref) {

package/ui/FileViewer.js

@@ -1,17 +1,17 @@
 import React__default, { useContext } from 'react';
 import { createPortal } from 'react-dom';
-import { a as LocalizationContext } from '../LocalizationContext-ae38446a.js';
-import { M as MODAL_ROOT } from '../index-14bb6832.js';
-import { D as isSupportedFileView, E as isVideo, F as isImage } from '../index-d8fdbe6f.js';
+import { a as LocalizationContext } from '../LocalizationContext-8b7b48ec.js';
+import { M as MODAL_ROOT } from '../index-a62f231a.js';
+import { x as isSupportedFileView, y as isVideo, z as isImage } from '../index-2d3d2283.js';
 import Avatar from './Avatar.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../index-a900bd78.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-c4af409f.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
-import '../stringSet-6d89212b.js';
-import '../index-321e838f.js';
-import '../_rollupPluginBabelHelpers-eaf55eff.js';
+import '../stringSet-387833a3.js';
+import '../index-617179bd.js';
+import '../_rollupPluginBabelHelpers-8c286a7c.js';
 import '../utils/message/getOutgoingMessageState.js';
 import './ImageRenderer.js';
-import '../uuid-c94bd88b.js';
+import '../uuid-295e6b8b.js';
 import 'prop-types';
 
 const FileViewerComponent = _ref => {