stream-chat-react-native-core 4.7.0-beta.4 → 4.7.0-beta.5

package/lib/typescript/components/AttachmentPicker/AttachmentPicker.d.ts

@@ -1,6 +1,17 @@
 import React from 'react';
 import { BottomSheetHandleProps } from '@gorhom/bottom-sheet';
 import type { AttachmentPickerErrorProps } from './components/AttachmentPickerError';
+import type { Asset, File } from '../../types/types';
+export declare type AttachmentPickerItemType = {
+    asset: Asset;
+    ImageOverlaySelectedComponent: React.ComponentType;
+    maxNumberOfFiles: number;
+    numberOfUploads: number;
+    selected: boolean;
+    setSelectedFiles: React.Dispatch<React.SetStateAction<File[]>>;
+    setSelectedImages: React.Dispatch<React.SetStateAction<Asset[]>>;
+    numberOfAttachmentPickerImageColumns?: number;
+};
 export declare type AttachmentPickerProps = {
     /**
      * Custom UI component to render [draggable handle](https://github.com/GetStream/stream-chat-react-native/blob/main/screenshots/docs/1.png) of attachment picker.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "4.7.0-beta.4",
+  "version": "4.7.0-beta.5",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"

package/src/components/AttachmentPicker/AttachmentPicker.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
+  Alert,
   BackHandler,
   Dimensions,
   ImageBackground,
@@ -56,23 +57,20 @@ const styles = StyleSheet.create({
 const screenHeight = vh(100);
 const fullScreenHeight = Dimensions.get('window').height;
 
-type AttachmentImageProps = {
+export type AttachmentPickerItemType = {
   asset: Asset;
   ImageOverlaySelectedComponent: React.ComponentType;
   maxNumberOfFiles: number;
+  numberOfUploads: number;
   selected: boolean;
+  setSelectedFiles: React.Dispatch<React.SetStateAction<File[]>>;
   setSelectedImages: React.Dispatch<React.SetStateAction<Asset[]>>;
   numberOfAttachmentPickerImageColumns?: number;
 };
 
-type AttachmentVideoProps = {
-  asset: Asset;
-  ImageOverlaySelectedComponent: React.ComponentType;
-  maxNumberOfFiles: number;
-  selected: boolean;
-  setSelectedFiles: React.Dispatch<React.SetStateAction<File[]>>;
-  numberOfAttachmentPickerImageColumns?: number;
-};
+type AttachmentImageProps = Omit<AttachmentPickerItemType, 'setSelectedFiles'>;
+
+type AttachmentVideoProps = Omit<AttachmentPickerItemType, 'setSelectedImages'>;
 
 const AttachmentVideo: React.FC<AttachmentVideoProps> = (props) => {
   const {
@@ -80,6 +78,7 @@ const AttachmentVideo: React.FC<AttachmentVideoProps> = (props) => {
     ImageOverlaySelectedComponent,
     maxNumberOfFiles,
     numberOfAttachmentPickerImageColumns,
+    numberOfUploads,
     selected,
     setSelectedFiles,
   } = props;
@@ -115,7 +114,8 @@ const AttachmentVideo: React.FC<AttachmentVideoProps> = (props) => {
       setSelectedFiles((files) => files.filter((file) => file.uri !== asset.uri));
     } else {
       setSelectedFiles((files) => {
-        if (files.length >= maxNumberOfFiles) {
+        if (numberOfUploads >= maxNumberOfFiles) {
+          Alert.alert('Maximum number of files reached');
           return files;
         }
         return [
@@ -169,6 +169,7 @@ const AttachmentImage: React.FC<AttachmentImageProps> = (props) => {
     ImageOverlaySelectedComponent,
     maxNumberOfFiles,
     numberOfAttachmentPickerImageColumns,
+    numberOfUploads,
     selected,
     setSelectedImages,
   } = props;
@@ -188,7 +189,8 @@ const AttachmentImage: React.FC<AttachmentImageProps> = (props) => {
       setSelectedImages((images) => images.filter((image) => image.uri !== asset.uri));
     } else {
       setSelectedImages((images) => {
-        if (images.length >= maxNumberOfFiles) {
+        if (numberOfUploads >= maxNumberOfFiles) {
+          Alert.alert('Maximum number of files reached');
           return images;
         }
         return [...images, asset];
@@ -219,24 +221,13 @@ const AttachmentImage: React.FC<AttachmentImageProps> = (props) => {
   );
 };
 
-const renderImage = ({
-  item,
-}: {
-  item: {
-    asset: Asset;
-    ImageOverlaySelectedComponent: React.ComponentType;
-    maxNumberOfFiles: number;
-    selected: boolean;
-    setSelectedFiles: React.Dispatch<React.SetStateAction<File[]>>;
-    setSelectedImages: React.Dispatch<React.SetStateAction<Asset[]>>;
-    numberOfAttachmentPickerImageColumns?: number;
-  };
-}) => {
+const renderItem = ({ item }: { item: AttachmentPickerItemType }) => {
   const {
     asset,
     ImageOverlaySelectedComponent,
     maxNumberOfFiles,
     numberOfAttachmentPickerImageColumns,
+    numberOfUploads,
     selected,
     setSelectedFiles,
     setSelectedImages,
@@ -258,6 +249,7 @@ const renderImage = ({
       ImageOverlaySelectedComponent={ImageOverlaySelectedComponent}
       maxNumberOfFiles={maxNumberOfFiles}
       numberOfAttachmentPickerImageColumns={numberOfAttachmentPickerImageColumns}
+      numberOfUploads={numberOfUploads}
       selected={selected}
       setSelectedImages={setSelectedImages}
     />
@@ -267,6 +259,7 @@ const renderImage = ({
       ImageOverlaySelectedComponent={ImageOverlaySelectedComponent}
       maxNumberOfFiles={maxNumberOfFiles}
       numberOfAttachmentPickerImageColumns={numberOfAttachmentPickerImageColumns}
+      numberOfUploads={numberOfUploads}
       selected={selected}
       setSelectedFiles={setSelectedFiles}
     />
@@ -453,6 +446,7 @@ export const AttachmentPicker = React.forwardRef(
       ImageOverlaySelectedComponent,
       maxNumberOfFiles,
       numberOfAttachmentPickerImageColumns,
+      numberOfUploads: selectedFiles.length + selectedImages.length,
       selected:
         selectedImages.some((image) => image.uri === asset.uri) ||
         selectedFiles.some((file) => file.uri === asset.uri),
@@ -535,7 +529,7 @@ export const AttachmentPicker = React.forwardRef(
             keyExtractor={(item) => item.asset.uri}
             numColumns={numberOfAttachmentPickerImageColumns ?? 3}
             onEndReached={getMorePhotos}
-            renderItem={renderImage}
+            renderItem={renderItem}
           />
         </BottomSheet>
         {selectedPicker === 'images' && photoError && (

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -447,7 +447,7 @@ export const MessageInputProvider = <
   }>({});
   const [giphyActive, setGiphyActive] = useState(false);
   const [sendThreadMessageInChannel, setSendThreadMessageInChannel] = useState(false);
-  const { editing, hasFilePicker, hasImagePicker, initialValue, maxNumberOfFiles } = value;
+  const { editing, hasFilePicker, hasImagePicker, initialValue } = value;
   const {
     fileUploads,
     imageUploads,
@@ -536,7 +536,7 @@ export const MessageInputProvider = <
   };
 
   const openAttachmentPicker = () => {
-    if (hasImagePicker && !fileUploads.length) {
+    if (hasImagePicker) {
       Keyboard.dismiss();
       openPicker();
       setSelectedPicker('images');
@@ -548,7 +548,7 @@ export const MessageInputProvider = <
        * https://github.com/gorhom/react-native-bottom-sheet/issues/446
        */
       setTimeout(openPicker, 600);
-    } else if (hasFilePicker && numberOfUploads < maxNumberOfFiles) {
+    } else if (hasFilePicker) {
       pickFile();
     }
   };
@@ -572,6 +572,7 @@ export const MessageInputProvider = <
 
   const pickFile = async () => {
     if (numberOfUploads >= value.maxNumberOfFiles) {
+      Alert.alert('Maximum number of files reached');
       return;
     }
 

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "4.7.0-beta.4"
+  "version": "4.7.0-beta.5"
 }