import React from 'react' ; import { connect } from 'react-redux' ; import Popover from 'material-ui/Popover' ; import Menu from 'material-ui/Menu' ; import MenuItem from 'material-ui/MenuItem' ; import Typography from '@material-ui/core/Typography' ; import { confirm } from 'material-ui-dialogs' ; import Configuration from '../../../Configuration' ; import AppService from '../../../services/AppService' ; import { openApp } from '../../../store/AppProcessesStore' ; import Grid from '@material-ui/core/Grid' ; const styles = require ( './App.module.scss' ) ; const popoverStyle = { textAlign : 'center' , borderRadius : '10px' , } ; class App extends React . Component { constructor ( props ) { super ( props ) ; this . handleAppClick = this . handleAppClick . bind ( this ) ; this . handleAppPress = this . handleAppPress . bind ( this ) ; this . handlePopoverClose = this . handlePopoverClose . bind ( this ) ; this . handleUninstallClick = this . handleUninstallClick . bind ( this ) ; this . handleDialogClose = this . handleDialogClose . bind ( this ) ; this . handleTouchEnd = this . handleTouchEnd . bind ( this ) ; this . handleContextMenuRequest = this . handleContextMenuRequest . bind ( this ) ; this . wrapperElem = null ; this . tappableElem = null ; this . isAllowedToClosePopover = true ; this . state = { showPopover : false , popoverAnchorElem : null , showUninstsallDialog : false , } ; } getAppIcon ( ) { const defaultIcon = `${ Configuration . get ( 'host' ) }blobstorage/dev/images/link.svg` ; if ( ! this . props . app . icon ) return defaultIcon ; if ( ! this . props . app . icon . startsWith ( 'http' ) ) return defaultIcon ; return this . props . app . icon || defaultIcon ; } async handleAppClick ( ) { if ( this . state . showPopover ) return ; const isAppSupportedByDevice = AppService . isDeviceSupported ( this . props . app . supportedDeviceTypes ) ; if ( ! isAppSupportedByDevice ) { const userWantsToOpen = await confirm ( 'Not supported' , 'This device is not supported by the app. You could run into issues by running it, are you sure?' ) ; if ( ! userWantsToOpen ) return ; } window . open ( this . props . app . main ) ; } handlePopoverClose ( ) { if ( ! this . hasContextMenu && ! this . isAllowedToClosePopover ) return ; this . setState ( { showPopover : false , } ) ; } handleAppPress ( event ) { event . preventDefault ( ) ; this . isAllowedToClosePopover = false ; this . setState ( { showPopover : true , popoverAnchorElem : this . wrapperElem , } ) ; } handleUninstallClick ( ) { this . setState ( { showPopover : false , showUninstsallDialog : true , } ) ; } handleDialogClose ( ) { this . setState ( { showUninstsallDialog : false , showPopover : false , } ) ; } handleContextMenuRequest ( event ) { this . hasContextMenu = true ; event . stopPropagation ( ) ; event . preventDefault ( ) ; this . setState ( { showPopover : true , popoverAnchorElem : this . wrapperElem , } ) ; } handleTouchEnd ( ) { setTimeout ( ( ) => { this . isAllowedToClosePopover = true ; } , 300 ) ; } render ( ) { return ( < Grid item xs = { 3 } sm = { 2 } md = { 2 } lg = { 2 } ref = { ( elem ) => this . wrapperElem = elem } > { } < div ref = { ( tappable ) => { this . tappableElem = tappable ; } } className = { styles [ 'App' ] } component = "div" onClick = { this . handleAppClick } > < div className = { styles [ 'App-Icon' ] } > < img alt = { this . props . app . title } src = { this . getAppIcon ( ) } / > < /div> < span className = { styles [ 'App-Title' ] } > < Typography noWrap variant = "body1" > { this . props . app . title } < /Typography> < /span> { } < /div> < /Grid> ) ; } } const mapStateToProps = ( store ) => { return { AppCanvasStore : store . AppCanvasStore , } ; } ; export default connect ( mapStateToProps ) ( App ) ;