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

package/src/components/UIComponents/EmptyList.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { I18nManager, StyleSheet, Text, View } from 'react-native';
+
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { IconProps } from '../../icons/utils/base';
+import { primitives } from '../../theme';
+
+export type EmptyListProps = {
+  /**
+   * Icon component to render. Its size and color are set by `EmptyList`.
+   */
+  icon: React.ComponentType<IconProps>;
+  /**
+   * Title text shown below the icon.
+   */
+  title: string;
+  /**
+   * Optional supporting text shown below the title.
+   */
+  subtitle?: string;
+};
+
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
+export const EmptyList = ({ icon: Icon, subtitle, title }: EmptyListProps) => {
+  const {
+    theme: {
+      emptyList: { container, subtitle: subtitleStyle, title: titleStyle },
+      semantics,
+    },
+  } = useTheme();
+
+  return (
+    <View style={[styles.container, container]} testID='empty-list'>
+      <Icon stroke={semantics.textTertiary} size={32} />
+      <View style={styles.content}>
+        <Text style={[styles.title, { color: semantics.textPrimary }, titleStyle]}>{title}</Text>
+        {subtitle ? (
+          <Text style={[styles.subtitle, { color: semantics.textSecondary }, subtitleStyle]}>
+            {subtitle}
+          </Text>
+        ) : null}
+      </View>
+    </View>
+  );
+};
+
+EmptyList.displayName = 'EmptyList{emptyList}';
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    gap: primitives.spacingSm,
+    height: '100%',
+    justifyContent: 'center',
+    paddingHorizontal: primitives.spacingMd,
+    paddingVertical: primitives.spacing3xl,
+    width: '100%',
+  },
+  content: {
+    alignItems: 'center',
+    gap: primitives.spacingXs,
+    width: '100%',
+  },
+  subtitle: {
+    fontSize: primitives.typographyFontSizeMd,
+    fontWeight: primitives.typographyFontWeightRegular,
+    lineHeight: primitives.typographyLineHeightNormal,
+    textAlign: 'center',
+    writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
+  },
+  title: {
+    fontSize: primitives.typographyFontSizeMd,
+    fontWeight: primitives.typographyFontWeightSemiBold,
+    lineHeight: primitives.typographyLineHeightNormal,
+    textAlign: 'center',
+    writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
+  },
+});

package/src/components/UIComponents/PortalWhileClosingView.tsx

@@ -130,10 +130,6 @@ const useSyncingApi = (portalHostName: string, registrationId: string) => {
         y: y + (Platform.OS === 'android' ? insets.top : 0),
       };
 
-      if (!width || !height) {
-        return;
-      }
-
       placeholderLayout.value = { h: height, w: width };
 
       setClosingPortalLayout(portalHostName, registrationId, {

package/src/components/UIComponents/__tests__/EmptyList.test.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react-native';
+
+import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
+import { Pin } from '../../../icons/pin';
+import { EmptyList } from '../EmptyList';
+
+type EmptyListProps = React.ComponentProps<typeof EmptyList>;
+
+const renderComponent = (props: Partial<EmptyListProps> = {}) =>
+  render(
+    <ThemeProvider theme={defaultTheme}>
+      <EmptyList icon={Pin} title='No pinned messages' {...props} />
+    </ThemeProvider>,
+  );
+
+describe('EmptyList', () => {
+  it('renders the empty-list testID', () => {
+    renderComponent();
+    expect(screen.getByTestId('empty-list')).toBeTruthy();
+  });
+
+  it('renders the title text', () => {
+    renderComponent({ title: 'Nothing here' });
+    expect(screen.getByText('Nothing here')).toBeTruthy();
+  });
+
+  it('renders the subtitle when provided', () => {
+    renderComponent({ subtitle: 'Long-press a message to pin it to the chat' });
+    expect(screen.getByText('Long-press a message to pin it to the chat')).toBeTruthy();
+  });
+
+  it('does not render a subtitle when omitted', () => {
+    renderComponent({ subtitle: undefined });
+    expect(screen.queryByText('Long-press a message to pin it to the chat')).toBeNull();
+  });
+
+  it('honors a custom container style override from the theme', () => {
+    const customTheme = {
+      ...defaultTheme,
+      emptyList: {
+        container: { backgroundColor: 'rgb(255, 0, 0)' },
+        subtitle: {},
+        title: {},
+      },
+    };
+
+    render(
+      <ThemeProvider theme={customTheme}>
+        <EmptyList icon={Pin} title='Empty' />
+      </ThemeProvider>,
+    );
+
+    const container = screen.getByTestId('empty-list');
+    const flattened = Array.isArray(container.props.style)
+      ? Object.assign({}, ...container.props.style.flat(Infinity).filter(Boolean))
+      : container.props.style;
+    expect(flattened.backgroundColor).toBe('rgb(255, 0, 0)');
+  });
+
+  it('honors custom title and subtitle style overrides from the theme', () => {
+    const customTheme = {
+      ...defaultTheme,
+      emptyList: {
+        container: {},
+        subtitle: { color: 'rgb(0, 0, 255)' },
+        title: { color: 'rgb(0, 255, 0)' },
+      },
+    };
+
+    render(
+      <ThemeProvider theme={customTheme}>
+        <EmptyList icon={Pin} subtitle='Subtitle' title='Title' />
+      </ThemeProvider>,
+    );
+
+    const flatten = (node: { props: { style: unknown } }) =>
+      Array.isArray(node.props.style)
+        ? Object.assign({}, ...(node.props.style as unknown[]).flat(Infinity).filter(Boolean))
+        : node.props.style;
+
+    const title = screen.getByText('Title') as unknown as { props: { style: unknown } };
+    const subtitle = screen.getByText('Subtitle') as unknown as { props: { style: unknown } };
+
+    expect((flatten(title) as { color?: string }).color).toBe('rgb(0, 255, 0)');
+    expect((flatten(subtitle) as { color?: string }).color).toBe('rgb(0, 0, 255)');
+  });
+});

package/src/components/UIComponents/index.ts

@@ -1,5 +1,7 @@
 export * from './BottomSheetModal';
+export * from './ClippingFadeBottom';
 export * from './StreamBottomSheetModalFlatList';
+export * from './EmptyList';
 export * from './EmptySearchResult';
 export * from './ImageBackground';
 export * from './SearchInput';

package/src/components/index.ts

@@ -28,6 +28,7 @@ export * from './AutoCompleteInput/AutoCompleteSuggestionHeader';
 export * from './AutoCompleteInput/AutoCompleteSuggestionItem';
 export * from './AutoCompleteInput/AutoCompleteSuggestionList';
 export * from './AutoCompleteInput/InputView';
+export * from './AutoCompleteInput/mentionItems';
 
 export * from './Channel/Channel';
 export * from './Channel/hooks/useCreateChannelContext';

package/src/components/ui/Avatar/AvatarGroup.tsx

@@ -28,8 +28,8 @@ export type AvatarGroupProps = {
 // Sizes accounts for the border width as well
 const sizes = {
   '2xl': {
-    width: 64,
-    height: 64,
+    width: 80,
+    height: 80,
   },
   xl: {
     width: 48,
@@ -165,7 +165,7 @@ export type UserAvatarGroupProps = Pick<AvatarGroupProps, 'size'> & {
 };
 
 const userAvatarSize: Record<UserAvatarGroupProps['size'], UserAvatarProps['size']> = {
-  '2xl': 'lg',
+  '2xl': 'xl',
   xl: 'md',
   lg: 'sm',
 };

package/src/components/ui/Avatar/constants.ts

@@ -7,8 +7,8 @@ import { OnlineIndicatorProps } from '../Badge';
 
 const avatarSizes = {
   '2xl': {
-    height: 64,
-    width: 64,
+    height: 80,
+    width: 80,
   },
   xl: {
     height: 48,

package/src/contexts/channelFileAttachmentListContext/ChannelFileAttachmentListContext.tsx

@@ -0,0 +1,67 @@
+import React, { PropsWithChildren, useContext, useState } from 'react';
+
+import { Channel, MessageSearchSource } from 'stream-chat';
+
+import { useChatContext } from '..';
+import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
+import { isTestEnvironment } from '../utils/isTestEnvironment';
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export type ChannelFileAttachmentListContextValue = {
+  channel: Channel;
+  searchSource: MessageSearchSource;
+};
+
+export const ChannelFileAttachmentListContext = React.createContext(
+  DEFAULT_BASE_CONTEXT_VALUE as ChannelFileAttachmentListContextValue,
+);
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export const ChannelFileAttachmentListProvider = ({
+  channel,
+  children,
+}: PropsWithChildren<{ channel: Channel }>) => {
+  const { client } = useChatContext();
+  const [searchSource] = useState(() => {
+    const source = new MessageSearchSource(client, {
+      allowEmptySearchString: true,
+      pageSize: 25,
+      resetOnNewSearchQuery: false,
+    });
+    source.messageSearchChannelFilters = { cid: channel.cid, members: undefined };
+    source.messageSearchFilters = {
+      $or: [{ 'attachments.type': 'file' }, { 'attachments.type': 'audio' }],
+    };
+    // Newest first so the list groups cleanly under month section headers.
+    source.messageSearchSort = { created_at: -1 };
+    source.activate();
+    return source;
+  });
+
+  return (
+    <ChannelFileAttachmentListContext.Provider value={{ channel, searchSource }}>
+      {children}
+    </ChannelFileAttachmentListContext.Provider>
+  );
+};
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export const useChannelFileAttachmentListContext = () => {
+  const contextValue = useContext(
+    ChannelFileAttachmentListContext,
+  ) as unknown as ChannelFileAttachmentListContextValue;
+
+  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
+    throw new Error(
+      'The useChannelFileAttachmentListContext hook was called outside of the ChannelFileAttachmentListContext provider. Render the file attachment list UI inside a ChannelFileAttachmentListProvider.',
+    );
+  }
+
+  return contextValue;
+};

package/src/contexts/channelMediaListContext/ChannelMediaListContext.tsx

@@ -0,0 +1,68 @@
+import React, { PropsWithChildren, useContext, useState } from 'react';
+
+import { Channel, MessageSearchSource } from 'stream-chat';
+
+import { useChatContext } from '..';
+import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
+import { isTestEnvironment } from '../utils/isTestEnvironment';
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export type ChannelMediaListContextValue = {
+  channel: Channel;
+  searchSource: MessageSearchSource;
+};
+
+export const ChannelMediaListContext = React.createContext(
+  DEFAULT_BASE_CONTEXT_VALUE as ChannelMediaListContextValue,
+);
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export const ChannelMediaListProvider = ({
+  channel,
+  children,
+}: PropsWithChildren<{ channel: Channel }>) => {
+  const { client } = useChatContext();
+  const [searchSource] = useState(() => {
+    const source = new MessageSearchSource(client, {
+      allowEmptySearchString: true,
+      pageSize: 25,
+      resetOnNewSearchQuery: false,
+    });
+    source.messageSearchChannelFilters = { cid: channel.cid, members: undefined };
+    source.messageSearchFilters = {
+      'attachments.type': { $in: ['image', 'video'] },
+      type: undefined,
+    };
+    // Newest media first so the grid reads top-to-bottom from most recent.
+    source.messageSearchSort = { created_at: -1 };
+    source.activate();
+    return source;
+  });
+
+  return (
+    <ChannelMediaListContext.Provider value={{ channel, searchSource }}>
+      {children}
+    </ChannelMediaListContext.Provider>
+  );
+};
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export const useChannelMediaListContext = () => {
+  const contextValue = useContext(
+    ChannelMediaListContext,
+  ) as unknown as ChannelMediaListContextValue;
+
+  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
+    throw new Error(
+      'The useChannelMediaListContext hook was called outside of the ChannelMediaListContext provider. Render the media list UI inside a ChannelMediaListProvider.',
+    );
+  }
+
+  return contextValue;
+};

package/src/contexts/channelPinnedMessageListContext/ChannelPinnedMessageListContext.tsx

@@ -0,0 +1,72 @@
+import React, { PropsWithChildren, useContext, useState } from 'react';
+
+import { Channel, MessageSearchSource } from 'stream-chat';
+
+import { useChatContext } from '..';
+import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
+import { isTestEnvironment } from '../utils/isTestEnvironment';
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export type ChannelPinnedMessageListContextValue = {
+  channel: Channel;
+  searchSource: MessageSearchSource;
+};
+
+export const ChannelPinnedMessageListContext = React.createContext(
+  DEFAULT_BASE_CONTEXT_VALUE as ChannelPinnedMessageListContextValue,
+);
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export const ChannelPinnedMessageListProvider = ({
+  channel,
+  children,
+}: PropsWithChildren<{ channel: Channel }>) => {
+  const { client } = useChatContext();
+  const [searchSource] = useState(() => {
+    const source = new MessageSearchSource(
+      client,
+      { pageSize: 25, allowEmptySearchString: true, resetOnNewSearchQuery: false },
+      {
+        messageSearch: {
+          initialFilterConfig: {
+            $or: {
+              enabled: true,
+              generate: ({ searchQuery }) => (searchQuery ? { text: { $q: searchQuery } } : {}),
+            },
+          },
+        },
+      },
+    );
+    source.messageSearchChannelFilters = { cid: channel.cid, members: undefined };
+    source.messageSearchFilters = { pinned: true, type: undefined };
+    source.activate();
+    return source;
+  });
+
+  return (
+    <ChannelPinnedMessageListContext.Provider value={{ channel, searchSource }}>
+      {children}
+    </ChannelPinnedMessageListContext.Provider>
+  );
+};
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export const useChannelPinnedMessageListContext = () => {
+  const contextValue = useContext(
+    ChannelPinnedMessageListContext,
+  ) as unknown as ChannelPinnedMessageListContextValue;
+
+  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
+    throw new Error(
+      'The useChannelPinnedMessageListContext hook was called outside of the ChannelPinnedMessageListContext provider. Render the pinned message list UI inside a ChannelPinnedMessageListProvider.',
+    );
+  }
+
+  return contextValue;
+};

package/src/contexts/componentsContext/defaultComponents.ts

@@ -24,7 +24,10 @@ import { AttachmentPickerContent } from '../../components/AttachmentPicker/compo
 import { AttachmentPickerSelectionBar } from '../../components/AttachmentPicker/components/AttachmentPickerSelectionBar';
 import { ImageOverlaySelectedComponent } from '../../components/AttachmentPicker/components/ImageOverlaySelectedComponent';
 import { AutoCompleteSuggestionHeader } from '../../components/AutoCompleteInput/AutoCompleteSuggestionHeader';
-import { AutoCompleteSuggestionItem } from '../../components/AutoCompleteInput/AutoCompleteSuggestionItem';
+import {
+  AutoCompleteSuggestionItem,
+  MentionSuggestionItem,
+} from '../../components/AutoCompleteInput/AutoCompleteSuggestionItem';
 import { AutoCompleteSuggestionList } from '../../components/AutoCompleteInput/AutoCompleteSuggestionList';
 import { InputView } from '../../components/AutoCompleteInput/InputView';
 import { ChannelDetailsContent } from '../../components/ChannelDetails/ChannelDetails';
@@ -33,7 +36,9 @@ import {
   ChannelDetailsActionsSection,
   ChannelDetailsActionItem,
   ChannelDetailsMemberSection,
+  ChannelDetailsNavigationSection,
   ChannelDetailsProfile,
+  ChannelDetailsEditButton,
   ChannelDetailsNavHeader,
   ChannelEditDetails,
   ChannelEditImageSheet,
@@ -41,6 +46,12 @@ import {
   ChannelMemberActionsSheet,
   ChannelMemberItem,
   ChannelMemberList,
+  FileAttachmentItem,
+  FileAttachmentList,
+  MediaItem,
+  MediaList,
+  PinnedMessageItem,
+  PinnedMessageList,
 } from '../../components/ChannelDetails/components';
 import { ChannelListFooterLoadingIndicator } from '../../components/ChannelList/ChannelListFooterLoadingIndicator';
 import { ChannelListHeaderErrorIndicator } from '../../components/ChannelList/ChannelListHeaderErrorIndicator';
@@ -196,6 +207,7 @@ const components = {
   AutoCompleteSuggestionHeader,
   AutoCompleteSuggestionItem,
   AutoCompleteSuggestionList,
+  MentionSuggestionItem,
   ChannelDetailsBottomSheet,
   CooldownTimer,
   CircularProgressIndicator,
@@ -311,8 +323,10 @@ const components = {
   ChannelDetailsActionsSection,
   ChannelDetailsActionItem,
   ChannelDetailsMemberSection,
+  ChannelDetailsNavigationSection,
   ChannelDetailsProfile,
   ChannelDetailsContent,
+  ChannelDetailsEditButton,
   ChannelDetailsNavHeader,
   ChannelEditDetails,
   ChannelEditImageSheet,
@@ -320,6 +334,12 @@ const components = {
   ChannelMemberActionsSheet,
   ChannelMemberItem,
   ChannelMemberList,
+  FileAttachmentItem,
+  FileAttachmentList,
+  MediaItem,
+  MediaList,
+  PinnedMessageItem,
+  PinnedMessageList,
 
   // Thread
   ThreadMessageComposer: MessageComposer,
@@ -359,7 +379,6 @@ const components = {
  */
 export interface OptionalComponentOverrides {
   AttachmentPickerIOSSelectMorePhotos?: React.ComponentType;
-  ChannelDetailsNavigationSection?: React.ComponentType;
   ChatLoadingIndicator?: React.ComponentType | null;
   CreatePollContent?: React.ComponentType;
   Input?: React.ComponentType<{

package/src/contexts/index.ts

@@ -32,6 +32,9 @@ export * from './utils/getDisplayName';
 export * from './channelDetailsContext';
 export * from './channelAddMembersContext/ChannelAddMembersContext';
 export * from './channelEditDetailsContext';
+export * from './channelFileAttachmentListContext/ChannelFileAttachmentListContext';
+export * from './channelPinnedMessageListContext/ChannelPinnedMessageListContext';
+export * from './channelMediaListContext/ChannelMediaListContext';
 export * from './pollContext';
 export * from './liveLocationManagerContext';
 export * from './audioPlayerContext/AudioPlayerContext';