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 'HelloWorldFieldCustomizerStrings' ; import HelloWorld , { IHelloWorldProps } from './components/HelloWorld' ; /**
 * 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 IHelloWorldFieldCustomizerProperties { sampleText ? : string ; } const LOG_SOURCE = 'HelloWorldFieldCustomizer' ; export default class HelloWorldFieldCustomizer extends BaseFieldCustomizer < IHelloWorldFieldCustomizerProperties > { @ override public onInit ( ) { Log . info ( LOG_SOURCE , 'Activated HelloWorldFieldCustomizer with properties:' ) ; Log . info ( LOG_SOURCE , JSON . stringify ( this . properties , undefined , 2 ) ) ; Log . info ( LOG_SOURCE , `The following string should be equal: "HelloWorldFieldCustomizer" and "${ strings . Title }"` ) ; return Promise . resolve ( ) ; } @ override public onRenderCell ( event ) { const text = `${ this . properties . sampleText }: ${ event . fieldValue }` ; const helloWorld = React . createElement ( HelloWorld , { text } as IHelloWorldProps ) ; ReactDOM . render ( helloWorld , event . domElement ) ; } @ override public onDisposeCell ( event ) { ReactDOM . unmountComponentAtNode ( event . domElement ) ; super . onDisposeCell ( event ) ; } }