import m from 'mithril' ; import { ListItem , SelectList , Icons , Switch , Colors , Button } from '@/' ; import { Example , countries , ICountryModel } from '@shared/examples' ; const EXAMPLE_SRC = 'components/select-list/examples/default.ts' ; const CountryList = SelectList . ofType < ICountryModel > ( ) ; export class SelectListExample { private selectedItem : ICountryModel = countries [ 0 ] ; private closeOnSelect = true ; private header = false ; private footer = false ; private loading = false ; public view ( ) { return m ( Example , { options : this . renderOptions ( ) , src : EXAMPLE_SRC } , [ m ( CountryList , { closeOnSelect : this . closeOnSelect , header : this . header ? m ( 'h4' , 'Header content' ) : undefined , footer : this . footer ? m ( 'h4[style=margin: 15px 0 0 0]' , 'Footer content' ) : undefined , items : countries , itemRender : this . renderItem , itemPredicate : this . itemPredicate , onSelect : this . handleSelect , loading : this . loading , popoverAttrs : { hasArrow : false } , trigger : m ( Button , { align : 'left' , compact : true , iconRight : Icons . CHEVRON_DOWN , sublabel : 'Country:' , label : this . selectedItem && this . selectedItem . name , style : 'min-width: 300px' } ) } ) ] ) ; } private renderItem = ( item ) => m ( ListItem , { contentRight : m ( '' , { style : `color:${ Colors . BLUE_GREY200 }` } , item . code ) , label : item . name , selected : this . selectedItem && this . selectedItem . name === item . name } ) ; private itemPredicate ( query , item ) { return item . name . toLowerCase ( ) . includes ( query . toLowerCase ( ) ) ; } private handleSelect = ( item ) => this . selectedItem = item ; private renderOptions ( ) { return [ m ( Switch , { checked : this . closeOnSelect , label : 'Close on select' , onchange : ( ) => this . closeOnSelect = ! this . closeOnSelect } ) , m ( Switch , { checked : this . header , label : 'Header' , onchange : ( ) => this . header = ! this . header } ) , m ( Switch , { checked : this . footer , label : 'Footer' , onchange : ( ) => this . footer = ! this . footer } ) , m ( Switch , { checked : this . loading , label : 'Loading' , onchange : ( ) => this . loading = ! this . loading } ) ] ; } }