import m from 'mithril' ; import { TransitionManager , Switch , Button , Popover , Tooltip , Dialog , Classes , ButtonGroup } from '@/' ; import { Example } from '@shared/examples' ; const EXAMPLE_SRC = 'utils/transition-manager/examples/index.ts' ; export class TransitionManagerExample { private isDialogOpen = false ; public onremove ( ) { TransitionManager . isEnabled = true ; } public view ( ) { return m ( Example , { options : this . renderOptions ( ) , src : EXAMPLE_SRC } , [ m ( ButtonGroup , [ m ( Popover , { content : 'Content' , trigger : m ( Button , { label : 'Popover trigger' } ) } ) , m ( Tooltip , { content : 'Content' , trigger : m ( Button , { label : 'Tooltip trigger' } ) } ) , m ( Button , { label : 'Show dialog' , onclick : ( ) => this . isDialogOpen = ! this . isDialogOpen } ) ] ) , m ( Dialog , { content : 'Content' , isOpen : this . isDialogOpen , onClose : this . closeDialog , title : 'Dialog title' , footer : m ( `.${ Classes . ALIGN_RIGHT }` , [ m ( Button , { label : 'Close' , onclick : this . closeDialog } ) ] ) } ) ] ) ; } private closeDialog = ( ) => this . isDialogOpen = false ; private renderOptions ( ) { return [ m ( Switch , { label : 'Enabled' , checked : TransitionManager . isEnabled , onchange : ( ) => { TransitionManager . isEnabled ? TransitionManager . disable ( ) : TransitionManager . enable ( ) ; } } ) ] ; } }