import React from 'react' ; import { Row , Col } from 'react-flexbox-grid' ; import { Icon , Text , Button , Popover , Tooltip } from '@blueprintjs/core' ; import { useTranslation } from 'react-i18next' ; import { TFunction } from 'i18next' ; import DeviceInfoCallout from '../DeviceInfoCallout' ; import isWithReactRevealAnimations from '../../utils/isWithReactRevealAnimations' ; interface DeviceConnectedInfoButtonProps { device : Device ; onDisconnect : ( ) => void ; } const getDeviceConnectedPopoverContent = ( t , pendingConnectionDevice , handleDisconnect ) => { const disconnectButtonText = t ( 'Disconnect' ) ; return ( < Row > < div style = { { padding : '20px' , borderRadius : '100px' } } > < Row style = { { margin : '0 px 10px 10px 10px' } } > < DeviceInfoCallout deviceType = { pendingConnectionDevice ?. deviceType } deviceIP = { pendingConnectionDevice ?. deviceIP } deviceOS = { pendingConnectionDevice ?. deviceOS } sharingSessionID = { pendingConnectionDevice ?. sharingSessionID } deviceBrowser = { pendingConnectionDevice ?. deviceBrowser } / > < /Row> < Row > < Col xs = { 12 } > < Button intent = "danger" icon = "disable" onClick = { ( ) => { handleDisconnect ( ) ; } } style = { { width : '100%' , borderRadius : '100px' } } > { disconnectButtonText } < /Button> < /Col> < /Row> < /div> < /Row>); } ; export default function DeviceConnectedInfoButton ( props ) { const { t } = useTranslation ( ) ; const { device , onDisconnect } = props ; return ( < > < Popover content = { getDeviceConnectedPopoverContent ( t , device , onDisconnect ) } position = "bottom" inheritDarkTheme = { false } transitionDuration = { isWithReactRevealAnimations ( ) ? 700 : 0 } > < Tooltip content = { < Text > { t ( 'Click to see more' ) } < /Text>} position="right" hoverOpenDelay={400}> < Button id = "connected-device-info-stepper-button" intent = "success" style = { { width : '150px' , height : '10px !important' , borderRadius : '100px' , position : 'relative' , margin : '0 auto' , } } > < Row > < Col xs = { 1 } > < Icon icon = "info-sign" / > < /Col> < Col xs > < Text > { t ( 'Connected' ) } < /Text> < /Col> < /Row> < /Button> < /Tooltip> < /Popover> < />); }