import m from 'mithril' ; import { Button , Collapse , Card } from '@/' ; import { Example } from '@shared/examples' ; const EXAMPLE_SRC = 'components/collapse/examples/index.ts' ; const SAMPLE_TEXT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis interdum ex eu eros dictum.<br/><br/>' ; export class CollapseExample { private isOpen = false ; private content = [ SAMPLE_TEXT ] ; public view ( ) { return m ( Example , { center : false , src : EXAMPLE_SRC } , [ m ( Button , { label : this . isOpen ? 'Hide collapse' : 'Show collapse' , intent : 'primary' , onclick : this . toggleOpen , style : 'margin-right: 10px' } ) , m ( Button , { label : 'Append content' , onclick : this . appendContent } ) , m ( Collapse , { duration : 200 , isOpen : this . isOpen } , [ m ( Card , { style : 'margin-top:20px' } , this . content . map ( ( text ) => m . trust ( text ) ) ) ] ) ] ) ; } private appendContent = ( ) => { this . content . push ( SAMPLE_TEXT ) ; } ; private toggleOpen = ( ) => { this . isOpen = ! this . isOpen ; } ; }