import { bind } from 'decko'; import { Component, h } from 'preact'; import { Xterm, XtermOptions } from './xterm'; import 'xterm/css/xterm.css'; import { Modal } from '../modal'; interface Props extends XtermOptions { id: string; } interface State { modal: boolean; } export class Terminal extends Component { private container: HTMLElement; private xterm: Xterm; constructor(props: Props) { super(); this.xterm = new Xterm(props, this.showModal); } async componentDidMount() { await this.xterm.refreshToken(); this.xterm.open(this.container); this.xterm.connect(); } componentWillUnmount() { this.xterm.dispose(); } render({ id }: Props, { modal }: State) { return (
(this.container = c as HTMLElement)}>
); } @bind showModal() { this.setState({ modal: true }); } @bind sendFile(event: Event) { this.setState({ modal: false }); const files = (event.target as HTMLInputElement).files; if (files) this.xterm.sendFile(files); } }