Adjust MessageActions render conditions

Author: arnautov-anton

src/components/Message/MessageOptions.tsx

@@ -5,14 +5,14 @@ import {
   ReactionIcon as DefaultReactionIcon,
   ThreadIcon as DefaultThreadIcon,
 } from './icons';
-import { MESSAGE_ACTIONS, showMessageActionsBox } from './utils';
+import { MESSAGE_ACTIONS, shouldRenderMessageActions } from './utils';
 
 import { MessageActions } from '../MessageActions';
 
 import { MessageContextValue, useMessageContext } from '../../context/MessageContext';
 
 import type { DefaultStreamChatGenerics, IconProps } from '../../types/types';
-import { useTranslationContext } from '../../context';
+import { useComponentContext, useTranslationContext } from '../../context';
 
 export type MessageOptionsProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
@@ -57,13 +57,20 @@ const UnMemoizedMessageOptions = <
     threadList,
   } = useMessageContext<StreamChatGenerics>('MessageOptions');
 
+  const { CustomMessageActionsList } = useComponentContext('MessageOptions');
+
   const { t } = useTranslationContext('MessageOptions');
 
   const handleOpenThread = propHandleOpenThread || contextHandleOpenThread;
 
   const messageActions = getMessageActions();
-  const showActionsBox =
-    showMessageActionsBox(messageActions, threadList) || !!customMessageActions;
+  const renderMessageActions = shouldRenderMessageActions({
+    // @ts-ignore
+    customMessageActions,
+    CustomMessageActionsList,
+    inThread: threadList,
+    messageActions,
+  });
 
   const shouldShowReactions = messageActions.indexOf(MESSAGE_ACTIONS.react) > -1;
   const shouldShowReplies =
@@ -85,7 +92,7 @@ const UnMemoizedMessageOptions = <
 
   return (
     <div className={rootClassName} data-testid='message-options'>
-      {showActionsBox && (
+      {renderMessageActions && (
         <MessageActions ActionsIcon={ActionsIcon} messageWrapperRef={messageWrapperRef} />
       )}
       {shouldShowReplies && (

src/components/Message/utils.tsx

@@ -5,7 +5,12 @@ import type { TFunction } from 'i18next';
 import type { MessageResponse, Mute, StreamChat, UserResponse } from 'stream-chat';
 import type { PinPermissions } from './hooks';
 import type { MessageProps } from './types';
-import type { MessageContextValue, StreamMessage } from '../../context';
+import type {
+  ComponentContextValue,
+  CustomMessageActions,
+  MessageContextValue,
+  StreamMessage,
+} from '../../context';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
 /**
@@ -206,26 +211,53 @@ export const ACTIONS_NOT_WORKING_IN_THREAD = [
   MESSAGE_ACTIONS.markUnread,
 ];
 
+/**
+ * @deprecated use `shouldRenderMessageActions` instead
+ */
 export const showMessageActionsBox = (
   actions: MessageActionsArray,
   inThread?: boolean | undefined,
-) => {
-  if (actions.length === 0) {
-    return false;
-  }
+) => shouldRenderMessageActions({ inThread, messageActions: actions });
+
+export const shouldRenderMessageActions = ({
+  customMessageActions,
+  CustomMessageActionsList,
+  inThread,
+  messageActions,
+}: {
+  messageActions: MessageActionsArray;
+  customMessageActions?: CustomMessageActions;
+  CustomMessageActionsList?: ComponentContextValue['CustomMessageActionsList'];
+  inThread?: boolean;
+}) => {
+  if (
+    typeof CustomMessageActionsList !== 'undefined' ||
+    typeof customMessageActions !== 'undefined'
+  )
+    return true;
+
+  if (!messageActions.length) return false;
 
   if (
     inThread &&
-    actions.filter((action) => !ACTIONS_NOT_WORKING_IN_THREAD.includes(action)).length === 0
+    messageActions.filter((action) => !ACTIONS_NOT_WORKING_IN_THREAD.includes(action)).length === 0
   ) {
     return false;
   }
 
-  if (actions.length === 1 && (actions.includes('react') || actions.includes('reply'))) {
+  if (
+    messageActions.length === 1 &&
+    (messageActions.includes(MESSAGE_ACTIONS.react) ||
+      messageActions.includes(MESSAGE_ACTIONS.reply))
+  ) {
     return false;
   }
 
-  if (actions.length === 2 && actions.includes('react') && actions.includes('reply')) {
+  if (
+    messageActions.length === 2 &&
+    messageActions.includes(MESSAGE_ACTIONS.react) &&
+    messageActions.includes(MESSAGE_ACTIONS.reply)
+  ) {
     return false;
   }
 

src/components/MessageActions/MessageActions.tsx

@@ -6,6 +6,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
+import clsx from 'clsx';
 
 import { MessageActionsBox } from './MessageActionsBox';
 
@@ -65,7 +66,6 @@ export const MessageActions = <
 
   const { mutes } = useChatContext<StreamChatGenerics>('MessageActions');
   const {
-    customMessageActions,
     getMessageActions: contextGetMessageActions,
     handleDelete: contextHandleDelete,
     handleFlag: contextHandleFlag,
@@ -98,7 +98,6 @@ export const MessageActions = <
     }
     setActionsBoxOpen(false);
   }, []);
-  const messageActions = getMessageActions();
   const messageDeletedAt = !!message?.deleted_at;
 
   useEffect(() => {
@@ -133,8 +132,6 @@ export const MessageActions = <
     referenceElement: actionsBoxButtonRef.current,
   });
 
-  if (!messageActions.length && !customMessageActions) return null;
-
   return (
     <MessageActionsWrapper
       customWrapperClass={customWrapperClass}
@@ -178,10 +175,11 @@ export type MessageActionsWrapperProps = {
 const MessageActionsWrapper = (props: PropsWithChildren<MessageActionsWrapperProps>) => {
   const { children, customWrapperClass, inline, setActionsBoxOpen } = props;
 
-  const defaultWrapperClass = `
-  str-chat__message-simple__actions__action
-  str-chat__message-simple__actions__action--options
-  str-chat__message-actions-container`;
+  const defaultWrapperClass = clsx(
+    'str-chat__message-simple__actions__action',
+    'str-chat__message-simple__actions__action--options',
+    'str-chat__message-actions-container',
+  );
 
   const wrapperClass = customWrapperClass || defaultWrapperClass;