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

package/src/components/ChannelDetails/components/ChannelDetailsMemberSection.tsx

@@ -0,0 +1,203 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { I18nManager, Pressable, StyleSheet, Text, View } from 'react-native';
+
+import type { ChannelMemberResponse } from 'stream-chat';
+
+import { ChannelAddMembersModal } from './members/ChannelAddMembersModal';
+import { ChannelAllMembersModal } from './members/ChannelAllMembersModal';
+
+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 { useChannelOwnCapabilities } from '../../../hooks/useChannelOwnCapabilities';
+import { primitives } from '../../../theme';
+import { Button } from '../../ui/Button/Button';
+import { useChannelDetailsMembersPreview } from '../hooks/useChannelDetailsMembersPreview';
+
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
+export const ChannelDetailsMemberSection = () => {
+  const { channel, onAddMembersPress, onMemberPress, onViewAllMembersPress } =
+    useChannelDetailsContext();
+  const { t } = useTranslationContext();
+  const ownCapabilities = useChannelOwnCapabilities(channel);
+  const updateChannelMembers = ownCapabilities?.includes('update-channel-members') ?? false;
+  const {
+    theme: {
+      channelDetails: {
+        memberSection: {
+          footer: footerOverride,
+          header: headerOverride,
+          headerTitle: headerTitleOverride,
+          viewAllLabel: viewAllLabelOverride,
+        },
+        sectionCard: sectionCardOverride,
+      },
+      semantics,
+    },
+  } = useTheme();
+  const { ChannelMemberActionsSheet, ChannelMemberItem } = useComponentsContext();
+  const { hasMore, total, visible } = useChannelDetailsMembersPreview(channel);
+  const styles = useStyles();
+  const [isMemberListVisible, setMemberListVisible] = useState(false);
+  const [isAddMembersVisible, setAddMembersVisible] = useState(false);
+  const [selectedMember, setSelectedMember] = useState<ChannelMemberResponse | null>(null);
+
+  const handleViewAllPress = useCallback(() => {
+    if (onViewAllMembersPress) {
+      onViewAllMembersPress();
+      return;
+    }
+    setMemberListVisible(true);
+  }, [onViewAllMembersPress]);
+
+  const handleMemberListClose = useCallback(() => setMemberListVisible(false), []);
+
+  const handleAddMembersClose = useCallback(() => setAddMembersVisible(false), []);
+
+  const handleAddMembersPress = useCallback(() => {
+    if (onAddMembersPress) {
+      onAddMembersPress();
+      return;
+    }
+    setMemberListVisible(false);
+    setAddMembersVisible(true);
+  }, [onAddMembersPress]);
+
+  const handleMemberActionsClose = useCallback(() => setSelectedMember(null), []);
+
+  const handleMemberPress = useCallback(
+    (member: ChannelMemberResponse) => {
+      if (onMemberPress) {
+        onMemberPress(member);
+        return;
+      }
+      setSelectedMember(member);
+    },
+    [onMemberPress],
+  );
+
+  return (
+    <View
+      style={[
+        styles.sectionCard,
+        { backgroundColor: semantics.backgroundCoreSurfaceCard },
+        sectionCardOverride,
+      ]}
+    >
+      <View style={[styles.header, headerOverride]}>
+        <Text
+          accessibilityRole='header'
+          style={[styles.headerTitle, { color: semantics.textPrimary }, headerTitleOverride]}
+        >
+          {t('{{count}} members', { count: total })}
+        </Text>
+        {updateChannelMembers ? (
+          <View style={styles.headerAddButton}>
+            <Button
+              accessibilityLabelKey='a11y/Add members'
+              label={t('Add')}
+              onPress={handleAddMembersPress}
+              size='sm'
+              style={styles.headerAddButtonInner}
+              testID='channel-details-member-section-add-button'
+              type='outline'
+              variant='secondary'
+            />
+          </View>
+        ) : null}
+      </View>
+      <View style={styles.list}>
+        {visible.map((member) => {
+          if (!member.user?.id) return null;
+          return (
+            <ChannelMemberItem key={member.user.id} member={member} onPress={handleMemberPress} />
+          );
+        })}
+      </View>
+      {hasMore ? (
+        <Pressable
+          accessibilityLabel={t('View all')}
+          accessibilityRole='button'
+          onPress={handleViewAllPress}
+          style={[styles.footer, { borderTopColor: semantics.borderCoreDefault }, footerOverride]}
+        >
+          <View style={styles.viewAllButton}>
+            <Text
+              style={[styles.viewAllLabel, { color: semantics.textPrimary }, viewAllLabelOverride]}
+            >
+              {t('View all')}
+            </Text>
+          </View>
+        </Pressable>
+      ) : null}
+      <ChannelAllMembersModal
+        onAddMembersPress={handleAddMembersPress}
+        onClose={handleMemberListClose}
+        visible={isMemberListVisible}
+      />
+      <ChannelAddMembersModal onClose={handleAddMembersClose} visible={isAddMembersVisible} />
+      {selectedMember ? (
+        <ChannelMemberActionsSheet
+          member={selectedMember}
+          onClose={handleMemberActionsClose}
+          visible
+        />
+      ) : null}
+    </View>
+  );
+};
+
+const useStyles = () =>
+  useMemo(
+    () =>
+      StyleSheet.create({
+        footer: {
+          alignItems: 'center',
+          borderTopWidth: 1,
+          paddingHorizontal: primitives.spacingMd,
+        },
+        header: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: primitives.spacingSm,
+          justifyContent: 'space-between',
+          paddingHorizontal: primitives.spacingMd,
+          paddingTop: primitives.spacingXs,
+        },
+        headerAddButton: {
+          flexShrink: 0,
+        },
+        headerAddButtonInner: {
+          width: 'auto',
+        },
+        headerTitle: {
+          flexShrink: 1,
+          fontSize: primitives.typographyFontSizeMd,
+          fontWeight: primitives.typographyFontWeightSemiBold,
+          lineHeight: primitives.typographyLineHeightNormal,
+          writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
+        },
+        list: {
+          paddingBottom: primitives.spacingSm,
+        },
+        sectionCard: {
+          borderRadius: primitives.radiusLg,
+          overflow: 'hidden',
+        },
+        viewAllButton: {
+          alignItems: 'center',
+          justifyContent: 'center',
+          minHeight: 48,
+          width: '100%',
+        },
+        viewAllLabel: {
+          fontSize: primitives.typographyFontSizeMd,
+          fontWeight: primitives.typographyFontWeightSemiBold,
+          lineHeight: primitives.typographyLineHeightNormal,
+        },
+      }),
+    [],
+  );

package/src/components/ChannelDetails/components/ChannelDetailsNavHeader.tsx

@@ -0,0 +1,141 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { I18nManager, StyleSheet, Text, View } from 'react-native';
+
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { ChannelEditDetailsModal } from './ChannelEditDetailsModal';
+
+import { useChannelDetailsContext } from '../../../contexts/channelDetailsContext/channelDetailsContext';
+import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+import { useChannelOwnCapabilities } from '../../../hooks/useChannelOwnCapabilities';
+import { useIsDirectChat } from '../../../hooks/useIsDirectChat';
+import { ChevronLeft } from '../../../icons/chevron-left';
+import { primitives } from '../../../theme';
+import { Button } from '../../ui/Button/Button';
+
+export type ChannelDetailsNavHeaderProps = {
+  /** Override the auto-resolved screen title (1:1 → "Contact Info", group → "Group Info"). */
+  title?: string;
+};
+
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
+export const ChannelDetailsNavHeader = ({ title }: ChannelDetailsNavHeaderProps) => {
+  const { channel, onBack, onEditChannelPress } = useChannelDetailsContext();
+  const { t } = useTranslationContext();
+  const ownCapabilities = useChannelOwnCapabilities(channel);
+  const canUpdateChannel = ownCapabilities?.includes('update-channel') ?? false;
+  const {
+    theme: {
+      channelDetails: {
+        header: { container: containerOverride, title: titleOverride },
+      },
+      semantics,
+    },
+  } = useTheme();
+  const isDirect = useIsDirectChat(channel);
+  const styles = useStyles();
+  const [editModalVisible, setEditModalVisible] = useState(false);
+
+  const resolvedTitle = title ?? (isDirect ? t('Contact Info') : t('Group Info'));
+
+  const handleEditPress = useCallback(() => {
+    if (onEditChannelPress) {
+      onEditChannelPress();
+      return;
+    }
+    setEditModalVisible(true);
+  }, [onEditChannelPress]);
+
+  const handleEditModalClose = useCallback(() => setEditModalVisible(false), []);
+
+  return (
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: semantics.backgroundCoreElevation1 },
+        { borderBottomColor: semantics.borderCoreSubtle },
+        containerOverride,
+      ]}
+    >
+      <View style={styles.sideContainer}>
+        {onBack ? (
+          <Button
+            accessibilityLabelKey='a11y/Back'
+            iconOnly
+            LeadingIcon={ChevronLeft}
+            onPress={onBack}
+            size='md'
+            testID='channel-details-back-button'
+            type='ghost'
+            variant='secondary'
+          />
+        ) : null}
+      </View>
+      <View style={styles.centerContainer}>
+        <Text
+          accessibilityRole='header'
+          numberOfLines={1}
+          style={[styles.title, { color: semantics.textPrimary }, titleOverride]}
+        >
+          {resolvedTitle}
+        </Text>
+      </View>
+      <View style={[styles.sideContainer, styles.sideContainerRight]}>
+        {canUpdateChannel && !isDirect ? (
+          <Button
+            accessibilityLabelKey='a11y/Edit channel'
+            label={t('Edit')}
+            onPress={handleEditPress}
+            size='sm'
+            testID='channel-details-edit-button'
+            type='outline'
+            variant='secondary'
+          />
+        ) : null}
+      </View>
+      <ChannelEditDetailsModal onClose={handleEditModalClose} visible={editModalVisible} />
+    </View>
+  );
+};
+
+const useStyles = () => {
+  const insets = useSafeAreaInsets();
+
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        centerContainer: {
+          alignItems: 'center',
+          flex: 2,
+          justifyContent: 'center',
+        },
+        container: {
+          alignItems: 'center',
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          paddingTop: insets.top + primitives.spacingSm,
+          paddingBottom: primitives.spacingSm,
+          paddingHorizontal: primitives.spacingSm,
+          gap: primitives.spacingXs,
+          borderBottomWidth: 1,
+        },
+        sideContainer: {
+          flex: 1,
+          justifyContent: 'center',
+        },
+        sideContainerRight: {
+          alignItems: 'flex-end',
+        },
+        title: {
+          fontSize: primitives.typographyFontSizeMd,
+          fontWeight: primitives.typographyFontWeightSemiBold,
+          lineHeight: primitives.typographyLineHeightNormal,
+          writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
+        },
+      }),
+    [insets.top],
+  );
+};

package/src/components/ChannelDetails/components/ChannelDetailsNavigationSection.tsx

@@ -0,0 +1,78 @@
+import React, { useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { ChannelDetailsActionItem } from './ChannelDetailsActionItem';
+
+import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+import { ChevronRight } from '../../../icons';
+import { File } from '../../../icons/file';
+import { ImageGrid } from '../../../icons/gallery';
+import { Pin } from '../../../icons/pin';
+import { primitives } from '../../../theme';
+
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
+export const ChannelDetailsNavigationSection = () => {
+  const { t } = useTranslationContext();
+  const {
+    theme: {
+      channelDetails: { sectionCard: sectionCardOverride },
+      semantics,
+    },
+  } = useTheme();
+  const styles = useStyles();
+
+  const chevron = useMemo(
+    () => (
+      <View accessibilityElementsHidden importantForAccessibility='no-hide-descendants'>
+        <ChevronRight height={20} stroke={semantics.textTertiary} width={20} />
+      </View>
+    ),
+    [semantics.textTertiary],
+  );
+
+  return (
+    <View
+      style={[
+        styles.sectionCard,
+        { backgroundColor: semantics.backgroundCoreSurfaceCard },
+        sectionCardOverride,
+      ]}
+    >
+      <ChannelDetailsActionItem
+        Icon={Pin}
+        label={t('Pinned Messages')}
+        testID='channel-details-pinned-messages'
+        trailing={chevron}
+      />
+      <ChannelDetailsActionItem
+        Icon={ImageGrid}
+        label={t('Photos & Videos')}
+        testID='channel-details-photos-and-videos'
+        trailing={chevron}
+      />
+      <ChannelDetailsActionItem
+        Icon={File}
+        label={t('Files')}
+        testID='channel-details-files'
+        trailing={chevron}
+      />
+    </View>
+  );
+};
+
+const useStyles = () => {
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        sectionCard: {
+          borderRadius: primitives.radiusLg,
+          overflow: 'hidden',
+          paddingVertical: primitives.spacingXs,
+        },
+      }),
+    [],
+  );
+};

package/src/components/ChannelDetails/components/ChannelDetailsProfile.tsx

@@ -0,0 +1,114 @@
+import React, { useMemo } from 'react';
+import { I18nManager, StyleSheet, Text, View } from 'react-native';
+
+import { composeAccessibilityLabel } from '../../../a11y/a11yUtils';
+import { useChannelDetailsContext } from '../../../contexts/channelDetailsContext/channelDetailsContext';
+import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+import { useChannelMuteActive } from '../../../hooks/useChannelMuteActive';
+import { Mute } from '../../../icons/mute';
+import { primitives } from '../../../theme';
+import { useChannelPreviewDisplayName } from '../../ChannelPreview/hooks/useChannelPreviewDisplayName';
+import { ChannelAvatar } from '../../ui/Avatar/ChannelAvatar';
+import { useChannelDetailsMemberStatusText } from '../hooks/useChannelDetailsMemberStatusText';
+
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
+export const ChannelDetailsProfile = () => {
+  const { channel } = useChannelDetailsContext();
+  const { t } = useTranslationContext();
+  const {
+    theme: {
+      channelDetails: {
+        profile: {
+          container: containerOverride,
+          heading: headingOverride,
+          subtitle: subtitleOverride,
+          title: titleOverride,
+        },
+      },
+      semantics,
+    },
+  } = useTheme();
+  const displayName = useChannelPreviewDisplayName(channel);
+  const subtitle = useChannelDetailsMemberStatusText(channel);
+  const muted = useChannelMuteActive(channel);
+  const styles = useStyles();
+
+  return (
+    <View style={[styles.container, containerOverride]}>
+      <ChannelAvatar channel={channel} showBorder={false} size='2xl' />
+      <View style={[styles.heading, headingOverride]}>
+        <View
+          accessibilityLabel={composeAccessibilityLabel(
+            displayName,
+            muted ? t('Muted') : undefined,
+          )}
+          accessibilityRole='header'
+          accessible
+          style={styles.titleRow}
+        >
+          <Text
+            numberOfLines={2}
+            style={[styles.title, { color: semantics.textPrimary }, titleOverride]}
+          >
+            {displayName ?? ''}
+          </Text>
+          {muted ? (
+            <Mute
+              fill={semantics.textTertiary}
+              height={20}
+              testID='channel-details-profile-muted-indicator'
+              width={20}
+            />
+          ) : null}
+        </View>
+        {subtitle ? (
+          <Text style={[styles.subtitle, { color: semantics.textSecondary }, subtitleOverride]}>
+            {subtitle}
+          </Text>
+        ) : null}
+      </View>
+    </View>
+  );
+};
+
+const useStyles = () => {
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          alignItems: 'center',
+          gap: primitives.spacingMd,
+        },
+        heading: {
+          alignItems: 'center',
+          gap: primitives.spacingXs,
+          width: '100%',
+        },
+        subtitle: {
+          fontSize: primitives.typographyFontSizeSm,
+          fontWeight: primitives.typographyFontWeightRegular,
+          lineHeight: primitives.typographyLineHeightNormal,
+          textAlign: 'center',
+          writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
+        },
+        title: {
+          flexShrink: 1,
+          fontSize: primitives.typographyFontSizeXl,
+          fontWeight: primitives.typographyFontWeightSemiBold,
+          lineHeight: primitives.typographyLineHeightRelaxed,
+          textAlign: 'center',
+          writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
+        },
+        titleRow: {
+          alignItems: 'center',
+          flexDirection: 'row',
+          gap: primitives.spacingXs,
+          justifyContent: 'center',
+        },
+      }),
+    [],
+  );
+};

package/src/components/ChannelDetails/components/ChannelEditDetails.tsx

@@ -0,0 +1,121 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { useChannelDetailsContext } from '../../../contexts/channelDetailsContext/channelDetailsContext';
+import { useChannelEditDetailsContext } from '../../../contexts/channelEditDetailsContext/ChannelEditDetailsContext';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
+import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+import { useStateStore } from '../../../hooks/useStateStore';
+import type { EditChannelDetailsState } from '../../../state-store/edit-channel-details-store';
+import { primitives } from '../../../theme';
+import { ChannelAvatar } from '../../ui/Avatar/ChannelAvatar';
+import { Button } from '../../ui/Button/Button';
+import { useEditChannelImage } from '../hooks/useEditChannelImage';
+
+const selector = (state: EditChannelDetailsState) => ({
+  pendingAction: state.pendingAction,
+  updatedImage: state.updatedImage,
+});
+
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
+export const ChannelEditDetails = () => {
+  const { channel } = useChannelDetailsContext();
+  const { store } = useChannelEditDetailsContext();
+  const { ChannelEditImageSheet, ChannelEditName } = useComponentsContext();
+  const { t } = useTranslationContext();
+  const {
+    theme: {
+      channelDetails: {
+        editChannel: {
+          avatarSection: avatarSectionOverride,
+          container: containerOverride,
+          uploadButton: uploadButtonOverride,
+        },
+      },
+    },
+  } = useTheme();
+  const styles = useStyles();
+  const { pickImageFromNativePicker, takePhoto } = useEditChannelImage();
+
+  const { pendingAction, updatedImage } = useStateStore(store.state, selector);
+
+  const [sheetVisible, setSheetVisible] = useState(false);
+
+  const openSheet = useCallback(() => setSheetVisible(true), []);
+  const closeSheet = useCallback(() => setSheetVisible(false), []);
+
+  useEffect(() => {
+    if (sheetVisible || !pendingAction) return;
+    const action = pendingAction;
+    store.setPendingAction(null);
+    (async () => {
+      if (action === 'camera') {
+        const file = await takePhoto();
+        if (file) {
+          store.setUpdatedImage(file);
+        }
+      } else if (action === 'library') {
+        const file = await pickImageFromNativePicker();
+        if (file) {
+          store.setUpdatedImage(file);
+        }
+      } else if (action === 'reset') {
+        store.setUpdatedImage(null);
+      }
+    })();
+  }, [pendingAction, pickImageFromNativePicker, sheetVisible, store, takePhoto]);
+
+  // `undefined` = untouched (show live channel image), `File` = picked uri, `null` = reset.
+  const isPreview = updatedImage !== undefined;
+  const previewUri = updatedImage ? updatedImage.uri : null;
+
+  return (
+    <View style={[styles.container, containerOverride]}>
+      <View style={[styles.avatarSection, avatarSectionOverride]}>
+        <ChannelAvatar
+          channel={channel}
+          isPreview={isPreview}
+          previewUri={previewUri}
+          showBorder={false}
+          size='2xl'
+        />
+        <Button
+          accessibilityLabelKey='a11y/Upload channel image'
+          label={t('Upload')}
+          onPress={openSheet}
+          size='sm'
+          style={[styles.uploadButton, uploadButtonOverride]}
+          testID='channel-edit-upload-button'
+          type='ghost'
+          variant='primary'
+        />
+      </View>
+      <ChannelEditName />
+      <ChannelEditImageSheet onClose={closeSheet} visible={sheetVisible} />
+    </View>
+  );
+};
+
+const useStyles = () =>
+  useMemo(
+    () =>
+      StyleSheet.create({
+        avatarSection: {
+          alignItems: 'center',
+          gap: primitives.spacingXs,
+        },
+        container: {
+          flex: 1,
+          gap: primitives.spacingXl,
+          paddingHorizontal: primitives.spacingMd,
+          paddingTop: primitives.spacingMd,
+        },
+        uploadButton: {
+          width: 'auto',
+        },
+      }),
+    [],
+  );