import m from 'mithril' ; import { Button , Icons , ResponsiveManager } from '../../' ; import { Drawer } from '@/' ; export interface IExampleAttrs { class ? : string ; options ? : m . Children ; center ? : boolean ; direction ? : 'column' | 'row' ; src ? : string ; } const GITHUB_SRC = 'https://github.com/vrimar/construct-ui/blob/master/src/' ; export class Example implements m . Component < IExampleAttrs > { private isDrawerOpen : boolean = false ; public view ( { attrs , children } ) { const { class : className , options , center = true , direction = 'row' , src } = attrs ; const content = [ children , m ( Button , { class : 'cui-example-src-btn' , iconLeft : Icons . CODE , label : 'Source' , size : 'xs' , href : `${ GITHUB_SRC }${ src }` , target : '_blank' , rounded : true } ) ] ; return m ( '.cui-example' , { class : className } , [ m ( '.cui-example-content' , { class : center ? 'cui-example-center' : '' , style : `flex-direction:${ direction }` } , content ) , this . renderOptions ( options ) ] ) ; } private renderOptions ( options ) { const isXsSize = ResponsiveManager . is ( 'xs' ) ; const content = m ( '.cui-example-options' , options ) ; if ( isXsSize ) { return options && [ m ( Button , { class : 'cui-example-options-btn' , iconLeft : Icons . SETTINGS , onclick : ( ) => this . isDrawerOpen = true , size : 'xs' , rounded : true } ) , m ( Drawer , { class : 'cui-example-mobile-drawer' , isOpen : this . isDrawerOpen , onClose : ( ) => this . isDrawerOpen = false , position : 'bottom' , hasBackdrop : false , content } ) ] ; } return options && content ; } }