stream-chat-react-native-core 8.13.7 → 9.0.0-beta.1

package/src/components/Message/MessageSimple/utils/renderText.tsx

@@ -31,8 +31,10 @@ import type { LocalMessage, UserResponse } from 'stream-chat';
 import { generateMarkdownText } from './generateMarkdownText';
 
 import type { MessageContextValue } from '../../../../contexts/messageContext/MessageContext';
-import type { Colors, MarkdownStyle } from '../../../../contexts/themeContext/utils/theme';
+import type { MarkdownStyle } from '../../../../contexts/themeContext/utils/theme';
 
+import { primitives } from '../../../../theme';
+import { semantics } from '../../../../theme/generated/dark/StreamTokens';
 import { escapeRegExp } from '../../../../utils/utils';
 
 type ReactNodeOutput = NodeOutput<React.ReactNode>;
@@ -94,16 +96,19 @@ const defaultMarkdownStyles: MarkdownStyle = {
   codeBlock: {
     fontFamily: Platform.OS === 'ios' ? 'Courier' : 'Monospace',
     fontWeight: '500',
-    marginVertical: 8,
+    marginVertical: primitives.spacingXs,
+    fontSize: primitives.typographyFontSizeMd,
+    lineHeight: primitives.typographyLineHeightNormal,
   },
   inlineCode: {
-    fontSize: 13,
-    padding: 3,
-    paddingHorizontal: 5,
+    padding: primitives.spacingXxs,
+    paddingHorizontal: primitives.spacingXxs,
+    fontSize: primitives.typographyFontSizeMd,
+    lineHeight: primitives.typographyLineHeightNormal,
   },
   list: {
-    marginBottom: 8,
-    marginTop: 8,
+    marginBottom: primitives.spacingXs,
+    marginTop: primitives.spacingXs,
   },
   listItemNumber: {
     fontWeight: 'bold',
@@ -116,21 +121,25 @@ const defaultMarkdownStyles: MarkdownStyle = {
   },
   mentions: {
     fontWeight: '700',
+    fontSize: primitives.typographyFontSizeMd,
+    lineHeight: primitives.typographyLineHeightNormal,
   },
   paragraph: {
-    marginBottom: 8,
-    marginTop: 8,
+    marginBottom: primitives.spacingXs,
+    fontSize: primitives.typographyFontSizeMd,
+    marginTop: primitives.spacingXs,
   },
   paragraphCenter: {
-    marginBottom: 8,
-    marginTop: 8,
+    marginBottom: primitives.spacingXs,
+    fontSize: primitives.typographyFontSizeMd,
+    marginTop: primitives.spacingXs,
   },
   paragraphWithImage: {
-    marginBottom: 8,
-    marginTop: 8,
+    marginBottom: primitives.spacingXs,
+    marginTop: primitives.spacingXs,
   },
   table: {
-    borderRadius: 3,
+    borderRadius: primitives.radiusXxs,
     borderWidth: 1,
     flex: 1,
     flexDirection: 'row',
@@ -160,7 +169,7 @@ export type MarkdownRules = Partial<DefaultRules>;
 export type RenderTextParams = Partial<
   Pick<MessageContextValue, 'onLongPress' | 'onPress' | 'preventPress'>
 > & {
-  colors: typeof Colors;
+  semantics: typeof semantics;
   message: LocalMessage;
   markdownRules?: MarkdownRules;
   markdownStyles?: MarkdownStyle;
@@ -168,11 +177,12 @@ export type RenderTextParams = Partial<
   messageTextNumberOfLines?: number;
   onLink?: (url: string) => Promise<void>;
   onlyEmojis?: boolean;
+  isMyMessage?: boolean;
 };
 
 export const renderText = (params: RenderTextParams) => {
   const {
-    colors,
+    semantics,
     markdownRules,
     markdownStyles,
     message,
@@ -183,6 +193,7 @@ export const renderText = (params: RenderTextParams) => {
     onlyEmojis,
     onPress: onPressParam,
     preventPress,
+    isMyMessage,
   } = params;
   const { text } = message;
 
@@ -191,61 +202,77 @@ export const renderText = (params: RenderTextParams) => {
   const styles: MarkdownStyle = {
     ...defaultMarkdownStyles,
     ...markdownStyles,
+    paragraph: {
+      ...(onlyEmojis ? {} : { lineHeight: primitives.typographyLineHeightNormal }),
+      ...defaultMarkdownStyles.paragraph,
+      ...markdownStyles?.paragraph,
+    },
+    paragraphCenter: {
+      ...(onlyEmojis ? {} : { lineHeight: primitives.typographyLineHeightNormal }),
+      ...defaultMarkdownStyles.paragraphCenter,
+      ...markdownStyles?.paragraphCenter,
+    },
     autolink: {
+      fontSize: primitives.typographyFontSizeMd,
+      lineHeight: primitives.typographyLineHeightNormal,
       ...defaultMarkdownStyles.autolink,
-      color: colors.accent_blue,
+      color: semantics.textLink,
       ...markdownStyles?.autolink,
     },
     blockQuoteSection: {
       ...defaultMarkdownStyles.blockQuoteSection,
       flexDirection: 'row',
-      padding: 8,
+      padding: primitives.spacingXs,
       ...markdownStyles?.blockQuoteSection,
     },
     blockQuoteSectionBar: {
       ...defaultMarkdownStyles.blockQuoteSectionBar,
-      backgroundColor: colors.grey_gainsboro,
-      marginRight: 8,
+      backgroundColor: semantics.borderCoreStrong,
+      marginRight: primitives.spacingXs,
       width: 2,
       ...markdownStyles?.blockQuoteSectionBar,
     },
     blockQuoteText: {
+      fontSize: primitives.typographyFontSizeMd,
+      lineHeight: primitives.typographyLineHeightNormal,
       ...defaultMarkdownStyles.blockQuoteText,
       ...markdownStyles?.blockQuoteText,
     },
     codeBlock: {
       ...defaultMarkdownStyles.codeBlock,
-      backgroundColor: colors.code_block,
-      color: colors.black,
-      padding: 8,
+      backgroundColor: semantics.backgroundCoreSurfaceSubtle,
+      color: semantics.textPrimary,
+      padding: primitives.spacingXs,
       ...markdownStyles?.codeBlock,
     },
     inlineCode: {
       ...defaultMarkdownStyles.inlineCode,
-      backgroundColor: colors.white_smoke,
-      borderColor: colors.grey_gainsboro,
-      color: colors.accent_red,
+      backgroundColor: semantics.backgroundCoreSurfaceSubtle,
+      borderColor: semantics.borderCoreSubtle,
+      color: semantics.accentError,
       ...markdownStyles?.inlineCode,
     },
     mentions: {
       ...defaultMarkdownStyles.mentions,
-      color: colors.accent_blue,
+      color: semantics.accentPrimary,
       ...markdownStyles?.mentions,
     },
     table: {
       ...defaultMarkdownStyles.table,
-      borderColor: colors.grey_dark,
-      marginVertical: 8,
+      borderColor: semantics.borderCoreStrong,
+      marginVertical: primitives.spacingXs,
       ...markdownStyles?.table,
     },
     tableHeader: {
       ...defaultMarkdownStyles.tableHeader,
-      backgroundColor: colors.grey,
+      backgroundColor: semantics.backgroundCoreSurfaceSubtle,
       ...markdownStyles?.tableHeader,
     },
     tableHeaderCell: {
+      fontSize: primitives.typographyFontSizeMd,
+      lineHeight: primitives.typographyLineHeightNormal,
       ...defaultMarkdownStyles.tableHeaderCell,
-      padding: 5,
+      padding: primitives.spacingXxs,
       ...markdownStyles?.tableHeaderCell,
     },
     tableRow: {
@@ -254,16 +281,18 @@ export const renderText = (params: RenderTextParams) => {
     },
     tableRowCell: {
       ...defaultMarkdownStyles.tableRowCell,
-      borderColor: colors.grey_dark,
-      padding: 5,
+      borderColor: semantics.borderCoreStrong,
+      padding: primitives.spacingXxs,
       ...markdownStyles?.tableRowCell,
     },
     tableRowLast: {
       ...markdownStyles?.tableRowLast,
     },
     text: {
+      fontSize: primitives.typographyFontSizeMd,
+      ...(onlyEmojis ? {} : { lineHeight: primitives.typographyLineHeightNormal }),
       ...defaultMarkdownStyles.text,
-      color: colors.black,
+      color: isMyMessage ? semantics.chatTextOutgoing : semantics.chatTextIncoming,
       ...markdownStyles?.text,
     },
   };
@@ -447,7 +476,7 @@ export const renderText = (params: RenderTextParams) => {
     <Markdown
       key={`${JSON.stringify(mentioned_users)}-${onlyEmojis}-${
         messageOverlay ? JSON.stringify(markdownStyles) : undefined
-      }-${JSON.stringify(colors)}`}
+      }-${JSON.stringify(semantics)}`}
       onLink={onLink}
       rules={{
         ...customRules,

package/src/components/Message/hooks/__tests__/useShouldUseOverlayStyles.test.tsx

@@ -0,0 +1,122 @@
+import React, { PropsWithChildren } from 'react';
+
+import { act, cleanup, renderHook } from '@testing-library/react-native';
+
+import {
+  MessageContextValue,
+  MessageProvider,
+} from '../../../../contexts/messageContext/MessageContext';
+import { generateMessage } from '../../../../mock-builders/generator/message';
+import { finalizeCloseOverlay, openOverlay, overlayStore } from '../../../../state-store';
+
+import { useShouldUseOverlayStyles } from '../useShouldUseOverlayStyles';
+
+const createMessageContextValue = (overrides: Partial<MessageContextValue>): MessageContextValue =>
+  ({
+    actionsEnabled: false,
+    alignment: 'left',
+    channel: {} as MessageContextValue['channel'],
+    deliveredToCount: 0,
+    dismissOverlay: jest.fn(),
+    files: [],
+    groupStyles: [],
+    handleAction: jest.fn(),
+    handleToggleReaction: jest.fn(),
+    hasReactions: false,
+    images: [],
+    isMessageAIGenerated: jest.fn(),
+    isMyMessage: false,
+    lastGroupMessage: false,
+    members: {},
+    message: generateMessage({ id: 'shared-message-id' }),
+    messageContentOrder: [],
+    messageHasOnlySingleAttachment: false,
+    messageOverlayId: 'message-overlay-default',
+    onLongPress: jest.fn(),
+    onlyEmojis: false,
+    onOpenThread: jest.fn(),
+    onPress: jest.fn(),
+    onPressIn: null,
+    otherAttachments: [],
+    reactions: [],
+    readBy: false,
+    setQuotedMessage: jest.fn(),
+    showAvatar: false,
+    showMessageOverlay: jest.fn(),
+    showReactionsOverlay: jest.fn(),
+    showMessageStatus: false,
+    threadList: false,
+    videos: [],
+    ...overrides,
+  }) as MessageContextValue;
+
+const createWrapper = (value: MessageContextValue) => {
+  const Wrapper = ({ children }: PropsWithChildren) => (
+    <MessageProvider value={value}>{children}</MessageProvider>
+  );
+
+  return Wrapper;
+};
+
+describe('useShouldUseOverlayStyles', () => {
+  beforeEach(() => {
+    act(() => {
+      finalizeCloseOverlay();
+      overlayStore.next({
+        closing: false,
+        closingPortalHostBlacklist: [],
+        id: undefined,
+        messageId: undefined,
+      });
+    });
+  });
+
+  afterEach(() => {
+    cleanup();
+
+    act(() => {
+      finalizeCloseOverlay();
+      overlayStore.next({
+        closing: false,
+        closingPortalHostBlacklist: [],
+        id: undefined,
+        messageId: undefined,
+      });
+    });
+  });
+
+  it('tracks overlay activity by messageOverlayId instead of message.id', () => {
+    const sharedMessage = generateMessage({ id: 'same-message-id' });
+
+    const first = renderHook(() => useShouldUseOverlayStyles(), {
+      wrapper: createWrapper(
+        createMessageContextValue({
+          message: sharedMessage,
+          messageOverlayId: 'message-overlay-first',
+        }),
+      ),
+    });
+
+    const second = renderHook(() => useShouldUseOverlayStyles(), {
+      wrapper: createWrapper(
+        createMessageContextValue({
+          message: sharedMessage,
+          messageOverlayId: 'message-overlay-second',
+        }),
+      ),
+    });
+
+    expect(first.result.current).toBe(false);
+    expect(second.result.current).toBe(false);
+
+    act(() => {
+      openOverlay('message-overlay-first');
+    });
+
+    expect(first.result.current).toBe(true);
+    expect(second.result.current).toBe(false);
+
+    first.unmount();
+    second.unmount();
+  });
+});

package/src/components/Message/hooks/useCreateMessageContext.ts

@@ -1,9 +1,19 @@
-import { useMemo } from 'react';
+import { useMemo, useRef } from 'react';
 
 import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
 
 import { stringifyMessage } from '../../../utils/utils';
 
+function useStableRefValue<T>(value: T): T {
+  const ref = useRef(value);
+
+  if (ref.current !== value) {
+    ref.current = value;
+  }
+
+  return ref.current;
+}
+
 export const useCreateMessageContext = ({
   actionsEnabled,
   alignment,
@@ -17,13 +27,14 @@ export const useCreateMessageContext = ({
   handleReaction,
   handleToggleReaction,
   hasReactions,
+  messageHasOnlySingleAttachment,
   images,
-  isEditedMessageOpen,
   isMessageAIGenerated,
   isMyMessage,
   lastGroupMessage,
   members,
   message,
+  messageOverlayId,
   messageContentOrder,
   myMessageTheme,
   onLongPress,
@@ -31,19 +42,20 @@ export const useCreateMessageContext = ({
   onOpenThread,
   onPress,
   onPressIn,
+  onThreadSelect,
   otherAttachments,
   preventPress,
   reactions,
   readBy,
-  setIsEditedMessageOpen,
   showAvatar,
   showMessageOverlay,
+  showReactionsOverlay,
   showMessageStatus,
   threadList,
   videos,
   setQuotedMessage,
 }: MessageContextValue) => {
-  const groupStylesLength = groupStyles.length;
+  const stableGroupStyles = useStableRefValue(groupStyles);
   const reactionsValue = reactions.map(({ count, own, type }) => `${own}${type}${count}`).join();
   const stringifiedMessage = stringifyMessage({ message });
 
@@ -63,18 +75,19 @@ export const useCreateMessageContext = ({
       dismissOverlay,
       files,
       goToMessage,
-      groupStyles,
+      groupStyles: stableGroupStyles,
       handleAction,
       handleReaction,
       handleToggleReaction,
       hasReactions,
+      messageHasOnlySingleAttachment,
       images,
-      isEditedMessageOpen,
       isMessageAIGenerated,
       isMyMessage,
       lastGroupMessage,
       members,
       message,
+      messageOverlayId,
       messageContentOrder,
       myMessageTheme,
       onLongPress,
@@ -82,14 +95,15 @@ export const useCreateMessageContext = ({
       onOpenThread,
       onPress,
       onPressIn,
+      onThreadSelect,
       otherAttachments,
       preventPress,
       reactions,
       readBy,
-      setIsEditedMessageOpen,
       setQuotedMessage,
       showAvatar,
       showMessageOverlay,
+      showReactionsOverlay,
       showMessageStatus,
       threadList,
       videos,
@@ -99,12 +113,13 @@ export const useCreateMessageContext = ({
       actionsEnabled,
       alignment,
       goToMessage,
-      groupStylesLength,
+      stableGroupStyles,
       hasReactions,
-      isEditedMessageOpen,
+      messageHasOnlySingleAttachment,
       lastGroupMessage,
       membersValue,
       myMessageThemeString,
+      messageOverlayId,
       reactionsValue,
       stringifiedMessage,
       stringifiedQuotedMessage,
@@ -113,6 +128,7 @@ export const useCreateMessageContext = ({
       showAvatar,
       showMessageStatus,
       threadList,
+      preventPress,
     ],
   );
 

package/src/components/Message/hooks/useMessageActionHandlers.ts

@@ -1,5 +1,10 @@
+import { useMemo } from 'react';
 import { Alert } from 'react-native';
 
+import { UserResponse } from 'stream-chat';
+
+import { useUserMuteActive } from './useUserMuteActive';
+
 import type { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
 import type { ChatContextValue } from '../../../contexts/chatContext/ChatContext';
 import { MessageComposerAPIContextValue } from '../../../contexts/messageComposerContext/MessageComposerAPIContext';
@@ -7,6 +12,7 @@ import type { MessageContextValue } from '../../../contexts/messageContext/Messa
 import type { MessagesContextValue } from '../../../contexts/messagesContext/MessagesContext';
 
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+import { useStableCallback } from '../../../hooks';
 import { useTranslatedMessage } from '../../../hooks/useTranslatedMessage';
 import { NativeHandlers } from '../../../native';
 
@@ -29,25 +35,23 @@ export const useMessageActionHandlers = ({
   Pick<MessageContextValue, 'message'> &
   Pick<MessageComposerAPIContextValue, 'setEditingState' | 'setQuotedMessage'>) => {
   const { t } = useTranslationContext();
-  const handleResendMessage = () => retrySendMessage(message);
+  const handleResendMessage = useStableCallback(() => retrySendMessage(message));
   const translatedMessage = useTranslatedMessage(message);
 
-  const handleQuotedReplyMessage = () => {
-    setQuotedMessage(message);
-  };
+  const isMuted = useUserMuteActive(message.user);
 
-  const isMuted = (client.mutedUsers || []).some(
-    (mute) => mute.user.id === client.userID && mute.target.id === message.user?.id,
-  );
+  const handleQuotedReplyMessage = useStableCallback(() => {
+    setQuotedMessage(message);
+  });
 
-  const handleCopyMessage = () => {
+  const handleCopyMessage = useStableCallback(() => {
     if (!message.text) {
       return;
     }
     NativeHandlers.setClipboardString(translatedMessage?.text ?? message.text);
-  };
+  });
 
-  const handleDeleteMessage = () => {
+  const handleDeleteMessage = useStableCallback(() => {
     if (!message.id) {
       return;
     }
@@ -66,17 +70,17 @@ export const useMessageActionHandlers = ({
       ],
       { cancelable: false },
     );
-  };
+  });
 
-  const handleDeleteForMeMessage = async () => {
+  const handleDeleteForMeMessage = useStableCallback(async () => {
     if (!message.id) {
       return;
     }
 
     await deleteMessage(message, { deleteForMe: true });
-  };
+  });
 
-  const handleToggleMuteUser = async () => {
+  const handleToggleMuteUser = useStableCallback(async () => {
     if (!message.user?.id) {
       return;
     }
@@ -86,9 +90,9 @@ export const useMessageActionHandlers = ({
     } else {
       await client.muteUser(message.user.id);
     }
-  };
+  });
 
-  const handleToggleBanUser = async () => {
+  const handleToggleBanUser = useStableCallback(async () => {
     const messageUser = message.user;
     if (!messageUser) {
       return;
@@ -99,22 +103,22 @@ export const useMessageActionHandlers = ({
     } else {
       await client.banUser(messageUser.id);
     }
-  };
+  });
 
-  const handleTogglePinMessage = async () => {
+  const handleTogglePinMessage = useStableCallback(async () => {
     const MessagePinnedHeaderStatus = message.pinned;
     if (!MessagePinnedHeaderStatus) {
       await client.pinMessage(message, null);
     } else {
       await client.unpinMessage(message);
     }
-  };
+  });
 
-  const handleEditMessage = () => {
+  const handleEditMessage = useStableCallback(() => {
     setEditingState(message);
-  };
+  });
 
-  const handleFlagMessage = () => {
+  const handleFlagMessage = useStableCallback(() => {
     if (!message.id) {
       return;
     }
@@ -143,9 +147,9 @@ export const useMessageActionHandlers = ({
       ],
       { cancelable: false },
     );
-  };
+  });
 
-  const handleMarkUnreadMessage = async () => {
+  const handleMarkUnreadMessage = useStableCallback(async () => {
     if (!message.id) {
       return;
     }
@@ -159,9 +163,9 @@ export const useMessageActionHandlers = ({
         ),
       );
     }
-  };
+  });
 
-  const handleToggleReaction = async (reactionType: string) => {
+  const handleToggleReaction = useStableCallback(async (reactionType: string) => {
     const messageId = message.id;
     const own_reactions = message.own_reactions ?? [];
     const userExistingReaction = own_reactions.find((reaction) => {
@@ -188,20 +192,54 @@ export const useMessageActionHandlers = ({
     } catch (err) {
       console.log(err);
     }
-  };
-
-  return {
-    handleCopyMessage,
-    handleDeleteForMeMessage,
-    handleDeleteMessage,
-    handleEditMessage,
-    handleFlagMessage,
-    handleMarkUnreadMessage,
-    handleQuotedReplyMessage,
-    handleResendMessage,
-    handleToggleBanUser,
-    handleToggleMuteUser,
-    handleTogglePinMessage,
-    handleToggleReaction,
-  };
+  });
+
+  const handleToggleBlockUser = useStableCallback(async (user: UserResponse | null | undefined) => {
+    try {
+      if (!user) {
+        return;
+      }
+      const isBlocked = new Set(client.blockedUsers.getLatestValue().userIds).has(user?.id ?? '');
+      if (isBlocked) {
+        await client.unBlockUser(user.id);
+      } else {
+        await client.blockUser(user.id);
+      }
+    } catch (err) {
+      console.log(err);
+    }
+  });
+
+  return useMemo(
+    () => ({
+      handleCopyMessage,
+      handleDeleteForMeMessage,
+      handleDeleteMessage,
+      handleEditMessage,
+      handleFlagMessage,
+      handleMarkUnreadMessage,
+      handleQuotedReplyMessage,
+      handleResendMessage,
+      handleToggleBanUser,
+      handleToggleMuteUser,
+      handleTogglePinMessage,
+      handleToggleReaction,
+      handleToggleBlockUser,
+    }),
+    [
+      handleCopyMessage,
+      handleDeleteForMeMessage,
+      handleDeleteMessage,
+      handleEditMessage,
+      handleFlagMessage,
+      handleMarkUnreadMessage,
+      handleQuotedReplyMessage,
+      handleResendMessage,
+      handleToggleBanUser,
+      handleToggleMuteUser,
+      handleTogglePinMessage,
+      handleToggleReaction,
+      handleToggleBlockUser,
+    ],
+  );
 };