import React from 'react' ; import { Select , SelectOption , SelectVariant } from '@patternfly/react-core' ; interface Props { id ? : string ; options : string [ ] ; ariaLabelledBy ? : string ; ariaLabelTypeAhead ? : string ; placeholderText ? : string ; onChange : ( selected : string [ ] ) => void ; } interface State { selected : string [ ] ; isExpanded : boolean ; } export default class MultiSelect extends React . PureComponent < Props , State > { public constructor ( props ) { super ( props ) ; this . state = { isExpanded : false , selected : [ ] } ; } private onToggle ( isExpanded ) { this . setState ( { isExpanded } ) ; } private readonly _onToggle = this . onToggle . bind ( this ) ; private onSelect ( event , selection ) { const { selected } = this . state ; if ( selected . includes ( selection ) ) { this . setState ( curState => { const selected = curState . selected . filter ( item => item !== selection ) ; this . props . onChange ( selected ) ; return { selected } ; } ) ; } else { this . setState ( curState => { const selected = [ ... curState . selected , selection ] ; this . props . onChange ( selected ) ; return { selected } ; } ) ; } } private readonly _onSelect = this . onSelect . bind ( this ) ; private clearSelection ( ) { this . setState ( { selected : [ ] , isExpanded : false } ) ; } private readonly _clearSelection = this . clearSelection . bind ( this ) ; public render ( ) { const { selected } = this . state ; return ( < Select id = { this . props . id } selections = { selected } onToggle = { this . _onToggle } onSelect = { this . _onSelect } onClear = { this . _clearSelection } variant = { SelectVariant . typeaheadMulti } placeholderText = { this . props . placeholderText } aria - labelled - by = { this . props . ariaLabelledBy } typeAheadAriaLabel = { this . props . ariaLabelTypeAhead } > { this . props . options . map ( ( option , idx ) => ( < SelectOption key = { idx } value = { option } / > ) ) } < /Select>); } }