Add render~~ props to the ThreadListItem comp

Author: HoonBaek

src/modules/Thread/components/ThreadList/ThreadListItem.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useRef, useEffect, useLayoutEffect, ReactNode } from 'react';
+import React, { useMemo, useState, useRef, useEffect, useLayoutEffect } from 'react';
 import format from 'date-fns/format';
 import type { FileMessage, MultipleFilesMessage } from '@sendbird/chat/message';
 
@@ -21,32 +21,28 @@ import { SendableMessageType } from '../../../../utils';
 import { User } from '@sendbird/chat';
 import { getCaseResolvedReplyType } from '../../../../lib/utils/resolvedReplyType';
 import { classnames } from '../../../../utils/utils';
-import type { MessageMenuProps } from '../../../../ui/MessageMenu';
-import type { MessageEmojiMenuProps } from '../../../../ui/MessageItemReactionMenu';
+import { MessageComponentRenderers } from '../../../../ui/MessageContent';
 
-export interface ThreadListItemProps {
+export interface ThreadListItemProps extends MessageComponentRenderers {
   className?: string;
   message: SendableMessageType;
   chainTop?: boolean;
   chainBottom?: boolean;
   hasSeparator?: boolean;
   renderCustomSeparator?: (props: { message: SendableMessageType }) => React.ReactElement;
   handleScroll?: () => void;
-  renderEmojiMenu?: (props: MessageEmojiMenuProps) => ReactNode;
-  renderMessageMenu?: (props: MessageMenuProps) => ReactNode;
 }
 
-export default function ThreadListItem({
-  className,
-  message,
-  chainTop,
-  chainBottom,
-  hasSeparator,
-  renderCustomSeparator,
-  handleScroll,
-  renderEmojiMenu,
-  renderMessageMenu,
-}: ThreadListItemProps): React.ReactElement {
+export default function ThreadListItem(props: ThreadListItemProps): React.ReactElement {
+  const {
+    className,
+    message,
+    chainTop,
+    chainBottom,
+    hasSeparator,
+    renderCustomSeparator,
+    handleScroll,
+  } = props;
   const { stores, config } = useSendbirdStateContext();
   const { isOnline, userMention, logger, groupChannel } = config;
   const userId = stores?.userStore?.user?.userId;
@@ -237,6 +233,7 @@ export default function ThreadListItem({
         ))
       }
       <ThreadListItemContent
+        {...props}
         userId={userId}
         channel={currentChannel}
         message={message}
@@ -252,8 +249,6 @@ export default function ThreadListItem({
         showFileViewer={setShowFileViewer}
         toggleReaction={toggleReaction}
         showEdit={setShowEdit}
-        renderEmojiMenu={renderEmojiMenu}
-        renderMessageMenu={renderMessageMenu}
       />
       {/* modal */}
       {showRemove && (

src/modules/Thread/components/ThreadList/ThreadListItemContent.tsx

@@ -31,13 +31,13 @@ import { useThreadContext } from '../../context/ThreadProvider';
 import { classnames, deleteNullish } from '../../../../utils/utils';
 import { MessageMenu, MessageMenuProps } from '../../../../ui/MessageMenu';
 import useElementObserver from '../../../../hooks/useElementObserver';
-import type { MessageContentRenderSubComponentProps } from '../../../../ui/MessageContent';
+import type { MessageComponentRenderers } from '../../../../ui/MessageContent';
 import MessageProfile, { MessageProfileProps } from '../../../../ui/MessageContent/MessageProfile';
 import MessageBody, { CustomSubcomponentsProps, MessageBodyProps } from '../../../../ui/MessageContent/MessageBody';
 import { MessageHeaderProps, MessageHeader } from '../../../../ui/MessageContent/MessageHeader';
 import { MobileBottomSheetProps } from '../../../../ui/MobileMenu/types';
 
-export interface ThreadListItemContentProps extends MessageContentRenderSubComponentProps {
+export interface ThreadListItemContentProps extends MessageComponentRenderers {
   className?: string;
   userId: string;
   channel: GroupChannel;

src/ui/MessageContent/index.tsx

@@ -53,7 +53,7 @@ export { MessageBody } from './MessageBody';
 export { MessageHeader } from './MessageHeader';
 export { MessageProfile } from './MessageProfile';
 
-export interface MessageContentProps extends MessageContentRenderSubComponentProps {
+export interface MessageContentProps extends MessageComponentRenderers {
   className?: string | Array<string>;
   userId: string;
   channel: Nullable<GroupChannel>;
@@ -83,7 +83,7 @@ export interface MessageContentProps extends MessageContentRenderSubComponentPro
   onBeforeDownloadFileMessage?: OnBeforeDownloadFileMessageType;
 }
 
-export interface MessageContentRenderSubComponentProps {
+export interface MessageComponentRenderers {
   renderSenderProfile?: (props: MessageProfileProps) => ReactNode;
   renderMessageBody?: (props: MessageBodyProps) => ReactNode;
   renderMessageHeader?: (props: MessageHeaderProps) => ReactNode;
@@ -337,7 +337,7 @@ export function MessageContent(props: MessageContentProps): ReactElement {
         ref={contentRef}
       >
         {
-          !isByMe && !chainTop && !useReplying && renderMessageHeader(props)
+          (!isByMe && !chainTop && !useReplying) && renderMessageHeader(props)
         }
         {/* quote message */}
         {(useReplying) ? (