import { useRef , useEffect , FC } from 'react' ; import debounce from 'lodash.debounce' ; import Icon from '@/components/Icon' ; import xtermManager from '@/utils/xtermManager' ; import 'xterm/css/xterm.css' ; import styles from './index.module.scss' ; interface IXtermTerminal { id : string ; height ? : string ; name ? : string ; options ? : object ; } const XtermTerminal = ( { id , name , options , height } ) => { const xtermRef = useRef ( id ) ; useEffect ( ( ) => { const currentTerm = xtermManager . create ( id , xtermRef . current , options ) ; if ( ! currentTerm . inited ) { currentTerm . inited = true ; if ( name ) { currentTerm . writeChunk ( `${ name }\x1B[0m ` ) ; } } const handleResize = debounce ( ( ) => { currentTerm . fitAddon . fit ( ) ; } , 500 ) ; window . addEventListener ( 'resize' , handleResize ) ; return ( ) => { window . removeEventListener ( 'resize' , handleResize ) ; } ; } , [ ] ) ; const term = xtermManager . getTerm ( id ) ; return ( < div className = { styles . xtermContainer } > < Icon type = "clear" className = { styles . clearIcon } onClick = { ( ) => term . clear ( id ) } /> < div ref = { xtermRef } className = { styles . xtermRef } style = { { height } } /> < /div>); } ; export default XtermTerminal ;