updating tests, adding types, adding custom override for FileUploadPreview and ImageUploadPreview components

Author: Vir Desai

src/components/MessageInput/FileUploadPreview.js

@@ -7,6 +7,7 @@ import UploadProgressIndicator from './UploadProgressIndicator';
 
 import FileIcon from '../Attachment/FileIcon';
 
+import closeRound from '../../images/icons/close-round.png';
 import { themed } from '../../styles/theme';
 import { FileState, ProgressIndicatorTypes } from '../../utils/utils';
 
@@ -39,6 +40,25 @@ const Container = styled.View`
   ${({ theme }) => theme.messageInput.fileUploadPreview.container.css};
 `;
 
+const Dismiss = styled.TouchableOpacity`
+  align-items: center;
+  background-color: #fff;
+  border-radius: 20px;
+  height: 20px;
+  justify-content: center;
+  position: absolute;
+  right: 5;
+  top: 5;
+  width: 20px;
+  ${({ theme }) => theme.messageInput.fileUploadPreview.dismiss.css};
+`;
+
+const DismissImage = styled.Image`
+  height: 10px;
+  width: 10px;
+  ${({ theme }) => theme.messageInput.fileUploadPreview.dismissImage.css};
+`;
+
 const FilenameText = styled.Text`
   padding-left: 10px;
   ${({ theme }) => theme.messageInput.fileUploadPreview.filenameText.css};
@@ -68,27 +88,38 @@ const FileUploadPreview = ({
     }
 
     return (
-      <UploadProgressIndicator
-        action={() => {
-          retryUpload ? retryUpload(item.id) : null;
-        }}
-        active={item.state !== FileState.UPLOADED}
-        cancel={() => {
-          removeFile ? removeFile(item.id) : null;
-        }}
-        type={type}
-      >
-        <AttachmentContainerView>
-          <AttachmentView>
-            <AttachmentFileIcon mimeType={item.file.type} size={20} />
-            <FilenameText>
-              {item.file.name.length > 35
-                ? item.file.name.substring(0, 35).concat('...')
-                : item.file.name}
-            </FilenameText>
-          </AttachmentView>
-        </AttachmentContainerView>
-      </UploadProgressIndicator>
+      <>
+        <UploadProgressIndicator
+          action={() => {
+            if (retryUpload) {
+              retryUpload(item.id);
+            }
+          }}
+          active={item.state !== FileState.UPLOADED}
+          type={type}
+        >
+          <AttachmentContainerView>
+            <AttachmentView>
+              <AttachmentFileIcon mimeType={item.file.type} size={20} />
+              <FilenameText>
+                {item.file.name.length > 35
+                  ? item.file.name.substring(0, 35).concat('...')
+                  : item.file.name}
+              </FilenameText>
+            </AttachmentView>
+          </AttachmentContainerView>
+        </UploadProgressIndicator>
+        <Dismiss
+          onPress={() => {
+            if (removeFile) {
+              removeFile(item.id);
+            }
+          }}
+          testID='remove-file-upload-preview'
+        >
+          <DismissImage source={closeRound} />
+        </Dismiss>
+      </>
     );
   };
 

src/components/MessageInput/ImageUploadPreview.js

@@ -69,7 +69,11 @@ const ImageUploadPreview = ({ imageUploads, removeImage, retryUpload }) => {
     return (
       <ItemContainer>
         <UploadProgressIndicator
-          action={() => (retryUpload ? retryUpload(item.id) : null)}
+          action={() => {
+            if (retryUpload) {
+              retryUpload(item.id);
+            }
+          }}
           active={item.state !== FileState.UPLOADED}
           type={type}
         >
@@ -79,7 +83,11 @@ const ImageUploadPreview = ({ imageUploads, removeImage, retryUpload }) => {
           />
         </UploadProgressIndicator>
         <Dismiss
-          onPress={() => removeImage(item.id)}
+          onPress={() => {
+            if (removeImage) {
+              removeImage(item.id);
+            }
+          }}
           testID='remove-image-upload-preview'
         >
           <DismissImage source={closeRound} />

src/components/MessageInput/MessageInput.js

@@ -8,8 +8,8 @@ import { logChatPromiseExecution } from 'stream-chat';
 
 import ActionSheetAttachmentDefault from './ActionSheetAttachment';
 import AttachButtonDefault from './AttachButton';
-import FileUploadPreview from './FileUploadPreview';
-import ImageUploadPreview from './ImageUploadPreview';
+import FileUploadPreviewDefault from './FileUploadPreview';
+import ImageUploadPreviewDefault from './ImageUploadPreview';
 import SendButtonDefault from './SendButton';
 
 import { useMessageDetailsForState } from './hooks/useMessageDetailsForState';
@@ -123,8 +123,10 @@ const MessageInput = (props) => {
     compressImageQuality,
     doDocUploadRequest,
     doImageUploadRequest,
+    FileUploadPreview = FileUploadPreviewDefault,
     hasFilePicker = true,
     hasImagePicker = true,
+    ImageUploadPreview = ImageUploadPreviewDefault,
     initialValue,
     Input,
     maxNumberOfFiles,
@@ -870,10 +872,26 @@ MessageInput.propTypes = {
    * @param channel Current channel object
    * */
   doImageUploadRequest: PropTypes.func,
+  /**
+   * Custom UI component for FileUploadPreview.
+   * Defaults to and accepts same props as: https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageInput/FileUploadPreview.js
+   */
+  FileUploadPreview: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.elementType,
+  ]),
   /** If component should have file picker functionality  */
   hasFilePicker: PropTypes.bool,
   /** If component should have image picker functionality  */
   hasImagePicker: PropTypes.bool,
+  /**
+   * Custom UI component for ImageUploadPreview.
+   * Defaults to and accepts same props as: https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageInput/ImageUploadPreview.js
+   */
+  ImageUploadPreview: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.elementType,
+  ]),
   /** Initial value to set on input */
   initialValue: PropTypes.string,
   /** Limit on allowed number of files to attach at a time. */

src/components/MessageInput/UploadProgressIndicator.js

@@ -38,12 +38,6 @@ const ActivityIndicatorContainer = styled.View`
   top: 0;
 `;
 
-const DismissText = styled.Text`
-  align-self: flex-end;
-  margin-right: 10px;
-  ${({ theme }) => theme.messageInput.uploadProgressIndicator.dismiss.css};
-`;
-
 const RetryButtonContainer = styled.TouchableOpacity`
   align-items: center;
   bottom: 0;
@@ -54,7 +48,7 @@ const RetryButtonContainer = styled.TouchableOpacity`
   top: 0;
 `;
 
-const UploadProgressIndicator = ({ action, active, cancel, children, type }) =>
+const UploadProgressIndicator = ({ action, active, children, type }) =>
   !active ? (
     <View testID='inactive-upload-progress-indicator'>{children}</View>
   ) : (
@@ -63,7 +57,7 @@ const UploadProgressIndicator = ({ action, active, cancel, children, type }) =>
       <Overlay />
       <Container>
         {type === ProgressIndicatorTypes.IN_PROGRESS && (
-          <ActivityIndicatorContainer style={{}}>
+          <ActivityIndicatorContainer>
             <ActivityIndicator
               color='grey'
               testID='upload-progress-indicator'
@@ -79,20 +73,15 @@ const UploadProgressIndicator = ({ action, active, cancel, children, type }) =>
             />
           </RetryButtonContainer>
         )}
-        <DismissText onPress={cancel} testID='remove-file-upload-preview'>
-          X
-        </DismissText>
       </Container>
     </View>
   );
 
 UploadProgressIndicator.propTypes = {
   /** Action triggered when clicked indicator */
   action: PropTypes.func,
-  active: PropTypes.bool,
-  /** Action triggered when clicked cancel button */
-  cancel: PropTypes.func,
   /** Boolean status of upload progress */
+  active: PropTypes.bool,
   /** Type of active indicator */
   type: PropTypes.oneOf([
     ProgressIndicatorTypes.IN_PROGRESS,

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

@@ -49,13 +49,6 @@ describe('FileUploadPreview', () => {
       expect(retryUpload).toHaveBeenCalledTimes(0);
     });
 
-    fireEvent.press(getAllByTestId('active-upload-progress-indicator')[0]);
-
-    await waitFor(() => {
-      expect(removeFile).toHaveBeenCalledTimes(1);
-      expect(retryUpload).toHaveBeenCalledTimes(1);
-    });
-
     rerender(
       <FileUploadPreview
         fileUploads={fileUploads.map((file, index) => ({
@@ -170,7 +163,7 @@ describe('FileUploadPreview', () => {
       expect(retryUpload).toHaveBeenCalledTimes(0);
     });
 
-    fireEvent.press(getAllByTestId('active-upload-progress-indicator')[0]);
+    fireEvent.press(getAllByTestId('retry-upload-progress-indicator')[0]);
 
     await waitFor(() => {
       expect(removeFile).toHaveBeenCalledTimes(1);

src/components/MessageInput/__tests__/ImageUploadPreview.test.js

@@ -49,13 +49,6 @@ describe('ImageUploadPreview', () => {
       expect(retryUpload).toHaveBeenCalledTimes(0);
     });
 
-    fireEvent.press(getAllByTestId('active-upload-progress-indicator')[0]);
-
-    await waitFor(() => {
-      expect(removeImage).toHaveBeenCalledTimes(1);
-      expect(retryUpload).toHaveBeenCalledTimes(1);
-    });
-
     rerender(
       <ImageUploadPreview
         imageUploads={imageUploads.map((image, index) => ({
@@ -170,7 +163,7 @@ describe('ImageUploadPreview', () => {
       expect(retryUpload).toHaveBeenCalledTimes(0);
     });
 
-    fireEvent.press(getAllByTestId('active-upload-progress-indicator')[0]);
+    fireEvent.press(getAllByTestId('retry-upload-progress-indicator')[0]);
 
     await waitFor(() => {
       expect(removeImage).toHaveBeenCalledTimes(1);

src/components/MessageInput/__tests__/UploadProgressIndicator.test.js

@@ -55,7 +55,7 @@ describe('UploadProgressIndicator', () => {
   it('should render an active IN_PROGRESS UploadProgressIndicator', async () => {
     const action = jest.fn();
 
-    const { getByTestId, queryByTestId, toJSON } = render(
+    const { queryByTestId, toJSON } = render(
       <UploadProgressIndicator
         action={action}
         active
@@ -66,13 +66,11 @@ describe('UploadProgressIndicator', () => {
     await waitFor(() => {
       expect(queryByTestId('active-upload-progress-indicator')).toBeTruthy();
       expect(queryByTestId('inactive-upload-progress-indicator')).toBeFalsy();
+      expect(queryByTestId('upload-progress-indicator')).toBeTruthy();
+      expect(queryByTestId('retry-upload-progress-indicator')).toBeFalsy();
       expect(action).toHaveBeenCalledTimes(0);
     });
 
-    fireEvent.press(getByTestId('active-upload-progress-indicator'));
-
-    await waitFor(() => expect(action).toHaveBeenCalledTimes(1));
-
     const snapshot = toJSON();
 
     await waitFor(() => {
@@ -94,10 +92,12 @@ describe('UploadProgressIndicator', () => {
     await waitFor(() => {
       expect(queryByTestId('active-upload-progress-indicator')).toBeTruthy();
       expect(queryByTestId('inactive-upload-progress-indicator')).toBeFalsy();
+      expect(queryByTestId('upload-progress-indicator')).toBeFalsy();
+      expect(queryByTestId('retry-upload-progress-indicator')).toBeTruthy();
       expect(action).toHaveBeenCalledTimes(0);
     });
 
-    fireEvent.press(getByTestId('active-upload-progress-indicator'));
+    fireEvent.press(getByTestId('retry-upload-progress-indicator'));
 
     await waitFor(() => expect(action).toHaveBeenCalledTimes(1));