support of additional file formats for FileTypeIcon in Image mode

Author: AJIXuMuK

src/controls/fileTypeIcon/FileTypeIcon.tsx

@@ -227,7 +227,7 @@ export class FileTypeIcon extends React.Component<IFileTypeIconProps, {}> {
       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) {
+      } else if (iconImage.image) {
         iconElm = <Icon iconType={IconUIType.image} imageProps={{ className: `ms-BrandIcon--${iconImage.size} ms-BrandIcon--${iconImage.image}` }} />;
       } else {
         // Return a generic image

src/controls/fileTypeIcon/IFileTypeIcon.ts

@@ -66,19 +66,22 @@ export const ApplicationIconList: IApplicationIcons[] = [
     application: ApplicationType.ASPX,
     extensions: ['aspx', 'master'],
     iconName: 'FileASPX',
-    imageName: []
+    imageName: [],
+    cdnImageName: ['spo']
   },
   {
     application: ApplicationType.Code,
     extensions: ['js', 'ts', 'cs'],
     iconName: 'FileCode',
-    imageName: []
+    imageName: [],
+    cdnImageName: ['code']
   },
   {
     application: ApplicationType.CSS,
     extensions: ['css'],
     iconName: 'FileCSS',
-    imageName: []
+    imageName: [],
+    cdnImageName: ['code']
   },
   {
     application: ApplicationType.CSV,
@@ -98,19 +101,22 @@ export const ApplicationIconList: IApplicationIcons[] = [
     application: ApplicationType.HTML,
     extensions: ['html'],
     iconName: 'FileHTML',
-    imageName: []
+    imageName: [],
+    cdnImageName: ['html']
   },
   {
     application: ApplicationType.Image,
     extensions: ['jpg', 'jpeg', 'gif', 'png'],
     iconName: 'FileImage',
-    imageName: []
+    imageName: [],
+    cdnImageName: ['photo']
   },
   {
     application: ApplicationType.Mail,
     extensions: ['msg'],
     iconName: 'Mail',
-    imageName: []
+    imageName: [],
+    cdnImageName: ['email']
   },
   {
     application: ApplicationType.OneNote,
@@ -157,7 +163,8 @@ export const ApplicationIconList: IApplicationIcons[] = [
     application: ApplicationType.SASS,
     extensions: ['scss', 'sass'],
     iconName: 'FileSass',
-    imageName: []
+    imageName: [],
+    cdnImageName: ['code']
   },
   {
     application: ApplicationType.Visio,

src/webparts/controlsTest/ControlsTestWebPart.ts

@@ -27,7 +27,8 @@ export default class ControlsTestWebPart extends BaseClientSideWebPart<IControls
         displayMode: this.displayMode,
         updateProperty: (value: string) => {
           this.properties.title = value;
-        }
+        },
+        totalPages: this.properties.totalPages
       }
     );
 
@@ -51,6 +52,9 @@ export default class ControlsTestWebPart extends BaseClientSideWebPart<IControls
               groupFields: [
                 PropertyPaneTextField('description', {
                   label: strings.DescriptionFieldLabel
+                }),
+                PropertyPaneTextField('totalPages', {
+                  label: 'Total pages in pagination'
                 })
               ]
             }

src/webparts/controlsTest/IControlsTestWebPartProps.ts

@@ -1,4 +1,5 @@
 export interface IControlsTestWebPartProps {
   title: string;
   description: string;
+  totalPages: number;
 }

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -1262,7 +1262,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
           <Pagination
             currentPage={3}
             onChange={(page) => (this._getPage(page))}
-            totalPages={13}
+            totalPages={this.props.totalPages || 13}
           //limiter={3}
           // hideFirstPageJump
           //hideLastPageJump

src/webparts/controlsTest/components/IControlsTestProps.ts

@@ -10,6 +10,7 @@ export interface IControlsTestProps {
   title: string;
   displayMode: DisplayMode;
   updateProperty: (value: string) => void;
+  totalPages?: number;
 }
 
 export interface IControlsTestState {