stream-chat-react-native-core 9.0.0-beta.2 → 9.0.0-beta.21

package/src/components/ChannelPreview/ChannelSwipableWrapper.tsx

@@ -7,14 +7,14 @@ import { Channel } from 'stream-chat';
 
 import { ChannelDetailsBottomSheet as DefaultChannelDetailsBottomSheet } from './ChannelDetailsBottomSheet';
 import type { ChannelDetailsBottomSheetProps } from './ChannelDetailsBottomSheet';
+import { useIsChannelMuted } from './hooks/useIsChannelMuted';
 
 import { useTheme } from '../../contexts';
 import { useSwipeRegistryContext } from '../../contexts/swipeableContext/SwipeRegistryContext';
-import { Archive, MenuPointHorizontal, Mute } from '../../icons';
+import { MenuPointHorizontal, Mute, Sound } from '../../icons';
 import { GetChannelActionItems } from '../ChannelList/hooks/useChannelActionItems';
 import { useChannelActionItems } from '../ChannelList/hooks/useChannelActionItems';
-import { useChannelActionItemsById } from '../ChannelList/hooks/useChannelActionItemsById';
-import { useIsDirectChat } from '../ChannelList/hooks/useIsDirectChat';
+import { useChannelActions } from '../ChannelList/hooks/useChannelActions';
 import {
   BottomSheetModal,
   RightActions,
@@ -43,8 +43,12 @@ export const ChannelSwipableWrapper = ({
   swipableProps?: SwipableWrapperProps['swipableProps'];
 }>) => {
   const [channelDetailSheetOpen, setChannelDetailSheetOpen] = useState(false);
-  const channelActionsById = useChannelActionItemsById({ channel, getChannelActionItems });
+  const { muteChannel, unmuteChannel } = useChannelActions(channel);
   const channelActionItems = useChannelActionItems({ channel, getChannelActionItems });
+  const sheetItems = useMemo(
+    () => channelActionItems.filter((item) => item.placement !== 'swipe'),
+    [channelActionItems],
+  );
   const swipableRegistry = useSwipeRegistryContext();
 
   const {
@@ -52,16 +56,17 @@ export const ChannelSwipableWrapper = ({
   } = useTheme();
   const styles = useStyles();
 
-  const isDirectChannel = useIsDirectChat(channel);
+  const channelMuteState = useIsChannelMuted(channel);
+  const channelMuteActive = channelMuteState.muted;
 
   const Icon = useCallback(
     () =>
-      isDirectChannel ? (
-        <Mute width={20} height={20} fill={semantics.textOnAccent} />
+      channelMuteActive ? (
+        <Sound width={20} height={20} stroke={semantics.textOnAccent} />
       ) : (
-        <Archive width={20} height={20} stroke={semantics.textOnAccent} />
+        <Mute width={20} height={20} fill={semantics.textOnAccent} />
       ),
-    [isDirectChannel, semantics.textOnAccent],
+    [channelMuteActive, semantics.textOnAccent],
   );
 
   const swipableActions = useMemo<SwipableActionItem[]>(() => {
@@ -74,29 +79,25 @@ export const ChannelSwipableWrapper = ({
       },
     ];
 
-    const extraItem = isDirectChannel ? channelActionsById.mute : channelActionsById.archive;
-
-    if (extraItem) {
-      const { id, action } = extraItem;
-      items.push({
-        id,
-        action: () => {
-          action();
-          swipableRegistry?.closeAll();
-        },
-        Content: Icon,
-        contentContainerStyle: [styles.contentContainerStyle, styles.standard],
-      });
-    }
+    items.push({
+      id: 'mute',
+      action: () => {
+        const action = channelMuteActive ? unmuteChannel : muteChannel;
+        action();
+        swipableRegistry?.closeAll();
+      },
+      Content: Icon,
+      contentContainerStyle: [styles.contentContainerStyle, styles.standard],
+    });
 
     return items;
   }, [
     styles.contentContainerStyle,
     styles.elipsis,
     styles.standard,
-    isDirectChannel,
-    channelActionsById.mute,
-    channelActionsById.archive,
+    channelMuteActive,
+    muteChannel,
+    unmuteChannel,
     Icon,
     swipableRegistry,
   ]);
@@ -123,7 +124,7 @@ export const ChannelSwipableWrapper = ({
         visible={channelDetailSheetOpen}
         height={356}
       >
-        <ChannelDetailsBottomSheetComponent channel={channel} items={channelActionItems} />
+        <ChannelDetailsBottomSheetComponent channel={channel} items={sheetItems} />
       </BottomSheetModal>
     </>
   );
@@ -142,12 +143,12 @@ const useStyles = () => {
           justifyContent: 'center',
         },
         elipsis: {
-          backgroundColor: semantics.backgroundCoreSurface,
+          backgroundColor: semantics.backgroundCoreSurfaceDefault,
         },
         standard: {
           backgroundColor: semantics.accentPrimary,
         },
       }),
-    [semantics.accentPrimary, semantics.backgroundCoreSurface],
+    [semantics.accentPrimary, semantics.backgroundCoreSurfaceDefault],
   );
 };

package/src/components/ChannelPreview/__tests__/ChannelSwipableWrapper.test.tsx

@@ -0,0 +1,201 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+import { act, render } from '@testing-library/react-native';
+import type { Channel } from 'stream-chat';
+
+import type { ChannelActionItem } from '../../ChannelList/hooks/useChannelActionItems';
+import * as ChannelActionItemsModule from '../../ChannelList/hooks/useChannelActionItems';
+import * as ChannelActionsModule from '../../ChannelList/hooks/useChannelActions';
+import { ChannelSwipableWrapper } from '../ChannelSwipableWrapper';
+import * as UseIsChannelMutedModule from '../hooks/useIsChannelMuted';
+
+const rightActionsProbe = {
+  items: [] as Array<{ action: () => void; id: string }>,
+};
+
+const mockSwipableWrapper = jest.fn(
+  ({
+    children,
+    swipableProps,
+  }: React.PropsWithChildren<{
+    swipableProps?: { renderRightActions?: (...args: never[]) => void };
+  }>) => {
+    const rightActions = swipableProps?.renderRightActions?.({} as never, {} as never);
+    return (
+      <>
+        {children}
+        {rightActions}
+      </>
+    );
+  },
+);
+
+jest.mock('../../../contexts', () => ({
+  useTheme: () => ({
+    theme: {
+      semantics: {
+        accentPrimary: '#00f',
+        backgroundCoreSurfaceDefault: '#fff',
+        textOnAccent: '#000',
+        textPrimary: '#111',
+      },
+    },
+  }),
+}));
+
+jest.mock('../../../contexts/swipeableContext/SwipeRegistryContext', () => ({
+  useSwipeRegistryContext: () => ({
+    closeAll: jest.fn(),
+  }),
+}));
+
+jest.mock('../../UIComponents', () => ({
+  BottomSheetModal: ({ children }: React.PropsWithChildren) => <>{children}</>,
+  RightActions: ({ items }: { items: Array<{ action: () => void; id: string }> }) => {
+    rightActionsProbe.items = items;
+    return null;
+  },
+  SwipableWrapper: (...args: unknown[]) => mockSwipableWrapper(...args),
+}));
+
+describe('ChannelSwipableWrapper', () => {
+  const channel = { cid: 'messaging:test-channel', id: 'test-channel' } as Channel;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    rightActionsProbe.items = [];
+  });
+
+  it('uses channel mute for direct-channel swipe actions and keeps mute user in the sheet', () => {
+    const muteChannel = jest.fn();
+    const unmuteChannel = jest.fn();
+    const customBottomSheet = jest.fn(() => null);
+    const items: ChannelActionItem[] = [
+      {
+        Icon: () => null,
+        action: jest.fn(),
+        id: 'mute',
+        label: 'Mute User',
+        placement: 'sheet',
+        type: 'standard',
+      },
+      {
+        Icon: () => null,
+        action: jest.fn(),
+        id: 'archive',
+        label: 'Archive Chat',
+        placement: 'sheet',
+        type: 'standard',
+      },
+    ];
+
+    jest.spyOn(ChannelActionsModule, 'useChannelActions').mockReturnValue({
+      archive: jest.fn(),
+      blockUser: jest.fn(),
+      deleteChannel: jest.fn(),
+      leave: jest.fn(),
+      muteChannel,
+      muteUser: jest.fn(),
+      pin: jest.fn(),
+      unarchive: jest.fn(),
+      unblockUser: jest.fn(),
+      unmuteChannel,
+      unmuteUser: jest.fn(),
+      unpin: jest.fn(),
+    });
+    jest.spyOn(ChannelActionItemsModule, 'useChannelActionItems').mockReturnValue(items);
+    jest.spyOn(UseIsChannelMutedModule, 'useIsChannelMuted').mockReturnValue({
+      createdAt: null,
+      expiresAt: null,
+      muted: false,
+    });
+
+    render(
+      <ChannelSwipableWrapper channel={channel} ChannelDetailsBottomSheet={customBottomSheet}>
+        <Text>child</Text>
+      </ChannelSwipableWrapper>,
+    );
+
+    expect(customBottomSheet).toHaveBeenCalledWith(
+      expect.objectContaining({
+        channel,
+        items,
+      }),
+      undefined,
+    );
+    expect(rightActionsProbe.items.map((item) => item.id)).toEqual(['openSheet', 'mute']);
+
+    act(() => {
+      rightActionsProbe.items[1].action();
+    });
+
+    expect(muteChannel).toHaveBeenCalledTimes(1);
+    expect(unmuteChannel).not.toHaveBeenCalled();
+  });
+
+  it('removes mute group from the sheet while keeping mute as the quick swipe action', () => {
+    const muteChannel = jest.fn();
+    const customBottomSheet = jest.fn(() => null);
+    const muteItem = {
+      Icon: () => null,
+      action: jest.fn(),
+      id: 'mute',
+      label: 'Mute Group',
+      placement: 'swipe',
+      type: 'standard',
+    } as const satisfies ChannelActionItem;
+    const archiveItem = {
+      Icon: () => null,
+      action: jest.fn(),
+      id: 'archive',
+      label: 'Archive Group',
+      placement: 'both',
+      type: 'standard',
+    } as const satisfies ChannelActionItem;
+
+    jest.spyOn(ChannelActionsModule, 'useChannelActions').mockReturnValue({
+      archive: jest.fn(),
+      blockUser: jest.fn(),
+      deleteChannel: jest.fn(),
+      leave: jest.fn(),
+      muteChannel,
+      muteUser: jest.fn(),
+      pin: jest.fn(),
+      unarchive: jest.fn(),
+      unblockUser: jest.fn(),
+      unmuteChannel: jest.fn(),
+      unmuteUser: jest.fn(),
+      unpin: jest.fn(),
+    });
+    jest
+      .spyOn(ChannelActionItemsModule, 'useChannelActionItems')
+      .mockReturnValue([muteItem, archiveItem]);
+    jest.spyOn(UseIsChannelMutedModule, 'useIsChannelMuted').mockReturnValue({
+      createdAt: null,
+      expiresAt: null,
+      muted: false,
+    });
+
+    render(
+      <ChannelSwipableWrapper channel={channel} ChannelDetailsBottomSheet={customBottomSheet}>
+        <Text>child</Text>
+      </ChannelSwipableWrapper>,
+    );
+
+    expect(customBottomSheet).toHaveBeenCalledWith(
+      expect.objectContaining({
+        channel,
+        items: [archiveItem],
+      }),
+      undefined,
+    );
+    expect(rightActionsProbe.items.map((item) => item.id)).toEqual(['openSheet', 'mute']);
+
+    act(() => {
+      rightActionsProbe.items[1].action();
+    });
+
+    expect(muteChannel).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/ChannelPreview/hooks/useChannelPreviewData.ts

@@ -23,7 +23,7 @@ export const useChannelPreviewData = (
 ) => {
   const [forceUpdate, setForceUpdate] = useState(0);
   const [lastMessage, setLastMessageInner] = useState<LastMessageType>(
-    () => channel.state.messages[channel.state.messages.length - 1],
+    () => channel.state.latestMessages[channel.state.latestMessages.length - 1],
   );
   const throttledSetLastMessage = useMemo(
     () =>
@@ -42,7 +42,7 @@ export const useChannelPreviewData = (
   const { forceUpdate: contextForceUpdate } = useChannelsContext();
   const channelListForceUpdate = forceUpdateOverride ?? contextForceUpdate;
 
-  const channelLastMessage = channel.lastMessage();
+  const channelLastMessage = channel.state.latestMessages[channel.state.latestMessages.length - 1];
   const channelLastMessageString = `${channelLastMessage?.id}${channelLastMessage?.updated_at}`;
 
   const refreshUnreadCount = useMemo(

package/src/components/ImageGallery/ImageGallery.tsx

@@ -284,7 +284,10 @@ export const ImageGalleryWithContext = (props: ImageGalleryWithContextProps) =>
       <Animated.View style={[StyleSheet.absoluteFillObject, containerBackground]} />
       <GestureDetector gesture={Gesture.Simultaneous(singleTap, doubleTap, pinch, pan)}>
         <Animated.View style={StyleSheet.absoluteFillObject}>
-          <Animated.View style={[styles.animatedContainer, pagerStyle, pager]}>
+          <Animated.View
+            testID='image-gallery-pager'
+            style={[styles.animatedContainer, pagerStyle, pager]}
+          >
             {assets.map((photo, i) =>
               photo.type === FileTypes.Video ? (
                 <AnimatedGalleryVideo
@@ -399,6 +402,7 @@ export const clamp = (value: number, lowerBound: number, upperBound: number) =>
 const styles = StyleSheet.create({
   animatedContainer: {
     alignItems: 'center',
+    direction: 'ltr',
     flexDirection: 'row',
   },
 });

package/src/components/ImageGallery/__tests__/ImageGallery.test.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { I18nManager, StyleSheet } from 'react-native';
 
 import type { SharedValue } from 'react-native-reanimated';
 
@@ -79,6 +80,19 @@ const ImageGalleryComponent = (props: ImageGalleryProps & { message: LocalMessag
 };
 
 describe('ImageGallery', () => {
+  const originalIsRTL = I18nManager.isRTL;
+
+  const setRTL = (value: boolean) => {
+    Object.defineProperty(I18nManager, 'isRTL', {
+      configurable: true,
+      value,
+    });
+  };
+
+  afterEach(() => {
+    setRTL(originalIsRTL);
+  });
+
   it('render image gallery component', async () => {
     render(
       <ImageGalleryComponent
@@ -99,4 +113,23 @@ describe('ImageGallery', () => {
       expect(screen.queryAllByLabelText('Image Gallery Video')).toHaveLength(1);
     });
   });
+
+  it('keeps the pager in ltr coordinates when rtl is enabled', async () => {
+    setRTL(true);
+
+    render(
+      <ImageGalleryComponent
+        message={
+          generateMessage({
+            attachments: [generateImageAttachment()],
+          }) as unknown as LocalMessage
+        }
+      />,
+    );
+
+    await waitFor(() => {
+      const pagerStyle = StyleSheet.flatten(screen.getByTestId('image-gallery-pager').props.style);
+      expect(pagerStyle.direction).toBe('ltr');
+    });
+  });
 });

package/src/components/ImageGallery/components/ImageGalleryFooter.tsx

@@ -1,21 +1,15 @@
 import React, { useMemo, useRef, useState } from 'react';
 import { ActivityIndicator, StyleSheet, Text, View, ViewStyle } from 'react-native';
-import Animated, {
-  Extrapolation,
-  interpolate,
-  SharedValue,
-  useAnimatedStyle,
-} from 'react-native-reanimated';
+import Animated, { Extrapolation, interpolate, useAnimatedStyle } from 'react-native-reanimated';
 
-import {
-  ImageGalleryProviderProps,
-  useImageGalleryContext,
-} from '../../../contexts/imageGalleryContext/ImageGalleryContext';
+import type { ImageGalleryFooterProps, ImageGalleryVideoControlProps } from './types';
+
+import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContextBase';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { useStateStore } from '../../../hooks/useStateStore';
 import { Share as ShareIconDefault } from '../../../icons';
-import { ImageGrid } from '../../../icons/ImageGrid';
+import { ImageGrid } from '../../../icons/gallery';
 import { isFileSystemAvailable, isShareImageAvailable, NativeHandlers } from '../../../native';
 
 import { ImageGalleryState } from '../../../state-store/image-gallery-state-store';
@@ -38,24 +32,10 @@ export type ImageGalleryFooterCustomComponent = ({
   shareMenuOpen: boolean;
 }) => React.ReactElement | null;
 
-export type ImageGalleryVideoControlProps = {
-  attachmentId: string;
-};
-
 export type ImageGalleryVideoControlComponent = ({
   attachmentId,
 }: ImageGalleryVideoControlProps) => React.ReactElement | null;
 
-export type ImageGalleryFooterProps = Pick<
-  ImageGalleryProviderProps,
-  'ImageGalleryVideoControls'
-> & {
-  accessibilityLabel: string;
-  opacity: SharedValue<number>;
-  openGridView: () => void;
-  visible: SharedValue<number>;
-};
-
 const imageGallerySelector = (state: ImageGalleryState) => ({
   asset: state.assets[state.currentIndex],
   currentIndex: state.currentIndex,

package/src/components/ImageGallery/components/ImageGalleryHeader.tsx

@@ -2,19 +2,16 @@ import React, { useEffect, useMemo, useState } from 'react';
 
 import { StyleSheet, Text, View, ViewStyle } from 'react-native';
 
-import Animated, {
-  Extrapolation,
-  interpolate,
-  SharedValue,
-  useAnimatedStyle,
-} from 'react-native-reanimated';
+import Animated, { Extrapolation, interpolate, useAnimatedStyle } from 'react-native-reanimated';
 
-import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContext';
+import type { ImageGalleryHeaderProps } from './types';
+
+import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContextBase';
 import { useOverlayContext } from '../../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { useStateStore } from '../../../hooks/useStateStore';
-import { ChevronLeft } from '../../../icons/ChevronLeft';
+import { ChevronLeft } from '../../../icons/chevron-left';
 
 import { ImageGalleryState } from '../../../state-store/image-gallery-state-store';
 import { primitives } from '../../../theme';
@@ -26,11 +23,6 @@ const ReanimatedSafeAreaView = Animated.createAnimatedComponent
   ? Animated.createAnimatedComponent(SafeAreaView)
   : SafeAreaView;
 
-export type ImageGalleryHeaderProps = {
-  opacity: SharedValue<number>;
-  visible: SharedValue<number>;
-};
-
 const imageGallerySelector = (state: ImageGalleryState) => ({
   asset: state.assets[state.currentIndex],
 });

package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx

@@ -1,13 +1,13 @@
 import React, { useCallback, useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
-import { ImageGalleryVideoControlProps } from './ImageGalleryFooter';
+import type { ImageGalleryVideoControlProps } from './types';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 
 import { useStateStore } from '../../../hooks/useStateStore';
-import { Pause } from '../../../icons/Pause';
-import { Play } from '../../../icons/Play';
+import { Pause } from '../../../icons/pause-fill';
+import { Play } from '../../../icons/play-fill';
 import { IconProps } from '../../../icons/utils/base';
 import { VideoPlayerState } from '../../../state-store/video-player';
 import { primitives } from '../../../theme';

package/src/components/ImageGallery/components/ImageGrid.tsx

@@ -1,8 +1,10 @@
 import React, { useMemo } from 'react';
 import { Image, Pressable, StyleSheet, View } from 'react-native';
 
+import type { ImageGalleryGridProps } from './types';
+
 import { VideoThumbnail } from '../../../components/Attachment/VideoThumbnail';
-import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContext';
+import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContextBase';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useStateStore } from '../../../hooks/useStateStore';
 import { useViewport } from '../../../hooks/useViewport';
@@ -11,7 +13,7 @@ import type {
   ImageGalleryState,
 } from '../../../state-store/image-gallery-state-store';
 import { FileTypes } from '../../../types/types';
-import { StreamBottomSheetModalFlatList } from '../../UIComponents';
+import { StreamBottomSheetModalFlatList } from '../../UIComponents/StreamBottomSheetModalFlatList';
 
 export type ImageGalleryGridImageComponent = ({
   item,
@@ -51,11 +53,6 @@ const GridImage = ({ item }: { item: GridImageItem }) => {
 
 const renderItem = ({ item }: { item: GridImageItem }) => <GridImage item={item} />;
 
-export type ImageGalleryGridProps = {
-  closeGridView: () => void;
-  numberOfImageGalleryGridColumns?: number;
-};
-
 const imageGallerySelector = (state: ImageGalleryState) => ({
   assets: state.assets,
 });

package/src/components/ImageGallery/components/types.ts

@@ -0,0 +1,25 @@
+import type React from 'react';
+
+import type { SharedValue } from 'react-native-reanimated';
+
+export type ImageGalleryVideoControlProps = {
+  attachmentId: string;
+};
+
+export type ImageGalleryHeaderProps = {
+  opacity: SharedValue<number>;
+  visible: SharedValue<number>;
+};
+
+export type ImageGalleryFooterProps = {
+  accessibilityLabel: string;
+  ImageGalleryVideoControls?: React.ComponentType<ImageGalleryVideoControlProps>;
+  opacity: SharedValue<number>;
+  openGridView: () => void;
+  visible: SharedValue<number>;
+};
+
+export type ImageGalleryGridProps = {
+  closeGridView: () => void;
+  numberOfImageGalleryGridColumns?: number;
+};

package/src/components/ImageGallery/hooks/useImageGalleryVideoPlayer.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 
-import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContext';
+import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContextBase';
 import { VideoPlayerOptions } from '../../../state-store/video-player';
 
 export type UseImageGalleryVideoPlayerProps = VideoPlayerOptions;