stream-chat-react-native-core 4.4.0 → 4.5.0-beta.1

package/src/components/MessageInput/ImageUploadPreview.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FlatList, Image, StyleSheet, TouchableOpacity, View } from 'react-native';
+import { FlatList, Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
 import { UploadProgressIndicator } from './UploadProgressIndicator';
 
@@ -9,11 +9,14 @@ import {
   useMessageInputContext,
 } from '../../contexts/messageInputContext/MessageInputContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { Close } from '../../icons/Close';
+import { Warning } from '../../icons/Warning';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-import { FileState, ProgressIndicatorTypes } from '../../utils/utils';
+import { getIndicatorTypeForFileState, ProgressIndicatorTypes } from '../../utils/utils';
 
 const IMAGE_PREVIEW_SIZE = 100;
+const WARNING_ICON_SIZE = 16;
 
 const styles = StyleSheet.create({
   dismiss: {
@@ -22,17 +25,45 @@ const styles = StyleSheet.create({
     right: 8,
     top: 8,
   },
+  fileSizeText: {
+    fontSize: 12,
+    paddingLeft: 10,
+  },
   flatList: { paddingBottom: 12 },
+  iconContainer: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
   itemContainer: {
     flexDirection: 'row',
     height: IMAGE_PREVIEW_SIZE,
     marginLeft: 8,
   },
+  unsupportedImage: {
+    borderRadius: 20,
+    bottom: 8,
+    flexDirection: 'row',
+    marginLeft: 3,
+    position: 'absolute',
+  },
   upload: {
     borderRadius: 10,
     height: IMAGE_PREVIEW_SIZE,
     width: IMAGE_PREVIEW_SIZE,
   },
+  warningIconStyle: {
+    borderRadius: 24,
+    marginLeft: 4,
+    marginTop: 4,
+  },
+  warningText: {
+    alignItems: 'center',
+    color: 'black',
+    fontSize: 10,
+    justifyContent: 'center',
+    paddingRight: 8,
+  },
 });
 
 type ImageUploadPreviewPropsWithContext<
@@ -46,6 +77,8 @@ export type ImageUploadPreviewProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Partial<ImageUploadPreviewPropsWithContext<StreamChatGenerics>>;
 
+type ImageUploadPreviewItem = { index: number; item: ImageUpload };
+
 const ImageUploadPreviewWithContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
@@ -55,52 +88,72 @@ const ImageUploadPreviewWithContext = <
 
   const {
     theme: {
-      colors: { overlay, white },
+      colors: { overlay },
       messageInput: {
         imageUploadPreview: { dismiss, flatList, itemContainer, upload },
       },
     },
   } = useTheme();
 
-  const renderItem = ({ index, item }: { index: number; item: ImageUpload }) => (
-    <View
-      style={[
-        styles.itemContainer,
-        index === imageUploads.length - 1 ? { marginRight: 8 } : {},
-        itemContainer,
-      ]}
-    >
-      <UploadProgressIndicator
-        action={() => {
-          uploadImage({ newImage: item });
-        }}
-        active={item.state !== FileState.UPLOADED && item.state !== FileState.FINISHED}
-        style={styles.upload}
-        type={
-          item.state === FileState.UPLOADING
-            ? ProgressIndicatorTypes.IN_PROGRESS
-            : item.state === FileState.UPLOAD_FAILED
-            ? ProgressIndicatorTypes.RETRY
-            : undefined
-        }
-      >
-        <Image
-          resizeMode='cover'
-          source={{ uri: item.file.uri || item.url }}
-          style={[styles.upload, upload]}
-        />
-      </UploadProgressIndicator>
-      <TouchableOpacity
-        onPress={() => {
-          removeImage(item.id);
-        }}
-        style={[styles.dismiss, { backgroundColor: overlay }, dismiss]}
-        testID='remove-image-upload-preview'
-      >
-        <Close pathFill={white} />
-      </TouchableOpacity>
-    </View>
-  );
+  const UnsupportedImageTypeIndicator = ({
+    indicatorType,
+  }: {
+    indicatorType: typeof ProgressIndicatorTypes[keyof typeof ProgressIndicatorTypes] | null;
+  }) => {
+    const {
+      theme: {
+        colors: { accent_red, overlay, white },
+      },
+    } = useTheme();
+
+    const { t } = useTranslationContext();
+    return indicatorType === ProgressIndicatorTypes.NOT_SUPPORTED ? (
+      <View style={[styles.unsupportedImage, { backgroundColor: overlay }]}>
+        <View style={[styles.iconContainer]}>
+          <Warning
+            height={WARNING_ICON_SIZE}
+            pathFill={accent_red}
+            style={styles.warningIconStyle}
+            width={WARNING_ICON_SIZE}
+          />
+          <Text style={[styles.warningText, { color: white }]}>{t('Not supported')}</Text>
+        </View>
+      </View>
+    ) : null;
+  };
+
+  const renderItem = ({ index, item }: ImageUploadPreviewItem) => {
+    const indicatorType = getIndicatorTypeForFileState(item.state);
+    const itemMarginForIndex = index === imageUploads.length - 1 ? { marginRight: 8 } : {};
+
+    return (
+      <View style={[styles.itemContainer, itemMarginForIndex, itemContainer]}>
+        <UploadProgressIndicator
+          action={() => {
+            uploadImage({ newImage: item });
+          }}
+          style={styles.upload}
+          type={indicatorType}
+        >
+          <Image
+            resizeMode='cover'
+            source={{ uri: item.file.uri || item.url }}
+            style={[styles.upload, upload]}
+          />
+        </UploadProgressIndicator>
+        <TouchableOpacity
+          onPress={() => {
+            removeImage(item.id);
+          }}
+          style={[styles.dismiss, { backgroundColor: overlay }, dismiss]}
+          testID='remove-image-upload-preview'
+        >
+          <Close />
+        </TouchableOpacity>
+        <UnsupportedImageTypeIndicator indicatorType={indicatorType} />
+      </View>
+    );
+  };
 
   return imageUploads.length > 0 ? (
     <FlatList

package/src/components/MessageInput/UploadProgressIndicator.tsx

@@ -13,6 +13,8 @@ import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Refresh } from '../../icons';
 import { ProgressIndicatorTypes } from '../../utils/utils';
 
+const REFRESH_ICON_SIZE = 18;
+
 const styles = StyleSheet.create({
   activityIndicatorContainer: {
     alignItems: 'center',
@@ -55,27 +57,25 @@ const styles = StyleSheet.create({
 export type UploadProgressIndicatorProps = {
   /** Action triggered when clicked indicator */
   action?: (event: GestureResponderEvent) => void;
-  /** Boolean status of upload progress */
-  active?: boolean;
   /** style */
   style?: StyleProp<ViewStyle>;
   /** Type of active indicator */
-  type?: 'in_progress' | 'retry';
+  type?: 'in_progress' | 'retry' | 'not_supported' | 'inactive' | null;
 };
 
 export const UploadProgressIndicator: React.FC<UploadProgressIndicatorProps> = (props) => {
-  const { action, active, children, style, type } = props;
+  const { action, children, style, type } = props;
 
   const {
     theme: {
-      colors: { overlay: overlayColor, white_smoke },
+      colors: { overlay: overlayColor },
       messageInput: {
         uploadProgressIndicator: { container, overlay },
       },
     },
   } = useTheme();
 
-  return !active ? (
+  return type === ProgressIndicatorTypes.INACTIVE ? (
     <View style={[styles.overflowHidden, style]} testID='inactive-upload-progress-indicator'>
       {children}
     </View>
@@ -83,26 +83,53 @@ export const UploadProgressIndicator: React.FC<UploadProgressIndicatorProps> = (
     <View style={[styles.overflowHidden, style]} testID='active-upload-progress-indicator'>
       {children}
       <View style={[styles.overlay, { backgroundColor: overlayColor }, overlay]} />
-      <View style={[styles.container, { backgroundColor: overlayColor }, container]}>
-        {type === ProgressIndicatorTypes.IN_PROGRESS && (
-          <View style={styles.activityIndicatorContainer}>
-            <ActivityIndicator color={white_smoke} testID='upload-progress-indicator' />
-          </View>
-        )}
-        {type === ProgressIndicatorTypes.RETRY && (
-          <TouchableOpacity onPress={action} style={styles.retryButtonContainer}>
-            <Refresh
-              height={18}
-              pathFill={white_smoke}
-              testID='retry-upload-progress-indicator'
-              width={18}
-            />
-          </TouchableOpacity>
-        )}
+      <View
+        style={[
+          type === ProgressIndicatorTypes.NOT_SUPPORTED ? styles.overflowHidden : styles.container,
+          { backgroundColor: overlayColor },
+          container,
+        ]}
+        testID='not-supported-upload-progress-indicator'
+      >
+        {type === ProgressIndicatorTypes.IN_PROGRESS && <InProgressIndicator />}
+        {type === ProgressIndicatorTypes.RETRY && <RetryIndicator action={action} />}
       </View>
     </View>
   );
 };
 
+const InProgressIndicator = () => {
+  const {
+    theme: {
+      colors: { white_smoke },
+    },
+  } = useTheme();
+
+  return (
+    <View style={styles.activityIndicatorContainer}>
+      <ActivityIndicator color={white_smoke} testID='upload-progress-indicator' />
+    </View>
+  );
+};
+
+const RetryIndicator = ({ action }: Pick<UploadProgressIndicatorProps, 'action'>) => {
+  const {
+    theme: {
+      colors: { white_smoke },
+    },
+  } = useTheme();
+
+  return (
+    <TouchableOpacity onPress={action} style={styles.retryButtonContainer}>
+      <Refresh
+        height={REFRESH_ICON_SIZE}
+        pathFill={white_smoke}
+        testID='retry-upload-progress-indicator'
+        width={REFRESH_ICON_SIZE}
+      />
+    </TouchableOpacity>
+  );
+};
+
 UploadProgressIndicator.displayName =
   'UploadProgressIndicator{messageInput{uploadProgressIndicator}}';

package/src/components/MessageInput/__tests__/FileUploadPreview.test.js

@@ -31,6 +31,7 @@ describe('FileUploadPreview', () => {
       generateFileUploadPreview({ id: 'file-upload-id-1', state: FileState.UPLOADING }),
       generateFileUploadPreview({ id: 'file-upload-id-2', state: FileState.UPLOADING }),
       generateFileUploadPreview({ id: 'file-upload-id-3', state: FileState.UPLOADING }),
+      generateFileUploadPreview({ id: 'file-upload-id-4', state: FileState.UPLOADING }),
     ];
     const removeFile = jest.fn();
     const uploadFile = jest.fn();
@@ -47,7 +48,7 @@ describe('FileUploadPreview', () => {
     const channel = chatClient.channel('messaging', mockedChannel.id);
     await channel.query();
 
-    const { getAllByTestId, queryAllByTestId, rerender, toJSON } = render(
+    const { getAllByTestId, queryAllByTestId, queryAllByText } = render(
       <OverlayProvider>
         <Chat client={chatClient}>
           <Channel channel={channel} FlatList={MockedFlatList}>
@@ -66,6 +67,7 @@ describe('FileUploadPreview', () => {
       expect(queryAllByTestId('inactive-upload-progress-indicator')).toHaveLength(0);
       expect(queryAllByTestId('upload-progress-indicator')).toHaveLength(fileUploads.length);
       expect(queryAllByTestId('retry-upload-progress-indicator')).toHaveLength(0);
+      expect(queryAllByText('File type not supported')).toHaveLength(0);
       expect(removeFile).toHaveBeenCalledTimes(0);
       expect(uploadFile).toHaveBeenCalledTimes(0);
     });
@@ -76,29 +78,6 @@ describe('FileUploadPreview', () => {
       expect(removeFile).toHaveBeenCalledTimes(1);
       expect(uploadFile).toHaveBeenCalledTimes(0);
     });
-
-    rerender(
-      <OverlayProvider>
-        <Chat client={chatClient}>
-          <Channel channel={channel} FlatList={MockedFlatList}>
-            <FileUploadPreview
-              fileUploads={fileUploads.map((file, index) => ({
-                ...file,
-                id: `${index}`,
-              }))}
-              removeFile={removeFile}
-              uploadFile={uploadFile}
-            />
-          </Channel>
-        </Chat>
-      </OverlayProvider>,
-    );
-
-    const snapshot = toJSON();
-
-    await waitFor(() => {
-      expect(snapshot).toMatchSnapshot();
-    });
   });
 
   it('should render FileUploadPreview with all uploaded files', async () => {
@@ -106,6 +85,7 @@ describe('FileUploadPreview', () => {
       generateFileUploadPreview({ id: 'file-upload-id-1', state: FileState.UPLOADED }),
       generateFileUploadPreview({ id: 'file-upload-id-2', state: FileState.UPLOADED }),
       generateFileUploadPreview({ id: 'file-upload-id-3', state: FileState.UPLOADED }),
+      generateFileUploadPreview({ id: 'file-upload-id-4', state: FileState.UPLOADED }),
     ];
     const removeFile = jest.fn();
     const uploadFile = jest.fn();
@@ -122,7 +102,7 @@ describe('FileUploadPreview', () => {
     const channel = chatClient.channel('messaging', mockedChannel.id);
     await channel.query();
 
-    const { getAllByTestId, queryAllByTestId, rerender, toJSON } = render(
+    const { getAllByTestId, queryAllByTestId, queryAllByText } = render(
       <OverlayProvider>
         <Chat client={chatClient}>
           <Channel channel={channel} FlatList={MockedFlatList}>
@@ -143,6 +123,7 @@ describe('FileUploadPreview', () => {
       );
       expect(queryAllByTestId('upload-progress-indicator')).toHaveLength(0);
       expect(queryAllByTestId('retry-upload-progress-indicator')).toHaveLength(0);
+      expect(queryAllByText('File type not supported')).toHaveLength(0);
       expect(removeFile).toHaveBeenCalledTimes(0);
       expect(uploadFile).toHaveBeenCalledTimes(0);
     });
@@ -153,29 +134,6 @@ describe('FileUploadPreview', () => {
       expect(removeFile).toHaveBeenCalledTimes(1);
       expect(uploadFile).toHaveBeenCalledTimes(0);
     });
-
-    rerender(
-      <OverlayProvider>
-        <Chat client={chatClient}>
-          <Channel channel={channel} FlatList={MockedFlatList}>
-            <FileUploadPreview
-              fileUploads={fileUploads.map((file, index) => ({
-                ...file,
-                id: `${index}`,
-              }))}
-              removeFile={removeFile}
-              uploadFile={uploadFile}
-            />
-          </Channel>
-        </Chat>
-      </OverlayProvider>,
-    );
-
-    const snapshot = toJSON();
-
-    await waitFor(() => {
-      expect(snapshot).toMatchSnapshot();
-    });
   });
 
   it('should render FileUploadPreview with all failed files', async () => {
@@ -183,6 +141,7 @@ describe('FileUploadPreview', () => {
       generateFileUploadPreview({ id: 'file-upload-id-1', state: FileState.UPLOAD_FAILED }),
       generateFileUploadPreview({ id: 'file-upload-id-2', state: FileState.UPLOAD_FAILED }),
       generateFileUploadPreview({ id: 'file-upload-id-3', state: FileState.UPLOAD_FAILED }),
+      generateFileUploadPreview({ id: 'file-upload-id-4', state: FileState.UPLOAD_FAILED }),
     ];
     const removeFile = jest.fn();
     const uploadFile = jest.fn();
@@ -199,7 +158,7 @@ describe('FileUploadPreview', () => {
     const channel = chatClient.channel('messaging', mockedChannel.id);
     await channel.query();
 
-    const { getAllByTestId, queryAllByTestId, rerender, toJSON } = render(
+    const { getAllByTestId, queryAllByTestId, queryAllByText } = render(
       <OverlayProvider>
         <Chat client={chatClient}>
           <Channel channel={channel} FlatList={MockedFlatList}>
@@ -218,6 +177,7 @@ describe('FileUploadPreview', () => {
       expect(queryAllByTestId('inactive-upload-progress-indicator')).toHaveLength(0);
       expect(queryAllByTestId('upload-progress-indicator')).toHaveLength(0);
       expect(queryAllByTestId('retry-upload-progress-indicator')).toHaveLength(fileUploads.length);
+      expect(queryAllByText('File type not supported')).toHaveLength(0);
       expect(removeFile).toHaveBeenCalledTimes(0);
       expect(uploadFile).toHaveBeenCalledTimes(0);
     });
@@ -235,16 +195,36 @@ describe('FileUploadPreview', () => {
       expect(removeFile).toHaveBeenCalledTimes(1);
       expect(uploadFile).toHaveBeenCalledTimes(1);
     });
+  });
+
+  it('should render FileUploadPreview with all unsupported files', async () => {
+    const fileUploads = [
+      generateFileUploadPreview({ id: 'file-upload-id-1', state: FileState.NOT_SUPPORTED }),
+      generateFileUploadPreview({ id: 'file-upload-id-2', state: FileState.NOT_SUPPORTED }),
+      generateFileUploadPreview({ id: 'file-upload-id-3', state: FileState.NOT_SUPPORTED }),
+      generateFileUploadPreview({ id: 'file-upload-id-4', state: FileState.NOT_SUPPORTED }),
+    ];
+    const removeFile = jest.fn();
+    const uploadFile = jest.fn();
+
+    const user1 = generateUser();
 
-    rerender(
+    const mockedChannel = generateChannelResponse({
+      members: [generateMember({ user: user1 })],
+      messages: [generateMessage({ user: user1 }), generateMessage({ user: user1 })],
+    });
+
+    const chatClient = await getTestClientWithUser({ id: 'testID' });
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    const channel = chatClient.channel('messaging', mockedChannel.id);
+    await channel.query();
+
+    const { getAllByTestId, queryAllByTestId, queryAllByText } = render(
       <OverlayProvider>
         <Chat client={chatClient}>
           <Channel channel={channel} FlatList={MockedFlatList}>
             <FileUploadPreview
-              fileUploads={fileUploads.map((file, index) => ({
-                ...file,
-                id: `${index}`,
-              }))}
+              fileUploads={fileUploads}
               removeFile={removeFile}
               uploadFile={uploadFile}
             />
@@ -253,10 +233,21 @@ describe('FileUploadPreview', () => {
       </OverlayProvider>,
     );
 
-    const snapshot = toJSON();
+    await waitFor(() => {
+      expect(queryAllByTestId('active-upload-progress-indicator')).toHaveLength(fileUploads.length);
+      expect(queryAllByTestId('inactive-upload-progress-indicator')).toHaveLength(0);
+      expect(queryAllByTestId('upload-progress-indicator')).toHaveLength(0);
+      expect(queryAllByTestId('retry-upload-progress-indicator')).toHaveLength(0);
+      expect(queryAllByText('File type not supported')).toHaveLength(fileUploads.length);
+      expect(removeFile).toHaveBeenCalledTimes(0);
+      expect(uploadFile).toHaveBeenCalledTimes(0);
+    });
+
+    fireEvent.press(getAllByTestId('remove-file-upload-preview')[0]);
 
     await waitFor(() => {
-      expect(snapshot).toMatchSnapshot();
+      expect(removeFile).toHaveBeenCalledTimes(1);
+      expect(uploadFile).toHaveBeenCalledTimes(0);
     });
   });
 
@@ -265,6 +256,7 @@ describe('FileUploadPreview', () => {
       generateFileUploadPreview({ id: 'file-upload-id-1', state: FileState.UPLOADING }),
       generateFileUploadPreview({ id: 'file-upload-id-2', state: FileState.UPLOADED }),
       generateFileUploadPreview({ id: 'file-upload-id-3', state: FileState.UPLOAD_FAILED }),
+      generateFileUploadPreview({ id: 'file-upload-id-3', state: FileState.NOT_SUPPORTED }),
     ];
     const removeFile = jest.fn();
     const uploadFile = jest.fn();
@@ -281,7 +273,7 @@ describe('FileUploadPreview', () => {
     const channel = chatClient.channel('messaging', mockedChannel.id);
     await channel.query();
 
-    const { queryAllByTestId, rerender, toJSON } = render(
+    const { queryAllByTestId, queryAllByText } = render(
       <OverlayProvider>
         <Chat client={chatClient}>
           <Channel channel={channel} FlatList={MockedFlatList}>
@@ -301,31 +293,9 @@ describe('FileUploadPreview', () => {
       expect(queryAllByTestId('inactive-upload-progress-indicator')).toHaveLength(1);
       expect(queryAllByTestId('upload-progress-indicator')).toHaveLength(1);
       expect(queryAllByTestId('retry-upload-progress-indicator')).toHaveLength(1);
+      expect(queryAllByText('File type not supported')).toHaveLength(1);
       expect(removeFile).toHaveBeenCalledTimes(0);
       expect(uploadFile).toHaveBeenCalledTimes(0);
     });
-
-    rerender(
-      <OverlayProvider>
-        <Chat client={chatClient}>
-          <Channel channel={channel} FlatList={MockedFlatList}>
-            <FileUploadPreview
-              fileUploads={fileUploads.map((file, index) => ({
-                ...file,
-                id: `${index}`,
-              }))}
-              removeFile={removeFile}
-              uploadFile={uploadFile}
-            />
-          </Channel>
-        </Chat>
-      </OverlayProvider>,
-    );
-
-    const snapshot = toJSON();
-
-    await waitFor(() => {
-      expect(snapshot).toMatchSnapshot();
-    });
   });
 });