amis-ui 6.2.2 → 6.4.0

package/lib/components/formula/Editor.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v6.2.2
+ * amis-ui v6.4.0
  * Copyright 2018-2024 fex
  */
 
@@ -10,33 +10,52 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var amisCore = require('amis-core');
-var amisFormula = require('amis-formula');
 var plugin = require('./plugin.js');
 var FuncList = require('./FuncList.js');
 var VariableList = require('./VariableList.js');
-var CodeMirror = require('../CodeMirror.js');
 var Toast = require('../Toast.js');
 var Switch = require('../Switch.js');
+var CodeEditor = require('./CodeEditor.js');
+var amisFormula = require('amis-formula');
+var Transition = require('react-transition-group/Transition');
+var Editor$1 = require('../Editor.js');
+var debounce = require('lodash/debounce');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var Transition__default = /*#__PURE__*/_interopDefaultLegacy(Transition);
+var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 
 var __react_jsx__ = require('react');
 var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
 (__react_jsx__["default"] || __react_jsx__).Fragment;
+var _a;
+var collapseStyles = (_a = {},
+    _a[Transition.EXITED] = 'out',
+    _a[Transition.EXITING] = 'out',
+    _a[Transition.ENTERING] = 'in',
+    _a);
 var FormulaEditor = /** @class */ (function (_super) {
     tslib.__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["default"].createRef();
+        _this.runCode = debounce__default["default"](_this.runCode.bind(_this), 250, {
+            leading: false,
+            trailing: true
+        });
         return _this;
     }
     FormulaEditor.buildDefaultFunctions = function (doc) {
@@ -65,6 +84,24 @@ var FormulaEditor = /** @class */ (function (_super) {
             });
         });
     };
+    FormulaEditor.buildFunctions = function (functions, functionsFilter) {
+        return tslib.__awaiter(this, void 0, void 0, function () {
+            var doc, customFunctions, functionList;
+            return tslib.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, Promise.resolve().then(function() {return new Promise(function(fullfill) {require(['amis-formula/lib/doc'], function(mod) {fullfill(tslib.__importStar(mod))})})})];
+                    case 1:
+                        doc = (_a.sent()).doc;
+                        customFunctions = Array.isArray(functions) ? functions : [];
+                        functionList = tslib.__spreadArray(tslib.__spreadArray(tslib.__spreadArray([], tslib.__read(FormulaEditor.buildDefaultFunctions(doc)), false), tslib.__read(FormulaEditor.buildCustomFunctions(amisFormula.functionDocs)), false), tslib.__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);
@@ -76,6 +113,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) {
@@ -127,66 +173,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 tslib.__awaiter(this, void 0, void 0, function () {
-            var doc, customFunctions, functionList;
+            var functionList;
             return tslib.__generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0: return [4 /*yield*/, Promise.resolve().then(function() {return new Promise(function(fullfill) {require(['amis-formula/lib/doc'], function(mod) {fullfill(tslib.__importStar(mod))})})})];
+                    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 = tslib.__spreadArray(tslib.__spreadArray(tslib.__spreadArray([], tslib.__read(FormulaEditor.buildDefaultFunctions(doc)), false), tslib.__read(FormulaEditor.buildCustomFunctions(amisFormula.functionDocs)), false), tslib.__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 = amisCore.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 tslib.__assign(tslib.__assign(tslib.__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({
@@ -198,13 +215,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 plugin.FormulaPlugin(editor, cm, function () { return (tslib.__assign(tslib.__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;
@@ -222,11 +242,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 &&
@@ -237,7 +257,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,
@@ -249,47 +269,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 = tslib.__rest(_a, ["editorOptions"]);
         return plugin.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 tslib.__awaiter(this, void 0, void 0, function () {
+            var value, runContext, code, result, e_1;
+            return tslib.__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 不会报语法错误
+                        amisCore.parse(value, {
+                            evalMode: this.props.evalMode
+                        });
+                        runContext = JSON.parse(this.state.runContext);
+                        code = this.props.evalMode ? "${".concat(value, "}") : value;
+                        return [4 /*yield*/, amisCore.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 (_J$X_("div", { className: cx("FormulaEditor", {
                 'is-focused': focused
             }) },
             _J$X_("section", { className: cx('FormulaEditor-settings') },
-                _J$X_(FuncList["default"], { className: functionClassName, title: __('FormulaEditor.function'), data: functionList, onSelect: this.handleFunctionSelect }),
+                _J$X_(FuncList["default"], { className: functionClassName, title: __('FormulaEditor.function'), data: functions || [], onSelect: this.handleFunctionSelect }),
                 _J$X_("div", { className: cx("FormulaEditor-content") },
                     _J$X_("header", { className: cx("FormulaEditor-header") },
                         __(header || 'FormulaEditor.title'),
+                        _J$X_("div", { className: cx("FormulaEditor-header-toolbar m-l") },
+                            _J$X_("span", null, __('FormulaEditor.run')),
+                            _J$X_(Switch["default"], { value: showRunPanel, onChange: this.toggleRunPanel })),
                         _J$X_("div", { className: cx("FormulaEditor-header-toolbar") },
-                            _J$X_("span", null, "\u6E90\u7801\u6A21\u5F0F"),
+                            _J$X_("span", null, __('FormulaEditor.sourceMode')),
                             _J$X_(Switch["default"], { value: isCodeMode, onChange: this.handleIsCodeModeChange }))),
-                    _J$X_(CodeMirror.CodeMirrorEditor, { className: cx('FormulaEditor-editor'), value: value, onChange: this.handleOnChange, editorFactory: this.editorFactory, editorDidMount: this.handleEditorMounted, onFocus: this.handleFocus, onBlur: this.handleBlur })),
+                    _J$X_(CodeEditor["default"], { 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 }),
+                    _J$X_(Transition__default["default"], { mountOnEnter: true, unmountOnExit: true, key: "run-panel", in: showRunPanel, timeout: 300 }, function (status) {
+                        return (_J$X_("div", { className: cx("FormulaEditor-runPanel", collapseStyles[status]) },
+                            _J$X_("div", { className: cx("FormulaEditor-runPanel-context") },
+                                _J$X_("header", null, __('FormulaEditor.runContext')),
+                                _J$X_("div", null,
+                                    _J$X_(Editor$1["default"], { value: runContext, onChange: _this.handleRunContextChange, language: "json", options: {
+                                            tabSize: 2,
+                                            lineNumbers: false
+                                        } }))),
+                            _J$X_("div", { className: cx("FormulaEditor-runPanel-result", runValid ? '' : 'is-error') },
+                                _J$X_("header", null, __('FormulaEditor.runResult')),
+                                _J$X_("div", null, runResult))));
+                    })),
                 _J$X_("div", { className: cx('FormulaEditor-panel', 'right') },
                     variableMode !== 'tabs' ? (_J$X_("div", { className: cx('FormulaEditor-panel-header') },
                         __('FormulaEditor.variable'),
                         variableMode === 'tree' ? (_J$X_("div", { className: cx("FormulaEditor-header-toolbar") },
-                            _J$X_("span", null, "\u5C55\u5F00\u5168\u90E8"),
+                            _J$X_("span", null, __('FormulaEditor.toggleAll')),
                             _J$X_(Switch["default"], { value: expandTree, onChange: this.handleExpandTreeChange }))) : null)) : null,
                     _J$X_("div", { className: cx('FormulaEditor-panel-body', variableMode && "FormulaEditor-panel-body--".concat(variableMode)) },
-                        _J$X_(VariableList["default"], { classPrefix: classPrefix, className: cx('FormulaEditor-VariableList', 'FormulaEditor-VariableList-root', variableClassName), expandTree: expandTree, selectMode: variableMode, data: normalizeVariables, onSelect: this.handleVariableSelect, selfVariableName: selfVariableName }))))));
+                        _J$X_(VariableList["default"], { classPrefix: classPrefix, className: cx('FormulaEditor-VariableList', 'FormulaEditor-VariableList-root', variableClassName), expandTree: expandTree, selectMode: variableMode, data: variables, onSelect: this.handleVariableSelect, selfVariableName: selfVariableName }))))));
     };
     FormulaEditor.defaultProps = {
         variables: [],
@@ -313,12 +401,6 @@ var FormulaEditor = /** @class */ (function (_super) {
         tslib.__metadata("design:paramtypes", [Object, String]),
         tslib.__metadata("design:returntype", void 0)
     ], FormulaEditor.prototype, "insertValue", null);
-    tslib.__decorate([
-        amisCore.autobind,
-        tslib.__metadata("design:type", Function),
-        tslib.__metadata("design:paramtypes", [Object, Object]),
-        tslib.__metadata("design:returntype", void 0)
-    ], FormulaEditor.prototype, "handleEditorMounted", null);
     tslib.__decorate([
         amisCore.autobind,
         tslib.__metadata("design:type", Function),
@@ -355,6 +437,18 @@ var FormulaEditor = /** @class */ (function (_super) {
         tslib.__metadata("design:paramtypes", [Boolean]),
         tslib.__metadata("design:returntype", void 0)
     ], FormulaEditor.prototype, "handleIsCodeModeChange", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", []),
+        tslib.__metadata("design:returntype", void 0)
+    ], FormulaEditor.prototype, "toggleRunPanel", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [String]),
+        tslib.__metadata("design:returntype", void 0)
+    ], FormulaEditor.prototype, "handleRunContextChange", null);
     tslib.__decorate([
         amisCore.autobind,
         tslib.__metadata("design:type", Function),

package/lib/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/lib/components/formula/FuncList.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v6.2.2
+ * amis-ui v6.4.0
  * Copyright 2018-2024 fex
  */
 
@@ -26,12 +26,10 @@ var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
 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 = tslib.__read(React__default["default"].useState(props.data), 2), filteredFuncs = _b[0], setFiteredFuncs = _b[1];
-    var _c = tslib.__read(React__default["default"].useState(null), 2), activeFunc = _c[0], setActiveFunc = _c[1];
-    React__default["default"].useEffect(function () {
-        setFiteredFuncs(props.data);
-    }, [props.data]);
-    function onSearch(term) {
+    var _b = tslib.__read(React__default["default"].useState(''), 2), term = _b[0], setTerm = _b[1];
+    var _c = tslib.__read(React__default["default"].useState(props.data), 2), filteredFuncs = _c[0], setFiteredFuncs = _c[1];
+    var _d = tslib.__read(React__default["default"].useState(null), 2), activeFunc = _d[0], setActiveFunc = _d[1];
+    var onSearch = React__default["default"].useCallback(function (term) {
         var filtered = props.data
             .map(function (item) {
             return tslib.__assign(tslib.__assign({}, item), { items: term
@@ -40,13 +38,16 @@ function FuncList(props) {
         })
             .filter(function (item) { return item.items.length; });
         setFiteredFuncs(filtered);
-    }
+    }, [props.data]);
+    React__default["default"].useEffect(function () {
+        onSearch(term);
+    }, [props.data]);
     return (_J$X_("div", { className: cx('FormulaEditor-panel', 'left', className) },
         _J$X_("div", { className: cx('FormulaEditor-FuncList', (activeFunc === null || activeFunc === void 0 ? void 0 : activeFunc.name) ? 'withDoc' : '') },
             _J$X_("div", { className: cx('FormulaEditor-panel-header') }, title),
             _J$X_("div", { className: cx('FormulaEditor-panel-body') },
                 _J$X_("div", { className: cx('FormulaEditor-FuncList-searchBox') },
-                    _J$X_(SearchBox["default"], { mini: false, onSearch: onSearch, mobileUI: mobileUI })),
+                    _J$X_(SearchBox["default"], { value: term, onChange: setTerm, mini: false, onSearch: onSearch, mobileUI: mobileUI })),
                 _J$X_("div", { className: cx('FormulaEditor-FuncList-body', bodyClassName) },
                     _J$X_(CollapseGroup["default"], { className: cx('FormulaEditor-FuncList-collapseGroup'), defaultActiveKey: (_a = filteredFuncs[0]) === null || _a === void 0 ? void 0 : _a.groupName, expandIcon: _J$X_(icons.Icon, { cx: cx, icon: "fa fa-chevron-right FormulaEditor-FuncList-expandIcon", className: "Icon" }), accordion: true }, filteredFuncs.map(function (item) { return (_J$X_(Collapse["default"], { 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 (_J$X_("div", { className: cx('FormulaEditor-FuncList-item', {
                             'is-active': item.name === (activeFunc === null || activeFunc === void 0 ? void 0 : activeFunc.name)