import * as React from 'react' ; import { ComboBox , IComboBox , IComboBoxOption } from 'office-ui-fabric-react/lib/ComboBox' ; import { Label } from 'office-ui-fabric-react/lib/Label' ; import { FontIcon } from 'office-ui-fabric-react/lib/Icon' ; import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip' ; import { IPropertyFieldEditableComboBoxHostProps , IPropertyFieldEditableComboBoxHostState } from './IPropertyFieldEditableComboBoxHost' ; import styles from './PropertyFieldEditableComboBoxHost.module.scss' ; import * as telemetry from '../../common/telemetry' ; class description export default class PropertyFieldEditableComboBoxHost extends React . Component < IPropertyFieldEditableComboBoxHostProps , IPropertyFieldEditableComboBoxHostState > { private readonly logStyle : string = "background: crimson; padding: 5px; border-radius: 5px; color: white" ; protected box : React . RefObject < IComboBox > ; constructor ( props , state ) { super ( props ) ; this . box = React . createRef ( ) ; telemetry . track ( 'PropertyFieldEditableComboBox' , { disabled : props . disabled } ) ; this . state = { options : props . options , selectedText : props . selectedText } ; } function param event param option param index param value description public optionChanged ( event , option ? , index ? , value ? ) { var txt ; var wasAdded = false ; if ( option !== undefined ) { txt = option . text ; this . setState ( { selectedText : txt } ) ; } else { txt = value ; if ( txt !== undefined && txt !== '' ) { this . setState ( { options : [ ... this . state . options , { key : txt , text : txt } ] } ) ; this . setState ( { selectedText : txt } ) ; wasAdded = true ; } else if ( txt === '' ) { this . setState ( { selectedText : txt } ) ; } } this . props . onOptionChanged ( txt , wasAdded ) ; } function param event description protected onKeyDown ( event ) { if ( this . props . maxFillInLength !== undefined ) { if ( event . key . toLowerCase ( ) !== 'backspace' ) { let text = ( event . target as HTMLInputElement ) . value ; if ( text !== undefined && text !== null ) { if ( text . length >= this . props . maxFillInLength ) { this . log ( `Max character length hit!!! [${ this . props . maxFillInLength . toString ( ) }] : Stopping new characters.` ) ; event . preventDefault ( ) ; } } } } } function param val description private log ( val ) { console . log ( `%c>> ${ val }` , this . logStyle ) ; } function description public render ( ) { return ( < > < div className = { styles . catLabelContainer } > < Label > { this . props . label } < /Label> { ( this . props . showTooltip ? < TooltipHost content = { this . props . tooltipText } className = { styles . tooltip } > < FontIcon iconName = "Info" className = { styles . fontIcon } > < /FontIcon> < /TooltipHost> : null ) } < /div> < ComboBox componentRef = { this . box } onChange = { ( event , option , index , value ) => this . optionChanged ( event , option , index , value ) } text = { this . state . selectedText } allowFreeform autoComplete = "on" onKeyDown = { ( event ) => this . onKeyDown ( event ) } options = { this . state . options } disabled = { this . props . disabled } > < /ComboBox> < />); } }