import * as React from 'react' ; import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox' ; import { ITermProps , ITermState } from './IPropertyFieldTermPickerHost' ; import styles from './PropertyFieldTermPickerHost.module.scss' ; import * as strings from 'PropertyControlStrings' ; import { TERM_IMG } from './PropertyFieldTermPickerHost' ; /**
 * Term component
 * Renders a selectable term
 */ export default class Term extends React . Component < ITermProps , ITermState > { constructor ( props ) { super ( props ) ; let active = this . props . activeNodes . filter ( item => item . key === this . props . term . Id ) ; this . state = { selected : active . length > 0 } ; this . _handleChange = this . _handleChange . bind ( this ) ; } /**
     * Handle the checkbox change trigger
     */ private _handleChange ( ev , isChecked ) { this . setState ( { selected : isChecked } ) ; this . props . changedCallback ( this . props . term , this . props . termGroup , isChecked ) ; } param nextProps param nextContext public componentWillReceiveProps ? ( nextProps , nextContext ) { if ( ! this . props . multiSelection ) { let active = nextProps . activeNodes . filter ( item => item . key === this . props . term . Id ) ; this . state = { selected : active . length > 0 } ; } } /**
     * Get the right class name for the term
     */ private getClassName ( ) { if ( this . props . term . IsDeprecated ) { return styles . termDisabled ; } if ( ! this . props . term . IsAvailableForTagging ) { return styles . termNoTagging ; } return styles . termEnabled ; } public render ( ) { const styleProps = { marginLeft : `${ ( this . props . term . PathDepth * 30 ) }px` } ; return ( < div className = { `${ styles . listItem } ${ styles . term }` } style = { styleProps } > { this . props . isTermSelectable ? < Checkbox checked = { this . state . selected } disabled = { this . props . term . IsDeprecated || ! this . props . term . IsAvailableForTagging || this . props . disabled } className = { this . getClassName ( ) } label = { this . props . term . Name } onChange = { this . _handleChange } / > : ( < div > < img src = { TERM_IMG } alt = { strings . TermPickerMenuTerm } title = { strings . TermPickerMenuTerm } / > { this . props . term . Name } < /div>)} < /div>); } }