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

package/src/components/ChannelDetails/components/ChannelEditDetailsModal.tsx

@@ -0,0 +1,152 @@
+import React, { useState } from 'react';
+
+import { ActivityIndicator, Keyboard } from 'react-native';
+
+import { ChannelDetailsModal } from './modal/Modal';
+import { ModalHeader } from './modal/ModalHeader';
+
+import { useChannelDetailsContext } from '../../../contexts/channelDetailsContext/channelDetailsContext';
+import {
+  ChannelEditDetailsProvider,
+  useChannelEditDetailsContext,
+} from '../../../contexts/channelEditDetailsContext/ChannelEditDetailsContext';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
+import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+import { useChannelActions } from '../../../hooks/actions/useChannelActions';
+import { useStableCallback } from '../../../hooks/useStableCallback';
+import { Checkmark } from '../../../icons/checkmark-1';
+import {
+  isImageDirty,
+  isNameDirty,
+  useIsImageDirty,
+  useIsNameDirty,
+} from '../../../state-store/edit-channel-details-store';
+import type { File } from '../../../types/types';
+import { NotificationList } from '../../Notifications/NotificationList';
+import { NotificationTargetProvider } from '../../Notifications/NotificationTargetContext';
+import { Button } from '../../ui/Button/Button';
+
+const loadingIconStyle = { margin: 0 };
+const LoadingButtonIcon = ({ height, width }: { height?: number; width?: number }) => (
+  <ActivityIndicator style={{ ...loadingIconStyle, ...{ height, width } }} />
+);
+
+export type ChannelEditDetailsModalProps = {
+  onClose: () => void;
+  visible: boolean;
+};
+
+type ChannelEditDetailsModalContentProps = {
+  onClose: () => void;
+};
+
+const ChannelEditDetailsModalBody = ({ onClose }: ChannelEditDetailsModalContentProps) => {
+  const { channel, doFileUploadRequest } = useChannelDetailsContext();
+  const { store } = useChannelEditDetailsContext();
+  const { updateImage, updateName } = useChannelActions(channel);
+  const { ChannelEditDetails } = useComponentsContext();
+  const { t } = useTranslationContext();
+  const [saving, setSaving] = useState(false);
+  const nameDirty = useIsNameDirty(store);
+  const imageDirty = useIsImageDirty(store);
+  const confirmEnabled = (nameDirty || imageDirty) && !saving;
+
+  const handleConfirm = useStableCallback(async () => {
+    if (!confirmEnabled) return;
+    Keyboard.dismiss();
+    setSaving(true);
+    try {
+      const state = store.state.getLatestValue();
+      const { currentName, updatedImage } = state;
+      const nameDirty = isNameDirty(state);
+      const imageDirty = isImageDirty(state);
+      let nameOk = true;
+      let imageOk = true;
+      const tasks: Promise<void>[] = [];
+      if (nameDirty) {
+        nameOk = false;
+        tasks.push(
+          updateName(currentName, {
+            onSuccess: () => {
+              nameOk = true;
+            },
+          }),
+        );
+      }
+      if (imageDirty) {
+        imageOk = false;
+        tasks.push(
+          updateImage(
+            updatedImage as File | null,
+            {
+              onSuccess: () => {
+                imageOk = true;
+              },
+            },
+            doFileUploadRequest,
+          ),
+        );
+      }
+      await Promise.all(tasks);
+      if (nameOk && imageOk) onClose();
+    } finally {
+      setSaving(false);
+    }
+  });
+
+  return (
+    <>
+      <ModalHeader
+        onClose={onClose}
+        rightAction={
+          <Button
+            accessibilityLabel={t('a11y/Confirm edit channel')}
+            accessibilityRole='button'
+            accessibilityState={{ busy: saving, disabled: !confirmEnabled }}
+            disabled={!confirmEnabled}
+            iconOnly
+            LeadingIcon={saving ? LoadingButtonIcon : Checkmark}
+            onPress={handleConfirm}
+            testID='channel-details-edit-confirm-button'
+            type='solid'
+            variant='primary'
+          />
+        }
+        title={t('Edit')}
+      />
+      <ChannelEditDetails />
+      <NotificationList />
+    </>
+  );
+};
+
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
+export const ChannelEditDetailsModalContent = ({
+  onClose,
+}: ChannelEditDetailsModalContentProps) => {
+  const { channel } = useChannelDetailsContext();
+  const notificationHostId = channel?.cid ? `channel-edit-details:${channel.cid}` : undefined;
+
+  if (!notificationHostId || !channel) {
+    return null;
+  }
+
+  return (
+    <ChannelEditDetailsProvider channel={channel}>
+      <NotificationTargetProvider hostId={notificationHostId} panel='channel-details'>
+        <ChannelEditDetailsModalBody onClose={onClose} />
+      </NotificationTargetProvider>
+    </ChannelEditDetailsProvider>
+  );
+};
+
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
+export const ChannelEditDetailsModal = ({ onClose, visible }: ChannelEditDetailsModalProps) => (
+  <ChannelDetailsModal onClose={onClose} visible={visible}>
+    <ChannelEditDetailsModalContent onClose={onClose} />
+  </ChannelDetailsModal>
+);

package/src/components/ChannelDetails/components/ChannelEditImageSheet.tsx

@@ -0,0 +1,224 @@
+import React, { useCallback, useMemo } from 'react';
+import {
+  I18nManager,
+  ListRenderItem,
+  StyleSheet,
+  Text,
+  TextStyle,
+  View,
+  ViewStyle,
+} from 'react-native';
+
+import { useBottomSheetContext } from '../../../contexts';
+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 { Camera } from '../../../icons/camera';
+import { Delete } from '../../../icons/delete';
+import { Picture } from '../../../icons/image';
+import type { IconProps } from '../../../icons/utils/base';
+import { NewClose } from '../../../icons/xmark';
+import type {
+  EditChannelDetailsState,
+  EditChannelImagePendingAction,
+} from '../../../state-store/edit-channel-details-store';
+import { primitives } from '../../../theme';
+import { Button } from '../../ui/Button/Button';
+import { BottomSheetModal } from '../../UIComponents/BottomSheetModal';
+import { StreamBottomSheetModalFlatList } from '../../UIComponents/StreamBottomSheetModalFlatList';
+
+export type ChannelEditImageSheetProps = {
+  onClose: () => void;
+  visible: boolean;
+};
+
+const selectCanReset = (state: EditChannelDetailsState) => ({
+  canReset: Boolean(state.initialImage || state.updatedImage),
+});
+
+type SheetItem = {
+  destructive?: boolean;
+  Icon: React.ComponentType<IconProps>;
+  id: 'take-photo' | 'choose-image' | 'reset-picture';
+  label: string;
+  onPress: () => void;
+  testID: string;
+};
+
+const keyExtractor = (item: SheetItem) => item.id;
+
+const ChannelEditImageSheetInner = () => {
+  const { store } = useChannelEditDetailsContext();
+  const { ChannelDetailsActionItem } = useComponentsContext();
+  const { t } = useTranslationContext();
+  const {
+    theme: {
+      channelDetails: {
+        editImageSheet: {
+          actionsList: actionsListOverride,
+          container: containerOverride,
+          header: headerOverride,
+          headerTitle: headerTitleOverride,
+        },
+      },
+      semantics,
+    },
+  } = useTheme();
+  const styles = useStyles();
+
+  const { close, dismiss } = useBottomSheetContext();
+  const { canReset } = useStateStore(store.state, selectCanReset);
+
+  const onSelect = useCallback(
+    (action: EditChannelImagePendingAction) => {
+      dismiss(() => store.setPendingAction(action));
+    },
+    [dismiss, store],
+  );
+
+  const items = useMemo<SheetItem[]>(() => {
+    const base: SheetItem[] = [
+      {
+        Icon: Camera,
+        id: 'take-photo',
+        label: t('Take Photo'),
+        onPress: () => {
+          onSelect('camera');
+        },
+        testID: 'channel-edit-picture-take-photo',
+      },
+      {
+        Icon: Picture,
+        id: 'choose-image',
+        label: t('Choose Image'),
+        onPress: () => {
+          onSelect('library');
+        },
+        testID: 'channel-edit-picture-choose-image',
+      },
+    ];
+
+    if (canReset) {
+      base.push({
+        destructive: true,
+        Icon: Delete,
+        id: 'reset-picture',
+        label: t('Reset Picture'),
+        onPress: () => {
+          onSelect('reset');
+        },
+        testID: 'channel-edit-picture-reset',
+      });
+    }
+
+    return base;
+  }, [canReset, onSelect, t]);
+
+  const renderItem = useCallback<ListRenderItem<SheetItem>>(
+    ({ item }) => (
+      <ChannelDetailsActionItem
+        destructive={item.destructive}
+        Icon={item.Icon}
+        label={item.label}
+        onPress={item.onPress}
+        testID={item.testID}
+      />
+    ),
+    [ChannelDetailsActionItem],
+  );
+
+  return (
+    <View style={[styles.container, containerOverride]}>
+      <View style={[styles.header, headerOverride]}>
+        <View style={styles.side}>
+          <Button
+            accessibilityLabelKey='a11y/Close edit picture sheet'
+            iconOnly
+            LeadingIcon={NewClose}
+            onPress={() => close()}
+            size='md'
+            testID='channel-edit-picture-sheet-close-button'
+            type='outline'
+            variant='secondary'
+          />
+        </View>
+        <View style={styles.center}>
+          <Text
+            accessibilityRole='header'
+            numberOfLines={1}
+            style={[styles.title, { color: semantics.textPrimary }, headerTitleOverride]}
+          >
+            {t('Edit Group Picture')}
+          </Text>
+        </View>
+        <View style={[styles.side, styles.sideRight]} />
+      </View>
+      <StreamBottomSheetModalFlatList<SheetItem>
+        contentContainerStyle={[styles.actionsList, actionsListOverride]}
+        data={items}
+        keyExtractor={keyExtractor}
+        renderItem={renderItem}
+      />
+    </View>
+  );
+};
+
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
+export const ChannelEditImageSheet = ({ onClose, visible }: ChannelEditImageSheetProps) => (
+  <BottomSheetModal enableDynamicSizing onClose={onClose} visible={visible}>
+    <ChannelEditImageSheetInner />
+  </BottomSheetModal>
+);
+
+const useStyles = () =>
+  useMemo<{
+    actionsList: ViewStyle;
+    center: ViewStyle;
+    container: ViewStyle;
+    header: ViewStyle;
+    side: ViewStyle;
+    sideRight: ViewStyle;
+    title: TextStyle;
+  }>(
+    () =>
+      StyleSheet.create({
+        actionsList: {
+          paddingHorizontal: primitives.spacingXxs,
+        },
+        center: {
+          alignItems: 'center',
+          flex: 2,
+          justifyContent: 'center',
+        },
+        container: {
+          flexDirection: 'column',
+        },
+        header: {
+          alignItems: 'center',
+          flexDirection: 'row',
+          gap: primitives.spacingSm,
+          justifyContent: 'space-between',
+          paddingBottom: primitives.spacingSm,
+          paddingHorizontal: primitives.spacingSm,
+          paddingTop: 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/components/ChannelEditName.tsx

@@ -0,0 +1,52 @@
+import React, { useCallback } from 'react';
+
+import { useChannelEditDetailsContext } from '../../../contexts/channelEditDetailsContext/ChannelEditDetailsContext';
+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 { Input } from '../../ui/Input/Input';
+
+const selectCurrentName = (state: EditChannelDetailsState) => ({
+  currentName: state.currentName,
+});
+
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
+export const ChannelEditName = () => {
+  const { store } = useChannelEditDetailsContext();
+  const { t } = useTranslationContext();
+  const {
+    theme: {
+      channelDetails: {
+        editChannel: { nameInput: nameInputOverride },
+      },
+    },
+  } = useTheme();
+
+  const { currentName } = useStateStore(store.state, selectCurrentName);
+
+  const handleNameChange = useCallback(
+    (newName: string) => {
+      store.setCurrentName(newName);
+    },
+    [store],
+  );
+
+  return (
+    <Input
+      accessibilityLabel={t('a11y/Channel name')}
+      autoCapitalize='words'
+      autoCorrect={false}
+      containerStyle={nameInputOverride}
+      helperText={false}
+      onChangeText={handleNameChange}
+      placeholder={t('Channel name')}
+      returnKeyType='done'
+      testID='channel-edit-name-input'
+      value={currentName}
+      variant='outline'
+    />
+  );
+};

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

@@ -0,0 +1,11 @@
+export * from './ChannelDetailsActionsSection';
+export * from './ChannelDetailsActionItem';
+export * from './ChannelDetailsMemberSection';
+export * from './ChannelDetailsNavigationSection';
+export * from './ChannelDetailsProfile';
+export * from './ChannelDetailsNavHeader';
+export * from './ChannelEditDetails';
+export * from './ChannelEditDetailsModal';
+export * from './ChannelEditImageSheet';
+export * from './ChannelEditName';
+export * from './members';

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

@@ -0,0 +1,136 @@
+import React, { useMemo } from 'react';
+import { I18nManager, Pressable, StyleSheet, Text, View } from 'react-native';
+
+import type { UserResponse } from 'stream-chat';
+
+import { useChannelAddMembersContext, useChannelDetailsContext } from '../../../../contexts';
+import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
+import { useIsChannelMember } from '../../../../hooks';
+import { useIsSelected } from '../../../../state-store/selection-store';
+import { primitives } from '../../../../theme';
+import { UserAvatar } from '../../../ui/Avatar/UserAvatar';
+import { SelectionCircle } from '../../../UIComponents/SelectionCircle';
+
+export type AddMemberSearchResultItemProps = {
+  onPress: (user: UserResponse) => void;
+  user: UserResponse;
+};
+
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
+export const AddMemberSearchResultItem = ({ onPress, user }: AddMemberSearchResultItemProps) => {
+  const { t } = useTranslationContext();
+  const { selectionStore } = useChannelAddMembersContext();
+  const { channel } = useChannelDetailsContext();
+
+  const selected = useIsSelected(selectionStore, user.id);
+  const isAlreadyMember = useIsChannelMember(channel, user.id);
+  const {
+    theme: {
+      channelDetails: {
+        addMembers: {
+          searchResultItem: {
+            alreadyMemberInfo: alreadyMemberInfoOverride,
+            memberLabel: memberLabelOverride,
+            userName: userNameOverride,
+            userRow: userRowOverride,
+          },
+        },
+      },
+      semantics,
+    },
+  } = useTheme();
+  const styles = useStyles();
+
+  const displayName = user.name ?? user.id;
+  const accessibilityLabel = isAlreadyMember
+    ? t('a11y/{{name}} is already a member', { name: displayName })
+    : t('a11y/Select {{name}}', { name: displayName });
+
+  const avatar = <UserAvatar showOnlineIndicator={user.online} size='md' user={user} />;
+  const name = (
+    <Text
+      numberOfLines={1}
+      style={[
+        styles.userName,
+        { color: isAlreadyMember ? semantics.textSecondary : semantics.textPrimary },
+        userNameOverride,
+      ]}
+    >
+      {displayName}
+    </Text>
+  );
+
+  if (isAlreadyMember) {
+    return (
+      <View
+        accessibilityLabel={accessibilityLabel}
+        accessibilityState={{ disabled: true, selected: false }}
+        style={[styles.userRow, userRowOverride]}
+        testID={`channel-add-members-row-${user.id}`}
+      >
+        {avatar}
+        <View style={[styles.alreadyMemberInfo, alreadyMemberInfoOverride]}>
+          {name}
+          <Text
+            style={[styles.memberLabel, { color: semantics.textSecondary }, memberLabelOverride]}
+            testID={`channel-add-members-row-${user.id}-member-label`}
+          >
+            {t('Already a member')}
+          </Text>
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <Pressable
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole='button'
+      accessibilityState={{ disabled: false, selected }}
+      onPress={() => onPress(user)}
+      style={[styles.userRow, userRowOverride]}
+      testID={`channel-add-members-row-${user.id}`}
+    >
+      {avatar}
+      {name}
+      <SelectionCircle selected={selected} />
+    </Pressable>
+  );
+};
+
+const useStyles = () => {
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        alreadyMemberInfo: {
+          flex: 1,
+          flexDirection: 'column',
+        },
+        memberLabel: {
+          fontSize: primitives.typographyFontSizeXs,
+          fontWeight: primitives.typographyFontWeightRegular,
+          lineHeight: primitives.typographyLineHeightNormal,
+          writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
+        },
+        userName: {
+          flex: 1,
+          fontSize: primitives.typographyFontSizeMd,
+          fontWeight: primitives.typographyFontWeightRegular,
+          lineHeight: primitives.typographyLineHeightNormal,
+          writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
+        },
+        userRow: {
+          alignItems: 'center',
+          flexDirection: 'row',
+          gap: primitives.spacingSm,
+          minHeight: 52,
+          paddingHorizontal: primitives.spacingMd,
+          paddingVertical: primitives.spacingXs,
+        },
+      }),
+    [],
+  );
+};