import m from 'mithril' ; import { Icons , InputFile , Switch , Size , Intent } from '@/' ; import { ContentSelect , IntentSelect , SizeSelect , ContentType , renderContent , Example } from '@shared/examples' ; const EXAMPLE_SRC = 'components/input-file/examples/index.ts' ; export class InputFileExample { private contentLeft : ContentType ; private contentRight : ContentType ; private disabled = false ; private fluid = false ; private intent : Intent ; private size : Size ; private text : string ; public view ( ) { return m ( Example , { options : this . renderOptions ( ) , src : EXAMPLE_SRC } , [ m ( InputFile , { contentLeft : renderContent ( this . contentLeft , Icons . CALENDAR ) , contentRight : renderContent ( this . contentRight , Icons . ALERT_CIRCLE ) , disabled : this . disabled , fluid : this . fluid , intent : this . intent , onchange : this . handleChange , size : this . size , text : this . text } ) ] ) ; } private handleChange = ( e ) => { const target = e . target as HTMLInputElement ; this . text = target . files ! [ 0 ] . name ; } ; private renderOptions ( ) { return [ m ( 'h5' , 'Size' ) , m ( SizeSelect , { onSelect : ( size ) => this . size = size } ) , m ( 'h5' , 'Intent' ) , m ( IntentSelect , { onSelect : ( intent ) => this . intent = intent } ) , m ( Switch , { checked : this . disabled , label : 'Disabled' , onchange : ( ) => this . disabled = ! this . disabled } ) , m ( Switch , { checked : this . fluid , label : 'Fluid' , onchange : ( ) => this . fluid = ! this . fluid } ) , m ( 'h5' , 'Left content' ) , m ( ContentSelect , { onSelect : ( content ) => this . contentLeft = content } ) , m ( 'h5' , 'Right content' ) , m ( ContentSelect , { onSelect : ( content ) => this . contentRight = content } ) ] ; } }