import * as React from 'react' ; import * as ReactDOM from 'react-dom' ; import { Log } from '@microsoft/sp-core-library' ; import { BaseFieldCustomizer , IFieldCustomizerCellEventParameters } from '@microsoft/sp-listview-extensibility' ; import * as strings from 'ControlStrings' ; import OotbFields , { IOotbFieldsProps } from './components/Customizer/OotbFields' ; import { SPHelper } from '../../common/utilities/SPHelper' ; import { GeneralHelper } from '../../common/utilities/GeneralHelper' ; /**
 * 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 IOotbFieldsFieldCustomizerProperties { } const LOG_SOURCE = 'OotbFieldsFieldCustomizer' ; export default class OotbFieldsFieldCustomizer extends BaseFieldCustomizer < IOotbFieldsFieldCustomizerProperties > { private _shouldRenderUndefiend : boolean = false ; public onInit ( ) { Log . info ( LOG_SOURCE , 'Activated OotbFieldsFieldCustomizer with properties:' ) ; if ( this . context . field . fieldType === 'Computed' && this . context . field . internalName === 'DocIcon' ) { this . _shouldRenderUndefiend = true ; } return Promise . resolve ( ) ; } public onRenderCell ( event ) { if ( ! this . _shouldRenderUndefiend && ! GeneralHelper . isDefined ( event . fieldValue ) ) { return ; } const fieldName = SPHelper . getStoredFieldName ( this . context . field . internalName ) ; SPHelper . getFieldText ( event . fieldValue , event . listItem , this . context ) . then ( text => { const ootbFields = React . createElement ( OotbFields , { text : text , value : event . fieldValue , listItem : event . listItem , fieldName : fieldName , context : this . context , className : 'fake-class' } ) ; ReactDOM . render ( ootbFields , event . domElement ) ; } ) ; } public onDisposeCell ( event ) { ReactDOM . unmountComponentAtNode ( event . domElement ) ; super . onDisposeCell ( event ) ; } }