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

package/src/components/ChannelDetails/components/navigation-section/MediaListLoadingSkeleton.tsx

@@ -0,0 +1,66 @@
+import React, { useMemo } from 'react';
+import { StyleSheet, useWindowDimensions, View } from 'react-native';
+
+import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
+import { primitives } from '../../../../theme';
+import { NativeShimmerView } from '../../../UIComponents/NativeShimmerView';
+
+const NUMBER_OF_COLUMNS = 3;
+const NUMBER_OF_ROWS = 6;
+const GRID_GAP = primitives.spacingXxxs;
+const ANIMATION_TIME = 1000;
+
+/**
+ * Grid of shimmering placeholder tiles shown while the media list is loading.
+ *
+ * @experimental This component is experimental and is subject to change.
+ */
+export const MediaListLoadingSkeleton = () => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+  const { width } = useWindowDimensions();
+  const styles = useStyles();
+
+  const tileSize = (width - GRID_GAP * (NUMBER_OF_COLUMNS - 1)) / NUMBER_OF_COLUMNS;
+
+  return (
+    <View style={styles.container} testID='media-list-loading-skeleton'>
+      {Array.from({ length: NUMBER_OF_ROWS }).map((_, rowIndex) => (
+        <View key={rowIndex} style={styles.row}>
+          {Array.from({ length: NUMBER_OF_COLUMNS }).map((__, columnIndex) => (
+            <View key={columnIndex} style={[styles.tile, { height: tileSize, width: tileSize }]}>
+              <NativeShimmerView
+                baseColor={semantics.backgroundCoreSurfaceDefault}
+                duration={ANIMATION_TIME}
+                gradientColor={semantics.skeletonLoadingHighlight}
+                style={StyleSheet.absoluteFill}
+              />
+            </View>
+          ))}
+        </View>
+      ))}
+    </View>
+  );
+};
+
+MediaListLoadingSkeleton.displayName = 'MediaListLoadingSkeleton';
+
+const useStyles = () =>
+  useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          gap: GRID_GAP,
+        },
+        row: {
+          flexDirection: 'row',
+          gap: GRID_GAP,
+        },
+        tile: {
+          borderRadius: primitives.radiusXxs,
+          overflow: 'hidden',
+        },
+      }),
+    [],
+  );

package/src/components/ChannelDetails/components/navigation-section/PinnedMessageItem.tsx

@@ -0,0 +1,94 @@
+import React, { useMemo } from 'react';
+import { I18nManager, StyleSheet, Text, View } from 'react-native';
+
+import type { Channel, MessageResponse } from 'stream-chat';
+
+import { useComponentsContext } from '../../../../contexts';
+import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
+import { primitives } from '../../../../theme';
+import { ChannelPreviewStatusProps } from '../../../ChannelPreview/ChannelPreviewStatus';
+import { UserAvatar } from '../../../ui/Avatar/UserAvatar';
+
+export type PinnedMessageItemProps = {
+  /** The channel the pinned message belongs to. */
+  channel: Channel;
+  /** The pinned message to render. */
+  message: MessageResponse;
+} & { formatMessageDate?: ChannelPreviewStatusProps['formatLatestMessageDate'] };
+
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
+export const PinnedMessageItem = (props: PinnedMessageItemProps) => {
+  const { channel, message, formatMessageDate } = props;
+  const {
+    theme: {
+      channelDetails: { pinnedMessageItem },
+      semantics,
+    },
+  } = useTheme();
+  const { ChannelPreviewLastMessage, ChannelPreviewStatus } = useComponentsContext();
+  const styles = useStyles();
+
+  const senderName = message.user?.name || message.user?.id || '';
+
+  return (
+    <View
+      style={[styles.container, pinnedMessageItem.container]}
+      testID={`pinned-message-item-${message.id}`}
+    >
+      {message.user ? <UserAvatar size='lg' user={message.user} /> : null}
+      <View style={[styles.content, pinnedMessageItem.content]}>
+        <View style={[styles.title, pinnedMessageItem.title]}>
+          <Text
+            ellipsizeMode='tail'
+            numberOfLines={1}
+            style={[styles.name, { color: semantics.textPrimary }, pinnedMessageItem.name]}
+          >
+            {senderName}
+          </Text>
+          <ChannelPreviewStatus
+            channel={channel}
+            lastMessage={message}
+            formatLatestMessageDate={formatMessageDate}
+          />
+        </View>
+        <ChannelPreviewLastMessage message={message}></ChannelPreviewLastMessage>
+      </View>
+    </View>
+  );
+};
+
+PinnedMessageItem.displayName = 'PinnedMessageItem{pinnedMessageItem}';
+
+const useStyles = () => {
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          alignItems: 'center',
+          flexDirection: 'row',
+          gap: primitives.spacingSm,
+          paddingHorizontal: primitives.spacingSm,
+          paddingVertical: primitives.spacingMd,
+        },
+        content: {
+          flex: 1,
+          gap: primitives.spacingXxxs,
+        },
+        name: {
+          flex: 1,
+          fontSize: primitives.typographyFontSizeMd,
+          fontWeight: primitives.typographyFontWeightRegular,
+          lineHeight: primitives.typographyLineHeightNormal,
+          writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
+        },
+        title: {
+          alignItems: 'center',
+          flexDirection: 'row',
+          gap: primitives.spacingXxs,
+        },
+      }),
+    [],
+  );
+};

package/src/components/ChannelDetails/components/navigation-section/PinnedMessageList.tsx

@@ -0,0 +1,198 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ActivityIndicator, FlatList, type FlatListProps, StyleSheet, View } from 'react-native';
+
+import type { MessageResponse, SearchSourceState } from 'stream-chat';
+
+import { PinnedMessageListLoadingSkeleton } from './PinnedMessageListLoadingSkeleton';
+
+import { useChannelDetailsContext } from '../../../../contexts/channelDetailsContext/channelDetailsContext';
+import {
+  ChannelPinnedMessageListProvider,
+  useChannelPinnedMessageListContext,
+} from '../../../../contexts/channelPinnedMessageListContext/ChannelPinnedMessageListContext';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
+import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
+import { getNotificationErrorOptions } from '../../../../hooks/actions/useChannelActions';
+import { useStateStore } from '../../../../hooks/useStateStore';
+import { Pin } from '../../../../icons/pin';
+import { primitives } from '../../../../theme';
+import { useNotificationApi } from '../../../Notifications/hooks/useNotificationApi';
+import { NotificationList } from '../../../Notifications/NotificationList';
+import { NotificationTargetProvider } from '../../../Notifications/NotificationTargetContext';
+import { EmptyList } from '../../../UIComponents/EmptyList';
+import { EmptySearchResult } from '../../../UIComponents/EmptySearchResult';
+import { SearchInput, SearchInputProps } from '../../../UIComponents/SearchInput';
+
+export type PinnedMessageListProps = {
+  /**
+   * Besides the existing default behavior of the pinned message list, you can attach
+   * additional props to the underlying React Native FlatList.
+   *
+   * See https://reactnative.dev/docs/flatlist#props for the full list.
+   */
+  additionalFlatListProps?: Partial<FlatListProps<MessageResponse>>;
+  searchInputProps?: SearchInputProps;
+};
+
+const keyExtractor = (message: MessageResponse) => message.id;
+
+const listStateSelector = (state: SearchSourceState<MessageResponse>) => ({
+  error: state.lastQueryError,
+  hasNext: state.hasNext,
+  loading: state.isLoading,
+  messages: state.items,
+  searchQuery: state.searchQuery,
+});
+
+const PinnedMessageListContent = ({
+  additionalFlatListProps,
+  searchInputProps,
+}: PinnedMessageListProps) => {
+  const { t } = useTranslationContext();
+  const {
+    theme: {
+      channelDetails: { pinnedMessageList },
+    },
+  } = useTheme();
+  const styles = useStyles();
+  const { PinnedMessageItem } = useComponentsContext();
+
+  const { addNotification } = useNotificationApi();
+
+  const { channel, searchSource } = useChannelPinnedMessageListContext();
+  const { error, hasNext, loading, messages, searchQuery } = useStateStore(
+    searchSource.state,
+    listStateSelector,
+  );
+
+  const initialized = useRef(false);
+  useEffect(() => {
+    if (!initialized.current) {
+      initialized.current = true;
+      searchSource.search();
+    }
+  }, [searchSource]);
+
+  const [isEmpty, setIsEmpty] = useState<boolean | undefined>(undefined);
+  useEffect(() => {
+    if (!messages || isEmpty !== undefined) return;
+    if (!searchSource.state.getLatestValue().searchQuery && messages.length === 0) {
+      setIsEmpty(true);
+    }
+  }, [isEmpty, messages, searchSource]);
+
+  useEffect(() => {
+    if (!error) {
+      return;
+    }
+    addNotification({
+      message: t('Failed to load pinned messages'),
+      options: {
+        ...getNotificationErrorOptions(error),
+        severity: 'error',
+        type: 'api:channel:query-pinned-messages:failed',
+      },
+      origin: { context: { channel }, emitter: 'ChannelPinnedMessageList' },
+    });
+  }, [error, addNotification, channel, t]);
+
+  const renderItem = useCallback(
+    ({ item }: { item: MessageResponse }) => <PinnedMessageItem channel={channel} message={item} />,
+    [channel, PinnedMessageItem],
+  );
+
+  const loadMore = useCallback(() => {
+    // hasNext is true by default, !!messages prevents calling search on initial load
+    if (hasNext && !!messages) {
+      searchSource.search();
+    }
+  }, [hasNext, messages, searchSource]);
+
+  const emptyState = loading ? (
+    <PinnedMessageListLoadingSkeleton />
+  ) : isEmpty ? (
+    <EmptyList
+      icon={Pin}
+      subtitle={t('Long-press a message to pin it to the chat')}
+      title={t('No pinned messages')}
+    />
+  ) : (
+    <EmptySearchResult label={t('No pinned messages')} />
+  );
+
+  const loadingMoreIndicator = (
+    <>{loading && messages && messages.length > 0 && <ActivityIndicator />}</>
+  );
+
+  return (
+    <View style={[styles.container, pinnedMessageList.container]}>
+      {!isEmpty && (
+        <SearchInput
+          value={searchQuery}
+          accessibilityLabel={t('a11y/Search pinned messages')}
+          onChangeText={(text) => {
+            searchSource.state.partialNext({ searchQuery: text });
+            searchSource.search(text);
+          }}
+          {...searchInputProps}
+        />
+      )}
+      <FlatList
+        contentContainerStyle={[styles.listContent, pinnedMessageList.listContent]}
+        data={messages}
+        keyboardDismissMode='interactive'
+        keyboardShouldPersistTaps='handled'
+        keyExtractor={keyExtractor}
+        ListEmptyComponent={emptyState}
+        ListFooterComponent={loadingMoreIndicator}
+        onEndReached={loadMore}
+        onEndReachedThreshold={0.2}
+        renderItem={renderItem}
+        style={[styles.list, pinnedMessageList.list]}
+        testID='pinned-message-list'
+        {...additionalFlatListProps}
+      />
+      <NotificationList />
+    </View>
+  );
+};
+
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
+export const PinnedMessageList = (props: PinnedMessageListProps) => {
+  const { channel } = useChannelDetailsContext();
+  const notificationHostId = channel?.cid ? `pinned-message-list:${channel.cid}` : undefined;
+
+  if (!notificationHostId) {
+    return null;
+  }
+
+  return (
+    <ChannelPinnedMessageListProvider channel={channel}>
+      <NotificationTargetProvider hostId={notificationHostId} panel='channel-details'>
+        <PinnedMessageListContent {...props} />
+      </NotificationTargetProvider>
+    </ChannelPinnedMessageListProvider>
+  );
+};
+
+const useStyles = () => {
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flex: 1,
+        },
+        list: {
+          flex: 1,
+        },
+        listContent: {
+          flexGrow: 1,
+          paddingBottom: primitives.spacingXl,
+        },
+      }),
+    [],
+  );
+};

package/src/components/ChannelDetails/components/navigation-section/PinnedMessageListLoadingSkeleton.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
+import { GenericListLoadingSkeleton } from '../../../UIComponents/GenericListLoadingSkeleton';
+
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
+export const PinnedMessageListLoadingSkeleton = () => {
+  const {
+    theme: { pinnedMessageListSkeleton },
+  } = useTheme();
+
+  return (
+    <GenericListLoadingSkeleton
+      skeleton={pinnedMessageListSkeleton}
+      testID='pinned-message-list-loading-skeleton'
+    />
+  );
+};
+
+PinnedMessageListLoadingSkeleton.displayName =
+  'PinnedMessageListLoadingSkeleton{pinnedMessageListSkeleton}';

package/src/components/ChannelDetails/components/navigation-section/index.ts

@@ -0,0 +1,10 @@
+export * from './FileAttachmentItem';
+export * from './FileAttachmentList';
+export * from './FileAttachmentListLoadingSkeleton';
+export * from './FileAttachmentListSectionHeader';
+export * from './MediaItem';
+export * from './MediaList';
+export * from './MediaListLoadingSkeleton';
+export * from './PinnedMessageItem';
+export * from './PinnedMessageList';
+export * from './PinnedMessageListLoadingSkeleton';

package/src/components/ChannelDetails/hooks/index.ts

@@ -1,6 +1,9 @@
 export * from './useChannelDetailsActionItems';
+export * from './useChannelDetailsNavigationItems';
 export * from './useChannelDetailsMemberStatusText';
 export * from './useChannelDetailsMembersPreview';
 export * from './useEditChannelImage';
+export * from './useFileAttachmentListSections';
+export * from './useMediaList';
 export * from './useUserActivityStatus';
 export * from './members';

package/src/components/ChannelDetails/hooks/useChannelDetailsNavigationItems.ts

@@ -0,0 +1,108 @@
+import React, { useMemo } from 'react';
+
+import { useChannelDetailsContext } from '../../../contexts/channelDetailsContext/channelDetailsContext';
+import type { TranslationContextValue } from '../../../contexts/translationContext/TranslationContext';
+import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+import { Picture } from '../../../icons';
+import { Folder } from '../../../icons/folder';
+
+import { Pin } from '../../../icons/pin';
+import type { IconProps } from '../../../icons/utils/base';
+
+/**
+ * Identifies a navigation row. The literals are the built-in sections rendered by default;
+ * consumers can also add their own rows with arbitrary section identifiers via `getNavigationItems`,
+ * so any string is allowed.
+ *
+ * @experimental This type is experimental and is subject to change.
+ */
+export type ChannelDetailsNavigationSectionType =
+  | 'pinned-messages'
+  | 'photos-and-videos'
+  | 'files'
+  | string;
+
+/**
+ * A single row in the channel details navigation section.
+ *
+ * @experimental This type is experimental and is subject to change.
+ */
+export type ChannelDetailsNavigationItem = {
+  /** Icon rendered at the start of the row and reused in the built-in modal header. */
+  Icon: React.ComponentType<IconProps>;
+  /** Already-translated label rendered for the row and its built-in modal header. */
+  label: string;
+  /** Identifies which built-in section this row represents. */
+  section: ChannelDetailsNavigationSectionType;
+  /**
+   * Fired when the user taps the row. Leave unset to keep the built-in behavior (opening the
+   * built-in modal for the section); set it to route the row somewhere else (e.g. your own screen).
+   */
+  onPress?: () => void;
+};
+
+/**
+ * Maps each navigation section to the icon and (translatable) label rendered for its row and,
+ * when opened, its modal header. The declaration order also drives the order of the rendered rows.
+ */
+const SECTION_CONFIG: Record<
+  'pinned-messages' | 'photos-and-videos' | 'files',
+  { Icon: React.ComponentType<IconProps>; label: string }
+> = {
+  'pinned-messages': { Icon: Pin, label: 'Pinned Messages' },
+  'photos-and-videos': { Icon: Picture, label: 'Photos & Videos' },
+  files: { Icon: Folder, label: 'Files' },
+};
+
+const SECTIONS = Object.keys(SECTION_CONFIG) as Array<keyof typeof SECTION_CONFIG>;
+
+export type ChannelDetailsNavigationItemsContext = {
+  t: TranslationContextValue['t'];
+};
+
+/**
+ * Customizes the navigation rows rendered by `ChannelDetailsNavigationSection`. Receives the
+ * built-in `defaultItems` (and a `context`) and returns the items to render. Map over
+ * `defaultItems` to set a row's `onPress` (e.g. to push your own screen), or add/remove rows. Any
+ * row whose `onPress` you leave unset keeps its built-in behavior (opening the built-in modal) —
+ * including sections added in future SDK versions.
+ *
+ * @experimental This type is experimental and is subject to change.
+ */
+export type GetChannelDetailsNavigationItems = (params: {
+  context: ChannelDetailsNavigationItemsContext;
+  defaultItems: ChannelDetailsNavigationItem[];
+}) => ChannelDetailsNavigationItem[];
+
+export const getChannelDetailsNavigationItems: GetChannelDetailsNavigationItems = ({
+  defaultItems,
+}) => defaultItems;
+
+/**
+ * Builds the navigation rows rendered by `ChannelDetailsNavigationSection`. Returns the items as a
+ * plain array — the section component owns the built-in modal and supplies the default open-modal
+ * behavior for any row without a custom `onPress`. Customize the rows by passing `getNavigationItems`
+ * to `ChannelDetails` (see {@link GetChannelDetailsNavigationItems}).
+ *
+ * @experimental This hook is experimental and is subject to change.
+ */
+export const useChannelDetailsNavigationItems = (): ChannelDetailsNavigationItem[] => {
+  const { t } = useTranslationContext();
+  const { getNavigationItems = getChannelDetailsNavigationItems } = useChannelDetailsContext();
+
+  const context = useMemo<ChannelDetailsNavigationItemsContext>(() => ({ t }), [t]);
+
+  const defaultItems = useMemo<ChannelDetailsNavigationItem[]>(
+    () =>
+      SECTIONS.map((section) => {
+        const { Icon, label } = SECTION_CONFIG[section];
+        return { Icon, label: t(label), section };
+      }),
+    [t],
+  );
+
+  return useMemo(
+    () => getNavigationItems({ context, defaultItems }),
+    [context, defaultItems, getNavigationItems],
+  );
+};

package/src/components/ChannelDetails/hooks/useFileAttachmentListSections.ts

@@ -0,0 +1,79 @@
+import { useMemo } from 'react';
+
+import {
+  type Attachment,
+  isAudioAttachment,
+  isFileAttachment,
+  isScrapedContent,
+  type MessageResponse,
+} from 'stream-chat';
+
+import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+import { getDateString } from '../../../utils/i18n/getDateString';
+
+/**
+ * A single file/audio attachment paired with the message it belongs to. The file attachment list
+ * renders one row per attachment, so a message with multiple file attachments yields multiple rows.
+ *
+ * @experimental This type is experimental and is subject to change.
+ */
+export type FileAttachmentTile = { attachment: Attachment; message: MessageResponse };
+
+export type FileAttachmentSection = { data: FileAttachmentTile[]; title: string };
+
+/**
+ * Gathers the file/audio attachments from a message, excluding scraped/OG link-preview content.
+ */
+const getFileAttachments = (message: MessageResponse): Attachment[] =>
+  (message.attachments ?? []).filter(
+    (attachment) =>
+      // We provide mime_type here to avoid attachments with mime_type being categorized as file
+      (isFileAttachment(attachment, attachment?.mime_type ? [attachment.mime_type] : []) ||
+        isAudioAttachment(attachment)) &&
+      !isScrapedContent(attachment),
+  );
+
+/**
+ * Gathers and filters the file/audio attachments from a list of messages, then groups them into
+ * newest-first month sections for the file attachment list. Each section's `data` is a flat list
+ * of `{ attachment, message }` tiles; messages without renderable file attachments are skipped.
+ *
+ * The month label is produced through the shared `getDateString` + translation-key
+ * pipeline used by message timestamps (see `useUserActivityStatus`), so the format
+ * follows the configured locale and can be customized via the
+ * `timestamp/FileAttachmentListSection` translation key.
+ * @experimental This hook is experimental and is subject to change.
+ */
+export const useFileAttachmentListSections = (
+  messages?: MessageResponse[],
+): FileAttachmentSection[] => {
+  const { t, tDateTimeParser } = useTranslationContext();
+
+  return useMemo<FileAttachmentSection[]>(() => {
+    if (!messages || messages.length === 0) {
+      return [];
+    }
+    const result: FileAttachmentSection[] = [];
+    for (const message of messages) {
+      const fileAttachments = getFileAttachments(message);
+      if (fileAttachments.length === 0) {
+        continue;
+      }
+      const formatted = getDateString({
+        date: message.created_at as string | Date | undefined,
+        t,
+        tDateTimeParser,
+        timestampTranslationKey: 'timestamp/FileAttachmentListSection',
+      });
+      const title = typeof formatted === 'string' ? formatted : String(formatted ?? '');
+      const tiles = fileAttachments.map((attachment) => ({ attachment, message }));
+      const lastSection = result[result.length - 1];
+      if (lastSection && lastSection.title === title) {
+        lastSection.data.push(...tiles);
+      } else {
+        result.push({ data: tiles, title });
+      }
+    }
+    return result;
+  }, [messages, t, tDateTimeParser]);
+};

package/src/components/ChannelDetails/hooks/useMediaList.ts

@@ -0,0 +1,51 @@
+import { useMemo } from 'react';
+
+import { type Attachment, isScrapedContent, type MessageResponse } from 'stream-chat';
+
+import { FileTypes } from '../../../types/types';
+
+/**
+ * A single image/video attachment paired with the message it belongs to. The media grid renders
+ * one tile per attachment, so a message with multiple media attachments yields multiple tiles.
+ *
+ * @experimental This type is experimental and is subject to change.
+ */
+export type MediaTile = {
+  attachment: Attachment;
+  message: MessageResponse;
+};
+
+/**
+ * Flattens search-result messages into one tile per renderable image/video attachment, applying
+ * the same attachment rules the message list uses to decide what counts as gallery media.
+ */
+const getMediaTiles = (messages: MessageResponse[] | undefined): MediaTile[] => {
+  if (!messages) {
+    return [];
+  }
+  const tiles: MediaTile[] = [];
+  for (const message of messages) {
+    if (!message.attachments) {
+      continue;
+    }
+    for (const attachment of message.attachments) {
+      if (
+        (attachment.type === FileTypes.Image || attachment.type === FileTypes.Video) &&
+        !isScrapedContent(attachment)
+      ) {
+        tiles.push({ attachment, message });
+      }
+    }
+  }
+  return tiles;
+};
+
+/**
+ * Gathers and filters the image/video attachments from a list of messages into a flat list of
+ * media tiles, ready to render in the media grid. Scraped/OG link-preview attachments and
+ * non-media attachments are excluded.
+ *
+ * @experimental This hook is experimental and is subject to change.
+ */
+export const useMediaList = (messages?: MessageResponse[]): MediaTile[] =>
+  useMemo(() => getMediaTiles(messages), [messages]);