amis 2.0.0-rc.14 → 2.0.0-rc.15

package/esm/renderers/Log.d.ts

@@ -0,0 +1,91 @@
+/**
+ * @file 用于显示日志的组件，比如显示命令行的输出结果
+ */
+import React from 'react';
+import { RendererProps } from 'amis-core';
+import { BaseSchema } from '../Schema';
+export declare type LogOperation = 'stop' | 'restart' | 'showLineNumber' | 'clear';
+/**
+ * 日志展示组件
+ * 文档：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[];
+    refresh: boolean;
+    showLineNumber: boolean;
+    showOperation: boolean;
+}
+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: () => void;
+    clear: () => void;
+    changeShowLineNumber: () => void;
+    changeShowOperation: () => void;
+    loadLogs(): Promise<void>;
+    /**
+     * 渲染某一行
+     */
+    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,247 @@
+/**
+ * amis v2.0.0-rc.15
+ * 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, Button, PauseIcon, ReloadIcon, MinusIcon, PlusIcon, InputClearIcon, LeftArrowIcon, RightArrowIcon } 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: [],
+            refresh: true,
+            showLineNumber: false,
+            showOperation: false
+        };
+        _this.refresh = function () {
+            var origin = _this.state.refresh;
+            _this.setState({
+                refresh: !origin
+            });
+            if (!origin) {
+                _this.clear();
+                _this.loadLogs();
+            }
+        };
+        _this.clear = function () {
+            _this.setState({
+                logs: [],
+                lastLine: ''
+            });
+        };
+        _this.changeShowLineNumber = function () {
+            _this.setState({
+                showLineNumber: !_this.state.showLineNumber
+            });
+        };
+        _this.changeShowOperation = function () {
+            _this.setState({
+                showOperation: !_this.state.showOperation
+            });
+        };
+        _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,
+                                    lastLine: lastline
+                                });
+                            }
+                        }
+                        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.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 ? line : React.createElement(Ansi, { useClasses: true }, 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; _a.env;
+        var _b = this.state, refresh = _b.refresh, showLineNumber = _b.showLineNumber, showOperation = _b.showOperation;
+        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 ? (logs[index]) : (React.createElement(Ansi, { useClasses: true }, 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", { ref: this.logRef, className: cx('Log-body'), style: { height: useVirtualRender ? 'auto' : height } }, useVirtualRender ? lines : lines.length ? lines : loading),
+            React.createElement("div", { className: cx('Log-operation') }, operation &&
+                (operation === null || operation === void 0 ? void 0 : operation.length) > 0 &&
+                (showOperation ? (React.createElement(React.Fragment, null,
+                    operation.includes('stop') && (React.createElement(Button, { size: "sm", title: "__('stop')", disabled: !refresh, onClick: this.refresh },
+                        React.createElement(PauseIcon, null))),
+                    operation.includes('restart') && (React.createElement(Button, { size: "sm", title: __('reload'), disabled: refresh, onClick: this.refresh },
+                        React.createElement(ReloadIcon, null))),
+                    operation.includes('showLineNumber') && (React.createElement(Button, { size: "sm", title: showLineNumber
+                            ? __('Log.notShowLineNumber')
+                            : __('Log.showLineNumber'), onClick: this.changeShowLineNumber }, showLineNumber ? React.createElement(MinusIcon, null) : React.createElement(PlusIcon, null))),
+                    operation.includes('clear') && (React.createElement(Button, { size: "sm", title: __('clear'), onClick: this.clear },
+                        React.createElement(InputClearIcon, null))),
+                    React.createElement(Button, { size: "sm", title: __('Log.collapse'), onClick: this.changeShowOperation },
+                        React.createElement(LeftArrowIcon, null)))) : (React.createElement("div", { title: __('Log.expand'), className: cx('Log-operation-hidden'), onClick: this.changeShowOperation },
+                    React.createElement(RightArrowIcon, null)))))));
+    };
+    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 };