#300 - Set the CDN fallback as the default method to show file icons

Author: estruyf

src/controls/fileTypeIcon/FileTypeIcon.tsx

@@ -126,16 +126,25 @@ export class FileTypeIcon extends React.Component<IFileTypeIconProps, {}> {
         const knownImgs = ApplicationIconList[appIdx].imageName;
         // Check if the file extension is known
         const imgIdx = knownImgs.indexOf(extension);
+
+        const imgExists = ApplicationIconList[appIdx].cdnImageName && ApplicationIconList[appIdx].cdnImageName.indexOf(extension) !== -1;
+        let fallbackImg = null;
+        if (imgExists) {
+          fallbackImg = extension;
+        } else if (ApplicationIconList[appIdx].cdnImageName && ApplicationIconList[appIdx].cdnImageName.length > 0) {
+          fallbackImg = ApplicationIconList[appIdx].cdnImageName[0]
+        }
+
         if (imgIdx !== -1) {
           return {
             image: knownImgs[imgIdx],
-            cdnFallback: ApplicationIconList[appIdx].cdnImageName || null
+            cdnFallback: fallbackImg
           };
         } else {
           // Return the first one if it was not known
           return {
             image: knownImgs[0],
-            cdnFallback: ApplicationIconList[appIdx].cdnImageName || null
+            cdnFallback: fallbackImg
           };
         }
       }
@@ -156,22 +165,28 @@ export class FileTypeIcon extends React.Component<IFileTypeIconProps, {}> {
     // Check if an application has found
     if (appIdx !== -1) {
       const knownApp = ApplicationIconList[appIdx];
+
+      let fallbackImg = null;
+      if (knownApp.cdnImageName && knownApp.cdnImageName.length > 0) {
+        fallbackImg = knownApp.cdnImageName[0]
+      }
+
       if (iconType === IconType.font) {
         return {
           image: knownApp.iconName,
-          cdnFallback: null
+          cdnFallback: fallbackImg
         };
       } else {
         // Check if the application has a known list of image types
         if (knownApp.imageName.length > 0) {
           return {
             image: knownApp.imageName[0],
-            cdnFallback: null
+            cdnFallback: fallbackImg
           };
         } else {
           return {
             image: null,
-            cdnFallback: knownApp.cdnImageName || null
+            cdnFallback: fallbackImg
           };
         }
       }
@@ -209,11 +224,11 @@ export class FileTypeIcon extends React.Component<IFileTypeIconProps, {}> {
       // Return an image icon element
       const iconImage = this._getIconImageName();
       // Check if the image was found, otherwise a generic image will be returned
-      if (iconImage.image) {
-        iconElm = <Icon iconType={IconUIType.image} imageProps={{ className: `ms-BrandIcon--${iconImage.size} ms-BrandIcon--${iconImage.image}` }} />;
-      } else if (iconImage.cdnFallback) {
+      if (iconImage.cdnFallback) {
         const iconUrl = `${ICON_CDN_URL}/${iconImage.size.replace("icon", "")}/${iconImage.cdnFallback}.png`;
         iconElm = <Icon iconType={IconUIType.image} imageProps={{ src: iconUrl }} />;
+      } else if (iconImage.cdnFallback) {
+        iconElm = <Icon iconType={IconUIType.image} imageProps={{ className: `ms-BrandIcon--${iconImage.size} ms-BrandIcon--${iconImage.image}` }} />;
       } else {
         // Return a generic image
         let imgElm = <img />;

src/controls/fileTypeIcon/IFileTypeIcon.ts

@@ -48,7 +48,7 @@ export interface IApplicationIcons {
   extensions: string[];
   iconName: string;
   imageName: string[];
-  cdnImageName?: string;
+  cdnImageName?: string[];
 }
 
 /**
@@ -59,7 +59,8 @@ export const ApplicationIconList: IApplicationIcons[] = [
     application: ApplicationType.Access,
     extensions: ['accdb', 'accde', 'accdt', 'accdr', 'mdb'],
     iconName: 'AccessLogo',
-    imageName: ['accdb']
+    imageName: ['accdb'],
+    cdnImageName: ["accdb"]
   },
   {
     application: ApplicationType.ASPX,
@@ -83,13 +84,15 @@ export const ApplicationIconList: IApplicationIcons[] = [
     application: ApplicationType.CSV,
     extensions: ['csv'],
     iconName: 'ExcelDocument',
-    imageName: ['csv']
+    imageName: ['csv'],
+    cdnImageName: ['csv']
   },
   {
     application: ApplicationType.Excel,
     extensions: ['xls', 'xlt', 'xlm', 'xlsx', 'xlsm', 'xltx', 'xltm', 'ods'],
     iconName: 'ExcelDocument',
-    imageName: ['xlsx', 'xls', 'xltx', 'ods']
+    imageName: ['xlsx', 'xls', 'xltx', 'ods'],
+    cdnImageName: ['xlsx', 'xltx', 'ods']
   },
   {
     application: ApplicationType.HTML,
@@ -113,14 +116,15 @@ export const ApplicationIconList: IApplicationIcons[] = [
     application: ApplicationType.OneNote,
     extensions: ['one', 'onepkg', 'onetoc'],
     iconName: 'OneNoteLogo',
-    imageName: ['one', 'onepkg', 'onetoc']
+    imageName: ['one', 'onepkg', 'onetoc'],
+    cdnImageName: ['one', 'onetoc']
   },
   {
     application: ApplicationType.PDF,
     extensions: ['pdf'],
     iconName: 'PDF',
     imageName: [],
-    cdnImageName: 'pdf'
+    cdnImageName: ['pdf']
   },
   {
     application: ApplicationType.PowerApps,
@@ -132,19 +136,22 @@ export const ApplicationIconList: IApplicationIcons[] = [
     application: ApplicationType.PowerPoint,
     extensions: ['ppt', 'pot', 'pps', 'pptx', 'pptm', 'potx', 'potm', 'ppam', 'ppsx', 'ppsm', 'sldx', 'sldx'],
     iconName: 'PowerPointDocument',
-    imageName: ['odp', 'potx', 'ppsx', 'pptx']
+    imageName: ['odp', 'potx', 'ppsx', 'pptx'],
+    cdnImageName: ['pptx', 'odp', 'potx', 'ppsx']
   },
   {
     application: ApplicationType.Project,
     extensions: ['mpp', 'mpt', 'mpx', 'mpd'],
     iconName: 'ProjectLogoInverse',
-    imageName: ['mpp', 'mpt']
+    imageName: ['mpp', 'mpt'],
+    cdnImageName: ['mpp', 'mpt']
   },
   {
     application: ApplicationType.Publisher,
     extensions: ['pub'],
     iconName: 'PublisherLogo',
-    imageName: ['pub']
+    imageName: ['pub'],
+    cdnImageName: ['pub']
   },
   {
     application: ApplicationType.SASS,
@@ -156,13 +163,15 @@ export const ApplicationIconList: IApplicationIcons[] = [
     application: ApplicationType.Visio,
     extensions: ['vsd', 'vss', 'vst', 'vdx', 'vsx', 'vtx', 'vsdx'],
     iconName: 'VisioDocument',
-    imageName: ['vsdx', 'vssx', 'vstx']
+    imageName: ['vsdx', 'vssx', 'vstx'],
+    cdnImageName: ['vsdx', 'vssx', 'vstx']
   },
   {
     application: ApplicationType.Word,
     extensions: ['doc', 'dot', 'docx', 'docm', 'dotx', 'dotm', 'docb', 'odt'],
     iconName: 'WordDocument',
-    imageName: ['docx', 'dotx', 'odt']
+    imageName: ['docx', 'dotx', 'odt'],
+    cdnImageName: ['docx', 'dotx', 'odt']
   }
 ];