react-terminal-viewer

import React from 'react'; import { ITerminalOptions } from 'xterm'; import type { ISearchOptions } from '../Addon/SearchAddon'; import type { IRemoteOptions } from '../Hooks/useRemote'; import type { ICacheOptions } from '../Hooks/useCache'; import type { IHighlightOptions } from '../Addon/HighlightAddon'; import { ExtraOptions, TerminalRef, LogAfterProps } from '../types'; import './index.less'; export interface TerminalViewerProps { /** * @description.zh-CN 指定 TerminalViewer 挂载的节点，并在容器内展现，false 为挂载在当前位置 * @default 当前位置 */ ref?: TerminalRef; /** * @description.zh-CN 是否自动拉伸填充容器宽高 * @default true */ fit?: boolean; /** *@description.zh-CN 是否开启自动滚动到底部 *@default true */ autoScroll?: boolean; /** * @description.zh-CN 自动滚动到某一行，开启后自动滚动到底部失效 */ scrollToRow?: number; /** * @description.zh-CN 是否支持刷新 * @default true */ refreshable?: boolean; /** * @description.zh-CN 搜索框 placeholder */ searchPlaceholder?: string; /** * @description.zh-CN 默认全屏显示 * @default false */ defaultFullScreen?: boolean; /** * @description.zh-CN 自定义日志头部, null 为不显示默认头部 */ header?: React.ReactNode; /** * @description.zh-CN 搜索框前的内容 */ inputAddonBefore?: React.ReactNode; /** * @description.zh-CN 搜索框后的内容 */ inputAddonAfter?: React.ReactNode; /** * @description.zh-CN toolbar 自定义工具栏 */ toolbar?: React.ReactNode; /** * @description.zh-CN 是否显示全屏图标 * @default true */ showFullScreen?: boolean; /** * @description.zh-CN 自定义空文本显示 */ empty?: React.ReactNode; /** * @description.zh-CN 外层样式类名 */ className?: string; /** * @description.zh-CN 可用于设置外层容器样式 */ style?: object; /** * @description.zh-CN 用于渲染日志的默认数据，如 "echo 1\r\necho2" * @default '' */ defaultData?: string; /** * @description.zh-CN 默认打开的标签 * @default 0 */ defaultTabIndex?: number; /** * @description.zh-CN 激活的标签, 如果同时设置了 defaultTabIndex 则以此属性为准 * @default 0 */ activeTabIndex?: number; /** * @description.zh-CN 设置日志后置标签，仅在开启虚拟 DOM 生效 */ logAfter?: React.FunctionComponent<LogAfterProps> | React.ComponentClass<LogAfterProps>; /** * @description.zh-CN 多标签配置选项 */ tabs?: { key: string | number; title?: React.ReactNode; defaultData?: string; remoteOptions?: IRemoteOptions; cacheOptions?: ICacheOptions; }[]; /** *@description.zh-CN 自定义图标 */ icons?: { search?: React.ReactNode; up?: React.ReactNode; down?: React.ReactNode; clear?: React.ReactNode; top?: React.ReactNode; bottom?: React.ReactNode; fullScreen?: React.ReactNode; fullScreenExit?: React.ReactNode; refresh?: React.ReactNode; loading?: React.ReactNode; }; /** * @description.zh-CN 是否支持渲染超链接 * @default true */ webLinksSupport?: boolean; /** * @description.zh-CN 是否使用 canvas 渲染, 开启 canvas 会有更好的性能但可能会遇到更多的问题 * @default false */ canvasSupport?: boolean; /** * @description.zh-CN 是否使用自研虚拟 DOM 内核，开启后 terminalOptions, canvasSupport, webLinksSupport 不可用 * @default false */ virtualDomSupport?: boolean; /** * @description.zh-CN 日志 web worker 路径, 需配合 CopyPlugin 使用且仅在开启 virtualDomSupport 为 true 时有效 * @default "/worker" */ workerPath?: string; /** * @description.zh-CN 远程加载配置 * */ remoteOptions?: IRemoteOptions; /** * @description.zh-CN 缓存全局配置，仅在配置远程加载后有效，如 `expires: 60 * 1000` 表示自动清理已过期一分钟的缓存 */ cacheOptions?: ICacheOptions; /** * @description.zh-CN xterm 搜索选项 */ searchOptions?: ISearchOptions; /** * @description.zh-CN 高亮选项 */ highlightOptions?: IHighlightOptions[]; /** * @description.zh-CN xtem.js 配置, https://github.com/xtermjs/xterm.js */ terminalOptions?: ITerminalOptions; /** * @description.zh-CN 额外的功能选项 { showLineNumber 仅虚拟 DOM 模式支持} */ extraOptions?: ExtraOptions; /** * @description.zh-CN 指定 TerminalViewer 挂载的节点，并在容器内展现，开启全屏后无效， false 为挂载在当前位置 * @default 当前节点 */ getContainer?: string | HTMLElement | (() => HTMLElement | null); /** * @description.zh-CN 点击 tab 标题后回调函数 */ onTitleChange?: (index: number) => void; /** * @description.zh-CN 加载状态变更回调函数 */ onLoading?: (bool: boolean) => void; /** * @description.zh-CN 刷新后的回调函数 */ onRefresh?: () => void; } declare const TerminalViewer: React.ForwardRefExoticComponent<Omit<TerminalViewerProps, "ref"> & React.RefAttributes<TerminalRef | undefined>>; export default TerminalViewer;