amis-ui 6.2.2 → 6.4.0

package/esm/components/formula/Picker.js

@@ -1,13 +1,12 @@
 /**
- * amis-ui v6.2.2
+ * amis-ui v6.4.0
  * Copyright 2018-2024 fex
  */
 
 import { __extends, __awaiter, __generator, __assign, __rest, __read, __decorate, __metadata } from 'tslib';
-import { anyChanged, parse, noop, autobind, themeable, localeable, uncontrollable, isExpression, resolveVariableAndFilterForAsync } from 'amis-core';
+import { anyChanged, isExpression, parse, autobind, themeable, localeable, uncontrollable, resolveVariableAndFilterForAsync } from 'amis-core';
 import React__default from 'react';
 import Editor, { FormulaEditor } from './Editor.js';
-import ResultBox from '../ResultBox.js';
 import Button from '../Button.js';
 import { Icon } from '../icons.js';
 import FinalModal from '../Modal.js';
@@ -21,12 +20,14 @@ var InputSchemaType = [
     'date',
     'time',
     'datetime',
-    'select'
+    'select',
+    'custom'
 ];
 var FormulaPicker = /** @class */ (function (_super) {
     __extends(FormulaPicker, _super);
     function FormulaPicker(props) {
         var _this = _super.call(this, props) || this;
+        _this.unmounted = false;
         _this.props.onRef && _this.props.onRef(_this);
         _this.state = {
             isOpened: false,
@@ -57,7 +58,9 @@ var FormulaPicker = /** @class */ (function (_super) {
                         result = _b.sent();
                         this.setState({ variables: result });
                         _b.label = 4;
-                    case 4: return [2 /*return*/];
+                    case 4:
+                        this.buildFunctions();
+                        return [2 /*return*/];
                 }
             });
         });
@@ -69,7 +72,7 @@ var FormulaPicker = /** @class */ (function (_super) {
                 switch (_b.label) {
                     case 0:
                         value = this.props.value;
-                        if (value !== prevProps.value) {
+                        if (value !== prevProps.value && !this.state.isOpened) {
                             this.setState({
                                 value: typeof value === 'string' || !this.isTextInput() ? value : '',
                                 editorValue: this.value2EditorValue(this.props)
@@ -90,14 +93,50 @@ var FormulaPicker = /** @class */ (function (_super) {
                         result = _b.sent();
                         this.setState({ variables: result });
                         _b.label = 4;
-                    case 4: return [2 /*return*/];
+                    case 4:
+                        if (prevProps.functions !== this.props.functions) {
+                            this.buildFunctions();
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    FormulaPicker.prototype.componentWillUnmount = function () {
+        this.unmounted = true;
+    };
+    FormulaPicker.prototype.buildFunctions = function (functions, setState) {
+        if (functions === void 0) { functions = this.props.functions; }
+        if (setState === void 0) { setState = true; }
+        return __awaiter(this, void 0, void 0, function () {
+            var functionList;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, FormulaEditor.buildFunctions(functions, this.props.functionsFilter)];
+                    case 1:
+                        functionList = _a.sent();
+                        if (this.unmounted) {
+                            return [2 /*return*/];
+                        }
+                        if (!setState) {
+                            return [2 /*return*/, functionList];
+                        }
+                        this.setState({
+                            functions: functionList
+                        });
+                        return [2 /*return*/];
                 }
             });
         });
     };
     FormulaPicker.prototype.value2EditorValue = function (props) {
-        var value = props.value;
-        if (!this.isTextInput()) {
+        var value = props.value, mixedMode = props.mixedMode; props.inputSettings;
+        if (mixedMode &&
+            typeof value === 'string' &&
+            /^\s*\$\{([\s\S]+)\}\s*$/.test(value)) {
+            return RegExp.$1;
+        }
+        else if (typeof value !== 'string') {
             var editorValue = '';
             try {
                 editorValue = JSON.stringify(value);
@@ -105,16 +144,15 @@ var FormulaPicker = /** @class */ (function (_super) {
             catch (error) { }
             return editorValue;
         }
-        if (props.mixedMode) {
-            if (typeof props.value === 'string' &&
-                /^\s*\$\{(.+?)\}\s*$/.test(props.value)) {
-                return RegExp.$1;
-            }
-            else {
-                return '';
-            }
+        else {
+            return value
+                ? mixedMode
+                    ? isExpression(value)
+                        ? "`".concat(value.replace(/`/g, '\\`'), "`")
+                        : JSON.stringify(value)
+                    : value
+                : '';
         }
-        return String(props.value || '');
     };
     FormulaPicker.prototype.isTextInput = function () {
         var inputSettings = this.props.inputSettings;
@@ -132,14 +170,6 @@ var FormulaPicker = /** @class */ (function (_super) {
             (_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, value);
         }
     };
-    FormulaPicker.prototype.renderFormulaValue = function (item) {
-        var _a = this.props, allowInput = _a.allowInput, cx = _a.classnames;
-        var html = { __html: item.html };
-        if (allowInput) {
-            return '';
-        }
-        return (React__default.createElement("div", { className: cx('FormulaPicker-ResultBox'), dangerouslySetInnerHTML: html }));
-    };
     FormulaPicker.prototype.handleInputChange = function (value) {
         var _this = this;
         this.setState({ value: value }, function () { return _this.handleConfirm(); });
@@ -158,38 +188,53 @@ var FormulaPicker = /** @class */ (function (_super) {
         var _a, _b;
         var _c = this.props; _c.translate; var inputSettings = _c.inputSettings;
         var editorValue = this.state.editorValue;
-        if (this.isTextInput()) {
-            return this.confirm(editorValue);
+        var ast;
+        try {
+            ast = parse(editorValue, {
+                // mixedMode 弹窗中的一定是表达式
+                evalMode: this.props.mixedMode ? true : this.props.evalMode,
+                allowFilter: false
+            });
+        }
+        catch (error) {
+            this.setState({ isError: (_a = error === null || error === void 0 ? void 0 : error.message) !== null && _a !== void 0 ? _a : true });
+            return;
         }
-        else if (inputSettings) {
+        if ((inputSettings === null || inputSettings === void 0 ? void 0 : inputSettings.type) &&
+            ['boolean', 'number'].includes(inputSettings === null || inputSettings === void 0 ? void 0 : inputSettings.type)) {
             var result = editorValue;
-            var schemaType = inputSettings === null || inputSettings === void 0 ? void 0 : inputSettings.type;
-            try {
-                var ast = parse(editorValue, { evalMode: true, allowFilter: false });
-                if (schemaType === 'select' &&
-                    inputSettings.multiple &&
-                    ast.type === 'array') {
-                    result = ast.members.map(function (i) { return i.value; });
-                }
-                else if (ast.type === 'literal' || ast.type === 'string') {
-                    result = (_a = ast.value) !== null && _a !== void 0 ? _a : '';
-                }
-            }
-            catch (error) {
-                this.setState({ isError: (_b = error === null || error === void 0 ? void 0 : error.message) !== null && _b !== void 0 ? _b : true });
-                return;
+            // const schemaType = inputSettings?.type;
+            if (ast.type === 'literal' || ast.type === 'string') {
+                result = (_b = ast.value) !== null && _b !== void 0 ? _b : '';
             }
             this.setState({ isError: false });
             return this.confirm(result);
         }
+        return this.confirm(editorValue, ast);
     };
-    FormulaPicker.prototype.confirm = function (value) {
+    FormulaPicker.prototype.confirm = function (value, ast) {
         var _this = this;
         var mixedMode = this.props.mixedMode;
+        var stateOnConfirm = this.state.onConfirm;
         var validate = this.validate(value);
         if (validate === true) {
-            this.setState({ value: mixedMode && value ? "${".concat(value, "}") : value }, function () {
-                _this.close(undefined, function () { return _this.handleConfirm(); });
+            var result = value;
+            if (mixedMode && typeof value === 'string') {
+                result =
+                    (ast === null || ast === void 0 ? void 0 : ast.type) === 'string'
+                        ? ast.value
+                        : (ast === null || ast === void 0 ? void 0 : ast.type) === 'template' &&
+                            ast.body.length === 1 &&
+                            ast.body[0].type === 'template_raw'
+                            ? ast.body[0].value
+                            : "${".concat(value, "}");
+            }
+            this.setState({ value: result, onConfirm: undefined }, function () {
+                _this.close(undefined, function () {
+                    stateOnConfirm
+                        ? stateOnConfirm(_this.state.value)
+                        : _this.handleConfirm();
+                });
             });
         }
         else {
@@ -197,17 +242,30 @@ var FormulaPicker = /** @class */ (function (_super) {
         }
     };
     FormulaPicker.prototype.handleClick = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, this.openEditor(this.value2EditorValue(this.props))];
+            });
+        });
+    };
+    FormulaPicker.prototype.openEditor = function (editorValue, onConfirm) {
         var _a, _b;
         return __awaiter(this, void 0, void 0, function () {
-            var _c, state, _d;
+            var state, _c, _d;
             return __generator(this, function (_e) {
                 switch (_e.label) {
                     case 0:
-                        _c = this.props, _c.variables, _c.data;
-                        _d = [{}];
+                        _c = [{}];
                         return [4 /*yield*/, ((_b = (_a = this.props).onPickerOpen) === null || _b === void 0 ? void 0 : _b.call(_a, this.props))];
                     case 1:
-                        state = __assign.apply(void 0, [__assign.apply(void 0, _d.concat([(_e.sent())])), { editorValue: this.value2EditorValue(this.props), isOpened: true }]);
+                        state = __assign.apply(void 0, [__assign.apply(void 0, _c.concat([(_e.sent())])), { editorValue: editorValue, isOpened: true, onConfirm: onConfirm }]);
+                        if (!state.functions) return [3 /*break*/, 3];
+                        _d = state;
+                        return [4 /*yield*/, this.buildFunctions(state.functions, false)];
+                    case 2:
+                        _d.functions = _e.sent();
+                        _e.label = 3;
+                    case 3:
                         this.setState(state);
                         return [2 /*return*/];
                 }
@@ -256,7 +314,8 @@ var FormulaPicker = /** @class */ (function (_super) {
         try {
             value &&
                 parse(value, {
-                    evalMode: this.props.mixedMode ? true : this.props.evalMode,
+                    // mixedMode 值是模版， 要 ${} 包裹表达式
+                    evalMode: this.props.mixedMode ? false : this.props.evalMode,
                     allowFilter: false
                 });
             return true;
@@ -271,19 +330,22 @@ var FormulaPicker = /** @class */ (function (_super) {
     };
     FormulaPicker.prototype.render = function () {
         var _a, _b, _c;
-        var _d, _e, _f, _g, _h, _j;
-        var _k = this.props, cx = _k.classnames, __ = _k.translate, disabled = _k.disabled, _l = _k.allowInput, allowInput = _l === void 0 ? true : _l, className = _k.className, style = _k.style; _k.onChange; _k.size; var borderMode = _k.borderMode, placeholder = _k.placeholder, _m = _k.mode, mode = _m === void 0 ? 'input-button' : _m, btnLabel = _k.btnLabel, level = _k.level, btnSize = _k.btnSize, icon = _k.icon, title = _k.title, clearable = _k.clearable, functions = _k.functions, children = _k.children, variableMode = _k.variableMode, mixedMode = _k.mixedMode, evalMode = _k.evalMode, popOverContainer = _k.popOverContainer, mobileUI = _k.mobileUI, inputSettings = _k.inputSettings, rest = __rest(_k, ["classnames", "translate", "disabled", "allowInput", "className", "style", "onChange", "size", "borderMode", "placeholder", "mode", "btnLabel", "level", "btnSize", "icon", "title", "clearable", "functions", "children", "variableMode", "mixedMode", "evalMode", "popOverContainer", "mobileUI", "inputSettings"]);
-        var _o = this.state, isOpened = _o.isOpened, value = _o.value, editorValue = _o.editorValue, isError = _o.isError;
+        var _d, _e, _f, _g, _h, _j, _k, _l;
+        var _m = this.props, cx = _m.classnames, __ = _m.translate, disabled = _m.disabled, className = _m.className, style = _m.style; _m.onChange; _m.size; var borderMode = _m.borderMode, placeholder = _m.placeholder, _o = _m.mode, mode = _o === void 0 ? 'input-button' : _o, btnLabel = _m.btnLabel, level = _m.level, btnSize = _m.btnSize, icon = _m.icon, title = _m.title, clearable = _m.clearable, functions = _m.functions, children = _m.children, variableMode = _m.variableMode, mixedMode = _m.mixedMode, evalMode = _m.evalMode, popOverContainer = _m.popOverContainer, mobileUI = _m.mobileUI, inputSettings = _m.inputSettings, customInputRender = _m.customInputRender, rest = __rest(_m, ["classnames", "translate", "disabled", "className", "style", "onChange", "size", "borderMode", "placeholder", "mode", "btnLabel", "level", "btnSize", "icon", "title", "clearable", "functions", "children", "variableMode", "mixedMode", "evalMode", "popOverContainer", "mobileUI", "inputSettings", "customInputRender"]);
+        var _p = this.state, isOpened = _p.isOpened, value = _p.value, editorValue = _p.editorValue, isError = _p.isError;
         var iconElement = React__default.createElement(Icon, { cx: cx, icon: icon, className: "Icon" });
         return (React__default.createElement(React__default.Fragment, null,
             children ? (children({
                 isOpened: this.state.isOpened,
                 onClick: this.handleClick,
-                setState: this.updateState
+                setState: this.updateState,
+                value: value,
+                onChange: this.handleInputChange,
+                disabled: disabled
             })) : (React__default.createElement("div", { className: cx('FormulaPicker', mode === 'input-group' ? 'is-input-group' : '', {
                     'FormulaPicker--text': this.isTextInput()
                 }, className), style: style },
-                mode === 'button' && (React__default.createElement(Button, { className: cx('FormulaPicker-action', 'w-full'), level: level, size: btnSize, onClick: this.handleClick },
+                mode === 'button' && (React__default.createElement(Button, { className: cx('FormulaPicker-action', 'w-full'), level: level, size: btnSize, active: !!value, onClick: this.handleClick },
                     iconElement ? (React__default.cloneElement(iconElement, {
                         className: cx((_e = (_d = iconElement === null || iconElement === void 0 ? void 0 : iconElement.props) === null || _d === void 0 ? void 0 : _d.className) !== null && _e !== void 0 ? _e : '', 'FormulaPicker-icon', (_a = {},
                             _a['is-filled'] = !!value,
@@ -293,25 +355,23 @@ var FormulaPicker = /** @class */ (function (_super) {
                             _b)) })),
                     React__default.createElement("span", { className: cx('FormulaPicker-label') }, __(btnLabel || 'FormulaEditor.btnLabel')))),
                 mode === 'input-button' && (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement(ResultBox, { className: cx('FormulaPicker-input', isOpened ? 'is-active' : '', !!isError ? 'is-error' : ''), allowInput: allowInput, clearable: clearable, value: value, result: allowInput
-                            ? void 0
-                            : FormulaEditor.highlightValue(value, this.state.variables, this.props.evalMode), itemRender: this.renderFormulaValue, onResultChange: noop, onChange: this.handleInputChange, disabled: disabled, borderMode: borderMode, placeholder: placeholder }),
+                    React__default.createElement(FormulaInput, { className: cx('FormulaPicker-input', isOpened ? 'is-active' : '', !!isError ? 'is-error' : ''), inputSettings: inputSettings, customInputRender: customInputRender, clearable: clearable, evalMode: mixedMode ? false : evalMode, variables: this.state.variables, functions: (_f = this.state.functions) !== null && _f !== void 0 ? _f : functions, value: value, onChange: this.handleInputChange, disabled: disabled, borderMode: borderMode, placeholder: placeholder }),
                     React__default.createElement(Button, { className: cx('FormulaPicker-action'), onClick: this.handleClick },
                         React__default.createElement(Icon, { icon: "function", className: cx('FormulaPicker-icon', 'icon', (_c = {},
                                 _c['is-filled'] = !!value,
                                 _c)) })))),
                 mode === 'input-group' && (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement(FormulaInput, { className: cx('FormulaPicker-input', isOpened ? 'is-active' : '', !!isError ? 'is-error' : ''), inputSettings: inputSettings, allowInput: allowInput, clearable: clearable, evalMode: evalMode, mixedMode: mixedMode, variables: this.state.variables, value: value, itemRender: this.renderFormulaValue, onChange: this.handleInputChange, disabled: disabled, borderMode: borderMode, placeholder: placeholder }),
+                    React__default.createElement(FormulaInput, { className: cx('FormulaPicker-input', isOpened ? 'is-active' : '', !!isError ? 'is-error' : ''), inputSettings: inputSettings, customInputRender: customInputRender, clearable: clearable, evalMode: mixedMode ? false : evalMode, variables: this.state.variables, functions: (_g = this.state.functions) !== null && _g !== void 0 ? _g : functions, value: value, onChange: this.handleInputChange, disabled: disabled, borderMode: borderMode, placeholder: placeholder }),
                     React__default.createElement("a", { className: cx("FormulaPicker-toggler"), onClick: this.handleClick },
                         React__default.createElement(Icon, { icon: "function", className: "icon" })))))),
             mobileUI ? (React__default.createElement(PopUp, { className: cx("FormulaPicker-popup"), isShow: this.state.isOpened, showConfirm: true, onHide: this.close, onConfirm: this.handleEditorConfirm, container: popOverContainer },
                 React__default.createElement("div", { className: cx('FormulaPicker-popup-inner') },
-                    React__default.createElement(Editor, __assign({}, rest, { evalMode: mixedMode ? true : evalMode, variables: this.state.variables, functions: (_f = this.state.functions) !== null && _f !== void 0 ? _f : functions, variableMode: (_g = this.state.variableMode) !== null && _g !== void 0 ? _g : variableMode, value: editorValue, onChange: this.handleEditorChange, selfVariableName: this.props.selfVariableName })),
+                    React__default.createElement(Editor, __assign({}, rest, { evalMode: mixedMode ? true : evalMode, variables: this.state.variables, functions: (_h = this.state.functions) !== null && _h !== void 0 ? _h : functions, variableMode: (_j = this.state.variableMode) !== null && _j !== void 0 ? _j : variableMode, value: editorValue, onChange: this.handleEditorChange, selfVariableName: this.props.selfVariableName })),
                     !!isError ? (React__default.createElement("div", { className: cx('Dialog-info'), key: "info" },
                         React__default.createElement("span", { className: cx('Dialog-error') }, __('FormulaEditor.invalidData', { err: isError })))) : null))) : (React__default.createElement(FinalModal, { size: "lg", closeOnEsc: true, show: this.state.isOpened, onHide: this.close, container: popOverContainer },
                 React__default.createElement(FinalModal.Header, { onClose: this.close, className: "font-bold" }, __(title || 'FormulaEditor.title')),
                 React__default.createElement(FinalModal.Body, null,
-                    React__default.createElement(Editor, __assign({}, rest, { evalMode: mixedMode ? true : evalMode, variables: this.state.variables, functions: (_h = this.state.functions) !== null && _h !== void 0 ? _h : functions, variableMode: (_j = this.state.variableMode) !== null && _j !== void 0 ? _j : variableMode, value: editorValue, onChange: this.handleEditorChange, selfVariableName: this.props.selfVariableName }))),
+                    React__default.createElement(Editor, __assign({}, rest, { evalMode: mixedMode ? true : evalMode, variables: this.state.variables, functions: (_k = this.state.functions) !== null && _k !== void 0 ? _k : functions, variableMode: (_l = this.state.variableMode) !== null && _l !== void 0 ? _l : variableMode, value: editorValue, onChange: this.handleEditorChange, selfVariableName: this.props.selfVariableName }))),
                 React__default.createElement(FinalModal.Footer, null,
                     !!isError ? (React__default.createElement("div", { className: cx('Dialog-info'), key: "info" },
                         React__default.createElement("span", { className: cx('Dialog-error') }, __('FormulaEditor.invalidData', { err: isError })))) : null,
@@ -327,12 +387,6 @@ var FormulaPicker = /** @class */ (function (_super) {
         __metadata("design:paramtypes", []),
         __metadata("design:returntype", void 0)
     ], FormulaPicker.prototype, "handleConfirm", null);
-    __decorate([
-        autobind,
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Object]),
-        __metadata("design:returntype", void 0)
-    ], FormulaPicker.prototype, "renderFormulaValue", null);
     __decorate([
         autobind,
         __metadata("design:type", Function),
@@ -363,6 +417,12 @@ var FormulaPicker = /** @class */ (function (_super) {
         __metadata("design:paramtypes", []),
         __metadata("design:returntype", Promise)
     ], FormulaPicker.prototype, "handleClick", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [String, Function]),
+        __metadata("design:returntype", Promise)
+    ], FormulaPicker.prototype, "openEditor", null);
     __decorate([
         autobind,
         __metadata("design:type", Function),

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

@@ -1,7 +1,7 @@
 /// <reference types="hoist-non-react-statics" />
 import React from 'react';
 import { ThemeProps } from 'amis-core';
-import type { VariableItem } from './Editor';
+import type { VariableItem } from './CodeEditor';
 import type { ItemRenderStates } from '../Selection';
 import type { Option } from '../Select';
 import type { TabsMode } from '../Tabs';

package/esm/components/formula/VariableList.js

@@ -1,11 +1,11 @@
 /**
- * amis-ui v6.2.2
+ * amis-ui v6.4.0
  * Copyright 2018-2024 fex
  */
 
 import { __read, __assign } from 'tslib';
-import React__default, { useEffect } from 'react';
-import { themeable, filterTree } from 'amis-core';
+import React__default from 'react';
+import { themeable, mapTree, filterTree } from 'amis-core';
 import GroupedSelection from '../GroupedSelection.js';
 import ThemedTabs, { Tab } from '../Tabs.js';
 import TreeSelection from '../TreeSelection.js';
@@ -65,14 +65,28 @@ var memberOpers = [
 ];
 function VariableList(props) {
     var variableListRef = React__default.useRef(null);
-    var list = props.data, className = props.className, cx = props.classnames, _a = props.tabsMode, tabsMode = _a === void 0 ? 'line' : _a, themePrefix = props.classPrefix, itemClassName = props.itemClassName, selectMode = props.selectMode, onSelect = props.onSelect, placeholderRender = props.placeholderRender, selfVariableName = props.selfVariableName, expandTree = props.expandTree;
-    var _b = __read(React__default.useState(list), 2), filterVars = _b[0], setFilterVars = _b[1];
+    var className = props.className, cx = props.classnames, _a = props.tabsMode, tabsMode = _a === void 0 ? 'line' : _a, themePrefix = props.classPrefix, itemClassName = props.itemClassName, selectMode = props.selectMode, onSelect = props.onSelect, placeholderRender = props.placeholderRender, selfVariableName = props.selfVariableName, expandTree = props.expandTree;
+    var _b = __read(React__default.useState([]), 2), variables = _b[0], setVariables = _b[1];
+    var _c = __read(React__default.useState([]), 2), filterVars = _c[0], setFilterVars = _c[1];
     var classPrefix = "".concat(themePrefix, "FormulaEditor-VariableList");
-    useEffect(function () {
-        var data = props.data;
-        if (data) {
-            setFilterVars(data);
-        }
+    React__default.useEffect(function () {
+        // 追加path，用于分级高亮
+        var list = mapTree(props.data, function (item, key, level, paths) {
+            var _a;
+            var path = paths === null || paths === void 0 ? void 0 : paths.reduce(function (prev, item) {
+                var _a;
+                return !item.value
+                    ? prev
+                    : "".concat(prev).concat(prev ? '.' : '').concat((_a = item.label) !== null && _a !== void 0 ? _a : item.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
+                }
+                : {}));
+        });
+        setVariables(list);
+        setFilterVars(list);
     }, [props.data]);
     var itemRender = props.itemRender && typeof props.itemRender === 'function'
         ? props.itemRender
@@ -126,14 +140,14 @@ function VariableList(props) {
         onSelect === null || onSelect === void 0 ? void 0 : onSelect(__assign(__assign({}, item), { label: value, value: value }));
     }
     function onSearch(term) {
-        var tree = filterTree(list, function (i, key, level, paths) {
+        var tree = filterTree(variables, function (i, key, level, paths) {
             return !!((Array.isArray(i.children) && i.children.length) ||
                 !!matchSorter([i].concat(paths), term, {
                     keys: ['label', 'value'],
                     threshold: matchSorter.rankings.CONTAINS
                 }).length);
         }, 1, true);
-        setFilterVars(!term ? list : tree);
+        setFilterVars(!term ? variables : tree);
     }
     function renderSearchBox() {
         return (React__default.createElement("div", { className: cx('FormulaEditor-VariableList-searchBox') },

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

@@ -2,14 +2,33 @@
  * @file 扩展 codemirror
  */
 import type CodeMirror from 'codemirror';
-import { FormulaEditorProps, VariableItem } from './Editor';
+import { FuncGroup, VariableItem } from './CodeEditor';
 export declare function editorFactory(dom: HTMLElement, cm: typeof CodeMirror, props: any, options?: any): CodeMirror.Editor;
 export declare class FormulaPlugin {
     readonly editor: CodeMirror.Editor;
     readonly cm: typeof CodeMirror;
-    readonly getProps: () => FormulaEditorProps;
-    constructor(editor: CodeMirror.Editor, cm: typeof CodeMirror, getProps: () => FormulaEditorProps);
-    autoMarkText(): void;
+    /**
+     * 用于提示的变量集合，默认为空
+     */
+    variables: Array<VariableItem>;
+    /**
+     * 函数集合，默认不需要传，即  amis-formula 里面那个函数
+     * 如果有扩充，则需要传。
+     */
+    functions: Array<FuncGroup>;
+    /**
+     * evalMode 即直接就是表达式，否则就是混合模式
+     */
+    evalMode: boolean;
+    highlightMode: 'expression' | 'formula';
+    disableAutoMark: boolean;
+    constructor(editor: CodeMirror.Editor, cm: typeof CodeMirror);
+    setVariables(variables: Array<VariableItem>): void;
+    setFunctions(functions: Array<FuncGroup>): void;
+    setEvalMode(evalMode: boolean): void;
+    setHighlightMode(highlightMode: 'expression' | 'formula'): void;
+    setDisableAutoMark(disableAutoMark: boolean): void;
+    autoMarkText(forceClear?: boolean): void;
     computedBracesPosition(exp: string): {
         begin: number;
         end: number;
@@ -19,11 +38,13 @@ export declare class FormulaPlugin {
         end: number;
     }[]): boolean;
     insertBraces(originFrom: CodeMirror.Position, originTo: CodeMirror.Position): void;
-    insertContent(value: any, type?: 'variable' | 'func', className?: string, toMark?: boolean): void;
+    insertContent(value: any, type?: 'variable' | 'func'): void;
     setValue(value: string): void;
     getValue(): string;
-    markText(from: CodeMirror.Position, to: CodeMirror.Position, label: string, className?: string): void;
-    autoMark(variables: Array<VariableItem>): void;
+    markText(from: CodeMirror.Position, to: CodeMirror.Position, label: string, className?: string, rawString?: string): CodeMirror.TextMarker<CodeMirror.MarkerRange>;
+    widgets: any[];
+    marks: any[];
+    autoMark(): void;
     focus(value: string): void;
     dispose(): void;
     validate(): void;