amis-ui 6.2.2 → 6.4.0

package/esm/components/formula/Editor.js

@@ -1,31 +1,48 @@
 /**
- * amis-ui v6.2.2
+ * amis-ui v6.4.0
  * Copyright 2018-2024 fex
  */
 
-import { __extends, __read, __awaiter, __generator, __spreadArray, __assign, __rest, __decorate, __metadata } from 'tslib';
+import { __extends, __read, __awaiter, __generator, __spreadArray, __rest, __decorate, __metadata } from 'tslib';
 import React__default from 'react';
-import { eachTree, mapTree, parse, autobind, uncontrollable, themeable, localeable } from 'amis-core';
-import { functionDocs } from 'amis-formula';
-import { FormulaPlugin, editorFactory } from './plugin.js';
+import { eachTree, parse, resolveVariableAndFilterForAsync, autobind, uncontrollable, themeable, localeable } from 'amis-core';
+import { editorFactory } from './plugin.js';
 import FuncList from './FuncList.js';
 import VariableList from './VariableList.js';
-import { CodeMirrorEditor } from '../CodeMirror.js';
 import { toast } from '../Toast.js';
 import Switch from '../Switch.js';
+import CodeEditor from './CodeEditor.js';
+import { functionDocs } from 'amis-formula';
+import Transition, { EXITED, EXITING, ENTERING } from 'react-transition-group/Transition';
+import MonacoEditor from '../Editor.js';
+import debounce from 'lodash/debounce';
 
+var _a;
+var collapseStyles = (_a = {},
+    _a[EXITED] = 'out',
+    _a[EXITING] = 'out',
+    _a[ENTERING] = 'in',
+    _a);
 var FormulaEditor = /** @class */ (function (_super) {
     __extends(FormulaEditor, _super);
-    function FormulaEditor() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
+    function FormulaEditor(props) {
+        var _this = _super.call(this, props) || this;
         _this.state = {
             focused: false,
             isCodeMode: false,
+            showRunPanel: false,
             expandTree: false,
-            normalizeVariables: [],
-            functions: []
+            functions: _this.props.functions,
+            runContext: '{\n}',
+            runResult: '',
+            runValid: false
         };
         _this.unmounted = false;
+        _this.editor = React__default.createRef();
+        _this.runCode = debounce(_this.runCode.bind(_this), 250, {
+            leading: false,
+            trailing: true
+        });
         return _this;
     }
     FormulaEditor.buildDefaultFunctions = function (doc) {
@@ -54,6 +71,24 @@ var FormulaEditor = /** @class */ (function (_super) {
             });
         });
     };
+    FormulaEditor.buildFunctions = function (functions, functionsFilter) {
+        return __awaiter(this, void 0, void 0, function () {
+            var doc, customFunctions, functionList;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, import('amis-formula/lib/doc')];
+                    case 1:
+                        doc = (_a.sent()).doc;
+                        customFunctions = Array.isArray(functions) ? functions : [];
+                        functionList = __spreadArray(__spreadArray(__spreadArray([], __read(FormulaEditor.buildDefaultFunctions(doc)), false), __read(FormulaEditor.buildCustomFunctions(functionDocs)), false), __read(customFunctions), false);
+                        if (functionsFilter) {
+                            return [2 /*return*/, functionsFilter(functionList)];
+                        }
+                        return [2 /*return*/, functionList];
+                }
+            });
+        });
+    };
     FormulaEditor.replaceStrByIndex = function (str, idx, key, replaceKey) {
         var from = str.slice(0, idx);
         var left = str.slice(idx);
@@ -65,6 +100,15 @@ var FormulaEditor = /** @class */ (function (_super) {
             : "\\$\\{[^\\{\\}]*\\b".concat(key, "\\b[^\\{\\}]*\\}");
         return new RegExp(reg);
     };
+    /**
+     * 干不掉，太多地方使用了，但是要废弃了。
+     * 不要用了，输入框也换成 codemirror 了，本身就支持高亮
+     * @deprecated
+     * @param value
+     * @param variables
+     * @param evalMode
+     * @returns
+     */
     FormulaEditor.highlightValue = function (value, variables, evalMode) {
         if (evalMode === void 0) { evalMode = true; }
         if (!Array.isArray(variables) || !variables.length || !value) {
@@ -116,66 +160,37 @@ var FormulaEditor = /** @class */ (function (_super) {
         return { html: html };
     };
     FormulaEditor.prototype.componentDidMount = function () {
-        var variables = this.props.variables;
-        this.normalizeVariables(variables);
-        this.buildFunctions();
-    };
-    FormulaEditor.prototype.componentDidUpdate = function (prevProps, prevState, snapshot) {
-        if (prevProps.variables !== this.props.variables) {
-            this.normalizeVariables(this.props.variables);
-        }
-        if (prevProps.functions !== this.props.functions) {
-            this.buildFunctions();
-        }
-    };
-    FormulaEditor.prototype.componentWillUnmount = function () {
-        var _a;
-        (_a = this.editorPlugin) === null || _a === void 0 ? void 0 : _a.dispose();
-        this.unmounted = true;
-    };
-    FormulaEditor.prototype.buildFunctions = function () {
         return __awaiter(this, void 0, void 0, function () {
-            var doc, customFunctions, functionList;
+            var functionList;
             return __generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0: return [4 /*yield*/, import('amis-formula/lib/doc')];
+                    case 0:
+                        if (!!this.state.functions) return [3 /*break*/, 2];
+                        return [4 /*yield*/, FormulaEditor.buildFunctions()];
                     case 1:
-                        doc = (_a.sent()).doc;
+                        functionList = _a.sent();
                         if (this.unmounted) {
                             return [2 /*return*/];
                         }
-                        customFunctions = Array.isArray(this.props.functions)
-                            ? this.props.functions
-                            : [];
-                        functionList = __spreadArray(__spreadArray(__spreadArray([], __read(FormulaEditor.buildDefaultFunctions(doc)), false), __read(FormulaEditor.buildCustomFunctions(functionDocs)), false), __read(customFunctions), false);
                         this.setState({
                             functions: functionList
                         });
-                        return [2 /*return*/];
+                        _a.label = 2;
+                    case 2: return [2 /*return*/];
                 }
             });
         });
     };
-    FormulaEditor.prototype.normalizeVariables = function (variables) {
-        if (!variables) {
-            return;
+    FormulaEditor.prototype.componentDidUpdate = function (prevProps) {
+        if (prevProps.functions !== this.props.functions) {
+            this.setState({
+                functions: this.props.functions
+            });
         }
-        // 追加path，用于分级高亮
-        var list = mapTree(variables, function (item, key, level, paths) {
-            var _a;
-            var path = paths === null || paths === void 0 ? void 0 : paths.reduce(function (prev, next) {
-                var _a;
-                return !next.value
-                    ? prev
-                    : "".concat(prev).concat(prev ? '.' : '').concat((_a = next.label) !== null && _a !== void 0 ? _a : next.value);
-            }, '');
-            return __assign(__assign(__assign({}, item), { path: "".concat(path).concat(path ? '.' : '').concat(item.label) }), (item.isMember || paths.some(function (item) { return item.isMember; })
-                ? {
-                    memberDepth: (_a = paths === null || paths === void 0 ? void 0 : paths.filter(function (item) { return item.type === 'array'; })) === null || _a === void 0 ? void 0 : _a.length
-                }
-                : {}));
-        });
-        this.setState({ normalizeVariables: list });
+    };
+    FormulaEditor.prototype.componentWillUnmount = function () {
+        this.unmounted = true;
+        this.runCode.cancel();
     };
     FormulaEditor.prototype.handleFocus = function () {
         this.setState({
@@ -187,13 +202,16 @@ var FormulaEditor = /** @class */ (function (_super) {
             focused: false
         });
     };
+    FormulaEditor.prototype.getEditor = function () {
+        var ref = this.editor.current;
+        while (ref === null || ref === void 0 ? void 0 : ref.getWrappedInstance) {
+            ref = ref.getWrappedInstance();
+        }
+        return ref;
+    };
     FormulaEditor.prototype.insertValue = function (value, type) {
         var _a;
-        (_a = this.editorPlugin) === null || _a === void 0 ? void 0 : _a.insertContent(value, type);
-    };
-    FormulaEditor.prototype.handleEditorMounted = function (cm, editor) {
-        var _this = this;
-        this.editorPlugin = new FormulaPlugin(editor, cm, function () { return (__assign(__assign({}, _this.props), { variables: _this.state.normalizeVariables })); });
+        (_a = this.getEditor()) === null || _a === void 0 ? void 0 : _a.insertContent(value, type);
     };
     FormulaEditor.prototype.validate = function () {
         var value = this.props.value;
@@ -211,11 +229,11 @@ var FormulaEditor = /** @class */ (function (_super) {
     };
     FormulaEditor.prototype.handleFunctionSelect = function (item) {
         var _a;
-        (_a = this.editorPlugin) === null || _a === void 0 ? void 0 : _a.insertContent("".concat(item.name), 'func');
+        (_a = this.getEditor()) === null || _a === void 0 ? void 0 : _a.insertContent("".concat(item.name), 'func');
     };
     FormulaEditor.prototype.handleVariableSelect = function (item) {
         var _a;
-        var _b = this.props; _b.evalMode; var selfVariableName = _b.selfVariableName;
+        var selfVariableName = this.props.selfVariableName;
         if (item &&
             item.value &&
             selfVariableName &&
@@ -226,7 +244,7 @@ var FormulaEditor = /** @class */ (function (_super) {
         if (!item.value) {
             return;
         }
-        (_a = this.editorPlugin) === null || _a === void 0 ? void 0 : _a.insertContent(item.isMember
+        (_a = this.getEditor()) === null || _a === void 0 ? void 0 : _a.insertContent(item.isMember
             ? item.value
             : {
                 key: item.value,
@@ -238,47 +256,115 @@ var FormulaEditor = /** @class */ (function (_super) {
     FormulaEditor.prototype.handleOnChange = function (value) {
         var onChange = this.props.onChange;
         onChange === null || onChange === void 0 ? void 0 : onChange(value);
+        this.runCode();
     };
     FormulaEditor.prototype.editorFactory = function (dom, cm) {
         var _a = this.props; _a.editorOptions; var rest = __rest(_a, ["editorOptions"]);
         return editorFactory(dom, cm, rest, {
-            lineWrapping: true // 自动换行
+            lineWrapping: true,
+            autoFocus: true
         });
     };
     FormulaEditor.prototype.handleIsCodeModeChange = function (showCode) {
-        var _a, _b, _c;
+        var _this = this;
         // 重置一下value
-        (_a = this.editorPlugin) === null || _a === void 0 ? void 0 : _a.setValue((_b = this.editorPlugin) === null || _b === void 0 ? void 0 : _b.getValue());
+        // this.getEditor()?.setValue(this.getEditor()?.getValue());
         // 非源码模式，则mark一下
-        !showCode && ((_c = this.editorPlugin) === null || _c === void 0 ? void 0 : _c.autoMarkText());
-        this.setState({ isCodeMode: showCode });
+        // !showCode && this.getEditor()?.autoMarkText();
+        this.setState({ isCodeMode: showCode }, function () { var _a; return (_a = _this.getEditor()) === null || _a === void 0 ? void 0 : _a.setDisableAutoMark(showCode ? true : false); });
+    };
+    FormulaEditor.prototype.toggleRunPanel = function () {
+        this.setState({
+            showRunPanel: !this.state.showRunPanel
+        }, this.runCode);
+    };
+    FormulaEditor.prototype.handleRunContextChange = function (value) {
+        this.setState({ runContext: value }, this.runCode);
+    };
+    FormulaEditor.prototype.runCode = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var value, runContext, code, result, e_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        value = this.props.value || '';
+                        if (!this.state.showRunPanel) {
+                            return [2 /*return*/];
+                        }
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, , 4]);
+                        // 因为 resolveVariableAndFilterForAsync 不会报语法错误
+                        parse(value, {
+                            evalMode: this.props.evalMode
+                        });
+                        runContext = JSON.parse(this.state.runContext);
+                        code = this.props.evalMode ? "${".concat(value, "}") : value;
+                        return [4 /*yield*/, resolveVariableAndFilterForAsync(code, runContext)];
+                    case 2:
+                        result = _a.sent();
+                        this.unmounted ||
+                            this.setState({
+                                runValid: true,
+                                runResult: JSON.stringify(result)
+                            });
+                        return [3 /*break*/, 4];
+                    case 3:
+                        e_1 = _a.sent();
+                        this.unmounted ||
+                            this.setState({
+                                runValid: false,
+                                runResult: e_1.message
+                            });
+                        return [3 /*break*/, 4];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        });
     };
     FormulaEditor.prototype.handleExpandTreeChange = function (expand) {
         this.setState({ expandTree: expand });
     };
     FormulaEditor.prototype.render = function () {
-        var _a = this.props, header = _a.header, value = _a.value; _a.functions; var variableMode = _a.variableMode, __ = _a.translate, cx = _a.classnames, variableClassName = _a.variableClassName, functionClassName = _a.functionClassName, classPrefix = _a.classPrefix, selfVariableName = _a.selfVariableName;
-        var _b = this.state, focused = _b.focused, isCodeMode = _b.isCodeMode, expandTree = _b.expandTree, normalizeVariables = _b.normalizeVariables, functionList = _b.functions;
+        var _this = this;
+        var _a = this.props, header = _a.header, value = _a.value, variables = _a.variables, variableMode = _a.variableMode, __ = _a.translate, cx = _a.classnames, variableClassName = _a.variableClassName, functionClassName = _a.functionClassName, classPrefix = _a.classPrefix, selfVariableName = _a.selfVariableName, evalMode = _a.evalMode;
+        var _b = this.state, focused = _b.focused, isCodeMode = _b.isCodeMode, showRunPanel = _b.showRunPanel, expandTree = _b.expandTree, functions = _b.functions, runContext = _b.runContext, runResult = _b.runResult, runValid = _b.runValid;
         return (React__default.createElement("div", { className: cx("FormulaEditor", {
                 'is-focused': focused
             }) },
             React__default.createElement("section", { className: cx('FormulaEditor-settings') },
-                React__default.createElement(FuncList, { className: functionClassName, title: __('FormulaEditor.function'), data: functionList, onSelect: this.handleFunctionSelect }),
+                React__default.createElement(FuncList, { className: functionClassName, title: __('FormulaEditor.function'), data: functions || [], onSelect: this.handleFunctionSelect }),
                 React__default.createElement("div", { className: cx("FormulaEditor-content") },
                     React__default.createElement("header", { className: cx("FormulaEditor-header") },
                         __(header || 'FormulaEditor.title'),
+                        React__default.createElement("div", { className: cx("FormulaEditor-header-toolbar m-l") },
+                            React__default.createElement("span", null, __('FormulaEditor.run')),
+                            React__default.createElement(Switch, { value: showRunPanel, onChange: this.toggleRunPanel })),
                         React__default.createElement("div", { className: cx("FormulaEditor-header-toolbar") },
-                            React__default.createElement("span", null, "\u6E90\u7801\u6A21\u5F0F"),
+                            React__default.createElement("span", null, __('FormulaEditor.sourceMode')),
                             React__default.createElement(Switch, { value: isCodeMode, onChange: this.handleIsCodeModeChange }))),
-                    React__default.createElement(CodeMirrorEditor, { className: cx('FormulaEditor-editor'), value: value, onChange: this.handleOnChange, editorFactory: this.editorFactory, editorDidMount: this.handleEditorMounted, onFocus: this.handleFocus, onBlur: this.handleBlur })),
+                    React__default.createElement(CodeEditor, { evalMode: evalMode, functions: functions, variables: variables, className: cx('FormulaEditor-editor'), value: value, onChange: this.handleOnChange, ref: this.editor, onFocus: this.handleFocus, onBlur: this.handleBlur, autoFocus: true }),
+                    React__default.createElement(Transition, { mountOnEnter: true, unmountOnExit: true, key: "run-panel", in: showRunPanel, timeout: 300 }, function (status) {
+                        return (React__default.createElement("div", { className: cx("FormulaEditor-runPanel", collapseStyles[status]) },
+                            React__default.createElement("div", { className: cx("FormulaEditor-runPanel-context") },
+                                React__default.createElement("header", null, __('FormulaEditor.runContext')),
+                                React__default.createElement("div", null,
+                                    React__default.createElement(MonacoEditor, { value: runContext, onChange: _this.handleRunContextChange, language: "json", options: {
+                                            tabSize: 2,
+                                            lineNumbers: false
+                                        } }))),
+                            React__default.createElement("div", { className: cx("FormulaEditor-runPanel-result", runValid ? '' : 'is-error') },
+                                React__default.createElement("header", null, __('FormulaEditor.runResult')),
+                                React__default.createElement("div", null, runResult))));
+                    })),
                 React__default.createElement("div", { className: cx('FormulaEditor-panel', 'right') },
                     variableMode !== 'tabs' ? (React__default.createElement("div", { className: cx('FormulaEditor-panel-header') },
                         __('FormulaEditor.variable'),
                         variableMode === 'tree' ? (React__default.createElement("div", { className: cx("FormulaEditor-header-toolbar") },
-                            React__default.createElement("span", null, "\u5C55\u5F00\u5168\u90E8"),
+                            React__default.createElement("span", null, __('FormulaEditor.toggleAll')),
                             React__default.createElement(Switch, { value: expandTree, onChange: this.handleExpandTreeChange }))) : null)) : null,
                     React__default.createElement("div", { className: cx('FormulaEditor-panel-body', variableMode && "FormulaEditor-panel-body--".concat(variableMode)) },
-                        React__default.createElement(VariableList, { classPrefix: classPrefix, className: cx('FormulaEditor-VariableList', 'FormulaEditor-VariableList-root', variableClassName), expandTree: expandTree, selectMode: variableMode, data: normalizeVariables, onSelect: this.handleVariableSelect, selfVariableName: selfVariableName }))))));
+                        React__default.createElement(VariableList, { classPrefix: classPrefix, className: cx('FormulaEditor-VariableList', 'FormulaEditor-VariableList-root', variableClassName), expandTree: expandTree, selectMode: variableMode, data: variables, onSelect: this.handleVariableSelect, selfVariableName: selfVariableName }))))));
     };
     FormulaEditor.defaultProps = {
         variables: [],
@@ -302,12 +388,6 @@ var FormulaEditor = /** @class */ (function (_super) {
         __metadata("design:paramtypes", [Object, String]),
         __metadata("design:returntype", void 0)
     ], FormulaEditor.prototype, "insertValue", null);
-    __decorate([
-        autobind,
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Object, Object]),
-        __metadata("design:returntype", void 0)
-    ], FormulaEditor.prototype, "handleEditorMounted", null);
     __decorate([
         autobind,
         __metadata("design:type", Function),
@@ -344,6 +424,18 @@ var FormulaEditor = /** @class */ (function (_super) {
         __metadata("design:paramtypes", [Boolean]),
         __metadata("design:returntype", void 0)
     ], FormulaEditor.prototype, "handleIsCodeModeChange", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], FormulaEditor.prototype, "toggleRunPanel", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [String]),
+        __metadata("design:returntype", void 0)
+    ], FormulaEditor.prototype, "handleRunContextChange", null);
     __decorate([
         autobind,
         __metadata("design:type", Function),

package/esm/components/formula/FuncList.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="hoist-non-react-statics" />
 import React from 'react';
 import { ThemeProps } from 'amis-core';
-import type { FuncGroup, FuncItem } from './Editor';
+import type { FuncGroup, FuncItem } from './CodeEditor';
 export interface FuncListProps extends ThemeProps {
     title?: string;
     descClassName?: string;

package/esm/components/formula/FuncList.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v6.2.2
+ * amis-ui v6.4.0
  * Copyright 2018-2024 fex
  */
 
@@ -15,12 +15,10 @@ import { Icon } from '../icons.js';
 function FuncList(props) {
     var _a;
     var title = props.title, className = props.className, cx = props.classnames, bodyClassName = props.bodyClassName, descClassName = props.descClassName, mobileUI = props.mobileUI;
-    var _b = __read(React__default.useState(props.data), 2), filteredFuncs = _b[0], setFiteredFuncs = _b[1];
-    var _c = __read(React__default.useState(null), 2), activeFunc = _c[0], setActiveFunc = _c[1];
-    React__default.useEffect(function () {
-        setFiteredFuncs(props.data);
-    }, [props.data]);
-    function onSearch(term) {
+    var _b = __read(React__default.useState(''), 2), term = _b[0], setTerm = _b[1];
+    var _c = __read(React__default.useState(props.data), 2), filteredFuncs = _c[0], setFiteredFuncs = _c[1];
+    var _d = __read(React__default.useState(null), 2), activeFunc = _d[0], setActiveFunc = _d[1];
+    var onSearch = React__default.useCallback(function (term) {
         var filtered = props.data
             .map(function (item) {
             return __assign(__assign({}, item), { items: term
@@ -29,13 +27,16 @@ function FuncList(props) {
         })
             .filter(function (item) { return item.items.length; });
         setFiteredFuncs(filtered);
-    }
+    }, [props.data]);
+    React__default.useEffect(function () {
+        onSearch(term);
+    }, [props.data]);
     return (React__default.createElement("div", { className: cx('FormulaEditor-panel', 'left', className) },
         React__default.createElement("div", { className: cx('FormulaEditor-FuncList', (activeFunc === null || activeFunc === void 0 ? void 0 : activeFunc.name) ? 'withDoc' : '') },
             React__default.createElement("div", { className: cx('FormulaEditor-panel-header') }, title),
             React__default.createElement("div", { className: cx('FormulaEditor-panel-body') },
                 React__default.createElement("div", { className: cx('FormulaEditor-FuncList-searchBox') },
-                    React__default.createElement(SearchBox, { mini: false, onSearch: onSearch, mobileUI: mobileUI })),
+                    React__default.createElement(SearchBox, { value: term, onChange: setTerm, mini: false, onSearch: onSearch, mobileUI: mobileUI })),
                 React__default.createElement("div", { className: cx('FormulaEditor-FuncList-body', bodyClassName) },
                     React__default.createElement(CollapseGroup, { className: cx('FormulaEditor-FuncList-collapseGroup'), defaultActiveKey: (_a = filteredFuncs[0]) === null || _a === void 0 ? void 0 : _a.groupName, expandIcon: React__default.createElement(Icon, { cx: cx, icon: "fa fa-chevron-right FormulaEditor-FuncList-expandIcon", className: "Icon" }), accordion: true }, filteredFuncs.map(function (item) { return (React__default.createElement(Collapse, { className: cx('FormulaEditor-FuncList-collapse'), headingClassName: cx('FormulaEditor-FuncList-groupTitle'), bodyClassName: cx('FormulaEditor-FuncList-groupBody'), propKey: item.groupName, header: item.groupName, key: item.groupName }, item.items.map(function (item) { return (React__default.createElement("div", { className: cx('FormulaEditor-FuncList-item', {
                             'is-active': item.name === (activeFunc === null || activeFunc === void 0 ? void 0 : activeFunc.name)