feat: file icon preview redesign

Author: khushal87

package/src/components/Attachment/FileAttachment.tsx

@@ -6,7 +6,7 @@ import type { Attachment } from 'stream-chat';
 import { FilePreview } from './FilePreview';
 import { openUrlSafely } from './utils/openUrlSafely';
 
-import { FileIcon as FileIconDefault } from '../../components/Attachment/FileIcon';
+import { FileIcon as FileIconDefault, FileIconProps } from '../../components/Attachment/FileIcon';
 import {
   MessageContextValue,
   useMessageContext,
@@ -24,7 +24,7 @@ export type FileAttachmentPropsWithContext = Pick<
   Pick<MessagesContextValue, 'additionalPressableProps'> & {
     /** The attachment to render */
     attachment: Attachment;
-    attachmentIconSize?: number;
+    attachmentIconSize?: FileIconProps['size'];
     // TODO: Think we really need a way to style the file preview using props if we have theme.
     styles?: Partial<{
       container: StyleProp<ViewStyle>;

package/src/components/Attachment/FileIcon.tsx

@@ -3,25 +3,14 @@ import React from 'react';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
 import { Audio } from '../../icons/Audio';
-import { CSV } from '../../icons/CSV';
+import { Code } from '../../icons/Code';
 import { DOC } from '../../icons/DOC';
-import { DOCX } from '../../icons/DOCX';
-import { GenericFile } from '../../icons/GenericFile';
-import { HTML } from '../../icons/HTML';
-import { MD } from '../../icons/MD';
-import { ODT } from '../../icons/ODT';
+import { OtherFileIcon } from '../../icons/OtherFileIcon';
 import { PDF } from '../../icons/PDF';
-import { PPT } from '../../icons/PPT';
-import { PPTX } from '../../icons/PPTX';
-import { RAR } from '../../icons/RAR';
-import { RTF } from '../../icons/RTF';
-import { SEVEN_Z } from '../../icons/SEVEN_Z';
-import { TAR } from '../../icons/TAR';
-import { TXT } from '../../icons/TXT';
+import { Presentation } from '../../icons/Presentation';
+import { SpreadSheet } from '../../icons/SpreadSheet';
 import type { IconProps } from '../../icons/utils/base';
 import { Video } from '../../icons/Video';
-import { XLS } from '../../icons/XLS';
-import { XLSX } from '../../icons/XLSX';
 import { ZIP } from '../../icons/ZIP';
 
 // https://www.iana.org/assignments/media-types/media-types.xhtml#audio
@@ -203,9 +192,7 @@ const docMimeTypes = [
   'application/vnd.oasis.opendocument.text-flat-xml',
   // .uot
   // NOTE: firefox doesn't know mimetype so maybe ignore
-];
 
-const docXMimeTypes = [
   // Microsoft Word
   // .docx
   'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
@@ -215,6 +202,14 @@ const docXMimeTypes = [
   'application/vnd.ms-word.document.macroEnabled.12',
   // .dotm (no test)
   'application/vnd.ms-word.template.macroEnabled.12',
+
+  // LibreOffice/OpenOffice Writer
+  // .odt
+  'application/vnd.oasis.opendocument.text',
+  // .ott
+  'application/vnd.oasis.opendocument.text-template',
+  // .fodt
+  'application/vnd.oasis.opendocument.text-flat-xml',
 ];
 
 const excelMimeTypes = [
@@ -229,9 +224,7 @@ const excelMimeTypes = [
   'application/vnd.oasis.opendocument.spreadsheet-template',
   // .fods
   'application/vnd.oasis.opendocument.spreadsheet-flat-xml',
-];
 
-const excelXMimeTypes = [
   // .xlsx
   'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
   // .xltx (no test)
@@ -246,16 +239,6 @@ const excelXMimeTypes = [
   'application/vnd.ms-excel.addin.macroEnabled.12',
 ];
 
-const odtMimeTypes = [
-  // LibreOffice/OpenOffice Writer
-  // .odt
-  'application/vnd.oasis.opendocument.text',
-  // .ott
-  'application/vnd.oasis.opendocument.text-template',
-  // .fodt
-  'application/vnd.oasis.opendocument.text-flat-xml',
-];
-
 const powerpointMimeTypes = [
   // Microsoft Word
   // .ppt .pot .pps .ppa (no test for .ppa)
@@ -270,9 +253,7 @@ const powerpointMimeTypes = [
   'application/vnd.oasis.opendocument.presentation-flat-xml',
   // .uop
   // NOTE: firefox doesn't know mimetype so maybe ignore
-];
 
-const powerpointXMimeTypes = [
   // .pptx
   'application/vnd.openxmlformats-officedocument.presentationml.presentation',
   // .potx (no test)
@@ -289,7 +270,12 @@ const powerpointXMimeTypes = [
   'application/vnd.ms-powerpoint.slideshow.macroEnabled.12',
 ];
 
-const tarFileTypes = [
+const zipFileTypes = [
+  // .gzip
+  'application/gzip',
+  // .zip
+  'application/zip',
+
   // .ar
   'application/x-archive',
   // .tar
@@ -314,13 +300,6 @@ const tarFileTypes = [
   'application/x-webarchive',
 ];
 
-const zipFileTypes = [
-  // .gzip
-  'application/gzip',
-  // .zip
-  'application/zip',
-];
-
 const videoFileTypes = [
   'video/3g2',
   'video/3gp',
@@ -361,15 +340,17 @@ const videoFileTypes = [
   'video/x-flv',
 ];
 
+const codeFileTypes = [
+  'text/html',
+  'text/css',
+  'text/javascript',
+  'text/xml',
+  'text/csv',
+  'text/plain',
+];
+
 const mimeTypeToIconMap: Record<string, React.ComponentType<IconProps>> = {
   'application/pdf': PDF, // .pdf
-  'application/rtf': RTF, // .rtf
-  'application/vnd.rar': RAR, // .rar
-  'application/x-7z-compressed': SEVEN_Z, // .z7
-  'text/csv': CSV, // .csv
-  'text/html': HTML, // .html .htm
-  'text/markdown': MD, // .md
-  'text/plain': TXT, // .txt
 };
 
 for (const type of audioFileTypes) {
@@ -380,32 +361,12 @@ for (const type of docMimeTypes) {
   mimeTypeToIconMap[type] = DOC;
 }
 
-for (const type of docXMimeTypes) {
-  mimeTypeToIconMap[type] = DOCX;
-}
-
 for (const type of excelMimeTypes) {
-  mimeTypeToIconMap[type] = XLS;
-}
-
-for (const type of excelXMimeTypes) {
-  mimeTypeToIconMap[type] = XLSX;
-}
-
-for (const type of odtMimeTypes) {
-  mimeTypeToIconMap[type] = ODT;
+  mimeTypeToIconMap[type] = SpreadSheet;
 }
 
 for (const type of powerpointMimeTypes) {
-  mimeTypeToIconMap[type] = PPT;
-}
-
-for (const type of powerpointXMimeTypes) {
-  mimeTypeToIconMap[type] = PPTX;
-}
-
-for (const type of tarFileTypes) {
-  mimeTypeToIconMap[type] = TAR;
+  mimeTypeToIconMap[type] = Presentation;
 }
 
 for (const type of zipFileTypes) {
@@ -416,25 +377,48 @@ for (const type of videoFileTypes) {
   mimeTypeToIconMap[type] = Video;
 }
 
+for (const type of codeFileTypes) {
+  mimeTypeToIconMap[type] = Code;
+}
+
 function mimeTypeToIcon(mimeType?: string): React.ComponentType<IconProps> {
   if (!mimeType) {
-    return GenericFile;
+    return OtherFileIcon;
   }
 
   const Icon = mimeTypeToIconMap[mimeType];
   if (Icon) {
     return Icon;
   }
 
-  return GenericFile;
+  return OtherFileIcon;
 }
 
 export type FileIconProps = {
   mimeType?: string;
-  size?: number;
+  size?: 'sm' | 'md' | 'lg';
+};
+
+const sizeToNumber = (size?: 'sm' | 'md' | 'lg') => {
+  if (size === 'sm') {
+    return {
+      height: 24,
+      width: 19,
+    };
+  }
+  if (size === 'md') {
+    return {
+      height: 40,
+      width: 32,
+    };
+  }
+  return {
+    height: 48,
+    width: 40,
+  };
 };
 
-export const FileIcon = ({ mimeType, size }: FileIconProps) => {
+export const FileIcon = ({ mimeType, size = 'md' }: FileIconProps) => {
   const {
     theme: {
       messageSimple: {
@@ -445,7 +429,7 @@ export const FileIcon = ({ mimeType, size }: FileIconProps) => {
 
   const Icon = mimeTypeToIcon(mimeType);
 
-  return <Icon {...(size ? { height: size, width: size } : {})} {...icon} />;
+  return <Icon {...(size ? sizeToNumber(size) : {})} {...icon} />;
 };
 
 FileIcon.displayName = 'FileIcon{messageSimple{file{icon}}}';

package/src/components/Attachment/FilePreview.tsx

@@ -3,7 +3,7 @@ import { StyleProp, StyleSheet, Text, TextStyle, View, ViewStyle } from 'react-n
 
 import type { Attachment } from 'stream-chat';
 
-import { FileIcon as FileIconDefault } from '../../components/Attachment/FileIcon';
+import { FileIcon as FileIconDefault, FileIconProps } from '../../components/Attachment/FileIcon';
 import {
   MessagesContextValue,
   useMessagesContext,
@@ -15,7 +15,7 @@ import { getDurationLabelFromDuration, getFileSizeDisplayText } from '../../util
 export type FilePreviewProps = Partial<Pick<MessagesContextValue, 'FileAttachmentIcon'>> & {
   /** The attachment to render */
   attachment: Attachment;
-  attachmentIconSize?: number;
+  attachmentIconSize?: FileIconProps['size'];
   // TODO: Think we really need a way to style the file preview using props if we have theme.
   styles?: Partial<{
     container: StyleProp<ViewStyle>;

package/src/components/MessageInput/components/AttachmentPreview/FileAttachmentUploadPreview.tsx

@@ -78,7 +78,6 @@ export const FileAttachmentUploadPreview = ({
     <View style={[styles.wrapper, wrapper]} testID={'file-attachment-upload-preview'}>
       <FilePreview
         attachment={attachment}
-        attachmentIconSize={40}
         titleNumberOfLines={1}
         styles={{ container: styles.fileContainer }}
         indicator={renderIndicator}

package/src/components/Reply/Reply.tsx

@@ -67,7 +67,7 @@ const RightContent = React.memo(
     }
 
     if (attachment && isFileAttachment(attachment)) {
-      return <FileIcon mimeType={attachment.mime_type} size={40} />;
+      return <FileIcon mimeType={attachment.mime_type} />;
     }
 
     return null;

package/src/icons/Audio.tsx

@@ -1,39 +1,34 @@
 import React from 'react';
-import { Path } from 'react-native-svg';
 
-import { IconProps, RootSvg } from './utils/base';
+import Svg, { Path } from 'react-native-svg';
 
-export const Audio = (props: IconProps) => (
-  <RootSvg
-    height={props.height || 40}
-    viewBox={props.viewBox || '0 0 34 40'}
-    width={props.width || 34}
-    {...props}
-  >
+import { IconProps } from './utils/base';
+
+export const Audio = ({ height, width, ...rest }: IconProps) => (
+  <Svg width={width} height={height} viewBox='0 0 40 48' fill='none'>
     <Path
-      clipRule='evenodd'
-      d='M17.7168 33.672C18.2348 33.672 18.4238 34.155 18.4238 34.68C18.4238 35.142 18.2978 35.695 17.7168 35.695C17.1708 35.695 16.9888 35.142 16.9888 34.645C16.9888 34.183 17.1708 33.672 17.7168 33.672ZM19.5718 31.502H18.3818V33.2589H18.3678C18.1228 32.93 17.7798 32.762 17.3318 32.762C16.3028 32.762 15.7988 33.658 15.7988 34.603C15.7988 35.625 16.2818 36.6049 17.4228 36.6049C17.8428 36.6049 18.1928 36.423 18.4238 36.08H18.4378V36.5H19.5718V31.502ZM12.7095 34.6872C12.7095 34.2252 12.8775 33.6722 13.4305 33.6722C13.9835 33.6722 14.1585 34.2252 14.1585 34.6872C14.1585 35.1492 13.9835 35.6952 13.4305 35.6952C12.8775 35.6952 12.7095 35.1492 12.7095 34.6872ZM11.5195 34.6872C11.5195 35.7792 12.3035 36.6052 13.4305 36.6052C14.5575 36.6052 15.3485 35.7792 15.3485 34.6872C15.3485 33.5952 14.5575 32.7622 13.4305 32.7622C12.3035 32.7622 11.5195 33.5952 11.5195 34.6872ZM21.839 32.8671H22.574V33.6371H21.839V35.2891C21.839 35.5761 22.007 35.6391 22.266 35.6391C22.3142 35.6391 22.364 35.6357 22.4147 35.6323C22.4672 35.6287 22.5206 35.6251 22.574 35.6251V36.5001C22.481 36.5031 22.388 36.5099 22.295 36.5168C22.171 36.5259 22.047 36.5351 21.923 36.5351C20.908 36.5351 20.649 36.2411 20.649 35.2541V33.6371H20.047V32.8671H20.649V31.7681H21.839V32.8671Z'
-      fill={'#ffffff'}
-      fillRule='evenodd'
-      id='Vector'
+      d='M0 4C0 1.79086 1.79086 0 4 0H28L40 12V44C40 46.2091 38.2091 48 36 48H4C1.79086 48 0 46.2091 0 44V4Z'
+      fill='#2727B0'
+      {...rest}
     />
     <Path
-      d='M0 28.5H34V37.5C34 39.1569 32.6569 40.5 31 40.5H3C1.34315 40.5 0 39.1569 0 37.5V28.5Z'
-      fill={'#2727B0'}
-      id='extension bar'
+      d='M25.4359 15.564C26.827 16.9552 27.6875 18.877 27.6875 20.9999C27.6875 23.1227 26.827 25.0446 25.4359 26.4357M22.9168 18.0835C23.6633 18.83 24.125 19.8612 24.125 21.0003C24.125 22.1394 23.6633 23.1707 22.9168 23.9172M13.8125 17.8125H15.0162C15.3307 17.8125 15.6374 17.7136 15.8926 17.5298L19.5933 14.8653C19.8414 14.6867 20.1875 14.8639 20.1875 15.1696V26.8305C20.1875 27.1361 19.8414 27.3134 19.5933 27.1347L15.8926 24.4702C15.6374 24.2864 15.3307 24.1875 15.0162 24.1875H13.8125C12.9841 24.1875 12.3125 23.516 12.3125 22.6875V19.3125C12.3125 18.4841 12.9841 17.8125 13.8125 17.8125Z'
+      stroke='white'
+      strokeWidth='1.5'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      {...rest}
     />
-    <Path d='M0 3C0 1.34315 1.34315 0 3 0H23L34 11V28H0V3Z' fill={'#F5F5F5'} id='extension bar' />
     <Path
-      d='M34 11.5L26 11.5C24.3431 11.5 23 10.1569 23 8.5V0.5L34 11.5Z'
-      fill={'#DBDBDB'}
-      id='tab'
+      opacity='0.5'
+      d='M40 12L31 12C29.3431 12 28 10.6569 28 9V0L40 12Z'
+      fill='white'
+      {...rest}
     />
     <Path
-      clipRule='evenodd'
-      d='M8.87912 22.441H12.298L16.9521 25.2493C17.0307 25.3138 17.1293 25.349 17.2311 25.349C17.4738 25.3488 17.6705 25.1519 17.6703 24.9092V12.9399C17.6704 12.8381 17.6352 12.7396 17.5707 12.6609C17.4168 12.4732 17.1398 12.4457 16.9521 12.5996L12.298 15.408H8.87912C8.3936 15.408 8 15.8016 8 16.2871V21.5619C8 22.0474 8.3936 22.441 8.87912 22.441ZM12.9258 17.1664L15.9122 15.7224V22.1268L12.9258 20.6829H9.7583V17.1664H12.9258ZM19.8511 16.8517C19.474 16.9092 19.2397 17.1637 19.3283 17.4191L19.3262 17.42C19.5295 17.9995 19.6305 18.598 19.6284 19.1953C19.6305 19.7975 19.5237 20.4014 19.3196 20.9909C19.229 21.2462 19.4682 21.4996 19.8474 21.56C19.9008 21.5683 19.9542 21.572 20.0076 21.572C20.3259 21.572 20.6156 21.4234 20.6922 21.2057C20.9194 20.5451 21.0337 19.87 21.0374 19.1953C21.0349 18.5251 20.9211 17.8575 20.6955 17.2035C20.6053 16.9477 20.229 16.7908 19.8511 16.8517ZM22.1605 15.1028C22.5252 15.0163 22.9259 15.1454 23.055 15.3938C23.6891 16.6157 24 17.9042 24 19.1923C24.0004 20.4895 23.6796 21.7839 23.0521 23.0153C22.9503 23.2123 22.6763 23.3344 22.3828 23.3344C22.3071 23.3344 22.2301 23.3261 22.1543 23.3092C21.7863 23.2251 21.5914 22.9536 21.7185 22.7077C22.2988 21.5761 22.5922 20.3836 22.5931 19.1919C22.5931 18.0056 22.3054 16.8222 21.7276 15.7025C21.6001 15.4563 21.795 15.186 22.1605 15.1028Z'
-      fill={'#2727B0'}
-      fillRule='evenodd'
-      id='Vector_2'
+      d='M11.5938 40V35.6992H12.7344V36.3711H12.8047C12.8958 36.1289 13.0469 35.9414 13.2578 35.8086C13.4688 35.6732 13.7148 35.6055 13.9961 35.6055C14.1914 35.6055 14.3685 35.638 14.5273 35.7031C14.6862 35.7656 14.8216 35.8555 14.9336 35.9727C15.0456 36.0898 15.1315 36.2318 15.1914 36.3984H15.2617C15.3268 36.2396 15.4232 36.1016 15.5508 35.9844C15.6784 35.8646 15.8281 35.7721 16 35.707C16.1719 35.6393 16.3581 35.6055 16.5586 35.6055C16.8451 35.6055 17.0911 35.6641 17.2969 35.7812C17.5052 35.8984 17.6654 36.0651 17.7773 36.2812C17.8919 36.4948 17.9492 36.75 17.9492 37.0469V40H16.8086V37.332C16.8086 37.1576 16.7826 37.013 16.7305 36.8984C16.6784 36.7839 16.599 36.6979 16.4922 36.6406C16.388 36.5807 16.2565 36.5508 16.0977 36.5508C15.944 36.5508 15.8099 36.5859 15.6953 36.6562C15.5833 36.7266 15.4961 36.8216 15.4336 36.9414C15.3711 37.0612 15.3398 37.1992 15.3398 37.3555V40H14.1992V37.2812C14.1992 37.1276 14.1706 36.9961 14.1133 36.8867C14.0586 36.7773 13.9779 36.694 13.8711 36.6367C13.7669 36.5794 13.6406 36.5508 13.4922 36.5508C13.3438 36.5508 13.2122 36.5885 13.0977 36.6641C12.9857 36.737 12.8971 36.8385 12.832 36.9688C12.7669 37.0964 12.7344 37.2422 12.7344 37.4062V40H11.5938ZM19.0547 41.4258V35.6992H20.1953V36.3633H20.2656C20.3411 36.2096 20.4401 36.0781 20.5625 35.9688C20.6875 35.8594 20.8333 35.776 21 35.7188C21.1667 35.6589 21.3516 35.6289 21.5547 35.6289C21.9141 35.6289 22.224 35.7188 22.4844 35.8984C22.7448 36.0781 22.9453 36.3333 23.0859 36.6641C23.2292 36.9922 23.3008 37.3854 23.3008 37.8438V37.8516C23.3008 38.3125 23.2305 38.7083 23.0898 39.0391C22.9492 39.3698 22.7487 39.6237 22.4883 39.8008C22.2279 39.9779 21.9167 40.0664 21.5547 40.0664C21.3568 40.0664 21.1732 40.0365 21.0039 39.9766C20.8372 39.9141 20.6901 39.8268 20.5625 39.7148C20.4375 39.6029 20.3385 39.4688 20.2656 39.3125H20.1953V41.4258H19.0547ZM21.1641 39.1211C21.3672 39.1211 21.5404 39.0703 21.6836 38.9688C21.8294 38.8672 21.9414 38.7214 22.0195 38.5312C22.1003 38.3411 22.1406 38.1146 22.1406 37.8516V37.8438C22.1406 37.5807 22.1003 37.3542 22.0195 37.1641C21.9414 36.974 21.8294 36.8281 21.6836 36.7266C21.5404 36.625 21.3672 36.5742 21.1641 36.5742C20.9635 36.5742 20.7891 36.625 20.6406 36.7266C20.4948 36.8281 20.3815 36.974 20.3008 37.1641C20.2227 37.3516 20.1836 37.5781 20.1836 37.8438V37.8516C20.1836 38.112 20.224 38.3385 20.3047 38.5312C20.3854 38.7214 20.4987 38.8672 20.6445 38.9688C20.793 39.0703 20.9661 39.1211 21.1641 39.1211ZM26.3008 40.125C25.8763 40.125 25.5039 40.0547 25.1836 39.9141C24.8659 39.7708 24.6146 39.5729 24.4297 39.3203C24.2448 39.0651 24.138 38.7695 24.1094 38.4336L24.1055 38.3828H25.2344L25.2383 38.4258C25.2565 38.5716 25.3099 38.7018 25.3984 38.8164C25.4896 38.9284 25.612 39.0169 25.7656 39.082C25.9193 39.1445 26.0977 39.1758 26.3008 39.1758C26.5013 39.1758 26.6758 39.1419 26.8242 39.0742C26.9753 39.0039 27.0911 38.9076 27.1719 38.7852C27.2552 38.6628 27.2969 38.5221 27.2969 38.3633V38.3555C27.2969 38.0846 27.2005 37.8776 27.0078 37.7344C26.8177 37.5911 26.5521 37.5195 26.2109 37.5195H25.5664V36.6797H26.1953C26.3932 36.6797 26.5651 36.6471 26.7109 36.582C26.8568 36.5169 26.9701 36.4271 27.0508 36.3125C27.1315 36.1953 27.1719 36.0612 27.1719 35.9102V35.9023C27.1719 35.7461 27.1367 35.612 27.0664 35.5C26.9987 35.3854 26.8984 35.2982 26.7656 35.2383C26.6354 35.1758 26.4779 35.1445 26.293 35.1445C26.1081 35.1445 25.9453 35.1758 25.8047 35.2383C25.6641 35.3008 25.5521 35.3906 25.4688 35.5078C25.3854 35.6224 25.3359 35.7578 25.3203 35.9141L25.3164 35.9492H24.2305L24.2344 35.9023C24.263 35.5638 24.3646 35.2708 24.5391 35.0234C24.7161 34.7734 24.9531 34.5807 25.25 34.4453C25.5495 34.3073 25.8971 34.2383 26.293 34.2383C26.6966 34.2383 27.0482 34.3021 27.3477 34.4297C27.6471 34.5547 27.8776 34.7305 28.0391 34.957C28.2031 35.181 28.2852 35.444 28.2852 35.7461V35.7539C28.2852 35.9883 28.2331 36.194 28.1289 36.3711C28.0247 36.5482 27.8841 36.694 27.707 36.8086C27.5299 36.9232 27.3307 37.0039 27.1094 37.0508V37.0742C27.5286 37.1133 27.8646 37.2487 28.1172 37.4805C28.3698 37.7122 28.4961 38.0195 28.4961 38.4023V38.4102C28.4961 38.7513 28.4036 39.0508 28.2188 39.3086C28.0365 39.5664 27.7812 39.7669 27.4531 39.9102C27.125 40.0534 26.7409 40.125 26.3008 40.125Z'
+      fill='white'
+      {...rest}
     />
-  </RootSvg>
+  </Svg>
 );