import * as React from 'react' ; import { Spinner , SpinnerSize } from 'office-ui-fabric-react/lib/Spinner' ; import { ITermParentProps , ITermParentState } from './ITaxonomyPicker' ; import { ITerm } from '../../services/ISPTermStorePickerService' ; import { EXPANDED_IMG , COLLAPSED_IMG , TERMSET_IMG , TERM_IMG } from './TaxonomyPicker' ; import Term from './Term' ; import styles from './TaxonomyPicker.module.scss' ; import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox' ; import * as strings from 'ControlStrings' ; /**
 * Term Parent component, represents termset or term if anchorId
 */ export default class TermParent extends React . Component < ITermParentProps , ITermParentState > { private _terms : ITerm [ ] ; private _anchorName : string ; constructor ( props ) { super ( props ) ; this . _terms = this . props . termset . Terms ; this . state = { loaded : true , expanded : true } ; this . _handleClick = this . _handleClick . bind ( this ) ; } /**
     * componentWillMount
     */ public componentWillMount ( ) { if ( this . props . anchorId ) { const anchorTerm = this . _terms . filter ( t => t . Id . toLowerCase ( ) === this . props . anchorId . toLowerCase ( ) ) . shift ( ) ; if ( anchorTerm ) { const anchorTermPath = `${ anchorTerm . PathOfTerm };` ; this . _anchorName = anchorTerm . Name ; let anchorTerms = this . _terms . filter ( t => t . PathOfTerm . substring ( 0 , anchorTermPath . length ) === anchorTermPath && t . Id !== anchorTerm . Id ) ; anchorTerms = anchorTerms . map ( term => { term . PathDepth = term . PathDepth - anchorTerm . PathDepth ; return term ; } ) ; this . _terms = anchorTerms ; } } } /**
     * Handle the click event: collapse or expand
     */ private _handleClick ( ) { this . setState ( { expanded : ! this . state . expanded } ) ; } /**
     * The term set selection changed
     */ private termSetSelectionChange = ( ev , isChecked ) : void => { this . props . termSetSelectedChange ( this . props . termset , isChecked ) ; } ; /**
     * Default React render method
     */ public render ( ) { const styleProps = { display : this . state . expanded ? 'block' : 'none' } ; let termElm = < div />; if ( this . state . loaded ) { if ( this . _terms . length > 0 ) { let disabledPaths = [ ] ; termElm = ( < div style = { styleProps } > { this . _terms . map ( term => { let disabled = false ; if ( this . props . disabledTermIds && this . props . disabledTermIds . length > 0 ) { disabled = this . props . disabledTermIds . indexOf ( term . Id ) !== - 1 ; if ( disabled ) { disabledPaths . push ( term . PathOfTerm ) ; } } if ( this . props . disableChildrenOfDisabledParents ) { const parentPath = disabledPaths . filter ( p => term . PathOfTerm . indexOf ( p ) !== - 1 ) ; disabled = parentPath && parentPath . length > 0 ; } return < Term key = { term . Id } term = { term } termset = { this . props . termset . Id } activeNodes = { this . props . activeNodes } changedCallback = { this . props . changedCallback } multiSelection = { this . props . multiSelection } disabled = { disabled } termActions = { this . props . termActions } updateTaxonomyTree = { this . props . updateTaxonomyTree } spTermService = { this . props . spTermService } / > ; } ) } < /div>); } else { termElm = < div className = { `${ styles . listItem } ${ styles . term }` } > { strings . TaxonomyPickerNoTerms } < /div>; } } else { termElm = < Spinner size = { SpinnerSize . medium } />; } return ( < div > < div className = { `${ styles . listItem } ${ styles . termset } ${ ( ! this . props . anchorId && this . props . isTermSetSelectable ) ? styles . termSetSelectable : "" }` } onClick = { this . _handleClick } > < img src = { this . state . expanded ? EXPANDED_IMG : COLLAPSED_IMG } alt = { strings . TaxonomyPickerExpandTitle } title = { strings . TaxonomyPickerExpandTitle } / > { ( ! this . props . anchorId && this . props . isTermSetSelectable ) && < Checkbox className = { styles . termSetSelector } checked = { this . props . activeNodes . filter ( a => a . path === "" && a . key === a . termSet ) . length >= 1 } onChange = { this . termSetSelectionChange } / > } < img src = { this . props . anchorId ? TERM_IMG : TERMSET_IMG } alt = { strings . TaxonomyPickerMenuTermSet } title = { strings . TaxonomyPickerMenuTermSet } / > { this . props . anchorId ? this . _anchorName : this . props . termset . Name } < /div> < div style = { styleProps } > { termElm } < /div> < /div>); } }