sonot
/
PteroTheme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Wait for connection before opening terminal

This commit is contained in:
Dane Everitt 2019-12-21 21:51:42 -08:00
parent 33eb1d259f
commit f6b414741d
No known key found for this signature in database
GPG Key ID: EEA66103B3D71F53
1 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
resources/scripts/components/server/Console.tsx
View File

@ -1,4 +1,4 @@
import React, { createRef, useEffect, useMemo } from 'react'; import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { ITerminalOptions, Terminal } from 'xterm'; import { ITerminalOptions, Terminal } from 'xterm';
import * as TerminalFit from 'xterm/lib/addons/fit/fit'; import * as TerminalFit from 'xterm/lib/addons/fit/fit';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay'; import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
@ -36,7 +36,8 @@ const terminalProps: ITerminalOptions = {
}; };
export default () => { export default () => {
const ref = createRef<HTMLDivElement>(); const [ terminalElement, setTerminalElement ] = useState<HTMLDivElement | null>(null);
const useRef = useCallback(node => setTerminalElement(node), []);
const terminal = useMemo(() => new Terminal({ ...terminalProps }), []); const terminal = useMemo(() => new Terminal({ ...terminalProps }), []);
const { connected, instance } = ServerContext.useStoreState(state => state.socket); const { connected, instance } = ServerContext.useStoreState(state => state.socket);
@ -62,14 +63,14 @@ export default () => {
}; };
useEffect(() => { useEffect(() => {
if (ref.current && !terminal.element) { if (connected && terminalElement && !terminal.element) {
terminal.open(ref.current); terminal.open(terminalElement);
// @see https://github.com/xtermjs/xterm.js/issues/2265 // @see https://github.com/xtermjs/xterm.js/issues/2265
// @see https://github.com/xtermjs/xterm.js/issues/2230 // @see https://github.com/xtermjs/xterm.js/issues/2230
TerminalFit.fit(terminal); TerminalFit.fit(terminal);
} }
}, [terminal, ref]); }, [ terminal, connected, terminalElement ]);
useEffect(() => { useEffect(() => {
if (connected && instance) { if (connected && instance) {
@ -99,7 +100,7 @@ export default () => {
maxHeight: '32rem', maxHeight: '32rem',
}} }}
> >
<div id={'terminal'} ref={ref}/> <div id={'terminal'} ref={useRef}/>
</div> </div>
<div className={'rounded-b bg-neutral-900 text-neutral-100 flex'}> <div className={'rounded-b bg-neutral-900 text-neutral-100 flex'}>
<div className={'flex-no-shrink p-2 font-bold'}>$</div> <div className={'flex-no-shrink p-2 font-bold'}>$</div>