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 'SpfxExtensionFluentuiToggleFieldCustomizerStrings' ; import SpfxExtensionFluentuiToggle , { ISpfxExtensionFluentuiToggleProps } from './components/SpfxExtensionFluentuiToggle' ; /**
 * 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 ISpfxExtensionFluentuiToggleFieldCustomizerProperties { sampleText ? : string ; } const LOG_SOURCE = 'SpfxExtensionFluentuiToggleFieldCustomizer' ; export default class SpfxExtensionFluentuiToggleFieldCustomizer extends BaseFieldCustomizer < ISpfxExtensionFluentuiToggleFieldCustomizerProperties > { @ override public onInit ( ) { Log . info ( LOG_SOURCE , 'Activated SpfxExtensionFluentuiToggleFieldCustomizer with properties:' ) ; Log . info ( LOG_SOURCE , JSON . stringify ( this . properties , undefined , 2 ) ) ; Log . info ( LOG_SOURCE , `The following string should be equal: "SpfxExtensionFluentuiToggleFieldCustomizer" and "${ strings . Title }"` ) ; return Promise . resolve ( ) ; } @ override public onRenderCell ( event ) { const text = event . fieldValue ; const listitemid = event . listItem . getValueByName ( "ID" ) ; const listname = this . context . pageContext . list . title ; const context = this . context ; const spfxExtensionFluentuiToggle = React . createElement ( SpfxExtensionFluentuiToggle , { text , listitemid , listname , context } as ISpfxExtensionFluentuiToggleProps ) ; ReactDOM . render ( spfxExtensionFluentuiToggle , event . domElement ) ; } @ override public onDisposeCell ( event ) { ReactDOM . unmountComponentAtNode ( event . domElement ) ; super . onDisposeCell ( event ) ; } }