amis 2.0.0-rc.9 → 2.0.2

package/esm/renderers/Log.d.ts

@@ -0,0 +1,93 @@
+/**
+ * @file 用于显示日志的组件，比如显示命令行的输出结果
+ */
+import React from 'react';
+import { RendererProps } from 'amis-core';
+import { BaseSchema } from '../Schema';
+export declare type LogOperation = 'stop' | 'restart' | 'showLineNumber' | 'clear' | 'filter';
+/**
+ * 日志展示组件
+ * 文档：https://baidu.gitee.io/amis/docs/components/log
+ */
+export interface LogSchema extends BaseSchema {
+    /**
+     * 指定为 log 链接展示控件
+     */
+    type: 'log';
+    /**
+     * 自定义 CSS 类名
+     */
+    className?: string;
+    /**
+     * 获取日志的地址
+     */
+    source: string;
+    /**
+     * 控件高度
+     */
+    height?: number;
+    /**
+     * 是否自动滚动到最底部
+     */
+    autoScroll?: boolean;
+    /**
+     * 返回内容字符编码
+     */
+    encoding?: string;
+    /**
+     * 限制最大日志数量
+     */
+    maxLength?: number;
+    /**
+     * 每行高度
+     */
+    rowHeight?: number;
+    /**
+     * 关闭 ANSI 颜色支持
+     */
+    disableColor?: boolean;
+    /**
+     * 一些可操作选项
+     */
+    operation?: Array<LogOperation>;
+}
+export interface LogProps extends RendererProps, Omit<LogSchema, 'type' | 'className'> {
+}
+export interface LogState {
+    lastLine: string;
+    logs: string[];
+    originLogs: string[];
+    refresh: boolean;
+    showLineNumber: boolean;
+    filterWord: string;
+}
+export declare class Log extends React.Component<LogProps, LogState> {
+    static defaultProps: {
+        height: number;
+        autoScroll: boolean;
+        placeholder: string;
+        encoding: string;
+    };
+    isDone: boolean;
+    autoScroll: boolean;
+    logRef: React.RefObject<HTMLDivElement>;
+    state: LogState;
+    constructor(props: LogProps);
+    componentWillUnmount(): void;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: LogProps): void;
+    pauseOrResumeScrolling(): void;
+    refresh: (e: React.MouseEvent<HTMLElement>) => void;
+    clear: (e: React.MouseEvent<HTMLElement>) => void;
+    changeFilterWord: (value: string) => void;
+    loadLogs(): Promise<void>;
+    renderHighlightWord(line: string): string | (string | JSX.Element)[];
+    renderHighlightWordWithAnsi(line: string): string;
+    /**
+     * 渲染某一行
+     */
+    renderLine(index: number, line: string, showLineNumber: boolean): JSX.Element;
+    render(): JSX.Element;
+}
+export declare class LogRenderer extends Log {
+}

package/esm/renderers/Log.js

@@ -0,0 +1,278 @@
+/**
+ * amis v2.0.2
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __awaiter, __generator, __assign, __decorate } from 'tslib';
+import React from 'react';
+import { isApiOutdated, buildApi, Renderer } from 'amis-core';
+import Ansi from 'ansi-to-react';
+import { VirtualList, Icon, SearchBox } from 'amis-ui';
+
+var Log = /** @class */ (function (_super) {
+    __extends(Log, _super);
+    function Log(props) {
+        var _this = _super.call(this, props) || this;
+        _this.isDone = false;
+        _this.autoScroll = false;
+        _this.state = {
+            lastLine: '',
+            logs: [],
+            originLogs: [],
+            refresh: true,
+            showLineNumber: false,
+            filterWord: ''
+        };
+        _this.refresh = function (e) {
+            var origin = _this.state.refresh;
+            _this.setState({
+                refresh: !origin
+            });
+            if (!origin) {
+                _this.clear(e);
+                _this.loadLogs();
+            }
+            e.preventDefault();
+        };
+        _this.clear = function (e) {
+            _this.setState({
+                logs: [],
+                lastLine: ''
+            });
+            e.preventDefault();
+        };
+        _this.changeFilterWord = function (value) {
+            var logs = _this.state.originLogs;
+            if (value !== '' &&
+                value !== undefined &&
+                value !== null &&
+                value.length > 0) {
+                logs = logs.filter(function (line) { return line.includes(value); });
+            }
+            _this.setState({
+                filterWord: value,
+                logs: logs
+            });
+        };
+        _this.logRef = React.createRef();
+        _this.autoScroll = props.autoScroll || false;
+        _this.pauseOrResumeScrolling = _this.pauseOrResumeScrolling.bind(_this);
+        return _this;
+    }
+    Log.prototype.componentWillUnmount = function () {
+        if (this.logRef && this.logRef.current) {
+            this.logRef.current.removeEventListener('scroll', this.pauseOrResumeScrolling);
+        }
+    };
+    Log.prototype.componentDidMount = function () {
+        if (this.autoScroll && this.logRef && this.logRef.current) {
+            this.logRef.current.addEventListener('scroll', this.pauseOrResumeScrolling);
+        }
+        if (this.props.source) {
+            this.loadLogs();
+        }
+    };
+    Log.prototype.componentDidUpdate = function (prevProps) {
+        if (this.autoScroll && this.logRef && this.logRef.current) {
+            this.logRef.current.scrollTop = this.logRef.current.scrollHeight;
+        }
+        if (isApiOutdated(prevProps.source, this.props.source, prevProps.data, this.props.data)) {
+            this.loadLogs();
+        }
+    };
+    // 如果向上滚动就停止自动滚动，除非滚到底部
+    Log.prototype.pauseOrResumeScrolling = function () {
+        if (this.logRef && this.logRef.current) {
+            var _a = this.logRef.current, scrollHeight = _a.scrollHeight, scrollTop = _a.scrollTop, offsetHeight = _a.offsetHeight;
+            this.autoScroll = scrollHeight - (scrollTop + offsetHeight) < 50;
+        }
+    };
+    Log.prototype.loadLogs = function () {
+        var _a;
+        return __awaiter(this, void 0, void 0, function () {
+            var _b, source, data, env, __, encoding, maxLength, api, res, body, reader, lastline, logs, _c, done, value, text, lines;
+            var _this = this;
+            return __generator(this, function (_d) {
+                switch (_d.label) {
+                    case 0:
+                        _b = this.props, source = _b.source, data = _b.data, env = _b.env, __ = _b.translate, encoding = _b.encoding, maxLength = _b.maxLength;
+                        api = buildApi(source, data);
+                        if (!api.url) {
+                            return [2 /*return*/];
+                        }
+                        return [4 /*yield*/, fetch(api.url, {
+                                method: ((_a = api.method) === null || _a === void 0 ? void 0 : _a.toLocaleUpperCase()) || 'GET',
+                                headers: api.headers || undefined,
+                                body: api.data ? JSON.stringify(api.data) : undefined,
+                                credentials: 'include'
+                            })];
+                    case 1:
+                        res = _d.sent();
+                        if (!(res.status === 200)) return [3 /*break*/, 8];
+                        body = res.body;
+                        if (!body) {
+                            return [2 /*return*/];
+                        }
+                        reader = body.getReader();
+                        lastline = '';
+                        logs = [];
+                        _d.label = 2;
+                    case 2:
+                        if (!!this.state.refresh) return [3 /*break*/, 4];
+                        return [4 /*yield*/, reader.cancel('click cancel button').then(function () {
+                                _this.props.env.notify('success', '日志已经停止刷新');
+                                return;
+                            })];
+                    case 3:
+                        _d.sent();
+                        _d.label = 4;
+                    case 4: return [4 /*yield*/, reader.read()];
+                    case 5:
+                        _c = _d.sent(), done = _c.done, value = _c.value;
+                        if (value) {
+                            text = new TextDecoder(encoding).decode(value, { stream: true });
+                            lines = text.split('\n');
+                            // 如果没有换行符就只更新最后一行
+                            if (lines.length === 1) {
+                                lastline += lines[0];
+                                this.setState({
+                                    lastLine: lastline
+                                });
+                            }
+                            else {
+                                // 将之前的数据补上
+                                lines[0] = lastline + lines[0];
+                                // 最后一个要么是空，要么是下一行的数据
+                                lastline = lines.pop() || '';
+                                if (maxLength) {
+                                    if (logs.length + lines.length > maxLength) {
+                                        logs.splice(0, logs.length + lines.length - maxLength);
+                                    }
+                                }
+                                logs = logs.concat(lines);
+                                this.setState({
+                                    logs: logs,
+                                    originLogs: logs,
+                                    lastLine: lastline
+                                });
+                            }
+                        }
+                        this.changeFilterWord(this.state.filterWord);
+                        if (done) {
+                            this.isDone = true;
+                            return [2 /*return*/];
+                        }
+                        _d.label = 6;
+                    case 6: return [3 /*break*/, 2];
+                    case 7: return [3 /*break*/, 9];
+                    case 8:
+                        env.notify('error', __('fetchFailed'));
+                        _d.label = 9;
+                    case 9: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    Log.prototype.renderHighlightWord = function (line) {
+        var cx = this.props.classnames;
+        var filterWord = this.state.filterWord;
+        if (filterWord === '') {
+            return line;
+        }
+        var items = line.split(filterWord);
+        return items.map(function (item, index) {
+            if (index < items.length - 1) {
+                return (React.createElement("span", null,
+                    item,
+                    React.createElement("span", { className: cx('Log-line-highlight') }, filterWord)));
+            }
+            return item;
+        });
+    };
+    Log.prototype.renderHighlightWordWithAnsi = function (line) {
+        var filterWord = this.state.filterWord;
+        if (filterWord === '') {
+            return line;
+        }
+        return line.replaceAll(filterWord, "\u001B[43;1m\u001B[30;1m".concat(filterWord, "\u001B[0m"));
+    };
+    /**
+     * 渲染某一行
+     */
+    Log.prototype.renderLine = function (index, line, showLineNumber) {
+        var _a = this.props, cx = _a.classnames, disableColor = _a.disableColor;
+        return (React.createElement("div", { className: cx('Log-line'), key: index },
+            showLineNumber && (React.createElement("span", { className: cx('Log-line-number') },
+                index + 1,
+                " ")),
+            disableColor ? (this.renderHighlightWord(line)) : (React.createElement(Ansi, { useClasses: true }, this.renderHighlightWordWithAnsi(line)))));
+    };
+    Log.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, source = _a.source, className = _a.className, cx = _a.classnames, placeholder = _a.placeholder, height = _a.height, rowHeight = _a.rowHeight, disableColor = _a.disableColor, __ = _a.translate, operation = _a.operation;
+        var _b = this.state, refresh = _b.refresh, showLineNumber = _b.showLineNumber;
+        var loading = __(placeholder);
+        if (!source) {
+            loading = __('Log.mustHaveSource');
+        }
+        var lines;
+        var logs = this.state.lastLine
+            ? this.state.logs.concat([this.state.lastLine])
+            : this.state.logs;
+        // 如果设置 rowHeight 就开启延迟渲染
+        var useVirtualRender = rowHeight;
+        if (useVirtualRender) {
+            lines = (React.createElement(VirtualList, { height: height, itemCount: logs.length, itemSize: rowHeight, renderItem: function (_a) {
+                    var index = _a.index, style = _a.style;
+                    return (React.createElement("div", { className: cx('Log-line'), key: index, style: __assign(__assign({}, style), { whiteSpace: 'nowrap' }) },
+                        showLineNumber && (React.createElement("span", { className: cx('Log-line-number') },
+                            index + 1,
+                            " ")),
+                        disableColor ? (_this.renderHighlightWord(logs[index])) : (React.createElement(Ansi, { useClasses: true }, _this.renderHighlightWordWithAnsi(logs[index])))));
+                } }));
+        }
+        else {
+            lines = logs.map(function (line, index) {
+                return _this.renderLine(index, line, showLineNumber);
+            });
+        }
+        return (React.createElement("div", { className: cx('Log', className) },
+            React.createElement("div", { className: cx('Log-operation') }, operation && (operation === null || operation === void 0 ? void 0 : operation.length) > 0 && (React.createElement(React.Fragment, null,
+                operation.includes('stop') && (React.createElement("a", { title: __('stop'), className: !refresh ? 'is-disabled' : '', onClick: this.refresh },
+                    React.createElement(Icon, { icon: "pause" }))),
+                operation.includes('restart') && (React.createElement("a", { title: __('reload'), className: refresh ? 'is-disabled' : '', onClick: this.refresh },
+                    React.createElement(Icon, { icon: "refresh" }))),
+                operation.includes('showLineNumber') && (React.createElement("a", { title: showLineNumber
+                        ? __('Log.notShowLineNumber')
+                        : __('Log.showLineNumber'), onClick: function (e) {
+                        _this.setState({ showLineNumber: !showLineNumber });
+                        e.preventDefault();
+                    } },
+                    React.createElement(Icon, { icon: showLineNumber ? 'invisible' : 'view' }))),
+                operation.includes('clear') && (React.createElement("a", { onClick: this.clear, title: __('clear') },
+                    React.createElement(Icon, { icon: "remove" }))),
+                operation && operation.includes('filter') && (React.createElement(SearchBox, { className: cx('Log-filter-box'), placeholder: "\u8FC7\u6EE4\u8BCD", onChange: this.changeFilterWord }))))),
+            React.createElement("div", { ref: this.logRef, className: cx('Log-body'), style: { height: useVirtualRender ? 'auto' : height } }, useVirtualRender ? lines : lines.length ? lines : loading)));
+    };
+    Log.defaultProps = {
+        height: 500,
+        autoScroll: true,
+        placeholder: 'loading',
+        encoding: 'utf-8'
+    };
+    return Log;
+}(React.Component));
+/** @class */ ((function (_super) {
+    __extends(LogRenderer, _super);
+    function LogRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    LogRenderer = __decorate([
+        Renderer({
+            type: 'log'
+        })
+    ], LogRenderer);
+    return LogRenderer;
+})(Log));
+
+export { Log };