import m from 'mithril' ; import { Col , Grid , Icon , Icons , Card , Input } from '@/' ; const iconNames = Object . keys ( Icons ) . slice ( 1 ) ; export class IconsExample { private searchQuery : string = '' ; public view ( ) { const icons = this . getFilteredIcons ( ) ; const searchInput = m ( Input , { autofocus : true , contentLeft : m ( Icon , { name : Icons . SEARCH } ) , contentRight : this . searchQuery ? m ( Icon , { name : Icons . X , onclick : ( ) => this . searchQuery = '' } ) : undefined , fluid : true , placeholder : 'Search icons...' , oninput : ( e ) => this . searchQuery = ( e . target as HTMLInputElement ) . value , style : 'margin-bottom: 30px' , value : this . searchQuery } ) ; const cols = icons . map ( iconName => m ( Col , { span : 4 } , [ m ( Card , { class : 'cui-example-icon-card' , interactive : true } , [ m ( Icon , { name : Icons [ iconName ] , size : 'xl' } ) , m ( 'span' , Icons [ iconName ] ) ] ) ] ) ) ; return [ searchInput , m ( Grid , { gutter : 10 } , cols ) ] ; } private getFilteredIcons ( ) { if ( ! this . searchQuery ) { return iconNames ; } const query = this . searchQuery . toLowerCase ( ) ; return iconNames . filter ( iconName => Icons [ iconName ] . toLowerCase ( ) . includes ( query ) ) ; } }