import * as React from 'react' ; import { findIndex } from '@microsoft/sp-lodash-subset' ; import { IFileTypeIconProps , ApplicationType , ApplicationIconList , IconType , IconSizes , ImageSize , IImageResult , ICON_GENERIC_16 , ICON_GENERIC_48 , ICON_GENERIC_96 , ImageInformation } from './IFileTypeIcon' ; import * as telemetry from '../../common/telemetry' ; import { Icon } from 'office-ui-fabric-react/lib/components/Icon' ; import * as styles from './FileTypeIcon.module.scss' ; import { ICON_GENERIC_20 } from '.' ; const ICON_GENERIC = 'Page' ; const ICON_DEFAULT_SIZE = 'icon16' ; const ICON_CDN_URL = `https://modernb.akamai.odsp.cdn.office.net/files/fabric-cdn-prod_20210703.001/assets/item-types` ; /**
* File type icon component
*/ export class FileTypeIcon extends React . Component < IFileTypeIconProps , { } > { constructor ( props ) { super ( props ) ; telemetry . track ( 'ReactFileTypeIcon' , { type : IconType [ props . type ] , applicationType : ! ! props . application , path : ! ! props . path , size : ! ! props . size ? ImageSize [ props . size ] : 'default' } ) ; } /**
    * Function which returns the font icon
    */ private _getIconClassName ( ) { let className = ICON_GENERIC ; if ( typeof this . props . path !== 'undefined' && this . props . path !== null ) { const path = this . props . path ; const fileExtension = this . _getFileExtension ( path ) ; const iconName = this . _getIconByExtension ( fileExtension . toLowerCase ( ) , IconType . font ) ; if ( iconName !== null ) { className = iconName . image ; } } else if ( typeof this . props . application !== 'undefined' && this . props . application !== null ) { const application = this . props . application ; const iconName = this . _getIconByApplicationType ( application , IconType . font ) ; if ( iconName !== null ) { className = iconName . image ; } } return className ; } /**
    * Function which returns the image icon
    */ private _getIconImageName ( ) { let size = ICON_DEFAULT_SIZE ; let imageInfo = null ; if ( typeof this . props . size !== 'undefined' && this . props . size !== null ) { size = this . _getFileSizeName ( this . props . size ) ; } if ( typeof this . props . path !== 'undefined' && this . props . path !== null ) { const path = this . props . path ; const fileExtension = this . _getFileExtension ( path ) ; imageInfo = this . _getIconByExtension ( fileExtension . toLowerCase ( ) , IconType . image ) ; } else if ( typeof this . props . application !== 'undefined' && this . props . application !== null ) { const application = this . props . application ; imageInfo = this . _getIconByApplicationType ( application , IconType . image ) ; } return { size , image : imageInfo && imageInfo . image ? imageInfo . image : null , cdnFallback : imageInfo && imageInfo . cdnFallback ? imageInfo . cdnFallback : null } ; } param value private _getFileExtension ( value ) { const splittedValue = value . split ( '.' ) ; let extensionValue = splittedValue . pop ( ) ; if ( extensionValue . indexOf ( '?' ) !== - 1 ) { const querySplit = extensionValue . split ( '?' ) ; extensionValue = querySplit [ 0 ] ; } return extensionValue ; } param extension private _getIconByExtension ( extension , iconType ) { const appIdx = findIndex ( ApplicationIconList , item => { return item . extensions . indexOf ( extension . toLowerCase ( ) ) !== - 1 ; } ) ; if ( appIdx !== - 1 ) { if ( iconType === IconType . font ) { return { image : ApplicationIconList [ appIdx ] . iconName , cdnFallback : null } ; } else { const knownImgs = ApplicationIconList [ appIdx ] . imageName ; 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 : fallbackImg } ; } else { return { image : knownImgs [ 0 ] , cdnFallback : fallbackImg } ; } } } return null ; } param application private _getIconByApplicationType ( application , iconType ) { const appIdx = findIndex ( ApplicationIconList , item => item . application === application ) ; 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 : fallbackImg } ; } else { if ( knownApp . imageName . length > 0 ) { return { image : knownApp . imageName [ 0 ] , cdnFallback : fallbackImg } ; } else { return { image : null , cdnFallback : fallbackImg } ; } } } return null ; } param value private _getFileSizeName ( value ) { const sizeIdx = findIndex ( IconSizes , size => size . size === value ) ; if ( sizeIdx !== - 1 ) { return IconSizes [ sizeIdx ] . name ; } return ICON_DEFAULT_SIZE ; } /**
    * Default React component render method
    */ public render ( ) { let iconElm = < span />; if ( this . props . type === IconType . image ) { const iconImage = this . _getIconImageName ( ) ; if ( iconImage . cdnFallback ) { const size = iconImage . size . replace ( "icon" , "" ) ; const iconUrl = `${ ICON_CDN_URL }/${ size }/${ iconImage . cdnFallback }.png` ; iconElm = < Icon imageProps = { { src : iconUrl } } />; } else if ( iconImage . image ) { iconElm = < Icon imageProps = { { className : `ms-BrandIcon--${ iconImage . size } ms-BrandIcon--${ iconImage . image }` } } />; } else { let imgElm = < img />; switch ( iconImage . size ) { case 'icon16' : imgElm = < Icon imageProps = { { src : ICON_GENERIC_16 } } />; break ; case 'icon20' : imgElm = < Icon imageProps = { { src : ICON_GENERIC_20 } } />; break ; case 'icon48' : imgElm = < Icon imageProps = { { src : ICON_GENERIC_48 } } />; break ; case 'icon96' : imgElm = < Icon imageProps = { { src : ICON_GENERIC_96 } } />; break ; default : imgElm = < Icon imageProps = { { src : ICON_GENERIC_16 } } />; break ; } iconElm = ( < div style = { { display : 'inline-block' } } > { imgElm } < /div>); } } else { const iconClass = this . _getIconClassName ( ) ; iconElm = < Icon iconName = { iconClass } />; } return iconElm ; } }