import * as React from 'react' ; import * as ReactDOM from 'react-dom' ; import { Log } from '@microsoft/sp-core-library' ; import { override } from '@microsoft/decorators' ; import { BaseFieldCustomizer , IFieldCustomizerCellEventParameters } from '@microsoft/sp-listview-extensibility' ; import * as strings from 'FileTypeRendererFieldCustomizerStrings' ; import FileTypeRenderer , { IFileTypeRendererProps } from './components/FileTypeRenderer' ; /**
 * If your field customizer uses the ClientSideComponentProperties JSON input,
 * it will be deserialized into the BaseExtension.properties object.
 * You can define an interface to describe it.
 */ export interface IFileTypeRendererFieldCustomizerProperties { sampleText ? : string ; } const LOG_SOURCE = 'FileTypeRendererFieldCustomizer' ; export default class FileTypeRendererFieldCustomizer extends BaseFieldCustomizer < IFileTypeRendererFieldCustomizerProperties > { @ override public onInit ( ) { Log . info ( LOG_SOURCE , 'Activated FileTypeRendererFieldCustomizer with properties:' ) ; Log . info ( LOG_SOURCE , JSON . stringify ( this . properties , undefined , 2 ) ) ; Log . info ( LOG_SOURCE , `The following string should be equal: "FileTypeRendererFieldCustomizer" and "${ strings . Title }"` ) ; return Promise . resolve ( ) ; } @ override public onRenderCell ( event ) { const path = event . listItem . getValueByName ( 'FileLeafRef' ) ; const isFolder = event . listItem . getValueByName ( 'FSObjType' ) === '1' ; const fileTypeRenderer = React . createElement ( FileTypeRenderer , { path , isFolder } as IFileTypeRendererProps ) ; ReactDOM . render ( fileTypeRenderer , event . domElement ) ; } @ override public onDisposeCell ( event ) { ReactDOM . unmountComponentAtNode ( event . domElement ) ; super . onDisposeCell ( event ) ; } }