stream-chat-react-native-core 9.4.0-beta.11 → 9.4.0-beta.12

package/src/components/ChannelDetails/components/ChannelDetailsEditButton.tsx

@@ -0,0 +1,50 @@
+import React, { useCallback, useState } from 'react';
+
+import { ChannelEditDetailsModal } from './ChannelEditDetailsModal';
+
+import { useChannelDetailsContext } from '../../../contexts/channelDetailsContext/channelDetailsContext';
+import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+import { useChannelOwnCapabilities } from '../../../hooks/useChannelOwnCapabilities';
+import { useIsDirectChat } from '../../../hooks/useIsDirectChat';
+import { Button } from '../../ui/Button/Button';
+
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
+export const ChannelDetailsEditButton = () => {
+  const { channel, onEditChannelPress } = useChannelDetailsContext();
+  const { t } = useTranslationContext();
+  const ownCapabilities = useChannelOwnCapabilities(channel);
+  const canUpdateChannel = ownCapabilities?.includes('update-channel') ?? false;
+  const isDirect = useIsDirectChat(channel);
+  const [editModalVisible, setEditModalVisible] = useState(false);
+
+  const handleEditPress = useCallback(() => {
+    if (onEditChannelPress) {
+      onEditChannelPress();
+      return;
+    }
+    setEditModalVisible(true);
+  }, [onEditChannelPress]);
+
+  const handleEditModalClose = useCallback(() => setEditModalVisible(false), []);
+
+  if (!canUpdateChannel || isDirect) {
+    return null;
+  }
+
+  return (
+    <>
+      <Button
+        accessibilityLabelKey='a11y/Edit channel'
+        label={t('Edit')}
+        onPress={handleEditPress}
+        size='sm'
+        testID='channel-details-edit-button'
+        type='outline'
+        variant='secondary'
+      />
+      <ChannelEditDetailsModal onClose={handleEditModalClose} visible={editModalVisible} />
+    </>
+  );
+};

package/src/components/ChannelDetails/components/ChannelDetailsNavHeader.tsx

@@ -1,20 +1,19 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import { I18nManager, StyleSheet, Text, View } from 'react-native';
 
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import { ChannelEditDetailsModal } from './ChannelEditDetailsModal';
-
 import { useChannelDetailsContext } from '../../../contexts/channelDetailsContext/channelDetailsContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
-import { useChannelOwnCapabilities } from '../../../hooks/useChannelOwnCapabilities';
 import { useIsDirectChat } from '../../../hooks/useIsDirectChat';
 import { ChevronLeft } from '../../../icons/chevron-left';
 import { primitives } from '../../../theme';
 import { Button } from '../../ui/Button/Button';
 
 export type ChannelDetailsNavHeaderProps = {
+  /** Content rendered on the trailing side of the header (e.g. the edit button). */
+  action?: React.ReactNode;
   /** Override the auto-resolved screen title (1:1 → "Contact Info", group → "Group Info"). */
   title?: string;
 };
@@ -22,11 +21,9 @@ export type ChannelDetailsNavHeaderProps = {
 /**
  * @experimental This component is experimental and is subject to change.
  */
-export const ChannelDetailsNavHeader = ({ title }: ChannelDetailsNavHeaderProps) => {
-  const { channel, onBack, onEditChannelPress } = useChannelDetailsContext();
+export const ChannelDetailsNavHeader = ({ action, title }: ChannelDetailsNavHeaderProps) => {
+  const { channel, onBack } = useChannelDetailsContext();
   const { t } = useTranslationContext();
-  const ownCapabilities = useChannelOwnCapabilities(channel);
-  const canUpdateChannel = ownCapabilities?.includes('update-channel') ?? false;
   const {
     theme: {
       channelDetails: {
@@ -37,20 +34,9 @@ export const ChannelDetailsNavHeader = ({ title }: ChannelDetailsNavHeaderProps)
   } = useTheme();
   const isDirect = useIsDirectChat(channel);
   const styles = useStyles();
-  const [editModalVisible, setEditModalVisible] = useState(false);
 
   const resolvedTitle = title ?? (isDirect ? t('Contact Info') : t('Group Info'));
 
-  const handleEditPress = useCallback(() => {
-    if (onEditChannelPress) {
-      onEditChannelPress();
-      return;
-    }
-    setEditModalVisible(true);
-  }, [onEditChannelPress]);
-
-  const handleEditModalClose = useCallback(() => setEditModalVisible(false), []);
-
   return (
     <View
       style={[
@@ -83,20 +69,7 @@ export const ChannelDetailsNavHeader = ({ title }: ChannelDetailsNavHeaderProps)
           {resolvedTitle}
         </Text>
       </View>
-      <View style={[styles.sideContainer, styles.sideContainerRight]}>
-        {canUpdateChannel && !isDirect ? (
-          <Button
-            accessibilityLabelKey='a11y/Edit channel'
-            label={t('Edit')}
-            onPress={handleEditPress}
-            size='sm'
-            testID='channel-details-edit-button'
-            type='outline'
-            variant='secondary'
-          />
-        ) : null}
-      </View>
-      <ChannelEditDetailsModal onClose={handleEditModalClose} visible={editModalVisible} />
+      <View style={[styles.sideContainer, styles.sideContainerRight]}>{action ?? null}</View>
     </View>
   );
 };

package/src/components/ChannelDetails/components/ChannelDetailsNavigationSection.tsx

@@ -1,21 +1,26 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 
 import { ChannelDetailsActionItem } from './ChannelDetailsActionItem';
+import { ChannelDetailsModal } from './modal/Modal';
+import { ModalHeader } from './modal/ModalHeader';
 
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
+import { useOverlayContext } from '../../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { ChevronRight } from '../../../icons';
-import { File } from '../../../icons/file';
-import { ImageGrid } from '../../../icons/gallery';
-import { Pin } from '../../../icons/pin';
+import { ChevronLeft } from '../../../icons/chevron-left';
 import { primitives } from '../../../theme';
+import { ImageGallery } from '../../ImageGallery/ImageGallery';
+import {
+  type ChannelDetailsNavigationSectionType,
+  useChannelDetailsNavigationItems,
+} from '../hooks/useChannelDetailsNavigationItems';
 
 /**
  * @experimental This component is experimental and is subject to change.
  */
 export const ChannelDetailsNavigationSection = () => {
-  const { t } = useTranslationContext();
   const {
     theme: {
       channelDetails: { sectionCard: sectionCardOverride },
@@ -23,6 +28,36 @@ export const ChannelDetailsNavigationSection = () => {
     },
   } = useTheme();
   const styles = useStyles();
+  const { FileAttachmentList, MediaList, PinnedMessageList } = useComponentsContext();
+  const items = useChannelDetailsNavigationItems();
+  const [activeSection, setActiveSection] = useState<ChannelDetailsNavigationSectionType | null>(
+    null,
+  );
+  const { overlayOpacity, overlay } = useOverlayContext();
+  const closeModal = useCallback(() => setActiveSection(null), []);
+
+  const modalContent = useMemo(() => {
+    switch (activeSection) {
+      case 'pinned-messages':
+        return <PinnedMessageList />;
+      case 'photos-and-videos':
+        return (
+          <>
+            <MediaList />
+            {overlay === 'gallery' ? <ImageGallery overlayOpacity={overlayOpacity} /> : null}
+          </>
+        );
+      case 'files':
+        return <FileAttachmentList />;
+      default:
+        return null;
+    }
+  }, [activeSection, FileAttachmentList, MediaList, PinnedMessageList, overlayOpacity, overlay]);
+
+  const activeItem = useMemo(
+    () => items.find((item) => item.section === activeSection),
+    [activeSection, items],
+  );
 
   const chevron = useMemo(
     () => (
@@ -33,33 +68,46 @@ export const ChannelDetailsNavigationSection = () => {
     [semantics.textTertiary],
   );
 
+  const closeButtonProps = useMemo(
+    () => ({ type: 'ghost' as const, LeadingIcon: ChevronLeft }),
+    [],
+  );
+
   return (
-    <View
-      style={[
-        styles.sectionCard,
-        { backgroundColor: semantics.backgroundCoreSurfaceCard },
-        sectionCardOverride,
-      ]}
-    >
-      <ChannelDetailsActionItem
-        Icon={Pin}
-        label={t('Pinned Messages')}
-        testID='channel-details-pinned-messages'
-        trailing={chevron}
-      />
-      <ChannelDetailsActionItem
-        Icon={ImageGrid}
-        label={t('Photos & Videos')}
-        testID='channel-details-photos-and-videos'
-        trailing={chevron}
-      />
-      <ChannelDetailsActionItem
-        Icon={File}
-        label={t('Files')}
-        testID='channel-details-files'
-        trailing={chevron}
-      />
-    </View>
+    <>
+      <View
+        style={[
+          styles.sectionCard,
+          { backgroundColor: semantics.backgroundCoreSurfaceCard },
+          sectionCardOverride,
+        ]}
+      >
+        {items.map((item) => (
+          <ChannelDetailsActionItem
+            Icon={item.Icon}
+            key={item.section}
+            label={item.label}
+            onPress={item.onPress ?? (() => setActiveSection(item.section))}
+            testID={`channel-details-${item.section}`}
+            trailing={chevron}
+          />
+        ))}
+      </View>
+      <ChannelDetailsModal
+        onClose={closeModal}
+        visible={activeSection !== null}
+        presentationStyle='fullScreen'
+      >
+        {activeItem ? (
+          <ModalHeader
+            onClose={closeModal}
+            title={activeItem.label}
+            additionalCloseButtonProps={closeButtonProps}
+          />
+        ) : null}
+        {modalContent}
+      </ChannelDetailsModal>
+    </>
   );
 };
 

package/src/components/ChannelDetails/components/ChannelDetailsProfile.tsx

@@ -81,10 +81,11 @@ const useStyles = () => {
         container: {
           alignItems: 'center',
           gap: primitives.spacingMd,
+          paddingBottom: primitives.spacing2xl,
         },
         heading: {
           alignItems: 'center',
-          gap: primitives.spacingXs,
+          gap: primitives.spacingXxs,
           width: '100%',
         },
         subtitle: {

package/src/components/ChannelDetails/components/ChannelEditImageSheet.tsx

@@ -19,7 +19,7 @@ import { Camera } from '../../../icons/camera';
 import { Delete } from '../../../icons/delete';
 import { Picture } from '../../../icons/image';
 import type { IconProps } from '../../../icons/utils/base';
-import { NewClose } from '../../../icons/xmark';
+import { Cross } from '../../../icons/xmark-1';
 import type {
   EditChannelDetailsState,
   EditChannelImagePendingAction,
@@ -136,7 +136,7 @@ const ChannelEditImageSheetInner = () => {
           <Button
             accessibilityLabelKey='a11y/Close edit picture sheet'
             iconOnly
-            LeadingIcon={NewClose}
+            LeadingIcon={Cross}
             onPress={() => close()}
             size='md'
             testID='channel-edit-picture-sheet-close-button'

package/src/components/ChannelDetails/components/__tests__/navigation-section/FileAttachmentItem.test.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+
+import { fireEvent, render, screen } from '@testing-library/react-native';
+
+import type { Attachment, MessageResponse } from 'stream-chat';
+
+import { ThemeProvider } from '../../../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../../../contexts/themeContext/utils/theme';
+import { generateFileAttachment } from '../../../../../mock-builders/generator/attachment';
+import { generateMessage } from '../../../../../mock-builders/generator/message';
+import { FileAttachmentItem } from '../../navigation-section/FileAttachmentItem';
+
+const mockOpenUrlSafely = jest.fn();
+
+jest.mock('../../../../Attachment/utils/openUrlSafely', () => ({
+  openUrlSafely: (url?: string) => mockOpenUrlSafely(url),
+}));
+
+const mockFilePreviewProbe: { title?: string }[] = [];
+
+jest.mock('../../../../Attachment/FilePreview', () => {
+  const ReactLib = require('react');
+  const { Text } = require('react-native');
+  return {
+    FilePreview: ({ attachment }: { attachment: { title?: string } }) => {
+      mockFilePreviewProbe.push({ title: attachment.title });
+      return ReactLib.createElement(Text, null, attachment.title);
+    },
+  };
+});
+
+const tree = (
+  attachment: Attachment,
+  message: MessageResponse,
+  onPress?: React.ComponentProps<typeof FileAttachmentItem>['onPress'],
+) => (
+  <ThemeProvider theme={defaultTheme}>
+    <FileAttachmentItem attachment={attachment} message={message} onPress={onPress} />
+  </ThemeProvider>
+);
+
+describe('FileAttachmentItem', () => {
+  beforeEach(() => {
+    mockFilePreviewProbe.length = 0;
+  });
+
+  afterEach(() => jest.clearAllMocks());
+
+  it('renders the attachment preview', () => {
+    const file = generateFileAttachment({ title: 'a-file.pdf' });
+    const message = generateMessage({ id: 'm-1' }) as unknown as MessageResponse;
+
+    render(tree(file, message));
+
+    expect(mockFilePreviewProbe.map((p) => p.title)).toEqual(['a-file.pdf']);
+    expect(screen.getByTestId('file-attachment-item-m-1')).toBeTruthy();
+  });
+
+  it('opens the attachment url when a row is pressed', () => {
+    const file = generateFileAttachment({ asset_url: 'https://example.com/a.pdf', title: 'a.pdf' });
+    const message = generateMessage({ id: 'm-3' }) as unknown as MessageResponse;
+
+    render(tree(file, message));
+
+    fireEvent.press(screen.getByTestId('file-attachment-row-m-3'));
+    expect(mockOpenUrlSafely).toHaveBeenCalledWith('https://example.com/a.pdf');
+  });
+
+  it('calls the provided onPress with the attachment and message, overriding the default', () => {
+    const file = generateFileAttachment({ asset_url: 'https://example.com/a.pdf', title: 'a.pdf' });
+    const message = generateMessage({ id: 'm-4' }) as unknown as MessageResponse;
+    const onPress = jest.fn();
+
+    render(tree(file, message, onPress));
+
+    fireEvent.press(screen.getByTestId('file-attachment-row-m-4'));
+    expect(onPress).toHaveBeenCalledWith({ attachment: file, message });
+    expect(mockOpenUrlSafely).not.toHaveBeenCalled();
+  });
+});