import m from 'mithril' ; import { ListItem , SelectList , Button , Icons } from '@/' ; import { Example , countries , ICountryModel } from '@shared/examples' ; const EXAMPLE_SRC = 'components/select-list/examples/multiple.ts' ; const CountryList = SelectList . ofType < ICountryModel > ( ) ; export class SelectListMultipleExample { private selectedItems : Map < string , ICountryModel > = new Map ( ) ; public view ( ) { return m ( Example , { src : EXAMPLE_SRC } , [ m ( CountryList , { closeOnSelect : false , items : countries , itemRender : this . renderItem , itemPredicate : this . itemPredicate , onSelect : this . handleSelect , popoverAttrs : { hasArrow : false } , trigger : m ( Button , { align : 'left' , compact : true , iconRight : Icons . CHEVRON_DOWN , sublabel : 'Country:' , label : `${ this . selectedItems . size } selected` , style : 'min-width: 300px' } ) } ) ] ) ; } private renderItem = ( item ) => m ( ListItem , { label : item . name , selected : this . selectedItems . has ( item . name ) } ) ; private itemPredicate ( query , item ) { return item . name . toLowerCase ( ) . includes ( query . toLowerCase ( ) ) ; } private handleSelect = ( item ) => { if ( this . selectedItems . has ( item . name ) ) { this . selectedItems . delete ( item . name ) ; } else this . selectedItems . set ( item . name , item ) ; } ; }