import React , { useCallback , useEffect } from 'react' ; import { Button , H5 , Icon , Text } from '@blueprintjs/core' ; import { Row , Col } from 'react-flexbox-grid' ; import { useTranslation } from 'react-i18next' ; interface SuccessStepProps { handleReset : ( ) => void ; } const SuccessStep = ( props ) => { const { t } = useTranslation ( ) ; useEffect ( ( ) => { document . querySelector ( '#top-panel-connected-devices-list-button' ) ?. classList . remove ( 'pulse-not-infinite' ) ; document . querySelector ( '#top-panel-connected-devices-list-button' ) ?. classList . add ( 'pulse-not-infinite' ) ; setTimeout ( ( ) => { document . querySelector ( '#top-panel-connected-devices-list-button' ) ?. classList . remove ( 'pulse-not-infinite' ) ; } , 4000 ) ; } , [ ] ) ; const handleTextConnectedListMouseEnter = useCallback ( ( ) => { document . querySelector ( '#top-panel-connected-devices-list-button' ) ?. classList . add ( 'pulsing' ) ; } , [ ] ) ; const handleTextConnectedListMouseLeave = useCallback ( ( ) => { document . querySelector ( '#top-panel-connected-devices-list-button' ) ?. classList . remove ( 'pulsing' ) ; } , [ ] ) ; return ( < Col xs = { 8 } md = { 6 } style = { { display : 'flex' , flexDirection : 'column' , justifyContent : 'center' , } } > < Row center = "xs" > < Col xs = { 12 } > < Icon icon = "endorsed" iconSize = { 35 } color = "#0F9960" / > < H5 > { t ( 'Done!' ) } < /H5> < /Col> < /Row> < Row center = "xs" > < Col xs = { 10 } > < div style = { { marginBottom : '10px' } } > < Text > { t ( 'Now you can see your screen on other device' ) } < /Text> < /div> < div id = "connected-devices-list-text-success" onMouseEnter = { handleTextConnectedListMouseEnter } onMouseLeave = { handleTextConnectedListMouseLeave } style = { { marginBottom : '25px' , textDecoration : 'underline dotted' , } } > < Text className = "" > { t ( 'You can manage connected devices by clicking Connected Devices button in top panel' ) } < /Text> < /div> < /Col> < /Row> < Button intent = "primary" onClick = { props . handleReset } icon = "repeat" style = { { borderRadius : '100px' } } > { t ( 'Connect New Device' ) } < /Button> < /Col>); } ; export default SuccessStep ;