import m from 'mithril' ; import { Button , Drawer , DrawerPosition , Switch , Select } from '@/' ; import { Example } from '@shared/examples' ; const EXAMPLE_SRC = 'components/drawer/examples/index.ts' ; export class DrawerExample { private closeOnEscapeKey = true ; private closeOnOutsideClick = true ; private hasBackdrop = true ; private inline = false ; private isOpen = false ; private position : DrawerPosition = 'right' ; public view ( ) { return m ( Example , { options : this . renderOptions ( ) , src : EXAMPLE_SRC } , [ m ( '.cui-example-overflow-hidden' , [ m ( Drawer , { closeOnEscapeKey : this . closeOnEscapeKey , closeOnOutsideClick : this . closeOnOutsideClick , content : [ m ( 'h4' , 'Drawer Content' ) , m ( Button , { label : 'Close Drawer' , onclick : ( ) => this . isOpen = false } ) ] , hasBackdrop : this . hasBackdrop , position : this . position , isOpen : this . isOpen , inline : this . inline , onClose : ( ) => this . isOpen = false } ) ] ) , m ( Button , { label : 'Show drawer' , intent : 'primary' , onclick : ( ) => this . isOpen = ! this . isOpen } ) ] ) ; } private renderOptions ( ) { return [ m ( 'h5' , 'Position' ) , m ( Select , { options : Object . keys ( DrawerPosition ) . map ( key => DrawerPosition [ key ] ) , onchange : ( e ) => this . position = ( e . target as HTMLInputElement ) . value as DrawerPosition , size : 'xs' , fluid : true , value : this . position } ) , m ( Switch , { checked : this . closeOnEscapeKey , label : 'Close on ESC key' , onchange : ( ) => this . closeOnEscapeKey = ! this . closeOnEscapeKey } ) , m ( Switch , { checked : this . closeOnOutsideClick , label : 'Close on outer click' , onchange : ( ) => this . closeOnOutsideClick = ! this . closeOnOutsideClick } ) , m ( Switch , { checked : this . inline , label : 'Render inline' , onchange : ( ) => this . inline = ! this . inline } ) , m ( Switch , { checked : this . hasBackdrop , label : 'Has backdrop' , onchange : ( ) => this . hasBackdrop = ! this . hasBackdrop } ) ] ; } }