import * as m from 'mithril' ; import state from '../state/state' ; export interface FileImportModalAttributes { onCancel : ( ) => void ; onFileContentsRead : ( fileContents : string ) => void ; } returns function FileImportModal ( ) { function getButtonMarkup ( attrs ) { return m ( 'div' , { style : { marginTop : '20px' , textAlign : 'right' , } , } , [ m ( 'button' , { onclick : attrs . onCancel } , 'Cancel' ) , ] ) ; } function getFileImportModalMarkup ( attrs ) { return m ( 'div' , { style : { background : '#dddddd' , padding : '10px' , border : '2px solid blue' , fontSize : `${ state . ui . getCurrentFontSize ( ) }px` , position : 'fixed' , left : '50%' , top : '35%' , transform : 'translate(-50%, -50%)' , zIndex : '20' , } , } , [ m ( 'div' , 'Import Freemind or m3 document' , m ( 'input' , { style : 'padding-top: 25px' , type : 'file' , onchange : ( e ) => onFileSelected ( attrs , e ) , } ) ) , getButtonMarkup ( attrs ) , ] ) ; } function getOverlayMarkup ( ) { return m ( 'div' , { style : { position : 'fixed' , top : '0px' , width : '100%' , height : '100vh' , background : 'rgba(255, 255, 255, 0.5)' , zIndex : '10' , } , } ) ; } function onFileSelected ( attrs , e ) { const fileList = ( e . target as HTMLInputElement ) . files ; if ( fileList !== null ) { const fileReader = new FileReader ( ) ; fileReader . onloadend = ( ) => { attrs . onFileContentsRead ( fileReader . result as string ) ; } ; fileReader . readAsText ( fileList [ 0 ] ) ; } } return { view : ( { attrs } ) : m . Vnode => m ( 'div' , [ getOverlayMarkup ( ) , getFileImportModalMarkup ( attrs ) , ] ) , } ; } export default FileImportModal ;