feat: Support custom rendering message menus and reactions (#854)

[CLNP-1217](https://sendbird.atlassian.net/browse/CLNP-1217)

### ChangeLog
* Add props to the MessageContent component
  * `renderMessageMenu`, `renderEmojiMenu`, and `renderEmojiReactions`

### How to use these?
```tsx
<Channel
  renderMessageContent={(props) => {
    return <MessageContent
      {...props}
      renderMessageMenu={(props) => {
        return <MessageMenu {...props> />
      }}
      renderEmojiMenu={(props) => {
        return <MessageEmojiMenu {...props> />
      }}
      renderEmojiReactions={(props) => {
        return <EmojiReactions {...props> />
      }}
    />
  }}
/>
```

Author: HoonBaek

src/ui/EmojiReactions/index.tsx

@@ -19,7 +19,7 @@ import { AddReactionBadgeItem } from './AddReactionBadgeItem';
 import { MobileEmojisBottomSheet } from '../MobileMenu/MobileEmojisBottomSheet';
 import { User } from '@sendbird/chat';
 
-interface Props {
+export interface EmojiReactionsProps {
   className?: string | Array<string>;
   userId: string;
   message: SendableMessageType;
@@ -43,7 +43,7 @@ const EmojiReactions = ({
   isByMe = false,
   toggleReaction,
   onPressUserProfile,
-}: Props): ReactElement => {
+}: EmojiReactionsProps): ReactElement => {
   const { isMobile } = useMediaQueryContext();
   const addReactionRef = useRef(null);
   const [showEmojiList, setShowEmojiList] = useState(false);

src/ui/MessageContent/MessageProfile/index.tsx

@@ -1,128 +1,85 @@
-import React, { Dispatch, ReactElement, SetStateAction, useContext, useRef } from 'react';
+import React, {
+  ReactElement,
+  useContext,
+  useRef,
+} from 'react';
 import '../index.scss';
-import { getClassName, isSendableMessage, SendableMessageType } from '../../../utils';
+import { isSendableMessage } from '../../../utils';
 import ContextMenu, { MenuItems } from '../../ContextMenu';
 import Avatar from '../../Avatar';
 import UserProfile from '../../UserProfile';
-import MessageItemMenu from '../../MessageItemMenu';
-import { ThreadReplySelectType } from '../../../modules/Channel/context/const';
-import MessageItemReactionMenu from '../../MessageItemReactionMenu';
 import { MessageContentProps } from '../index';
 import { UserProfileContext } from '../../../lib/UserProfileContext';
 
 export interface MessageProfileProps extends MessageContentProps {
-  setSupposedHover?: Dispatch<SetStateAction<boolean>>;
-  isMobile?: boolean;
-  isReactionEnabledInChannel?: boolean;
-  isReactionEnabledClassName?: string;
   isByMe?: boolean;
-  isByMeClassName?: string;
-  useReplyingClassName?: string;
   displayThreadReplies?: boolean;
-  supposedHoverClassName?: string;
 }
 
-export default function MessageProfile(props: MessageProfileProps): ReactElement {
-  const avatarRef = useRef(null);
-
+export default function MessageProfile(
+  props: MessageProfileProps,
+): ReactElement {
   const {
     message,
     channel,
     userId,
-    disabled = false,
     chainBottom = false,
-    replyType,
-    threadReplySelectType,
-    emojiContainer,
-    scrollToMessage,
-    showEdit,
-    showRemove,
-    resendMessage,
-    toggleReaction,
-    setQuoteMessage,
-    onReplyInThread,
-
-    setSupposedHover,
-    isMobile,
-    isReactionEnabledInChannel,
-    isReactionEnabledClassName,
     isByMe,
-    isByMeClassName,
-    useReplyingClassName,
     displayThreadReplies,
-    supposedHoverClassName,
   } = props;
+  const avatarRef = useRef(null);
 
   const { disableUserProfile, renderUserProfile } = useContext(UserProfileContext);
 
+  if (isByMe || chainBottom || !isSendableMessage(message)) {
+    return null;
+  }
+
   return (
-    <div className={getClassName(['sendbird-message-content__left', isReactionEnabledClassName, isByMeClassName, useReplyingClassName])}>
-      {(!isByMe && !chainBottom && isSendableMessage(message)) && (
-        /** user profile */
-        <ContextMenu
-          menuTrigger={(toggleDropdown: () => void): ReactElement => (
-            <Avatar
-              className={`sendbird-message-content__left__avatar ${displayThreadReplies ? 'use-thread-replies' : ''}`}// @ts-ignore
-              src={channel?.members?.find((member) => member?.userId === message.sender.userId)?.profileUrl || message.sender.profileUrl || ''}
-              // TODO: Divide getting profileUrl logic to utils
-              ref={avatarRef}
-              width="28px"
-              height="28px"
-              onClick={(): void => { if (!disableUserProfile) toggleDropdown(); }}
-            />
-          )}
-          menuItems={(closeDropdown) => (
-            <MenuItems
-              /**
-              * parentRef: For catching location(x, y) of MenuItems
-              * parentContainRef: For toggling more options(menus & reactions)
-              */
-              parentRef={avatarRef}
-              parentContainRef={avatarRef}
-              closeDropdown={closeDropdown}
-              style={{ paddingTop: '0px', paddingBottom: '0px' }}
-            >
-              {renderUserProfile
-                ? renderUserProfile({ user: message.sender, close: closeDropdown, currentUserId: userId })
-                : (<UserProfile user={message.sender} onSuccess={closeDropdown} />)
-              }
-            </MenuItems>
-          )}
+    <ContextMenu
+      menuTrigger={(toggleDropdown: () => void): ReactElement => (
+        <Avatar
+          className={`sendbird-message-content__left__avatar ${
+            displayThreadReplies ? 'use-thread-replies' : ''
+          }`} // @ts-ignore
+          src={
+            channel?.members?.find(
+              (member) => member?.userId === message.sender.userId,
+            )?.profileUrl
+            || message.sender.profileUrl
+            || ''
+          }
+          // TODO: Divide getting profileUrl logic to utils
+          ref={avatarRef}
+          width="28px"
+          height="28px"
+          onClick={(): void => {
+            if (!disableUserProfile) toggleDropdown();
+          }}
         />
       )}
-      {/* outgoing menu */}
-      {isByMe && !isMobile && (
-        <div className={getClassName(['sendbird-message-content-menu', isReactionEnabledClassName, supposedHoverClassName, isByMeClassName])}>
-          <MessageItemMenu
-            channel={channel}
-            message={message as SendableMessageType}
-            isByMe={isByMe}
-            replyType={replyType}
-            disabled={disabled}
-            showEdit={showEdit}
-            showRemove={showRemove}
-            resendMessage={resendMessage}
-            setQuoteMessage={setQuoteMessage}
-            setSupposedHover={setSupposedHover}
-            onReplyInThread={({ message }) => {
-              if (threadReplySelectType === ThreadReplySelectType.THREAD) {
-                onReplyInThread({ message });
-              } else if (threadReplySelectType === ThreadReplySelectType.PARENT) {
-                scrollToMessage(message.parentMessage?.createdAt, message.parentMessageId);
-              }
-            }}
-          />
-          {isReactionEnabledInChannel && (
-            <MessageItemReactionMenu
-              message={message as SendableMessageType}
-              userId={userId}
-              emojiContainer={emojiContainer}
-              toggleReaction={toggleReaction}
-              setSupposedHover={setSupposedHover}
-            />
+      menuItems={(closeDropdown) => (
+        <MenuItems
+          /**
+           * parentRef: For catching location(x, y) of MenuItems
+           * parentContainRef: For toggling more options(menus & reactions)
+           */
+          parentRef={avatarRef}
+          parentContainRef={avatarRef}
+          closeDropdown={closeDropdown}
+          style={{ paddingTop: '0px', paddingBottom: '0px' }}
+        >
+          {renderUserProfile ? (
+            renderUserProfile({
+              user: message.sender,
+              close: closeDropdown,
+              currentUserId: userId,
+            })
+          ) : (
+            <UserProfile user={message.sender} onSuccess={closeDropdown} />
           )}
-        </div>
+        </MenuItems>
       )}
-    </div>
+    />
   );
 }

src/ui/MessageContent/index.tsx

@@ -7,10 +7,10 @@ import format from 'date-fns/format';
 import './index.scss';
 
 import MessageStatus from '../MessageStatus';
-import MessageItemMenu from '../MessageItemMenu';
-import MessageItemReactionMenu from '../MessageItemReactionMenu';
+import { MessageMenu, MessageMenuProps } from '../MessageItemMenu';
+import { MessageEmojiMenu, MessageEmojiMenuProps } from '../MessageItemReactionMenu';
 import Label, { LabelTypography, LabelColors } from '../Label';
-import EmojiReactions from '../EmojiReactions';
+import EmojiReactions, { EmojiReactionsProps } from '../EmojiReactions';
 
 import ClientAdminMessage from '../AdminMessage';
 import QuoteMessage from '../QuoteMessage';
@@ -69,6 +69,9 @@ export interface MessageContentProps {
   renderSenderProfile?: (props: MessageProfileProps) => ReactNode;
   renderMessageBody?: (props: MessageBodyProps) => ReactNode;
   renderMessageHeader?: (props: MessageHeaderProps) => ReactNode;
+  renderMessageMenu?: (props: MessageMenuProps) => ReactNode;
+  renderEmojiMenu?: (props: MessageEmojiMenuProps) => ReactNode;
+  renderEmojiReactions?: (props: EmojiReactionsProps) => ReactNode;
 }
 
 export default function MessageContent(props: MessageContentProps): ReactElement {
@@ -109,6 +112,15 @@ export default function MessageContent(props: MessageContentProps): ReactElement
     renderMessageHeader = (props: MessageHeaderProps) => (
       <MessageHeader {...props}/>
     ),
+    renderMessageMenu = (props: MessageMenuProps) => (
+      <MessageMenu {...props} />
+    ),
+    renderEmojiMenu = (props: MessageEmojiMenuProps) => (
+      <MessageEmojiMenu {...props} />
+    ),
+    renderEmojiReactions = (props: EmojiReactionsProps) => (
+      <EmojiReactions {...props} />
+    ),
   } = props;
 
   const { dateLocale } = useLocalization();
@@ -165,20 +177,48 @@ export default function MessageContent(props: MessageContentProps): ReactElement
       onMouseLeave={() => setMouseHover(false)}
     >
       {/* left */}
-      {
-        renderSenderProfile({
-          ...props,
-          setSupposedHover,
-          isMobile,
-          isReactionEnabledInChannel,
-          isReactionEnabledClassName,
-          isByMe,
-          isByMeClassName,
-          useReplyingClassName,
-          displayThreadReplies,
-          supposedHoverClassName,
-        })
-      }
+      <div className={getClassName(['sendbird-message-content__left', isReactionEnabledClassName, isByMeClassName, useReplyingClassName])}>
+        {
+          renderSenderProfile({
+            ...props,
+            isByMe,
+            displayThreadReplies,
+          })
+        }
+        {/* outgoing menu */}
+        {isByMe && !isMobile && (
+          <div className={getClassName(['sendbird-message-content-menu', isReactionEnabledClassName, supposedHoverClassName, isByMeClassName])}>
+            {renderMessageMenu({
+              channel: channel,
+              message: message as SendableMessageType,
+              isByMe: isByMe,
+              replyType: replyType,
+              disabled: disabled,
+              showEdit: showEdit,
+              showRemove: showRemove,
+              resendMessage: resendMessage,
+              setQuoteMessage: setQuoteMessage,
+              setSupposedHover: setSupposedHover,
+              onReplyInThread: ({ message }) => {
+                if (threadReplySelectType === ThreadReplySelectType.THREAD) {
+                  onReplyInThread({ message });
+                } else if (threadReplySelectType === ThreadReplySelectType.PARENT) {
+                  scrollToMessage(message.parentMessage?.createdAt, message.parentMessageId);
+                }
+              },
+            })}
+            {isReactionEnabledInChannel && (
+              renderEmojiMenu({
+                message: message as SendableMessageType,
+                userId: userId,
+                emojiContainer: emojiContainer,
+                toggleReaction: toggleReaction,
+                setSupposedHover: setSupposedHover,
+              })
+            )}
+          </div>
+        )}
+      </div>
       {/* middle */}
       <div
         className={'sendbird-message-content__middle'}
@@ -247,16 +287,18 @@ export default function MessageContent(props: MessageContentProps): ReactElement
                   ? '' : 'primary',
               mouseHover ? 'mouse-hover' : '',
             ])}>
-              <EmojiReactions
-                userId={userId}
-                message={message as SendableMessageType}
-                channel={channel}
-                isByMe={isByMe}
-                emojiContainer={emojiContainer}
-                memberNicknamesMap={nicknamesMap}
-                toggleReaction={toggleReaction}
-                onPressUserProfile={onPressUserProfileHandler}
-              />
+              {
+                renderEmojiReactions({
+                  userId,
+                  message: message as SendableMessageType,
+                  channel,
+                  isByMe,
+                  emojiContainer,
+                  memberNicknamesMap: nicknamesMap,
+                  toggleReaction,
+                  onPressUserProfile: onPressUserProfileHandler,
+                })
+              }
             </div>
           )}
           {/* message timestamp when sent by others */}
@@ -283,38 +325,37 @@ export default function MessageContent(props: MessageContentProps): ReactElement
       </div>
       {/* right */}
       <div className={getClassName(['sendbird-message-content__right', chainTopClassName, isReactionEnabledClassName, useReplyingClassName])}>
-        {/* incoming menu */}
         {!isByMe && !isMobile && (
           <div className={getClassName(['sendbird-message-content-menu', chainTopClassName, supposedHoverClassName, isByMeClassName])}>
             {isReactionEnabledInChannel && (
-              <MessageItemReactionMenu
-                className="sendbird-message-content-menu__reaction-menu"
-                message={message as SendableMessageType}
-                userId={userId}
-                emojiContainer={emojiContainer}
-                toggleReaction={toggleReaction}
-                setSupposedHover={setSupposedHover}
-              />
+              renderEmojiMenu({
+                className: 'sendbird-message-content-menu__reaction-menu',
+                message: message as SendableMessageType,
+                userId: userId,
+                emojiContainer: emojiContainer,
+                toggleReaction: toggleReaction,
+                setSupposedHover: setSupposedHover,
+              })
             )}
-            <MessageItemMenu
-              className="sendbird-message-content-menu__normal-menu"
-              channel={channel}
-              message={message as SendableMessageType}
-              isByMe={isByMe}
-              replyType={replyType}
-              disabled={disabled}
-              showRemove={showRemove}
-              resendMessage={resendMessage}
-              setQuoteMessage={setQuoteMessage}
-              setSupposedHover={setSupposedHover}
-              onReplyInThread={({ message }) => {
+            {renderMessageMenu({
+              className: 'sendbird-message-content-menu__normal-menu',
+              channel,
+              message: message as SendableMessageType,
+              isByMe,
+              replyType,
+              disabled,
+              showRemove,
+              resendMessage,
+              setQuoteMessage,
+              setSupposedHover,
+              onReplyInThread: ({ message }) => {
                 if (threadReplySelectType === ThreadReplySelectType.THREAD) {
                   onReplyInThread({ message });
                 } else if (threadReplySelectType === ThreadReplySelectType.PARENT) {
                   scrollToMessage(message.parentMessage?.createdAt, message.parentMessageId);
                 }
-              }}
-            />
+              },
+            })}
           </div>
         )}
       </div>