import m from 'mithril' ; import { Button , ButtonGroup , Icons , Switch , Size , Intent } from '@/' ; import { IntentSelect , SizeSelect , Example } from '@shared/examples' ; const EXAMPLE_SRC = 'components/button-group/examples/index.ts' ; export class ButtonGroupExample { private size : Size ; private fluid = false ; private intent : Intent ; private label = true ; private rounded = false ; private outlined = false ; private basic = false ; public view ( ) { const attrs = { size : this . size , intent : this . intent , rounded : this . rounded , basic : this . basic , fluid : this . fluid , outlined : this . outlined } ; return m ( Example , { options : this . renderOptions ( ) , src : EXAMPLE_SRC } , [ m ( ButtonGroup , { ... attrs } , [ m ( Button , { iconLeft : Icons . COPY , label : this . label && 'Copy' } ) , m ( Button , { iconLeft : Icons . SETTINGS , label : this . label && 'Settings' } ) , m ( Button , { iconLeft : Icons . LINK , iconRight : Icons . CHEVRON_DOWN , label : this . label && 'Link' } ) ] ) ] ) ; } 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 . label , label : 'Label' , onchange : ( ) => this . label = ! this . label } ) , m ( Switch , { checked : this . rounded , label : 'Rounded' , onchange : ( ) => this . rounded = ! this . rounded } ) , m ( Switch , { checked : this . basic , label : 'Basic' , onchange : ( ) => { this . basic = ! this . basic ; this . outlined = false ; } } ) , m ( Switch , { checked : this . outlined , label : 'Outlined' , onchange : ( ) => { this . outlined = ! this . outlined ; this . basic = false ; } } ) , m ( Switch , { checked : this . fluid , label : 'Fluid' , onchange : ( ) => this . fluid = ! this . fluid } ) ] ; } }