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

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

@@ -0,0 +1,148 @@
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { ActivityIndicator, FlatList, type FlatListProps, StyleSheet, View } from 'react-native';
+
+import type { SearchSourceState, UserResponse } from 'stream-chat';
+
+import { AddMemberSearchResultItem } from './AddMemberSearchResultItem';
+import { UserListLoadingSkeleton } from './UserListLoadingSkeleton';
+
+import { useChannelAddMembersContext } from '../../../../contexts/channelAddMembersContext/ChannelAddMembersContext';
+import { useChannelDetailsContext } from '../../../../contexts/channelDetailsContext/channelDetailsContext';
+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 { EmptySearchResult } from '../../../UIComponents/EmptySearchResult';
+import { SearchInput } from '../../../UIComponents/SearchInput';
+
+export type ChannelAddMembersProps = {
+  /**
+   * Besides the existing default behavior of the user 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<UserResponse>>;
+};
+
+const keyExtractor = (user: UserResponse) => user.id;
+
+const listStateSelector = (state: SearchSourceState<UserResponse>) => {
+  return {
+    users: state.items,
+    loading: state.isLoading,
+    hasNext: state.hasNext,
+    error: state.lastQueryError,
+  };
+};
+
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
+export const ChannelAddMembers = ({ additionalFlatListProps }: ChannelAddMembersProps) => {
+  const { t } = useTranslationContext();
+  const styles = useStyles();
+
+  const { channel } = useChannelDetailsContext();
+  const { addNotification } = useNotificationApi();
+
+  const { searchSource, selectionStore } = useChannelAddMembersContext();
+  const { users, loading, hasNext, error } = useStateStore(searchSource.state, listStateSelector);
+
+  const initialized = useRef(false);
+  useEffect(() => {
+    if (!initialized.current) {
+      initialized.current = true;
+      searchSource.search('');
+    }
+  }, [searchSource]);
+
+  useEffect(() => {
+    if (!error) {
+      return;
+    }
+    addNotification({
+      message: t('Failed to load users'),
+      options: {
+        ...getNotificationErrorOptions(error),
+        severity: 'error',
+        type: 'api:channel:query-users:failed',
+      },
+      origin: { context: { channel }, emitter: 'AddChannelMembers' },
+    });
+  }, [error, addNotification, channel, t]);
+
+  const select = useCallback(
+    (user: UserResponse) => {
+      selectionStore.toggle(user.id);
+    },
+    [selectionStore],
+  );
+
+  const renderItem = useCallback(
+    ({ item }: { item: UserResponse }) => (
+      <AddMemberSearchResultItem onPress={select} user={item} />
+    ),
+    [select],
+  );
+
+  const loadMore = useCallback(() => {
+    // hasNext true by default, !!users prevents calling search on initial load
+    if (hasNext && !!users) {
+      searchSource.search();
+    }
+  }, [hasNext, searchSource, users]);
+
+  const emptyState = loading ? (
+    <UserListLoadingSkeleton />
+  ) : (
+    <EmptySearchResult label={t('No user found')} />
+  );
+
+  const loadingMoreIndicator = <>{loading && users && users.length > 0 && <ActivityIndicator />}</>;
+
+  return (
+    <View style={styles.container}>
+      <SearchInput
+        accessibilityLabel={t('a11y/Search users to add')}
+        onChangeText={(text) => searchSource.search(text)}
+      />
+
+      <FlatList
+        contentContainerStyle={styles.listContent}
+        data={users}
+        keyboardDismissMode='interactive'
+        keyboardShouldPersistTaps='handled'
+        keyExtractor={keyExtractor}
+        ListEmptyComponent={emptyState}
+        ListFooterComponent={loadingMoreIndicator}
+        onEndReached={loadMore}
+        onEndReachedThreshold={0.2}
+        renderItem={renderItem}
+        style={styles.list}
+        testID='channel-add-members-list'
+        {...additionalFlatListProps}
+      />
+    </View>
+  );
+};
+
+const useStyles = () => {
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flex: 1,
+        },
+        list: {
+          flex: 1,
+        },
+        listContent: {
+          flexGrow: 1,
+          paddingBottom: primitives.spacingXl,
+        },
+      }),
+    [],
+  );
+};

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

@@ -0,0 +1,126 @@
+import React, { useCallback, useState } from 'react';
+
+import { ActivityIndicator } from 'react-native';
+
+import {
+  ChannelAddMembersProvider,
+  useChannelAddMembersContext,
+} from '../../../../contexts/channelAddMembersContext/ChannelAddMembersContext';
+import { useChannelDetailsContext } from '../../../../contexts/channelDetailsContext/channelDetailsContext';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
+import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
+import { useChannelActions } from '../../../../hooks/actions/useChannelActions';
+import { useStableCallback } from '../../../../hooks/useStableCallback';
+import { Checkmark } from '../../../../icons/checkmark-1';
+import { useIsSelectionEmpty } from '../../../../state-store/selection-store';
+import { NotificationList } from '../../../Notifications/NotificationList';
+import { NotificationTargetProvider } from '../../../Notifications/NotificationTargetContext';
+import { Button } from '../../../ui/Button/Button';
+import { ChannelDetailsModal } from '../modal/Modal';
+import { ModalHeader } from '../modal/ModalHeader';
+
+const loadingIconStyle = { margin: 0 };
+const LoadingButtonIcon = ({ height, width }: { height?: number; width?: number }) => (
+  <ActivityIndicator style={{ ...loadingIconStyle, ...{ height, width } }} />
+);
+
+export type ChannelAddMembersModalProps = {
+  onClose: () => void;
+  visible: boolean;
+};
+
+type ChannelAddMembersModalContentProps = {
+  onClose: () => void;
+};
+
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
+export const ChannelAddMembersModalContent = ({ onClose }: ChannelAddMembersModalContentProps) => {
+  const { channel } = useChannelDetailsContext();
+  const notificationHostId = channel?.cid ? `channel-add-members:${channel.cid}` : undefined;
+
+  if (!notificationHostId) {
+    return null;
+  }
+
+  return (
+    <ChannelAddMembersProvider>
+      <NotificationTargetProvider hostId={notificationHostId} panel='channel-details'>
+        <ChannelAddMembersModalBody onClose={onClose} />
+      </NotificationTargetProvider>
+    </ChannelAddMembersProvider>
+  );
+};
+
+const ChannelAddMembersModalBody = ({ onClose }: ChannelAddMembersModalContentProps) => {
+  const { channel } = useChannelDetailsContext();
+  const { addMembers } = useChannelActions(channel);
+  const { ChannelAddMembers } = useComponentsContext();
+  const { selectionStore } = useChannelAddMembersContext();
+  const { t } = useTranslationContext();
+  const {
+    theme: {
+      channelDetails: {
+        memberSection: { confirmButton: confirmButtonOverride },
+      },
+    },
+  } = useTheme();
+  const isSelectionEmpty = useIsSelectionEmpty(selectionStore);
+  const [addingMembers, setAddingMembers] = useState(false);
+  const confirmEnabled = !isSelectionEmpty && !addingMembers;
+
+  const handleClose = useCallback(() => {
+    onClose();
+  }, [onClose]);
+
+  const handleConfirm = useStableCallback(async () => {
+    setAddingMembers(true);
+    try {
+      const ids = Array.from(selectionStore.state.getLatestValue().selectedIds);
+      await addMembers(ids, {
+        onSuccess: () => {
+          onClose();
+        },
+      });
+    } finally {
+      setAddingMembers(false);
+    }
+  });
+
+  return (
+    <>
+      <ModalHeader
+        onClose={handleClose}
+        rightAction={
+          <Button
+            accessibilityLabel={t('a11y/Confirm add members')}
+            accessibilityRole='button'
+            accessibilityState={{ busy: addingMembers, disabled: !confirmEnabled }}
+            disabled={!confirmEnabled}
+            variant='primary'
+            onPress={handleConfirm}
+            type='solid'
+            LeadingIcon={addingMembers ? LoadingButtonIcon : Checkmark}
+            iconOnly
+            testID='channel-details-add-members-confirm-button'
+            style={confirmButtonOverride}
+          />
+        }
+        title={t('Add Members')}
+      />
+      <ChannelAddMembers />
+      <NotificationList />
+    </>
+  );
+};
+
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
+export const ChannelAddMembersModal = ({ onClose, visible }: ChannelAddMembersModalProps) => (
+  <ChannelDetailsModal onClose={onClose} visible={visible}>
+    <ChannelAddMembersModalContent onClose={onClose} />
+  </ChannelDetailsModal>
+);

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

@@ -0,0 +1,92 @@
+import React from 'react';
+
+import { useChannelDetailsContext } from '../../../../contexts/channelDetailsContext/channelDetailsContext';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
+import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
+import { useChannelMemberCount } from '../../../../hooks';
+import { useChannelOwnCapabilities } from '../../../../hooks/useChannelOwnCapabilities';
+import { UserAdd } from '../../../../icons/user-add';
+import { NotificationList } from '../../../Notifications/NotificationList';
+import { NotificationTargetProvider } from '../../../Notifications/NotificationTargetContext';
+import { Button } from '../../../ui/Button/Button';
+import { ChannelDetailsModal } from '../modal/Modal';
+import { ModalHeader } from '../modal/ModalHeader';
+
+export type ChannelAllMembersModalProps = {
+  onAddMembersPress: () => void;
+  onClose: () => void;
+  visible: boolean;
+};
+
+type ChannelAllMembersModalContentProps = Omit<ChannelAllMembersModalProps, 'visible'>;
+
+const ChannelAllMembersModalBody = ({
+  onAddMembersPress,
+  onClose,
+}: ChannelAllMembersModalContentProps) => {
+  const { channel } = useChannelDetailsContext();
+  const { ChannelMemberList } = useComponentsContext();
+  const { t } = useTranslationContext();
+  const ownCapabilities = useChannelOwnCapabilities(channel);
+  const updateChannelMembers = ownCapabilities?.includes('update-channel-members') ?? false;
+  const total = useChannelMemberCount(channel);
+
+  return (
+    <>
+      <ModalHeader
+        onClose={onClose}
+        rightAction={
+          updateChannelMembers ? (
+            <Button
+              accessibilityLabelKey='a11y/Add members'
+              iconOnly
+              LeadingIcon={UserAdd}
+              onPress={onAddMembersPress}
+              size='md'
+              testID='channel-details-member-list-add-button'
+              type='outline'
+              variant='secondary'
+            />
+          ) : null
+        }
+        title={t('{{count}} members', { count: total })}
+      />
+      <ChannelMemberList />
+      <NotificationList />
+    </>
+  );
+};
+
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
+export const ChannelAllMembersModalContent = ({
+  onAddMembersPress,
+  onClose,
+}: ChannelAllMembersModalContentProps) => {
+  const { channel } = useChannelDetailsContext();
+  const notificationHostId = channel?.cid ? `channel-member-list:${channel.cid}` : undefined;
+
+  if (!notificationHostId) {
+    return null;
+  }
+
+  return (
+    <NotificationTargetProvider hostId={notificationHostId} panel='channel-details'>
+      <ChannelAllMembersModalBody onAddMembersPress={onAddMembersPress} onClose={onClose} />
+    </NotificationTargetProvider>
+  );
+};
+
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
+export const ChannelAllMembersModal = ({
+  onAddMembersPress,
+  onClose,
+  visible,
+}: ChannelAllMembersModalProps) => (
+  <ChannelDetailsModal onClose={onClose} visible={visible}>
+    <ChannelAllMembersModalContent onAddMembersPress={onAddMembersPress} onClose={onClose} />
+  </ChannelDetailsModal>
+);

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

@@ -0,0 +1,105 @@
+import React, { useCallback, useMemo } from 'react';
+import { ListRenderItem, StyleSheet, View } from 'react-native';
+
+import type { ChannelMemberResponse } from 'stream-chat';
+
+import { useChannelDetailsContext } from '../../../../contexts/channelDetailsContext/channelDetailsContext';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
+import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
+import {
+  ChannelMemberActionItem,
+  useChannelMemberActionItems,
+} from '../../../../hooks/actions/useChannelMemberActionItems';
+import { BottomSheetModal } from '../../../UIComponents/BottomSheetModal';
+import { StreamBottomSheetModalFlatList } from '../../../UIComponents/StreamBottomSheetModalFlatList';
+
+export type ChannelMemberActionsSheetProps = {
+  member: ChannelMemberResponse;
+  onClose: () => void;
+  visible: boolean;
+};
+
+const keyExtractor = (item: ChannelMemberActionItem) => item.id;
+
+const ChannelMemberActionsSheetInner = ({
+  member,
+  onClose,
+}: Omit<ChannelMemberActionsSheetProps, 'visible'>) => {
+  const { channel, getChannelMemberActionItems } = useChannelDetailsContext();
+  const { ChannelDetailsActionItem, ChannelMemberItem } = useComponentsContext();
+  const {
+    theme: {
+      channelDetails: {
+        memberActionsSheet: {
+          actionsList: actionsListOverride,
+          container: containerOverride,
+          header: headerOverride,
+        },
+      },
+    },
+  } = useTheme();
+  const styles = useStyles();
+
+  const actionItems = useChannelMemberActionItems({
+    channel,
+    getChannelMemberActionItems,
+    member,
+  });
+
+  const renderItem = useCallback<ListRenderItem<ChannelMemberActionItem>>(
+    ({ item }) => (
+      <ChannelDetailsActionItem
+        destructive={item.type === 'destructive'}
+        Icon={item.Icon}
+        label={item.label}
+        onPress={() => {
+          item.action();
+          onClose();
+        }}
+        testID={`channel-details-member-action-${item.id}`}
+      />
+    ),
+    [ChannelDetailsActionItem, onClose],
+  );
+
+  if (!member.user) return null;
+
+  return (
+    <View style={[styles.container, containerOverride]}>
+      <View style={headerOverride}>
+        <ChannelMemberItem member={member} size='lg' />
+      </View>
+      <StreamBottomSheetModalFlatList<ChannelMemberActionItem>
+        contentContainerStyle={[styles.actionsList, actionsListOverride]}
+        data={actionItems}
+        keyExtractor={keyExtractor}
+        renderItem={renderItem}
+      />
+    </View>
+  );
+};
+
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
+export const ChannelMemberActionsSheet = ({
+  member,
+  onClose,
+  visible,
+}: ChannelMemberActionsSheetProps) => (
+  <BottomSheetModal enableDynamicSizing onClose={onClose} visible={visible}>
+    <ChannelMemberActionsSheetInner member={member} onClose={onClose} />
+  </BottomSheetModal>
+);
+
+const useStyles = () =>
+  useMemo(
+    () =>
+      StyleSheet.create({
+        actionsList: {},
+        container: {
+          flexDirection: 'column',
+        },
+      }),
+    [],
+  );

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

@@ -0,0 +1,219 @@
+import React, { useMemo } from 'react';
+import { I18nManager, Pressable, StyleSheet, Text, View } from 'react-native';
+
+import type { ChannelMemberResponse } from 'stream-chat';
+
+import { composeAccessibilityLabel } from '../../../../a11y/a11yUtils';
+import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
+import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
+import { Mute } from '../../../../icons';
+import { primitives } from '../../../../theme';
+import { useUserMuteActive } from '../../../Message/hooks/useUserMuteActive';
+import { UserAvatar } from '../../../ui/Avatar/UserAvatar';
+import { useMemberRoleLabel } from '../../hooks/members/useMemberRoleLabel';
+import { useUserActivityStatus } from '../../hooks/useUserActivityStatus';
+
+export type ChannelMemberItemSize = 'sm' | 'lg';
+
+export type ChannelMemberItemProps = {
+  member: ChannelMemberResponse;
+  onPress?: (member: ChannelMemberResponse) => void;
+  /**
+   * Visual size of the row.
+   * - `'sm'` (default) renders the compact list row with a small avatar, regular-weight name, and a trailing role label.
+   * - `'lg'` renders a profile-style header with a larger avatar, semibold name, larger status, and no role label.
+   *   Useful for sheet / modal headers (e.g. the per-member actions bottom sheet).
+   */
+  size?: ChannelMemberItemSize;
+  testID?: string;
+};
+
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
+export const ChannelMemberItem = ({
+  member,
+  onPress,
+  size = 'sm',
+  testID,
+}: ChannelMemberItemProps) => {
+  const { t } = useTranslationContext();
+  const { client } = useChatContext();
+  const {
+    theme: {
+      channelDetails: {
+        memberItem: {
+          container: containerOverride,
+          name: nameOverride,
+          role: roleOverride,
+          status: statusOverride,
+        },
+      },
+      semantics,
+    },
+  } = useTheme();
+  const styles = useStyles();
+  const statusLine = useUserActivityStatus(member.user);
+  const roleLabel = useMemberRoleLabel(member);
+  const isMuted = useUserMuteActive(member.user);
+
+  const user = member.user;
+  if (!user) return null;
+
+  const isLarge = size === 'lg';
+  const isCurrentUser = !!client?.userID && user.id === client.userID;
+  const displayName = isCurrentUser ? t('You') : (user.name ?? user.id);
+  const accessibilityLabel = composeAccessibilityLabel(
+    displayName,
+    roleLabel,
+    isMuted ? t('Muted') : undefined,
+    statusLine,
+  );
+
+  const content = (
+    <>
+      <UserAvatar showOnlineIndicator={user.online} size={isLarge ? 'lg' : 'md'} user={user} />
+      <View style={styles.body}>
+        <Text
+          numberOfLines={1}
+          style={[
+            isLarge ? styles.nameLarge : styles.name,
+            { color: semantics.textPrimary },
+            nameOverride,
+          ]}
+        >
+          {displayName}
+        </Text>
+        {statusLine ? (
+          <Text
+            numberOfLines={1}
+            style={[
+              isLarge ? styles.statusLarge : styles.status,
+              { color: semantics.textTertiary },
+              statusOverride,
+            ]}
+          >
+            {statusLine}
+          </Text>
+        ) : null}
+      </View>
+      {isMuted || roleLabel ? (
+        <View style={styles.trailing}>
+          {isMuted ? (
+            <Mute
+              height={16}
+              pathFill={semantics.textTertiary}
+              testID='channel-member-muted-indicator'
+              width={16}
+            />
+          ) : null}
+          {roleLabel ? (
+            <Text
+              numberOfLines={1}
+              style={[styles.role, { color: semantics.textTertiary }, roleOverride]}
+            >
+              {roleLabel}
+            </Text>
+          ) : null}
+        </View>
+      ) : null}
+    </>
+  );
+
+  if (onPress) {
+    return (
+      <Pressable
+        accessibilityLabel={accessibilityLabel}
+        accessibilityRole='button'
+        onPress={() => onPress(member)}
+        style={({ pressed }) => [
+          isLarge ? styles.containerLarge : styles.container,
+          pressed ? { backgroundColor: semantics.backgroundUtilityPressed } : null,
+          containerOverride,
+        ]}
+        testID={testID}
+      >
+        {content}
+      </Pressable>
+    );
+  }
+
+  return (
+    <View
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole={isLarge ? 'header' : undefined}
+      accessible
+      style={[isLarge ? styles.containerLarge : styles.container, containerOverride]}
+      testID={testID}
+    >
+      {content}
+    </View>
+  );
+};
+
+const useStyles = () => {
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        body: {
+          flex: 1,
+          gap: 0,
+          minWidth: 0,
+        },
+        container: {
+          alignItems: 'center',
+          flexDirection: 'row',
+          gap: primitives.spacingSm,
+          minHeight: 48,
+          paddingHorizontal: primitives.spacingMd,
+          paddingVertical: primitives.spacingXs,
+        },
+        containerLarge: {
+          alignItems: 'center',
+          flexDirection: 'row',
+          gap: primitives.spacingSm,
+          paddingHorizontal: primitives.spacingSm,
+          paddingVertical: primitives.spacingSm,
+        },
+        name: {
+          fontSize: primitives.typographyFontSizeMd,
+          fontWeight: primitives.typographyFontWeightRegular,
+          lineHeight: primitives.typographyLineHeightNormal,
+          writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
+        },
+        nameLarge: {
+          fontSize: primitives.typographyFontSizeMd,
+          fontWeight: primitives.typographyFontWeightSemiBold,
+          lineHeight: primitives.typographyLineHeightNormal,
+          writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
+        },
+        role: {
+          flexShrink: 0,
+          fontSize: primitives.typographyFontSizeSm,
+          fontWeight: primitives.typographyFontWeightRegular,
+          lineHeight: primitives.typographyLineHeightNormal,
+          writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
+        },
+        status: {
+          fontSize: primitives.typographyFontSizeXs,
+          fontWeight: primitives.typographyFontWeightRegular,
+          lineHeight: primitives.typographyLineHeightTight,
+          writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
+        },
+        statusLarge: {
+          fontSize: primitives.typographyFontSizeSm,
+          fontWeight: primitives.typographyFontWeightRegular,
+          lineHeight: primitives.typographyLineHeightNormal,
+          writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
+        },
+        trailing: {
+          alignItems: 'center',
+          flexDirection: 'row',
+          flexShrink: 0,
+          gap: primitives.spacingXs,
+        },
+      }),
+    [],
+  );
+};