@sendbird/uikit-react 3.5.0-beta.0 → 3.5.0-mobile-web-0

package/ui/DateSeparator.js

@@ -1,28 +1,26 @@
-import { a as __spreadArray } from '../tslib.es6-bcead7e6.js';
 import React__default from 'react';
-import { C as Colors, c as changeColorToClassName } from '../color-ff5f9069.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../index-44470dab.js';
+import { C as Colors, c as changeColorToClassName } from '../color-4ca8a2ea.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-e1cd2fcf.js';
 import 'prop-types';
-import '../stringSet-d555d877.js';
+import '../stringSet-d368e289.js';
 
-var DateSeparator = function (_a) {
-  var _b = _a.children,
-      children = _b === void 0 ? null : _b,
-      _c = _a.className,
-      className = _c === void 0 ? '' : _c,
-      _d = _a.separatorColor,
-      separatorColor = _d === void 0 ? Colors.ONBACKGROUND_4 : _d;
+const DateSeparator = _ref => {
+  let {
+    children = null,
+    className = '',
+    separatorColor = Colors.ONBACKGROUND_4
+  } = _ref;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: __spreadArray(__spreadArray([], Array.isArray(className) ? className : [className], true), ['sendbird-separator'], false).join(' ')
+    className: [...(Array.isArray(className) ? className : [className]), 'sendbird-separator'].join(' ')
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: ['sendbird-separator__left', "".concat(changeColorToClassName(separatorColor), "--background-color")].join(' ')
+    className: ['sendbird-separator__left', `${changeColorToClassName(separatorColor)}--background-color`].join(' ')
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-separator__text"
   }, children || /*#__PURE__*/React__default.createElement(Label, {
     type: LabelTypography.CAPTION_2,
     color: LabelColors.ONBACKGROUND_2
   }, "Date Separator")), /*#__PURE__*/React__default.createElement("div", {
-    className: ['sendbird-separator__right', "".concat(changeColorToClassName(separatorColor), "--background-color")].join(' ')
+    className: ['sendbird-separator__right', `${changeColorToClassName(separatorColor)}--background-color`].join(' ')
   }));
 };
 

package/ui/DateSeparator.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateSeparator.js","sources":["../../src/ui/DateSeparator/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\n\nimport './index.scss';\n\nimport {\n  Colors,\n  changeColorToClassName,\n} from '../../utils/color';\n\nimport Label, { LabelTypography, LabelColors } from '../Label';\n\nexport interface DateSeparatorProps {\n  children?: string | ReactElement;\n  className?: string | Array<string>;\n  separatorColor?: Colors;\n}\nconst DateSeparator = ({\n  children = null,\n  className = '',\n  separatorColor = Colors.ONBACKGROUND_4,\n}: DateSeparatorProps): ReactElement => {\n  return (\n    <div\n      className={[\n        ...(Array.isArray(className) ? className : [className]),\n        'sendbird-separator',\n      ].join(' ')}\n    >\n      <div className={['sendbird-separator__left', `${changeColorToClassName(separatorColor)}--background-color`].join(' ')} />\n      <div className=\"sendbird-separator__text\">\n        {\n          children\n          || (\n            <Label type={LabelTypography.CAPTION_2} color={LabelColors.ONBACKGROUND_2}>\n              Date Separator\n            </Label>\n          )\n        }\n      </div>\n      <div className={['sendbird-separator__right', `${changeColorToClassName(separatorColor)}--background-color`].join(' ')} />\n    </div>\n  );\n};\n\nexport default DateSeparator;\n"],"names":["DateSeparator","_a","_b","children","_c","className","_d","separatorColor","Colors","ONBACKGROUND_4","React","__spreadArray","Array","isArray","join","concat","changeColorToClassName","LabelTypography","CAPTION_2","LabelColors","ONBACKGROUND_2"],"mappings":";;;;;;;AAgBA,IAAMA,aAAa,GAAG,UAACC,EAAD,EAID;MAHnBC,EAAe,GAAAD,EAAA,CAAAE;MAAfA,QAAQ,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAA,IAAA;MACXE,EAAA,GAAAH,EAAA,CAAAI;MAAAA,SAAS,GAAAD,EAAA,KAAA,KAAA,CAAA,GAAG,EAAH,GAAKA;MACdE;MAAAC,cAAc,mBAAGC,MAAM,CAACC,iBAAcH;EAEtC,oBACEI,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AACE,IAAA,SAAS,EAAEC,aAAA,CAAAA,aAAA,CAAA,EAAA,EACLC,KAAK,CAACC,OAAN,CAAcR,SAAd,IAA2BA,SAA3B,GAAuC,CAACA,SAAD,CADlC,EAC8C,IAD9C,CAAA,EAC8C,CACvD,oBADuD,CAD9C,EAGT,KAHS,CAAA,CAGTS,IAHS,CAGJ,GAHI,CAAA;GAKX,eAAAJ,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,IAAA,SAAS,EAAE,CAAC,0BAAD,EAA6B,EAAA,CAAGK,MAAH,CAAGC,sBAAsB,CAACT,cAAD,CAAzB,sBAAA,CAA7B,CAA4FO,CAAAA,IAA5F,CAAiG,GAAjG,CAAA;AAAhB,GAAA,CANF,eAOEJ,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,IAAA,SAAS,EAAC,0BAAA;GAEXP,EAAAA,QAAQ,iBAENO,cAAA,CAAA,aAAA,CAAC,KAAD,EAAA;IAAO,IAAI,EAAEO,eAAe,CAACC,SAA7B;IAAwC,KAAK,EAAEC,WAAW,CAACC,cAAAA;AAA3D,GAAA,EAAA,gBAAA,CAJN,CAPF,eAiBEV,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,IAAA,SAAS,EAAE,CAAC,2BAAD,EAA8B,EAAA,CAAGK,MAAH,CAAGC,sBAAsB,CAACT,cAAD,CAAzB,sBAAA,CAA9B,CAA6FO,CAAAA,IAA7F,CAAkG,GAAlG,CAAA;AAAhB,GAAA,CAjBF,CADF,CAAA;AAqBD;;;;"}
+{"version":3,"file":"DateSeparator.js","sources":["../../src/ui/DateSeparator/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\n\nimport './index.scss';\n\nimport {\n  Colors,\n  changeColorToClassName,\n} from '../../utils/color';\n\nimport Label, { LabelTypography, LabelColors } from '../Label';\n\nexport interface DateSeparatorProps {\n  children?: string | ReactElement;\n  className?: string | Array<string>;\n  separatorColor?: Colors;\n}\nconst DateSeparator = ({\n  children = null,\n  className = '',\n  separatorColor = Colors.ONBACKGROUND_4,\n}: DateSeparatorProps): ReactElement => {\n  return (\n    <div\n      className={[\n        ...(Array.isArray(className) ? className : [className]),\n        'sendbird-separator',\n      ].join(' ')}\n    >\n      <div className={['sendbird-separator__left', `${changeColorToClassName(separatorColor)}--background-color`].join(' ')} />\n      <div className=\"sendbird-separator__text\">\n        {\n          children\n          || (\n            <Label type={LabelTypography.CAPTION_2} color={LabelColors.ONBACKGROUND_2}>\n              Date Separator\n            </Label>\n          )\n        }\n      </div>\n      <div className={['sendbird-separator__right', `${changeColorToClassName(separatorColor)}--background-color`].join(' ')} />\n    </div>\n  );\n};\n\nexport default DateSeparator;\n"],"names":["DateSeparator","_ref","children","className","separatorColor","Colors","ONBACKGROUND_4","React","createElement","Array","isArray","join","changeColorToClassName","Label","type","LabelTypography","CAPTION_2","color","LabelColors","ONBACKGROUND_2"],"mappings":";;;;;;AAgBMA,MAAAA,aAAa,GAAGC,IAAA,IAIkB;EAAA,IAJjB;AACrBC,IAAAA,QAAQ,GAAG,IAAI;AACfC,IAAAA,SAAS,GAAG,EAAE;IACdC,cAAc,GAAGC,MAAM,CAACC,cAAAA;AACN,GAAC,GAAAL,IAAA,CAAA;EACnB,oBACEM,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IACEL,SAAS,EAAE,CACT,IAAIM,KAAK,CAACC,OAAO,CAACP,SAAS,CAAC,GAAGA,SAAS,GAAG,CAACA,SAAS,CAAC,CAAC,EACvD,oBAAoB,CACrB,CAACQ,IAAI,CAAC,GAAG,CAAA;GAEVJ,eAAAA,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKL,IAAAA,SAAS,EAAE,CAAC,0BAA0B,EAAG,GAAES,sBAAsB,CAACR,cAAc,CAAE,CAAmB,kBAAA,CAAA,CAAC,CAACO,IAAI,CAAC,GAAG,CAAA;GAAK,CAAA,eACzHJ,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKL,IAAAA,SAAS,EAAC,0BAAA;AAA0B,GAAA,EAErCD,QAAQ,iBAENK,cAAA,CAAAC,aAAA,CAACK,KAAK,EAAA;IAACC,IAAI,EAAEC,eAAe,CAACC,SAAU;IAACC,KAAK,EAAEC,WAAW,CAACC,cAAAA;AAAe,GAAA,EAAC,gBAE3E,CACD,CAEC,eACNZ,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKL,IAAAA,SAAS,EAAE,CAAC,2BAA2B,EAAG,GAAES,sBAAsB,CAACR,cAAc,CAAE,CAAmB,kBAAA,CAAA,CAAC,CAACO,IAAI,CAAC,GAAG,CAAA;AAAE,GAAA,CAAG,CACtH,CAAA;AAEV;;;;"}

package/ui/EmojiReactions.js

@@ -1,132 +1,322 @@
-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 { G as getEmojiMapAll, h as getClassName, H as isReactedBy, I as getEmojiTooltipString, x as getEmojiListAll } from '../index-5f08f486.js';
-import { a as LocalizationContext } from '../LocalizationContext-4df0cc32.js';
-import '../tslib.es6-bcead7e6.js';
-import '../index-44470dab.js';
+import { H as getEmojiUrl, I as isReactedBy, J as getEmojiTooltipString, G as getEmojiListAll, K as getEmojiMapAll, j as getClassName } from '../index-fd51c7d1.js';
+import BottomSheet from './BottomSheet.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-e1cd2fcf.js';
+import UserListItem from './UserListItem.js';
+import Tooltip from './Tooltip.js';
+import TooltipWrapper from './TooltipWrapper.js';
+import { u as useMediaQueryContext } from '../MediaQueryContext-0e0b3a1b.js';
+import { u as useLongPress } from '../useLongPress-685c7391.js';
+import { a as LocalizationContext } from '../LocalizationContext-1839d2db.js';
+import useSendbirdStateContext from '../useSendbirdStateContext.js';
+import { useMessageContext } from '../Message/context.js';
+import { b as _extends } from '../_rollupPluginBabelHelpers-ce69e916.js';
+import '../utils-256f157f.js';
 import 'prop-types';
-import '../stringSet-d555d877.js';
 import 'react-dom';
 import './SortByRow.js';
-import '../uuid-286ed926.js';
+import '../uuid-720c99c0.js';
 import '../utils/message/getOutgoingMessageState.js';
-import '../index-07e060cd.js';
-
-var EmojiReactions = function (_a) {
-  var _b, _c;
-
-  var className = _a.className,
-      userId = _a.userId,
-      message = _a.message,
-      emojiContainer = _a.emojiContainer,
-      memberNicknamesMap = _a.memberNicknamesMap,
-      _d = _a.spaceFromTrigger,
-      spaceFromTrigger = _d === void 0 ? {
-    x: 0,
-    y: 0
-  } : _d,
-      _e = _a.isByMe,
-      isByMe = _e === void 0 ? false : _e,
-      toggleReaction = _a.toggleReaction;
-  var stringSet = useContext(LocalizationContext).stringSet;
-  var emojisMap = getEmojiMapAll(emojiContainer);
-  var addReactionRef = useRef(null);
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: getClassName([className, 'sendbird-emoji-reactions', isByMe ? 'outgoing' : 'incoming'])
-  }, ((_b = message === null || message === void 0 ? void 0 : message.reactions) === null || _b === void 0 ? void 0 : _b.length) > 0 && message.reactions.map(function (reaction) {
-    var _a, _b;
+import '../stringSet-d368e289.js';
+import '../index-3165e396.js';
+import '../UserProfileContext-7e645551.js';
+import './Avatar.js';
+import './MutedAvatarOverlay.js';
+import './Checkbox.js';
+import './UserProfile.js';
+import '../sendbirdSelectors.js';
+import '../topics-f9628f1f.js';
+import './Button.js';
+import '../index-d9c12cf4.js';
+import '../withSendbird.js';
 
-    var reactedByMe = isReactedBy(userId, reaction);
-    return /*#__PURE__*/React__default.createElement(TooltipWrapper, {
-      className: "sendbird-emoji-reactions__reaction-badge",
-      key: reaction === null || reaction === void 0 ? void 0 : reaction.key,
-      hoverTooltip: ((_a = reaction === null || reaction === void 0 ? void 0 : reaction.userIds) === null || _a === void 0 ? void 0 : _a.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: function (e) {
-        var _a;
-
-        toggleReaction(message, reaction.key, reactedByMe);
-        (_a = e === null || e === void 0 ? void 0 : e.stopPropagation) === null || _a === void 0 ? void 0 : _a.call(e);
+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, {
-      circle: true,
-      url: ((_b = emojisMap.get(reaction === null || reaction === void 0 ? void 0 : reaction.key)) === null || _b === void 0 ? void 0 : _b.url) || '',
+      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",
-      defaultComponent: /*#__PURE__*/React__default.createElement(Icon, {
-        width: "20px",
-        height: "20px",
-        type: IconTypes.QUESTION
-      })
-    })));
-  }), ((_c = message === null || message === void 0 ? void 0 : message.reactions) === null || _c === void 0 ? void 0 : _c.length) < emojisMap.size && /*#__PURE__*/React__default.createElement(ContextMenu, {
-    menuTrigger: function (toggleDropdown) {
-      return /*#__PURE__*/React__default.createElement(ReactionBadge, {
-        className: "sendbird-emoji-reactions__add-reaction-badge",
-        ref: addReactionRef,
-        isAdd: true,
-        onClick: function (e) {
-          var _a;
+      type: IconTypes.QUESTION
+    })
+  }))));
+}
 
-          toggleDropdown();
-          (_a = e === null || e === void 0 ? void 0 : e.stopPropagation) === null || _a === void 0 ? void 0 : _a.call(e);
-        }
+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();
+      }
+    }, /*#__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.EMOJI_MORE,
+        type: IconTypes.QUESTION,
         fillColor: IconColors.ON_BACKGROUND_3,
-        width: "20px",
-        height: "20px"
-      }));
-    },
-    menuItems: function (closeDropdown) {
-      return /*#__PURE__*/React__default.createElement(EmojiListItems, {
-        parentRef: addReactionRef,
-        parentContainRef: addReactionRef,
-        closeDropdown: closeDropdown,
-        spacefromTrigger: spaceFromTrigger
-      }, getEmojiListAll(emojiContainer).map(function (emoji) {
-        var _a, _b, _c;
+        width: "28px",
+        height: "28px"
+      }))
+    }));
+  })));
+};
 
-        var isReacted = (_c = (_b = (_a = message === null || message === void 0 ? void 0 : message.reactions) === null || _a === void 0 ? void 0 : _a.find(function (reaction) {
-          return reaction.key === emoji.key;
-        })) === null || _b === void 0 ? void 0 : _b.userIds) === null || _c === void 0 ? void 0 : _c.some(function (reactorId) {
-          return reactorId === userId;
-        });
-        return /*#__PURE__*/React__default.createElement(ReactionButton, {
-          key: emoji.key,
-          width: "36px",
-          height: "36px",
-          selected: isReacted,
-          onClick: function (e) {
-            closeDropdown();
-            toggleReaction(message, emoji.key, isReacted);
-            e === null || e === void 0 ? void 0 : e.stopPropagation();
-          }
-        }, /*#__PURE__*/React__default.createElement(ImageRenderer, {
-          url: (emoji === null || emoji === void 0 ? void 0 : emoji.url) || '',
+const EmojiReactions = _ref => {
+  var _message$reactions$le, _message$reactions, _message$reactions$le2, _message$reactions2, _message$reactions3;
+  let {
+    className = '',
+    userId,
+    message,
+    channel,
+    emojiContainer,
+    memberNicknamesMap,
+    spaceFromTrigger = {
+      x: 0,
+      y: 0
+    },
+    isByMe = false,
+    toggleReaction
+  } = _ref;
+  const {
+    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$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,
+      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$stopPropagation;
+        toggleDropdown();
+        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,
+      fillColor: IconColors.ON_BACKGROUND_3,
+      width: "20px",
+      height: "20px"
+    })),
+    menuItems: closeDropdown => /*#__PURE__*/React__default.createElement(EmojiListItems, {
+      parentRef: addReactionRef,
+      parentContainRef: addReactionRef,
+      closeDropdown: closeDropdown,
+      spaceFromTrigger: spaceFromTrigger
+    }, getEmojiListAll(emojiContainer).map(emoji => {
+      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",
+        height: "36px",
+        selected: isReacted,
+        onClick: e => {
+          closeDropdown();
+          toggleReaction === null || toggleReaction === void 0 ? void 0 : toggleReaction(message, emoji.key, isReacted);
+          e === null || e === void 0 ? void 0 : e.stopPropagation();
+        }
+      }, /*#__PURE__*/React__default.createElement(ImageRenderer, {
+        url: (emoji === null || emoji === void 0 ? void 0 : emoji.url) || '',
+        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",
-          placeHolder: function (style) {
-            return /*#__PURE__*/React__default.createElement("div", {
-              style: style
-            }, /*#__PURE__*/React__default.createElement(Icon, {
-              type: IconTypes.QUESTION,
-              fillColor: IconColors.ON_BACKGROUND_3,
-              width: "28px",
-              height: "28px"
-            }));
-          }
-        }));
+          height: "28px"
+        }))
       }));
+    }))
+  }), 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","_a","className","userId","message","emojiContainer","memberNicknamesMap","_d","spaceFromTrigger","x","y","_e","isByMe","toggleReaction","stringSet","useContext","LocalizationContext","emojisMap","getEmojiMapAll","addReactionRef","useRef","React","getClassName","_b","reactions","length","map","reaction","reactedByMe","isReactedBy","key","userIds","getEmojiTooltipString","e","stopPropagation","get","url","IconTypes","QUESTION","_c","size","toggleDropdown","EMOJI_MORE","IconColors","ON_BACKGROUND_3","closeDropdown","getEmojiListAll","emoji","isReacted","find","some","reactorId","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            >\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                  >\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","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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"}