import React , { useEffect , useRef } from 'react' ; import Terminal from 'teleport/lib/term/terminal' ; import { getPlatform } from 'design/theme/utils' ; import { useTheme } from 'styled-components' ; import Tty from 'teleport/lib/term/tty' ; import { TermEventEnum } from 'teleport/lib/term/enums' ; import StyledXterm from 'teleport/Console/StyledXterm' ; export default function Xterm ( { tty } ) { const refContainer = useRef < HTMLElement > ( ) ; const theme = useTheme ( ) ; useEffect ( ( ) => { const term = new TerminalPlayer ( tty , { el : refContainer . current , fontFamily : theme . fonts . mono , fontSize : getPlatform ( ) . isMac ? 12 : 14 , } ) ; term . open ( ) ; term . term . focus ( ) ; term . tty . on ( TermEventEnum . DATA , ( ) => { term . term . textarea . scrollIntoView ( false ) ; } ) ; function stopPropagating ( e ) { e . stopPropagation ( ) ; } window . addEventListener ( 'wheel' , stopPropagating , true ) ; function cleanup ( ) { term . destroy ( ) ; window . removeEventListener ( 'wheel' , stopPropagating , true ) ; } return cleanup ; } , [ tty ] ) ; return < StyledXterm style = { { overflow : 'auto' } } ref = { refContainer } / > ; } class TerminalPlayer extends Terminal { connect ( ) { this . term . options . scrollback = 0 ; } resize ( cols , rows ) { this . term . focus ( ) ; super . resize ( cols , rows ) ; } _requestResize ( ) { } }