Merge pull request #1746 from GetStream/khushal87-issue-1732

fix: unresponsive clear button when the file type is not supported

Author: vanGalilea

package/src/components/MessageInput/FileUploadPreview.tsx

@@ -100,6 +100,7 @@ const UnsupportedFileTypeOrFileSizeIndicator = ({
   } = useTheme();
 
   const { t } = useTranslationContext();
+
   return indicatorType === ProgressIndicatorTypes.NOT_SUPPORTED ? (
     <View style={styles.unsupportedFile}>
       <Warning

package/src/components/MessageInput/UploadProgressIndicator.tsx

@@ -70,7 +70,7 @@ export const UploadProgressIndicator: React.FC<UploadProgressIndicatorProps> = (
     theme: {
       colors: { overlay: overlayColor },
       messageInput: {
-        uploadProgressIndicator: { container, overlay },
+        uploadProgressIndicator: { container },
       },
     },
   } = useTheme();
@@ -82,7 +82,6 @@ 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={[
           type === ProgressIndicatorTypes.NOT_SUPPORTED ? styles.overflowHidden : styles.container,

package/src/components/MessageInput/__tests__/__snapshots__/UploadProgressIndicator.test.js.snap

@@ -12,24 +12,6 @@ exports[`UploadProgressIndicator should render an active UploadProgressIndicator
   }
   testID="active-upload-progress-indicator"
 >
-  <View
-    style={
-      Array [
-        Object {
-          "alignItems": "center",
-          "height": "100%",
-          "justifyContent": "center",
-          "opacity": 0,
-          "position": "absolute",
-          "width": "100%",
-        },
-        Object {
-          "backgroundColor": "#000000CC",
-        },
-        Object {},
-      ]
-    }
-  />
   <View
     style={
       Array [
@@ -82,24 +64,6 @@ exports[`UploadProgressIndicator should render an active UploadProgressIndicator
   }
   testID="active-upload-progress-indicator"
 >
-  <View
-    style={
-      Array [
-        Object {
-          "alignItems": "center",
-          "height": "100%",
-          "justifyContent": "center",
-          "opacity": 0,
-          "position": "absolute",
-          "width": "100%",
-        },
-        Object {
-          "backgroundColor": "#000000CC",
-        },
-        Object {},
-      ]
-    }
-  />
   <View
     style={
       Array [
@@ -152,24 +116,6 @@ exports[`UploadProgressIndicator should render an active UploadProgressIndicator
   }
   testID="active-upload-progress-indicator"
 >
-  <View
-    style={
-      Array [
-        Object {
-          "alignItems": "center",
-          "height": "100%",
-          "justifyContent": "center",
-          "opacity": 0,
-          "position": "absolute",
-          "width": "100%",
-        },
-        Object {
-          "backgroundColor": "#000000CC",
-        },
-        Object {},
-      ]
-    }
-  />
   <View
     style={
       Array [
@@ -199,24 +145,6 @@ exports[`UploadProgressIndicator should render an active UploadProgressIndicator
   }
   testID="active-upload-progress-indicator"
 >
-  <View
-    style={
-      Array [
-        Object {
-          "alignItems": "center",
-          "height": "100%",
-          "justifyContent": "center",
-          "opacity": 0,
-          "position": "absolute",
-          "width": "100%",
-        },
-        Object {
-          "backgroundColor": "#000000CC",
-        },
-        Object {},
-      ]
-    }
-  />
   <View
     style={
       Array [