stream-chat-react-native-core 9.3.1 → 9.4.0-beta.2

package/src/components/UIComponents/SearchInput.tsx

@@ -0,0 +1,93 @@
+import React, { useCallback, useRef, useState } from 'react';
+import { StyleSheet, TextInput, View } from 'react-native';
+
+import { Pressable } from 'react-native-gesture-handler';
+
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
+import { Search } from '../../icons/search';
+import { XCircle } from '../../icons/x-circle';
+import { primitives } from '../../theme';
+import type { IconRenderer } from '../ui/Button/Button';
+import { Input, InputProps } from '../ui/Input/Input';
+
+export type SearchInputProps = Partial<InputProps>;
+
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
+export const SearchInput = ({ onChangeText, ...props }: SearchInputProps) => {
+  const { t } = useTranslationContext();
+  const {
+    theme: { semantics },
+  } = useTheme();
+
+  const inputRef = useRef<TextInput>(null);
+  const [hasText, setHasText] = useState(() => Boolean(props.value || props.defaultValue));
+
+  const handleChangeText = useCallback(
+    (text: string) => {
+      setHasText(text.length > 0);
+      onChangeText?.(text);
+    },
+    [onChangeText],
+  );
+
+  const handleClear = useCallback(() => {
+    inputRef.current?.clear();
+    setHasText(false);
+    onChangeText?.('');
+  }, [onChangeText]);
+
+  const LeadingIcon: IconRenderer = useCallback(
+    () => <Search height={20} stroke={semantics.textSecondary} width={20} />,
+    [semantics.textSecondary],
+  );
+
+  const ClearIcon: IconRenderer = useCallback(
+    () => (
+      <Pressable
+        accessibilityLabel={t('a11y/Clear search')}
+        accessibilityRole='button'
+        hitSlop={30}
+        onPress={handleClear}
+        testID='clear-search'
+      >
+        <XCircle height={15} stroke={semantics.inputTextIcon} width={15} />
+      </Pressable>
+    ),
+    [handleClear, semantics.inputTextIcon, t],
+  );
+
+  return (
+    <View style={styles.container}>
+      <Input
+        ref={inputRef}
+        autoCapitalize='words'
+        autoCorrect={false}
+        containerStyle={styles.input}
+        helperText={false}
+        LeadingIcon={LeadingIcon}
+        placeholder={t('Search')}
+        testID='search-input'
+        TrailingIcon={hasText ? ClearIcon : undefined}
+        variant='outline'
+        {...props}
+        onChangeText={handleChangeText}
+      />
+    </View>
+  );
+};
+
+SearchInput.displayName = 'SearchInput{searchInput}';
+
+const styles = StyleSheet.create({
+  container: {
+    paddingBottom: primitives.spacingSm,
+    paddingHorizontal: primitives.spacingMd,
+    paddingTop: primitives.spacingXs,
+  },
+  input: {
+    borderRadius: primitives.radiusMax,
+  },
+});

package/src/components/UIComponents/SelectionCircle.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { Checkmark } from '../../icons/checkmark-1';
+import { primitives } from '../../theme';
+
+export type SelectionCircleProps = {
+  selected: boolean;
+};
+
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
+export const SelectionCircle = ({ selected }: SelectionCircleProps) => {
+  const {
+    theme: {
+      selectionCircle: { circle, circleSelected },
+      semantics,
+    },
+  } = useTheme();
+
+  if (selected) {
+    return (
+      <View
+        style={[
+          styles.circle,
+          { backgroundColor: semantics.accentPrimary, borderColor: semantics.accentPrimary },
+          circleSelected,
+        ]}
+      >
+        <Checkmark height={14} pathFill={semantics.textOnAccent} width={14} />
+      </View>
+    );
+  }
+
+  return <View style={[styles.circle, { borderColor: semantics.borderCoreDefault }, circle]} />;
+};
+
+SelectionCircle.displayName = 'SelectionCircle{selectionCircle}';
+
+const styles = StyleSheet.create({
+  circle: {
+    alignItems: 'center',
+    borderRadius: primitives.radiusMax,
+    borderWidth: 1,
+    height: 24,
+    justifyContent: 'center',
+    width: 24,
+  },
+});

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

@@ -0,0 +1,74 @@
+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 { EmptySearchResult } from '../EmptySearchResult';
+
+type EmptySearchResultProps = React.ComponentProps<typeof EmptySearchResult>;
+
+const renderComponent = (props: Partial<EmptySearchResultProps> = {}) =>
+  render(
+    <ThemeProvider theme={defaultTheme}>
+      <EmptySearchResult label='No results' {...props} />
+    </ThemeProvider>,
+  );
+
+describe('EmptySearchResult', () => {
+  it('renders the empty-search-result testID', () => {
+    renderComponent();
+
+    expect(screen.getByTestId('empty-search-result')).toBeTruthy();
+  });
+
+  it('renders the label text', () => {
+    renderComponent({ label: 'Nothing here' });
+
+    expect(screen.getByText('Nothing here')).toBeTruthy();
+  });
+
+  it('honors a custom container style override from the theme', () => {
+    const customTheme = {
+      ...defaultTheme,
+      emptySearchResult: {
+        container: { backgroundColor: 'rgb(255, 0, 0)' },
+        text: {},
+      },
+    };
+
+    render(
+      <ThemeProvider theme={customTheme}>
+        <EmptySearchResult label='Empty' />
+      </ThemeProvider>,
+    );
+
+    const container = screen.getByTestId('empty-search-result');
+    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 a custom text style override from the theme', () => {
+    const customTheme = {
+      ...defaultTheme,
+      emptySearchResult: {
+        container: {},
+        text: { color: 'rgb(0, 255, 0)' },
+      },
+    };
+
+    render(
+      <ThemeProvider theme={customTheme}>
+        <EmptySearchResult label='Empty' />
+      </ThemeProvider>,
+    );
+
+    const label = screen.getByText('Empty') as unknown as { props: { style: unknown } };
+    const flattened = Array.isArray(label.props.style)
+      ? Object.assign({}, ...(label.props.style as unknown[]).flat(Infinity).filter(Boolean))
+      : label.props.style;
+    expect((flattened as { color?: string }).color).toBe('rgb(0, 255, 0)');
+  });
+});

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

@@ -0,0 +1,98 @@
+import React from 'react';
+
+import { fireEvent, render, screen } from '@testing-library/react-native';
+
+import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
+import { TranslationProvider } from '../../../contexts/translationContext/TranslationContext';
+import { SearchInput } from '../SearchInput';
+
+type SearchInputProps = React.ComponentProps<typeof SearchInput>;
+
+const renderComponent = (props: Partial<SearchInputProps> = {}) =>
+  render(
+    <ThemeProvider theme={defaultTheme}>
+      <TranslationProvider
+        value={{
+          t: ((key: string) => key) as never,
+          tDateTimeParser: ((input: unknown) => input) as never,
+          userLanguage: 'en',
+        }}
+      >
+        <SearchInput accessibilityLabel='Search users' onChangeText={jest.fn()} {...props} />
+      </TranslationProvider>
+    </ThemeProvider>,
+  );
+
+describe('SearchInput', () => {
+  it('renders the search-input testID', () => {
+    renderComponent();
+
+    expect(screen.getByTestId('search-input')).toBeTruthy();
+  });
+
+  it('forwards the accessibilityLabel prop to the underlying TextInput', () => {
+    renderComponent({ accessibilityLabel: 'Search anything' });
+
+    expect(screen.getByTestId('search-input').props.accessibilityLabel).toBe('Search anything');
+  });
+
+  it('does not render the clear button when the input is empty', () => {
+    renderComponent();
+
+    expect(screen.queryByTestId('clear-search')).toBeNull();
+  });
+
+  it('shows the clear button after typing and hides it after clearing', () => {
+    renderComponent();
+
+    fireEvent.changeText(screen.getByTestId('search-input'), 'abc');
+    expect(screen.getByTestId('clear-search')).toBeTruthy();
+
+    fireEvent.press(screen.getByTestId('clear-search'));
+    expect(screen.queryByTestId('clear-search')).toBeNull();
+  });
+
+  it('calls onChangeText with each typed value', () => {
+    const onChangeText = jest.fn();
+    renderComponent({ onChangeText });
+
+    fireEvent.changeText(screen.getByTestId('search-input'), 'foo');
+    fireEvent.changeText(screen.getByTestId('search-input'), 'foobar');
+
+    expect(onChangeText).toHaveBeenNthCalledWith(1, 'foo');
+    expect(onChangeText).toHaveBeenNthCalledWith(2, 'foobar');
+  });
+
+  it('calls onChangeText with an empty string when the clear button is pressed', () => {
+    const onChangeText = jest.fn();
+    renderComponent({ onChangeText });
+
+    fireEvent.changeText(screen.getByTestId('search-input'), 'x');
+    fireEvent.press(screen.getByTestId('clear-search'));
+
+    expect(onChangeText).toHaveBeenLastCalledWith('');
+  });
+
+  it('shows the clear button on mount when an initial value is provided', () => {
+    renderComponent({ value: 'initial' });
+
+    expect(screen.getByTestId('clear-search')).toBeTruthy();
+  });
+
+  it('shows the clear button on mount when an initial defaultValue is provided', () => {
+    renderComponent({ defaultValue: 'initial' });
+
+    expect(screen.getByTestId('clear-search')).toBeTruthy();
+  });
+
+  it('hides the clear button when the text is deleted back to empty', () => {
+    renderComponent();
+
+    fireEvent.changeText(screen.getByTestId('search-input'), 'abc');
+    expect(screen.getByTestId('clear-search')).toBeTruthy();
+
+    fireEvent.changeText(screen.getByTestId('search-input'), '');
+    expect(screen.queryByTestId('clear-search')).toBeNull();
+  });
+});

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { render } from '@testing-library/react-native';
+
+import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
+import { Checkmark } from '../../../icons/checkmark-1';
+import { SelectionCircle } from '../SelectionCircle';
+
+const renderWithTheme = (
+  ui: React.ReactElement,
+  style?: Parameters<typeof ThemeProvider>[0]['style'],
+) =>
+  render(
+    <ThemeProvider style={style} theme={defaultTheme}>
+      {ui}
+    </ThemeProvider>,
+  );
+
+describe('SelectionCircle', () => {
+  it('renders the Checkmark child when selected', () => {
+    const { UNSAFE_queryAllByType } = renderWithTheme(<SelectionCircle selected />);
+
+    expect(UNSAFE_queryAllByType(Checkmark)).toHaveLength(1);
+  });
+
+  it('renders an empty circle when not selected', () => {
+    const { UNSAFE_queryAllByType } = renderWithTheme(<SelectionCircle selected={false} />);
+
+    expect(UNSAFE_queryAllByType(Checkmark)).toHaveLength(0);
+  });
+
+  it('applies theme.selectionCircle.circle override when not selected', () => {
+    const { UNSAFE_getByType } = renderWithTheme(<SelectionCircle selected={false} />, {
+      selectionCircle: { circle: { borderColor: 'red' } },
+    });
+
+    const view = UNSAFE_getByType(View);
+    expect(JSON.stringify(view.props.style)).toContain('"borderColor":"red"');
+  });
+
+  it('applies theme.selectionCircle.circleSelected override when selected', () => {
+    const { UNSAFE_getAllByType } = renderWithTheme(<SelectionCircle selected />, {
+      selectionCircle: { circleSelected: { borderColor: 'pink' } },
+    });
+
+    const [view] = UNSAFE_getAllByType(View);
+    expect(JSON.stringify(view.props.style)).toContain('"borderColor":"pink"');
+  });
+});

package/src/components/UIComponents/index.ts

@@ -1,6 +1,9 @@
 export * from './BottomSheetModal';
 export * from './StreamBottomSheetModalFlatList';
+export * from './EmptySearchResult';
 export * from './ImageBackground';
+export * from './SearchInput';
+export * from './SelectionCircle';
 export * from './SvgAwareImage';
 export * from './Spinner';
 export * from './SwipableWrapper';

package/src/components/index.ts

@@ -179,6 +179,7 @@ export * from './Notifications';
 
 export * from './ProgressControl/ProgressControl';
 export * from './ProgressControl/WaveProgressBar';
+export * from './ChannelDetails';
 export * from './Poll';
 
 export * from './Reply/Reply';

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

@@ -12,11 +12,25 @@ import { useA11yLabel } from '../../../a11y/hooks/useA11yLabel';
 import { useChannelPreviewDisplayPresence } from '../../../components/ChannelPreview/hooks/useChannelPreviewDisplayPresence';
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import { useChannelImage } from '../../../hooks/useChannelImage';
+import { useChannelName } from '../../../hooks/useChannelName';
 import { hashStringToNumber } from '../../../utils/utils';
 import { CompositeAccessibilityProbe } from '../../Accessibility/CompositeAccessibilityProbe';
+import { useChannelMembersState } from '../../ChannelList/hooks/useChannelMembersState';
 
 export type ChannelAvatarProps = {
   channel: Channel;
+  /**
+   * When true, the avatar renders based on `previewUri` instead of the
+   * channel's stored image. Useful for previewing a pending image change before
+   * it is saved. Defaults to false.
+   */
+  isPreview?: boolean;
+  /**
+   * Image to display while in preview mode (`isPreview` is true). A `string`
+   * shows that image; `null` shows the no-image fallback (member/user avatar).
+   */
+  previewUri?: string | null;
   showOnlineIndicator?: boolean;
   size?: 'lg' | 'xl' | '2xl';
   showBorder?: boolean;
@@ -26,7 +40,13 @@ export const ChannelAvatar = (props: ChannelAvatarProps) => {
   const { client } = useChatContext();
   const { channel } = props;
   const online = useChannelPreviewDisplayPresence(channel);
-  const { showOnlineIndicator = online, size = 'xl', showBorder = true } = props;
+  const {
+    isPreview = false,
+    previewUri = null,
+    showOnlineIndicator = online,
+    size = 'xl',
+    showBorder = true,
+  } = props;
 
   const {
     theme: { semantics },
@@ -36,20 +56,22 @@ export const ChannelAvatar = (props: ChannelAvatarProps) => {
   const index = ((hashedValue % 5) + 1) as 1 | 2 | 3 | 4 | 5;
   const avatarBackgroundColor = semantics[`avatarPaletteBg${index}`];
 
-  const channelImage = channel.data?.image;
+  const channelImage = useChannelImage(channel);
+  const imageToDisplay = isPreview ? previewUri : channelImage;
 
+  const members = useChannelMembersState(channel);
   const usersForGroup = useMemo(
-    () => Object.values(channel.state.members).map((member) => member.user as UserResponse),
-    [channel.state.members],
+    () => Object.values(members).map((member) => member.user as UserResponse),
+    [members],
   );
   const usersWithoutSelf = useMemo(
     () => usersForGroup.filter((user) => user.id !== client.user?.id),
     [usersForGroup, client.user?.id],
   );
 
-  const channelName = (channel.data?.name as string | undefined) ?? channel.cid;
+  const channelName = useChannelName(channel) ?? channel.cid;
 
-  const memberCount = Object.keys(channel.state.members).length;
+  const memberCount = Object.keys(members).length;
   const isGroup = !!channel.data?.name || memberCount > 2;
   const otherUserName = usersWithoutSelf[0]?.name || usersWithoutSelf[0]?.id;
   const labelParams = useMemo(
@@ -63,10 +85,10 @@ export const ChannelAvatar = (props: ChannelAvatarProps) => {
 
   return (
     <CompositeAccessibilityProbe label={accessibilityLabel}>
-      {channelImage ? (
+      {imageToDisplay ? (
         <Avatar
           backgroundColor={avatarBackgroundColor}
-          imageUrl={channelImage}
+          imageUrl={imageToDisplay}
           name={channelName}
           showBorder={showBorder}
           size={size}

package/src/components/ui/Avatar/__tests__/ChannelAvatar.test.tsx

@@ -0,0 +1,150 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react-native';
+import type { Channel } from 'stream-chat';
+
+import { ChatProvider } from '../../../../contexts/chatContext/ChatContext';
+import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../../contexts/themeContext/utils/theme';
+import * as useChannelImageModule from '../../../../hooks/useChannelImage';
+import * as useChannelNameModule from '../../../../hooks/useChannelName';
+import * as useChannelMembersStateModule from '../../../ChannelList/hooks/useChannelMembersState';
+import * as useChannelPreviewDisplayPresenceModule from '../../../ChannelPreview/hooks/useChannelPreviewDisplayPresence';
+import { ChannelAvatar } from '../ChannelAvatar';
+
+const avatarCalls: Array<{ imageUrl?: string }> = [];
+jest.mock('../Avatar', () => {
+  const RN = jest.requireActual('react-native');
+  const ReactActual = jest.requireActual('react');
+  return {
+    Avatar: (props: { imageUrl?: string }) => {
+      avatarCalls.push({ imageUrl: props.imageUrl });
+      return ReactActual.createElement(RN.View, { testID: 'avatar' });
+    },
+  };
+});
+
+jest.mock('../AvatarGroup', () => {
+  const RN = jest.requireActual('react-native');
+  const ReactActual = jest.requireActual('react');
+  return {
+    UserAvatarGroup: () => ReactActual.createElement(RN.View, { testID: 'user-avatar-group' }),
+  };
+});
+
+jest.mock('../UserAvatar', () => {
+  const RN = jest.requireActual('react-native');
+  const ReactActual = jest.requireActual('react');
+  return {
+    UserAvatar: () => ReactActual.createElement(RN.View, { testID: 'user-avatar' }),
+  };
+});
+
+const OWN_USER_ID = 'me';
+
+const buildChannel = (): Channel =>
+  ({
+    cid: 'messaging:test',
+    data: {},
+    on: () => ({ unsubscribe: () => undefined }),
+  }) as unknown as Channel;
+
+const buildMembers = (...ids: string[]) =>
+  Object.fromEntries(ids.map((id) => [id, { user: { id } }]));
+
+const renderAvatar = (props: Partial<React.ComponentProps<typeof ChannelAvatar>> = {}) =>
+  render(
+    <ThemeProvider theme={defaultTheme}>
+      <ChatProvider value={{ client: { user: { id: OWN_USER_ID } } } as never}>
+        <ChannelAvatar channel={buildChannel()} {...props} />
+      </ChatProvider>
+    </ThemeProvider>,
+  );
+
+describe('ChannelAvatar', () => {
+  beforeEach(() => {
+    avatarCalls.length = 0;
+    jest
+      .spyOn(useChannelPreviewDisplayPresenceModule, 'useChannelPreviewDisplayPresence')
+      .mockReturnValue(false);
+    jest.spyOn(useChannelNameModule, 'useChannelName').mockReturnValue('Channel Name');
+    jest.spyOn(useChannelImageModule, 'useChannelImage').mockReturnValue(undefined);
+    jest.spyOn(useChannelMembersStateModule, 'useChannelMembersState').mockReturnValue({});
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  describe('default (non-preview) mode', () => {
+    it('renders the stored channel image when present', () => {
+      jest
+        .spyOn(useChannelImageModule, 'useChannelImage')
+        .mockReturnValue('https://example.com/live.png');
+
+      renderAvatar();
+
+      expect(screen.getByTestId('avatar')).toBeTruthy();
+      expect(avatarCalls[avatarCalls.length - 1].imageUrl).toBe('https://example.com/live.png');
+    });
+
+    it('falls back to the user-avatar group when there is no image and 2+ other members', () => {
+      jest
+        .spyOn(useChannelMembersStateModule, 'useChannelMembersState')
+        .mockReturnValue(buildMembers(OWN_USER_ID, 'a', 'b') as never);
+
+      renderAvatar();
+
+      expect(screen.getByTestId('user-avatar-group')).toBeTruthy();
+      expect(screen.queryByTestId('avatar')).toBeNull();
+    });
+
+    it('falls back to a single user avatar when there is no image and at most one other member', () => {
+      jest
+        .spyOn(useChannelMembersStateModule, 'useChannelMembersState')
+        .mockReturnValue(buildMembers(OWN_USER_ID, 'a') as never);
+
+      renderAvatar();
+
+      expect(screen.getByTestId('user-avatar')).toBeTruthy();
+      expect(screen.queryByTestId('avatar')).toBeNull();
+    });
+
+    it('ignores previewUri when isPreview is false', () => {
+      jest
+        .spyOn(useChannelImageModule, 'useChannelImage')
+        .mockReturnValue('https://example.com/live.png');
+
+      renderAvatar({ isPreview: false, previewUri: 'file://picked.png' });
+
+      expect(avatarCalls[avatarCalls.length - 1].imageUrl).toBe('https://example.com/live.png');
+    });
+  });
+
+  describe('preview mode', () => {
+    it('renders the previewUri instead of the stored channel image', () => {
+      jest
+        .spyOn(useChannelImageModule, 'useChannelImage')
+        .mockReturnValue('https://example.com/live.png');
+
+      renderAvatar({ isPreview: true, previewUri: 'file://picked.png' });
+
+      expect(screen.getByTestId('avatar')).toBeTruthy();
+      expect(avatarCalls[avatarCalls.length - 1].imageUrl).toBe('file://picked.png');
+    });
+
+    it('falls back to the member avatars when previewUri is null (reset), ignoring the stored image', () => {
+      jest
+        .spyOn(useChannelImageModule, 'useChannelImage')
+        .mockReturnValue('https://example.com/live.png');
+      jest
+        .spyOn(useChannelMembersStateModule, 'useChannelMembersState')
+        .mockReturnValue(buildMembers(OWN_USER_ID, 'a', 'b') as never);
+
+      renderAvatar({ isPreview: true, previewUri: null });
+
+      expect(screen.getByTestId('user-avatar-group')).toBeTruthy();
+      expect(screen.queryByTestId('avatar')).toBeNull();
+    });
+  });
+});