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

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

@@ -0,0 +1,83 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { ActivityIndicator, FlatList, type FlatListProps } from 'react-native';
+
+import type { ChannelMemberResponse } from 'stream-chat';
+
+import { MemberListLoadingSkeleton } from './MemberListLoadingSkeleton';
+
+import { useChannelDetailsContext } from '../../../../contexts/channelDetailsContext/channelDetailsContext';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
+import { useChannelAllMembers } from '../../hooks/members/useChannelAllMembers';
+
+const keyExtractor = (member: ChannelMemberResponse) => member.user?.id ?? member.user_id ?? '';
+
+export type ChannelMemberListProps = {
+  /**
+   * Besides the existing default behavior of the members 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<ChannelMemberResponse>>;
+};
+
+/**
+ * Lists all channel members.
+ * @experimental This component is experimental and is subject to change.
+ */
+export const ChannelMemberList = ({ additionalFlatListProps }: ChannelMemberListProps = {}) => {
+  const { channel, onMemberPress } = useChannelDetailsContext();
+  const { ChannelMemberActionsSheet, ChannelMemberItem } = useComponentsContext();
+  const { hasMore, loading, loadMore, results } = useChannelAllMembers({ channel });
+  const [selectedMember, setSelectedMember] = useState<ChannelMemberResponse | null>(null);
+
+  const handleMemberActionsClose = useCallback(() => setSelectedMember(null), []);
+
+  const handleMemberPress = useCallback(
+    (member: ChannelMemberResponse) => {
+      if (onMemberPress) {
+        onMemberPress(member);
+        return;
+      }
+      setSelectedMember(member);
+    },
+    [onMemberPress],
+  );
+
+  const renderItem = useCallback(
+    ({ item }: { item: ChannelMemberResponse }) => (
+      <ChannelMemberItem member={item} onPress={handleMemberPress} />
+    ),
+    [ChannelMemberItem, handleMemberPress],
+  );
+
+  const ListFooterComponent = useMemo(
+    () => (loading && results.length > 0 ? <ActivityIndicator /> : null),
+    [loading, results.length],
+  );
+
+  if (loading && results.length === 0) {
+    return <MemberListLoadingSkeleton />;
+  }
+
+  return (
+    <>
+      <FlatList
+        data={results}
+        keyExtractor={keyExtractor}
+        ListFooterComponent={ListFooterComponent}
+        onEndReached={hasMore ? loadMore : undefined}
+        onEndReachedThreshold={0.2}
+        renderItem={renderItem}
+        {...additionalFlatListProps}
+      />
+      {selectedMember ? (
+        <ChannelMemberActionsSheet
+          member={selectedMember}
+          onClose={handleMemberActionsClose}
+          visible
+        />
+      ) : null}
+    </>
+  );
+};

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

@@ -0,0 +1,22 @@
+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 MemberListLoadingSkeleton = () => {
+  const {
+    theme: { memberListSkeleton },
+  } = useTheme();
+
+  return (
+    <GenericListLoadingSkeleton
+      skeleton={memberListSkeleton}
+      testID='member-list-loading-skeleton'
+    />
+  );
+};
+
+MemberListLoadingSkeleton.displayName = 'MemberListLoadingSkeleton{memberListSkeleton}';

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

@@ -0,0 +1,19 @@
+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 UserListLoadingSkeleton = () => {
+  const {
+    theme: { userListSkeleton },
+  } = useTheme();
+
+  return (
+    <GenericListLoadingSkeleton skeleton={userListSkeleton} testID='user-list-loading-skeleton' />
+  );
+};
+
+UserListLoadingSkeleton.displayName = 'UserListLoadingSkeleton{userListSkeleton}';

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

@@ -0,0 +1,9 @@
+export * from './AddMemberSearchResultItem';
+export * from './ChannelAddMembers';
+export * from './ChannelAddMembersModal';
+export * from './ChannelAllMembersModal';
+export * from './ChannelMemberActionsSheet';
+export * from './ChannelMemberItem';
+export * from './ChannelMemberList';
+export * from './MemberListLoadingSkeleton';
+export * from './UserListLoadingSkeleton';

package/src/components/ChannelDetails/components/modal/Modal.tsx

@@ -0,0 +1,56 @@
+import React, { useMemo } from 'react';
+import { Modal, StyleSheet, View } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+
+import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
+
+type ChannelDetailsModalProps = {
+  children: React.ReactNode;
+  onClose: () => void;
+  visible: boolean;
+};
+
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
+export const ChannelDetailsModal = ({ children, onClose, visible }: ChannelDetailsModalProps) => {
+  const {
+    theme: {
+      channelDetails: {
+        modal: { body: bodyOverride, root: rootOverride },
+      },
+      semantics,
+    },
+  } = useTheme();
+  const rootStyle = useMemo(
+    () =>
+      StyleSheet.flatten([
+        styles.root,
+        { backgroundColor: semantics.backgroundCoreElevation1 },
+        rootOverride,
+      ]),
+    [rootOverride, semantics.backgroundCoreElevation1],
+  );
+
+  return (
+    <Modal
+      animationType='slide'
+      onRequestClose={onClose}
+      presentationStyle='pageSheet'
+      visible={visible}
+    >
+      <GestureHandlerRootView style={rootStyle}>
+        <View style={[styles.body, bodyOverride]}>{children}</View>
+      </GestureHandlerRootView>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  body: {
+    flex: 1,
+  },
+  root: {
+    flex: 1,
+  },
+});

package/src/components/ChannelDetails/components/modal/ModalHeader.tsx

@@ -0,0 +1,89 @@
+import React, { useMemo } from 'react';
+import { I18nManager, StyleSheet, Text, View } from 'react-native';
+
+import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
+import { NewClose } from '../../../../icons/xmark';
+import { primitives } from '../../../../theme';
+import { Button } from '../../../ui/Button/Button';
+
+type ModalHeaderProps = {
+  onClose: () => void;
+  title: string;
+  rightAction?: React.ReactNode;
+};
+
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
+export const ModalHeader = ({ onClose, rightAction, title }: ModalHeaderProps) => {
+  const {
+    theme: {
+      channelDetails: {
+        modal: { header: headerOverride, headerTitle: headerTitleOverride },
+      },
+      semantics,
+    },
+  } = useTheme();
+  const styles = useStyles();
+
+  return (
+    <View style={[styles.header, headerOverride]}>
+      <View style={styles.side}>
+        <Button
+          accessibilityLabelKey='a11y/Close'
+          iconOnly
+          LeadingIcon={NewClose}
+          onPress={onClose}
+          size='md'
+          type='outline'
+          variant='secondary'
+        />
+      </View>
+      <View style={styles.center}>
+        <Text
+          accessibilityRole='header'
+          numberOfLines={1}
+          style={[styles.title, { color: semantics.textPrimary }, headerTitleOverride]}
+        >
+          {title}
+        </Text>
+      </View>
+      <View style={[styles.side, styles.sideRight]}>{rightAction}</View>
+    </View>
+  );
+};
+
+const useStyles = () =>
+  useMemo(
+    () =>
+      StyleSheet.create({
+        center: {
+          alignItems: 'center',
+          flex: 2,
+          justifyContent: 'center',
+        },
+        header: {
+          alignItems: 'center',
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          paddingBottom: primitives.spacingSm,
+          paddingHorizontal: primitives.spacingSm,
+          paddingTop: primitives.spacingSm,
+          gap: primitives.spacingSm,
+        },
+        side: {
+          flex: 1,
+          justifyContent: 'center',
+        },
+        sideRight: {
+          alignItems: 'flex-end',
+        },
+        title: {
+          fontSize: primitives.typographyFontSizeMd,
+          fontWeight: primitives.typographyFontWeightSemiBold,
+          lineHeight: primitives.typographyLineHeightNormal,
+          writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
+        },
+      }),
+    [],
+  );

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

@@ -0,0 +1,6 @@
+export * from './useChannelDetailsActionItems';
+export * from './useChannelDetailsMemberStatusText';
+export * from './useChannelDetailsMembersPreview';
+export * from './useEditChannelImage';
+export * from './useUserActivityStatus';
+export * from './members';

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

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

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

@@ -0,0 +1,131 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import type { Channel, ChannelMemberResponse, MemberFilters, MemberSort } from 'stream-chat';
+
+import { useTranslationContext } from '../../../../contexts';
+import { getNotificationErrorOptions } from '../../../../hooks/actions/useChannelActions';
+import { useChannelMembersState } from '../../../ChannelList/hooks/useChannelMembersState';
+import { useNotificationApi } from '../../../Notifications/hooks/useNotificationApi';
+
+const PAGE_SIZE = 25;
+
+export type UseChannelAllMembersResult = {
+  hasMore: boolean;
+  loading: boolean;
+  loadMore: () => void;
+  results: ChannelMemberResponse[];
+};
+
+const noop = () => undefined;
+
+/**
+ * @experimental This hook is experimental and is subject to change.
+ */
+export const useChannelAllMembers = ({
+  channel,
+}: {
+  channel: Channel;
+}): UseChannelAllMembersResult => {
+  const { addNotification } = useNotificationApi();
+  const { t } = useTranslationContext();
+  const localMembers = useChannelMembersState(channel);
+
+  // Mode is decided once on mount (per channel). If member_count is unknown or matches
+  // the locally-loaded count, we return local state and stay reactive to member events.
+  // Otherwise we switch into paginated mode for the lifetime of the hook.
+  const [mode] = useState<'local' | 'paginated'>(() => {
+    const memberCount = channel.data?.member_count;
+    const loadedCount = Object.keys(channel.state.members).length;
+    return memberCount == null || loadedCount >= memberCount ? 'local' : 'paginated';
+  });
+
+  const [results, setResults] = useState<ChannelMemberResponse[]>([]);
+  const [loading, setLoading] = useState(mode === 'paginated');
+  const [hasMore, setHasMore] = useState(mode === 'paginated');
+
+  const offsetRef = useRef(0);
+  const requestIdRef = useRef(0);
+  const inFlightRef = useRef(false);
+
+  const fetchPage = useCallback(
+    async ({ append }: { append: boolean }) => {
+      const requestId = ++requestIdRef.current;
+      inFlightRef.current = true;
+      setLoading(true);
+      if (!append) {
+        offsetRef.current = 0;
+        setHasMore(true);
+      }
+
+      try {
+        const filter: MemberFilters = {};
+        const sort: MemberSort = { created_at: 1 };
+        const response = await channel.queryMembers(filter, sort, {
+          limit: PAGE_SIZE,
+          offset: offsetRef.current,
+        });
+
+        if (requestId !== requestIdRef.current) return;
+
+        const fetched = response.members ?? [];
+        setResults((prev) => {
+          if (!append) return fetched;
+          const seen = new Set(prev.map((m) => m.user_id ?? m.user?.id));
+          const deduped = fetched.filter((m) => !seen.has(m.user_id ?? m.user?.id));
+          return deduped.length ? [...prev, ...deduped] : prev;
+        });
+        offsetRef.current += fetched.length;
+        if (fetched.length < PAGE_SIZE) {
+          setHasMore(false);
+        }
+      } catch (err) {
+        if (requestId !== requestIdRef.current) return;
+        addNotification({
+          message: t('Failed to load members'),
+          options: {
+            ...getNotificationErrorOptions(err),
+            severity: 'error',
+            type: 'api:channel:query-members:failed',
+          },
+          origin: { context: { channel }, emitter: 'ChannelAllMembers' },
+        });
+      } finally {
+        if (requestId === requestIdRef.current) {
+          inFlightRef.current = false;
+          setLoading(false);
+        }
+      }
+    },
+    [addNotification, channel, t],
+  );
+
+  const fetchPageRef = useRef(fetchPage);
+  fetchPageRef.current = fetchPage;
+
+  useEffect(() => {
+    if (mode !== 'paginated') return;
+    fetchPageRef.current({ append: false });
+    return () => {
+      requestIdRef.current += 1;
+    };
+  }, [mode]);
+
+  const loadMore = useCallback(() => {
+    if (mode !== 'paginated') return;
+    if (inFlightRef.current || !hasMore || loading) return;
+    fetchPageRef.current({ append: true });
+  }, [mode, hasMore, loading]);
+
+  const localResults = useMemo(() => Object.values(localMembers), [localMembers]);
+
+  if (mode === 'local') {
+    return {
+      hasMore: false,
+      loading: false,
+      loadMore: noop,
+      results: localResults,
+    };
+  }
+
+  return { hasMore, loading, loadMore, results };
+};

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

@@ -0,0 +1,32 @@
+import type { ChannelMemberResponse } from 'stream-chat';
+
+import { useChannelDetailsContext } from '../../../../contexts/channelDetailsContext/channelDetailsContext';
+import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
+
+/**
+ * Resolves the trailing role label for a channel member row in the channel details screen.
+ *
+ * Priority — Owner > Admin > Moderator. When a member matches none of the rules
+ * (and no custom `getMemberRoleLabel` is provided on the screen), returns `null`.
+ * @experimental This hook is experimental and is subject to change.
+ */
+export const useMemberRoleLabel = (member: ChannelMemberResponse): string | null => {
+  const { channel, getMemberRoleLabel } = useChannelDetailsContext();
+  const { t } = useTranslationContext();
+
+  if (getMemberRoleLabel) {
+    return getMemberRoleLabel({ channel, member, t }) ?? null;
+  }
+
+  const userId = member.user?.id;
+  if (userId && userId === channel?.data?.created_by?.id) {
+    return t('Owner');
+  }
+  if (member.user?.role === 'admin') {
+    return t('Admin');
+  }
+  if (member.channel_role === 'channel_moderator') {
+    return t('Moderator');
+  }
+  return null;
+};

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

@@ -0,0 +1,37 @@
+import { useMemo } from 'react';
+
+import { useChannelDetailsContext } from '../../../contexts/channelDetailsContext/channelDetailsContext';
+import {
+  ChannelActionItem,
+  useChannelActionItems,
+} from '../../../hooks/actions/useChannelActionItems';
+
+/**
+ * @experimental This hook is experimental and is subject to change.
+ */
+export const useChannelDetailsActionItems = (): ChannelActionItem[] => {
+  const { channel, getChannelActionItems, onChannelDismiss } = useChannelDetailsContext();
+
+  const items = useChannelActionItems({ channel, getChannelActionItems, surface: 'details' });
+
+  return useMemo(
+    () =>
+      items.map((item) => {
+        if (item.id === 'leave' || item.id === 'deleteChannel' || item.id === 'block') {
+          return {
+            ...item,
+            action: (options) =>
+              item.action({
+                ...options,
+                onSuccess: () => {
+                  options?.onSuccess?.();
+                  onChannelDismiss?.();
+                },
+              }),
+          };
+        }
+        return item;
+      }),
+    [items, onChannelDismiss],
+  );
+};

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

@@ -0,0 +1,36 @@
+import { useMemo } from 'react';
+
+import type { Channel } from 'stream-chat';
+
+import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+import { useChannelMemberCount } from '../../../hooks/useChannelMemberCount';
+import { useIsDirectChat } from '../../../hooks/useIsDirectChat';
+import { useChannelMembersState } from '../../ChannelList/hooks/useChannelMembersState';
+import { useChannelOnlineMemberCount } from '../../ChannelList/hooks/useChannelOnlineMemberCount';
+
+/**
+ * Resolves the subtitle status line shown under the channel title.
+ *   - Direct chats: `t('Online')` when the other member is online, otherwise an empty string.
+ *   - Group chats: `t('{{memberCount}} members, {{onlineCount}} online')`.
+ * @experimental This hook is experimental and is subject to change.
+ */
+export const useChannelDetailsMemberStatusText = (channel: Channel): string => {
+  const { t } = useTranslationContext();
+  const members = useChannelMembersState(channel);
+  const memberCount = useChannelMemberCount(channel);
+  const onlineCount = useChannelOnlineMemberCount(channel);
+  const isDirect = useIsDirectChat(channel);
+
+  return useMemo(() => {
+    if (isDirect) {
+      const ownUserId = channel.getClient().userID;
+      const otherMember = Object.values(members).find((member) => member.user?.id !== ownUserId);
+      return otherMember?.user?.online ? t('Online') : '';
+    }
+    return t('{{memberCount}} members, {{onlineCount}} online', {
+      count: memberCount,
+      memberCount,
+      onlineCount,
+    });
+  }, [channel, isDirect, memberCount, members, onlineCount, t]);
+};

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

@@ -0,0 +1,35 @@
+import { useMemo } from 'react';
+
+import type { Channel, ChannelMemberResponse } from 'stream-chat';
+
+import { useChannelMemberCount } from '../../../hooks/useChannelMemberCount';
+import { useChannelMembersState } from '../../ChannelList/hooks/useChannelMembersState';
+
+export const DEFAULT_VISIBLE_MEMBER_COUNT = 5;
+
+export type ChannelDetailsMembersPreview = {
+  hasMore: boolean;
+  total: number;
+  visible: ChannelMemberResponse[];
+};
+
+/**
+ * @experimental This hook is experimental and is subject to change.
+ */
+export const useChannelDetailsMembersPreview = (
+  channel: Channel,
+  max: number = DEFAULT_VISIBLE_MEMBER_COUNT,
+): ChannelDetailsMembersPreview => {
+  const members = useChannelMembersState(channel);
+  const memberCount = useChannelMemberCount(channel);
+
+  return useMemo(() => {
+    const all = Object.values(members);
+    const total = memberCount || all.length;
+    return {
+      hasMore: total > max,
+      total,
+      visible: all.slice(0, max),
+    };
+  }, [members, memberCount, max]);
+};

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

@@ -0,0 +1,91 @@
+import { useCallback } from 'react';
+import { Alert, Linking } from 'react-native';
+
+import { useChannelDetailsContext } from '../../../contexts/channelDetailsContext/channelDetailsContext';
+import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+import { NativeHandlers } from '../../../native';
+import type { File } from '../../../types/types';
+import { compressedImageURI } from '../../../utils/compressImage';
+
+export type UseEditChannelImageResult = {
+  /**
+   * Open the device's native image picker and return a single picked image
+   * with the compression configured on `ChannelDetails` already applied
+   * to its `uri`. Returns `undefined` if the user cancels or denies access.
+   */
+  pickImageFromNativePicker: () => Promise<File | undefined>;
+  /**
+   * Launch the device's camera and return the captured image. Returns
+   * `undefined` if the user cancels or denies access. The native camera
+   * handler already honors `compressImageQuality`, so no extra compression
+   * pass is needed for camera files.
+   */
+  takePhoto: () => Promise<File | undefined>;
+};
+
+/**
+ * Hook that exposes the two image-acquisition flows used by the channel edit
+ * screen — camera capture and native gallery pick — using the same control
+ * flow and compression behavior as the message composer (`takeAndUploadImage`
+ * and `pickAndUploadImageFromNativePicker` in `MessageInputContext`). The
+ * hook intentionally does NOT upload the picked file; the consumer receives a
+ * `File` and decides what to do with it.
+ *
+ * Reads `compressImageQuality` from `ChannelDetailsContext`.
+ * @experimental This hook is experimental and is subject to change.
+ */
+export const useEditChannelImage = (): UseEditChannelImageResult => {
+  const { compressImageQuality } = useChannelDetailsContext();
+  const { t } = useTranslationContext();
+
+  const takePhoto = useCallback(async (): Promise<File | undefined> => {
+    const file = await NativeHandlers.takePhoto({
+      compressImageQuality: compressImageQuality ?? 1,
+      mediaType: 'image',
+    });
+
+    if (file.askToOpenSettings) {
+      Alert.alert(
+        t('Allow camera access in device settings'),
+        t('Device camera is used to take photos or videos.'),
+        [
+          { style: 'cancel', text: t('Cancel') },
+          { onPress: () => Linking.openSettings(), style: 'default', text: t('Open Settings') },
+        ],
+      );
+      return undefined;
+    }
+
+    if (file.cancelled) {
+      return undefined;
+    }
+
+    return file;
+  }, [compressImageQuality, t]);
+
+  const pickImageFromNativePicker = useCallback(async (): Promise<File | undefined> => {
+    const result = await NativeHandlers.pickImage({ maxNumberOfFiles: 1 });
+
+    if (result.askToOpenSettings) {
+      Alert.alert(
+        t('Allow access to your Gallery'),
+        t('Device gallery permissions is used to take photos or videos.'),
+        [
+          { style: 'cancel', text: t('Cancel') },
+          { onPress: () => Linking.openSettings(), style: 'default', text: t('Open Settings') },
+        ],
+      );
+      return undefined;
+    }
+
+    if (result.cancelled || !result.assets?.length) {
+      return undefined;
+    }
+
+    const asset = result.assets[0];
+    const compressedUri = await compressedImageURI(asset, compressImageQuality);
+    return { ...asset, uri: compressedUri };
+  }, [compressImageQuality, t]);
+
+  return { pickImageFromNativePicker, takePhoto };
+};