stream-chat-react-native-core 9.4.1-beta.1 → 9.5.0-beta.2

package/src/components/ChannelDetails/components/members/ChannelMemberList.tsx

@@ -1,16 +1,37 @@
-import React, { useCallback, useMemo, useState } from 'react';
-import { ActivityIndicator, FlatList, type FlatListProps } from 'react-native';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { ActivityIndicator, FlatList, type FlatListProps, StyleSheet, View } from 'react-native';
 
-import type { ChannelMemberResponse } from 'stream-chat';
+import type { ChannelMemberResponse, SearchSourceState } from 'stream-chat';
 
 import { MemberListLoadingSkeleton } from './MemberListLoadingSkeleton';
 
 import { useChannelDetailsContext } from '../../../../contexts/channelDetailsContext/channelDetailsContext';
+import {
+  ChannelMemberListProvider,
+  useChannelMemberListContext,
+} from '../../../../contexts/channelMemberListContext/ChannelMemberListContext';
 import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
-import { useChannelAllMembers } from '../../hooks/members/useChannelAllMembers';
+import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
+import { getNotificationErrorOptions } from '../../../../hooks/actions/useChannelActions';
+import { useStateStore } from '../../../../hooks/useStateStore';
+import { primitives } from '../../../../theme';
+import { useNotificationApi } from '../../../Notifications/hooks/useNotificationApi';
+import { NotificationList } from '../../../Notifications/NotificationList';
+import { NotificationTargetProvider } from '../../../Notifications/NotificationTargetContext';
+import { EmptySearchResult } from '../../../UIComponents/EmptySearchResult';
+import { SearchInput, SearchInputProps } from '../../../UIComponents/SearchInput';
 
 const keyExtractor = (member: ChannelMemberResponse) => member.user?.id ?? member.user_id ?? '';
 
+const listStateSelector = (state: SearchSourceState<ChannelMemberResponse>) => ({
+  error: state.lastQueryError,
+  hasNext: state.hasNext,
+  loading: state.isLoading,
+  members: state.items,
+  searchQuery: state.searchQuery,
+});
+
 export type ChannelMemberListProps = {
   /**
    * Besides the existing default behavior of the members list, you can attach
@@ -19,18 +40,54 @@ export type ChannelMemberListProps = {
    * See https://reactnative.dev/docs/flatlist#props for the full list.
    */
   additionalFlatListProps?: Partial<FlatListProps<ChannelMemberResponse>>;
+  searchInputProps?: SearchInputProps;
 };
 
-/**
- * Lists all channel members.
- * @experimental This component is experimental and is subject to change.
- */
-export const ChannelMemberList = ({ additionalFlatListProps }: ChannelMemberListProps = {}) => {
-  const { channel, onMemberPress } = useChannelDetailsContext();
+const ChannelMemberListContent = ({
+  additionalFlatListProps,
+  searchInputProps,
+}: ChannelMemberListProps) => {
+  const { t } = useTranslationContext();
+  const {
+    theme: {
+      channelDetails: { memberList },
+    },
+  } = useTheme();
+  const { onMemberPress } = useChannelDetailsContext();
   const { ChannelMemberActionsSheet, ChannelMemberItem } = useComponentsContext();
-  const { hasMore, loading, loadMore, results } = useChannelAllMembers({ channel });
+  const { addNotification } = useNotificationApi();
+
+  const { channel, searchSource } = useChannelMemberListContext();
+  const { error, hasNext, loading, members, searchQuery } = useStateStore(
+    searchSource.state,
+    listStateSelector,
+  );
+
   const [selectedMember, setSelectedMember] = useState<ChannelMemberResponse | null>(null);
 
+  const initialized = useRef(false);
+  useEffect(() => {
+    if (!initialized.current) {
+      initialized.current = true;
+      searchSource.search();
+    }
+  }, [searchSource]);
+
+  useEffect(() => {
+    if (!error) {
+      return;
+    }
+    addNotification({
+      message: t('Failed to load members'),
+      options: {
+        ...getNotificationErrorOptions(error),
+        severity: 'error',
+        type: 'api:channel:query-members:failed',
+      },
+      origin: { context: { channel }, emitter: 'ChannelMemberList' },
+    });
+  }, [error, addNotification, channel, t]);
+
   const handleMemberActionsClose = useCallback(() => setSelectedMember(null), []);
 
   const handleMemberPress = useCallback(
@@ -51,24 +108,46 @@ export const ChannelMemberList = ({ additionalFlatListProps }: ChannelMemberList
     [ChannelMemberItem, handleMemberPress],
   );
 
-  const ListFooterComponent = useMemo(
-    () => (loading && results.length > 0 ? <ActivityIndicator /> : null),
-    [loading, results.length],
-  );
+  const loadMore = useCallback(() => {
+    // hasNext is true by default, !!members prevents calling search on initial load
+    if (hasNext && !!members) {
+      searchSource.search();
+    }
+  }, [hasNext, members, searchSource]);
 
-  if (loading && results.length === 0) {
-    return <MemberListLoadingSkeleton />;
-  }
+  const emptyState =
+    loading && !members ? (
+      <MemberListLoadingSkeleton />
+    ) : (
+      <EmptySearchResult label={t('No members found')} />
+    );
 
   return (
-    <>
+    <View style={[styles.container, memberList.container]}>
+      <SearchInput
+        accessibilityLabel={t('a11y/Search members')}
+        onChangeText={(text) => {
+          searchSource.state.partialNext({ searchQuery: text });
+          searchSource.search(text);
+        }}
+        value={searchQuery}
+        {...searchInputProps}
+      />
       <FlatList
-        data={results}
+        contentContainerStyle={[styles.listContent, memberList.listContent]}
+        data={members}
+        keyboardDismissMode='interactive'
+        keyboardShouldPersistTaps='handled'
         keyExtractor={keyExtractor}
-        ListFooterComponent={ListFooterComponent}
-        onEndReached={hasMore ? loadMore : undefined}
+        ListEmptyComponent={emptyState}
+        ListFooterComponent={
+          loading && members && members.length > 0 ? <ActivityIndicator /> : null
+        }
+        onEndReached={loadMore}
         onEndReachedThreshold={0.2}
         renderItem={renderItem}
+        style={[styles.list, memberList.list]}
+        testID='channel-member-list'
         {...additionalFlatListProps}
       />
       {selectedMember ? (
@@ -78,6 +157,41 @@ export const ChannelMemberList = ({ additionalFlatListProps }: ChannelMemberList
           visible
         />
       ) : null}
-    </>
+      <NotificationList />
+    </View>
+  );
+};
+
+/**
+ * Lists all channel members with the ability to search them.
+ * @experimental This component is experimental and is subject to change.
+ */
+export const ChannelMemberList = (props: ChannelMemberListProps = {}) => {
+  const { channel } = useChannelDetailsContext();
+  const notificationHostId = channel?.cid ? `channel-member-list:${channel.cid}` : undefined;
+
+  if (!notificationHostId) {
+    return null;
+  }
+
+  return (
+    <ChannelMemberListProvider channel={channel}>
+      <NotificationTargetProvider hostId={notificationHostId} panel='channel-details'>
+        <ChannelMemberListContent {...props} />
+      </NotificationTargetProvider>
+    </ChannelMemberListProvider>
   );
 };
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  list: {
+    flex: 1,
+  },
+  listContent: {
+    flexGrow: 1,
+    paddingBottom: primitives.spacing3xl,
+  },
+});

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

@@ -69,7 +69,7 @@ const useStyles = () => {
           alignItems: 'center',
           flexDirection: 'row',
           gap: primitives.spacingSm,
-          paddingHorizontal: primitives.spacingSm,
+          paddingHorizontal: primitives.spacingMd,
           paddingVertical: primitives.spacingMd,
         },
         content: {

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

@@ -190,7 +190,7 @@ const useStyles = () => {
         },
         listContent: {
           flexGrow: 1,
-          paddingBottom: primitives.spacingXl,
+          paddingBottom: primitives.spacing3xl,
         },
       }),
     [],

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

@@ -1,2 +1 @@
-export * from './useChannelAllMembers';
 export * from './useMemberRoleLabel';

package/src/components/MessageInput/MessageComposer.tsx

@@ -16,6 +16,8 @@ import { MicPositionProvider } from './contexts/MicPositionContext';
 
 import { audioRecorderSelector } from './utils/audioRecorderSelectors';
 
+import { useScreenReaderMountFocus } from '../../a11y';
+
 import {
   ChatContextValue,
   useAttachmentPickerContext,
@@ -287,6 +289,9 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
     return result;
   };
 
+  // immediately focus the screen reader to the input on mount if a11y is enabled.
+  useScreenReaderMountFocus(inputBoxRef);
+
   const isFocused = inputBoxRef.current?.isFocused();
 
   const micPositionX = useSharedValue(0);

package/src/components/UIComponents/SearchInput.tsx

@@ -83,9 +83,7 @@ SearchInput.displayName = 'SearchInput{searchInput}';
 
 const styles = StyleSheet.create({
   container: {
-    paddingBottom: primitives.spacingSm,
-    paddingHorizontal: primitives.spacingMd,
-    paddingTop: primitives.spacingXs,
+    padding: primitives.spacingMd,
   },
   input: {
     borderRadius: primitives.radiusMax,

package/src/contexts/channelMemberListContext/ChannelMemberListContext.tsx

@@ -0,0 +1,72 @@
+import React, { PropsWithChildren, useContext, useState } from 'react';
+
+import { Channel, ChannelMemberSearchSource } from 'stream-chat';
+
+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 ChannelMemberListContextValue = {
+  channel: Channel;
+  searchSource: ChannelMemberSearchSource;
+};
+
+export const ChannelMemberListContext = React.createContext(
+  DEFAULT_BASE_CONTEXT_VALUE as ChannelMemberListContextValue,
+);
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export const ChannelMemberListProvider = ({
+  channel,
+  children,
+}: PropsWithChildren<{ channel: Channel }>) => {
+  const [searchSource] = useState(() => {
+    const source = new ChannelMemberSearchSource(
+      channel,
+      {
+        allowEmptySearchString: true,
+        pageSize: 25,
+        resetOnNewSearchQuery: false,
+      },
+      {
+        initialFilterConfig: {
+          $or: {
+            enabled: true,
+            generate: ({ searchQuery }) =>
+              searchQuery ? { name: { $autocomplete: searchQuery } } : {},
+          },
+        },
+      },
+    );
+    source.sort = { name: 1 };
+    source.activate();
+    return source;
+  });
+
+  return (
+    <ChannelMemberListContext.Provider value={{ channel, searchSource }}>
+      {children}
+    </ChannelMemberListContext.Provider>
+  );
+};
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export const useChannelMemberListContext = () => {
+  const contextValue = useContext(
+    ChannelMemberListContext,
+  ) as unknown as ChannelMemberListContextValue;
+
+  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
+    throw new Error(
+      'The useChannelMemberListContext hook was called outside of the ChannelMemberListContext provider. Render the member list UI inside a ChannelMemberListProvider.',
+    );
+  }
+
+  return contextValue;
+};

package/src/contexts/index.ts

@@ -34,6 +34,7 @@ export * from './channelAddMembersContext/ChannelAddMembersContext';
 export * from './channelEditDetailsContext';
 export * from './channelFileAttachmentListContext/ChannelFileAttachmentListContext';
 export * from './channelPinnedMessageListContext/ChannelPinnedMessageListContext';
+export * from './channelMemberListContext/ChannelMemberListContext';
 export * from './channelMediaListContext/ChannelMediaListContext';
 export * from './pollContext';
 export * from './liveLocationManagerContext';

package/src/contexts/themeContext/utils/theme.ts

@@ -219,6 +219,11 @@ export type Theme = {
       role: TextStyle;
       status: TextStyle;
     };
+    memberList: {
+      container: ViewStyle;
+      list: ViewStyle;
+      listContent: ViewStyle;
+    };
     memberActionsSheet: {
       actionsList: ViewStyle;
       container: ViewStyle;
@@ -236,6 +241,9 @@ export type Theme = {
       headerTitle: TextStyle;
     };
     addMembers: {
+      container: ViewStyle;
+      list: ViewStyle;
+      listContent: ViewStyle;
       searchResultItem: {
         alreadyMemberInfo: ViewStyle;
         memberLabel: TextStyle;
@@ -1326,6 +1334,11 @@ export const defaultTheme: Theme = {
       role: {},
       status: {},
     },
+    memberList: {
+      container: {},
+      list: {},
+      listContent: {},
+    },
     memberActionsSheet: {
       actionsList: {},
       container: {},
@@ -1343,6 +1356,9 @@ export const defaultTheme: Theme = {
       headerTitle: {},
     },
     addMembers: {
+      container: {},
+      list: {},
+      listContent: {},
       searchResultItem: {
         alreadyMemberInfo: {},
         memberLabel: {},

package/src/i18n/ar.json

@@ -463,5 +463,7 @@
   "They won't be able to message or call you. You can unblock them later.": "لن يتمكن/تتمكن من مراسلتك أو الاتصال بك. يمكنك إلغاء الحظر لاحقًا.",
   "Leave": "مغادرة",
   "You'll stop receiving messages from {{ name }}. You can rejoin anytime.": "ستتوقف عن تلقي الرسائل من {{ name }}. يمكنك الانضمام مجددًا في أي وقت.",
-  "group": "المجموعة"
+  "group": "المجموعة",
+  "No members found": "لم يتم العثور على أعضاء",
+  "a11y/Search members": "البحث عن الأعضاء"
 }

package/src/i18n/en.json

@@ -99,6 +99,7 @@
   "No chats here yet…": "No chats here yet…",
   "No files": "No files",
   "No items exist": "No items exist",
+  "No members found": "No members found",
   "No photos or videos": "No photos or videos",
   "No pinned messages": "No pinned messages",
   "No threads here yet": "No threads here yet",
@@ -356,6 +357,7 @@
   "a11y/Select image": "Select image",
   "a11y/Select video": "Select video",
   "a11y/Send voice recording": "Send voice recording",
+  "a11y/Search members": "Search members",
   "a11y/Search pinned messages": "Search pinned messages",
   "a11y/Search users to add": "Search users to add",
   "a11y/Select {{name}}": "Select {{name}}",

package/src/i18n/es.json

@@ -463,5 +463,7 @@
   "They won't be able to message or call you. You can unblock them later.": "No podrá enviarte mensajes ni llamarte. Puedes desbloquearlo más tarde.",
   "Leave": "Salir",
   "You'll stop receiving messages from {{ name }}. You can rejoin anytime.": "Dejarás de recibir mensajes de {{ name }}. Puedes volver a unirte cuando quieras.",
-  "group": "el grupo"
+  "group": "el grupo",
+  "No members found": "No se encontraron miembros",
+  "a11y/Search members": "Buscar miembros"
 }

package/src/i18n/fr.json

@@ -463,5 +463,7 @@
   "They won't be able to message or call you. You can unblock them later.": "Cette personne ne pourra plus vous envoyer de messages ni vous appeler. Vous pourrez la débloquer plus tard.",
   "Leave": "Quitter",
   "You'll stop receiving messages from {{ name }}. You can rejoin anytime.": "Vous ne recevrez plus de messages de {{ name }}. Vous pouvez rejoindre à tout moment.",
-  "group": "ce groupe"
+  "group": "ce groupe",
+  "No members found": "Aucun membre trouvé",
+  "a11y/Search members": "Rechercher des membres"
 }

package/src/i18n/he.json

@@ -463,5 +463,7 @@
   "They won't be able to message or call you. You can unblock them later.": "הוא/היא לא יוכל/תוכל לשלוח לך הודעות או להתקשר אליך. ניתן לבטל את החסימה מאוחר יותר.",
   "Leave": "צא/י",
   "You'll stop receiving messages from {{ name }}. You can rejoin anytime.": "תפסיק/תפסיקי לקבל הודעות מ-{{ name }}. ניתן להצטרף בחזרה בכל עת.",
-  "group": "הקבוצה"
+  "group": "הקבוצה",
+  "No members found": "לא נמצאו חברים",
+  "a11y/Search members": "חיפוש חברים"
 }

package/src/i18n/hi.json

@@ -463,5 +463,7 @@
   "They won't be able to message or call you. You can unblock them later.": "वे आपको संदेश या कॉल नहीं कर पाएंगे। आप उन्हें बाद में अनब्लॉक कर सकते हैं।",
   "Leave": "छोड़ें",
   "You'll stop receiving messages from {{ name }}. You can rejoin anytime.": "आपको {{ name }} से संदेश मिलना बंद हो जाएंगे। आप कभी भी दोबारा जुड़ सकते हैं।",
-  "group": "ग्रुप"
+  "group": "ग्रुप",
+  "No members found": "कोई सदस्य नहीं मिला",
+  "a11y/Search members": "सदस्य खोजें"
 }

package/src/i18n/it.json

@@ -463,5 +463,7 @@
   "They won't be able to message or call you. You can unblock them later.": "Non potrà inviarti messaggi né chiamarti. Potrai sbloccarlo in seguito.",
   "Leave": "Esci",
   "You'll stop receiving messages from {{ name }}. You can rejoin anytime.": "Non riceverai più messaggi da {{ name }}. Puoi rientrare in qualsiasi momento.",
-  "group": "il gruppo"
+  "group": "il gruppo",
+  "No members found": "Nessun membro trovato",
+  "a11y/Search members": "Cerca membri"
 }

package/src/i18n/ja.json

@@ -463,5 +463,7 @@
   "They won't be able to message or call you. You can unblock them later.": "メッセージや通話ができなくなります。あとでブロックを解除することもできます。",
   "Leave": "退出",
   "You'll stop receiving messages from {{ name }}. You can rejoin anytime.": "{{ name }} からのメッセージが届かなくなります。いつでも再参加できます。",
-  "group": "グループ"
+  "group": "グループ",
+  "No members found": "メンバーが見つかりません",
+  "a11y/Search members": "メンバーを検索"
 }

package/src/i18n/ko.json

@@ -463,5 +463,7 @@
   "They won't be able to message or call you. You can unblock them later.": "메시지를 보내거나 전화를 걸 수 없게 됩니다. 나중에 차단을 해제할 수 있습니다.",
   "Leave": "나가기",
   "You'll stop receiving messages from {{ name }}. You can rejoin anytime.": "{{ name }}에서 더 이상 메시지를 받지 않게 됩니다. 언제든지 다시 참여할 수 있습니다.",
-  "group": "그룹"
+  "group": "그룹",
+  "No members found": "멤버를 찾을 수 없습니다",
+  "a11y/Search members": "멤버 검색"
 }

package/src/i18n/nl.json

@@ -463,5 +463,7 @@
   "They won't be able to message or call you. You can unblock them later.": "Deze persoon kan je geen berichten sturen of bellen. Je kunt de blokkering later opheffen.",
   "Leave": "Verlaten",
   "You'll stop receiving messages from {{ name }}. You can rejoin anytime.": "Je ontvangt geen berichten meer van {{ name }}. Je kunt op elk moment opnieuw deelnemen.",
-  "group": "de groep"
+  "group": "de groep",
+  "No members found": "Geen leden gevonden",
+  "a11y/Search members": "Zoek leden"
 }

package/src/i18n/pt-br.json

@@ -463,5 +463,7 @@
   "They won't be able to message or call you. You can unblock them later.": "Essa pessoa não poderá enviar mensagens ou ligar para você. Você pode desbloqueá-la mais tarde.",
   "Leave": "Sair",
   "You'll stop receiving messages from {{ name }}. You can rejoin anytime.": "Você deixará de receber mensagens de {{ name }}. Pode entrar novamente a qualquer momento.",
-  "group": "o grupo"
+  "group": "o grupo",
+  "No members found": "Nenhum membro encontrado",
+  "a11y/Search members": "Pesquisar membros"
 }

package/src/i18n/ru.json

@@ -463,5 +463,7 @@
   "They won't be able to message or call you. You can unblock them later.": "Он не сможет писать вам и звонить. Вы сможете снять блокировку позже.",
   "Leave": "Покинуть",
   "You'll stop receiving messages from {{ name }}. You can rejoin anytime.": "Вы перестанете получать сообщения от {{ name }}. Вы можете присоединиться снова в любое время.",
-  "group": "группы"
+  "group": "группы",
+  "No members found": "Участники не найдены",
+  "a11y/Search members": "Поиск участников"
 }

package/src/i18n/tr.json

@@ -463,5 +463,7 @@
   "They won't be able to message or call you. You can unblock them later.": "Size mesaj gönderemez veya sizi arayamaz. Engeli daha sonra kaldırabilirsiniz.",
   "Leave": "Ayrıl",
   "You'll stop receiving messages from {{ name }}. You can rejoin anytime.": "{{ name }} kanalından mesaj almayı bırakacaksınız. İstediğiniz zaman tekrar katılabilirsiniz.",
-  "group": "grup"
+  "group": "grup",
+  "No members found": "Üye bulunamadı",
+  "a11y/Search members": "Üye ara"
 }

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "9.4.1-beta.1"
+  "version": "9.5.0-beta.2"
 }