amis-editor 5.4.0 → 5.5.0

package/lib/renderer/FormulaControl.js

@@ -1,5 +1,5 @@
 /**
- * amis-editor v5.4.0
+ * amis-editor v5.5.0
  * Copyright 2018-2023 @fex
  */
 
@@ -21,7 +21,6 @@ var amisUi = require('amis-ui');
 var FormulaPicker = require('./textarea-formula/FormulaPicker.js');
 var amisEditorCore = require('amis-editor-core');
 var mobx = require('mobx');
-var utils = require('./textarea-formula/utils.js');
 var i18nRuntime = require('i18n-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -46,7 +45,7 @@ exports.FormulaDateType = void 0;
 })(exports.FormulaDateType || (exports.FormulaDateType = {}));
 function renderFormulaValue(item) {
   var html = {
-    __html: typeof item === 'string' ? item : item.html
+    __html: typeof item === 'string' ? item : item === null || item === void 0 ? void 0 : item.html
   };
   // bca-disable-next-line
   return React__default["default"].createElement("span", {
@@ -68,72 +67,33 @@ var FormulaControl = /** @class */function (_super) {
     };
     _this.state = {
       variables: [],
-      variableMode: 'tabs',
-      formulaPickerOpen: false
+      variableMode: 'tree',
+      formulaPickerOpen: false,
+      loading: false
     };
     return _this;
   }
   FormulaControl.prototype.componentDidMount = function () {
     return tslib.__awaiter(this, void 0, void 0, function () {
-      var editorStore, variablesArr;
+      var editorStore;
       var _this = this;
       return tslib.__generator(this, function (_a) {
-        switch (_a.label) {
-          case 0:
-            editorStore = window.editorStore;
-            this.appLocale = editorStore === null || editorStore === void 0 ? void 0 : editorStore.appLocale;
-            this.appCorpusData = editorStore === null || editorStore === void 0 ? void 0 : editorStore.appCorpusData;
-            this.unReaction = mobx.reaction(function () {
-              return editorStore === null || editorStore === void 0 ? void 0 : editorStore.appLocaleState;
-            }, function () {
-              return tslib.__awaiter(_this, void 0, void 0, function () {
-                var variablesArr;
-                return tslib.__generator(this, function (_a) {
-                  switch (_a.label) {
-                    case 0:
-                      this.appLocale = editorStore === null || editorStore === void 0 ? void 0 : editorStore.appLocale;
-                      this.appCorpusData = editorStore === null || editorStore === void 0 ? void 0 : editorStore.appCorpusData;
-                      return [4 /*yield*/, utils.getVariables(this)];
-                    case 1:
-                      variablesArr = _a.sent();
-                      this.setState({
-                        variables: variablesArr
-                      });
-                      return [2 /*return*/];
-                  }
-                });
-              });
+        editorStore = window.editorStore;
+        this.appLocale = editorStore === null || editorStore === void 0 ? void 0 : editorStore.appLocale;
+        this.appCorpusData = editorStore === null || editorStore === void 0 ? void 0 : editorStore.appCorpusData;
+        this.unReaction = mobx.reaction(function () {
+          return editorStore === null || editorStore === void 0 ? void 0 : editorStore.appLocaleState;
+        }, function () {
+          return tslib.__awaiter(_this, void 0, void 0, function () {
+            return tslib.__generator(this, function (_a) {
+              this.appLocale = editorStore === null || editorStore === void 0 ? void 0 : editorStore.appLocale;
+              this.appCorpusData = editorStore === null || editorStore === void 0 ? void 0 : editorStore.appCorpusData;
+              return [2 /*return*/];
             });
+          });
+        });
 
-            return [4 /*yield*/, utils.getVariables(this)];
-          case 1:
-            variablesArr = _a.sent();
-            this.setState({
-              variables: variablesArr
-            });
-            return [2 /*return*/];
-        }
-      });
-    });
-  };
-
-  FormulaControl.prototype.componentDidUpdate = function (prevProps) {
-    return tslib.__awaiter(this, void 0, void 0, function () {
-      var variablesArr;
-      return tslib.__generator(this, function (_a) {
-        switch (_a.label) {
-          case 0:
-            if (!(this.props.data !== prevProps.data)) return [3 /*break*/, 2];
-            return [4 /*yield*/, utils.getVariables(this)];
-          case 1:
-            variablesArr = _a.sent();
-            this.setState({
-              variables: variablesArr
-            });
-            _a.label = 2;
-          case 2:
-            return [2 /*return*/];
-        }
+        return [2 /*return*/];
       });
     });
   };
@@ -256,11 +216,85 @@ var FormulaControl = /** @class */function (_super) {
     (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.onChange) === null || _b === void 0 ? void 0 : _b.call(_a, val);
     this.closeFormulaPicker();
   };
+  /**
+   * 公式编辑器打开完成一些异步任务的加载
+   */
+  FormulaControl.prototype.beforeFormulaEditorOpen = function () {
+    var _a;
+    return tslib.__awaiter(this, void 0, void 0, function () {
+      var _b, node, manager, data, onFormulaEditorOpen, res, variables, variables, error_1;
+      return tslib.__generator(this, function (_c) {
+        switch (_c.label) {
+          case 0:
+            _b = this.props, node = _b.node, manager = _b.manager, data = _b.data;
+            onFormulaEditorOpen = (_a = manager === null || manager === void 0 ? void 0 : manager.config) === null || _a === void 0 ? void 0 : _a.onFormulaEditorOpen;
+            this.setState({
+              loading: true
+            });
+            _c.label = 1;
+          case 1:
+            _c.trys.push([1, 8,, 9]);
+            if (!(manager && onFormulaEditorOpen && typeof onFormulaEditorOpen === 'function')) return [3 /*break*/, 5];
+            return [4 /*yield*/, onFormulaEditorOpen(node, manager, data)];
+          case 2:
+            res = _c.sent();
+            if (!(res !== false)) return [3 /*break*/, 4];
+            return [4 /*yield*/, amisEditorCore.getVariables(this)];
+          case 3:
+            variables = _c.sent();
+            this.setState({
+              variables: variables
+            });
+            _c.label = 4;
+          case 4:
+            return [3 /*break*/, 7];
+          case 5:
+            return [4 /*yield*/, amisEditorCore.getVariables(this)];
+          case 6:
+            variables = _c.sent();
+            this.setState({
+              variables: variables
+            });
+            _c.label = 7;
+          case 7:
+            return [3 /*break*/, 9];
+          case 8:
+            error_1 = _c.sent();
+            console.error('[amis-editor] onFormulaEditorOpen failed: ', error_1 === null || error_1 === void 0 ? void 0 : error_1.stack);
+            return [3 /*break*/, 9];
+          case 9:
+            this.setState({
+              loading: false
+            });
+            return [2 /*return*/];
+        }
+      });
+    });
+  };
+
   FormulaControl.prototype.handleFormulaClick = function () {
-    this.setState({
-      formulaPickerOpen: true
+    return tslib.__awaiter(this, void 0, void 0, function () {
+      return tslib.__generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            _a.trys.push([0, 2,, 3]);
+            return [4 /*yield*/, this.beforeFormulaEditorOpen()];
+          case 1:
+            _a.sent();
+            return [3 /*break*/, 3];
+          case 2:
+            _a.sent();
+            return [3 /*break*/, 3];
+          case 3:
+            this.setState({
+              formulaPickerOpen: true
+            });
+            return [2 /*return*/];
+        }
+      });
     });
   };
+
   FormulaControl.prototype.closeFormulaPicker = function () {
     this.setState({
       formulaPickerOpen: false
@@ -351,7 +385,8 @@ var FormulaControl = /** @class */function (_super) {
     var _f = this.state,
       formulaPickerOpen = _f.formulaPickerOpen,
       variables = _f.variables,
-      variableMode = _f.variableMode;
+      variableMode = _f.variableMode,
+      loading = _f.loading;
     // 判断是否含有公式表达式
     var isExpr = amis.isExpression(value);
     // 判断当前是否有循环引用，备注：非精准识别，待优化
@@ -411,7 +446,7 @@ var FormulaControl = /** @class */function (_super) {
       allowInput: false,
       value: value,
       result: {
-        html: this.hasDateShortcutkey(value) ? value : highlightValue.html
+        html: this.hasDateShortcutkey(value) ? value : highlightValue === null || highlightValue === void 0 ? void 0 : highlightValue.html
       },
       itemRender: renderFormulaValue,
       onChange: this.handleInputChange,
@@ -435,7 +470,8 @@ var FormulaControl = /** @class */function (_super) {
         placement: 'left',
         mouseLeaveDelay: 0
       },
-      onClick: this.handleFormulaClick
+      onClick: this.handleFormulaClick,
+      loading: loading
     }, React__default["default"].createElement(amis.Icon, {
       icon: "input-fx",
       className: cx__default["default"]('ae-editor-FormulaControl-icon', 'icon', (_a = {}, _a['is-filled'] = !!isFx, _a))
@@ -465,7 +501,8 @@ var FormulaControl = /** @class */function (_super) {
   tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [String]), tslib.__metadata("design:returntype", Boolean)], FormulaControl.prototype, "hasDateShortcutkey", null);
   tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [String]), tslib.__metadata("design:returntype", void 0)], FormulaControl.prototype, "transExpr", null);
   tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [Object]), tslib.__metadata("design:returntype", void 0)], FormulaControl.prototype, "handleConfirm", null);
-  tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", []), tslib.__metadata("design:returntype", void 0)], FormulaControl.prototype, "handleFormulaClick", null);
+  tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", []), tslib.__metadata("design:returntype", Promise)], FormulaControl.prototype, "beforeFormulaEditorOpen", null);
+  tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", []), tslib.__metadata("design:returntype", Promise)], FormulaControl.prototype, "handleFormulaClick", null);
   tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", []), tslib.__metadata("design:returntype", void 0)], FormulaControl.prototype, "closeFormulaPicker", null);
   tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [Object]), tslib.__metadata("design:returntype", void 0)], FormulaControl.prototype, "filterCustomRendererProps", null);
   tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", []), tslib.__metadata("design:returntype", void 0)], FormulaControl.prototype, "getContextData", null);

package/lib/renderer/GoConfigControl.js

@@ -1,5 +1,5 @@
 /**
- * amis-editor v5.4.0
+ * amis-editor v5.5.0
  * Copyright 2018-2023 @fex
  */
 

package/lib/renderer/MapSourceControl.js

@@ -1,5 +1,5 @@
 /**
- * amis-editor v5.4.0
+ * amis-editor v5.5.0
  * Copyright 2018-2023 @fex
  */
 

package/lib/renderer/NavBadgeControl.js

@@ -1,5 +1,5 @@
 /**
- * amis-editor v5.4.0
+ * amis-editor v5.5.0
  * Copyright 2018-2023 @fex
  */
 

package/lib/renderer/NavDefaultActive.js

@@ -1,5 +1,5 @@
 /**
- * amis-editor v5.4.0
+ * amis-editor v5.5.0
  * Copyright 2018-2023 @fex
  */
 

package/lib/renderer/NavSourceControl.js

@@ -1,5 +1,5 @@
 /**
- * amis-editor v5.4.0
+ * amis-editor v5.5.0
  * Copyright 2018-2023 @fex
  */
 

package/lib/renderer/OptionControl.js

@@ -1,5 +1,5 @@
 /**
- * amis-editor v5.4.0
+ * amis-editor v5.5.0
  * Copyright 2018-2023 @fex
  */
 
@@ -588,8 +588,7 @@ var OptionControl = /** @class */function (_super) {
             value: false
           }]
         }]
-      }, {
-        type: 'ae-expressionFormulaControl',
+      }, amisEditorCore.getSchemaTpl('expressionFormulaControl', {
         name: 'optionHiddenOn',
         label: i18nRuntime.i18n("dce5379cb978a8259ecfca8f08f00817"),
         labelClassName: 'ae-OptionControlItem-EditLabel',
@@ -597,7 +596,7 @@ var OptionControl = /** @class */function (_super) {
         onChange: function (v) {
           return _this.handleHiddenValueChange(index, v);
         }
-      }, {
+      }), {
         type: i18nEnabled ? 'input-text-i18n' : 'input-text',
         placeholder: i18nRuntime.i18n("7f05bea37729325a6cc84eb26bb9f8c8"),
         label: i18nRuntime.i18n("b8c467fce096a649583c0bc9d9281a5c"),

package/lib/renderer/RangePartsControl.js

@@ -1,5 +1,5 @@
 /**
- * amis-editor v5.4.0
+ * amis-editor v5.5.0
  * Copyright 2018-2023 @fex
  */
 

package/lib/renderer/StatusControl.js

@@ -1,5 +1,5 @@
 /**
- * amis-editor v5.4.0
+ * amis-editor v5.5.0
  * Copyright 2018-2023 @fex
  */
 

package/lib/renderer/SwitchMoreControl.js

@@ -1,5 +1,5 @@
 /**
- * amis-editor v5.4.0
+ * amis-editor v5.5.0
  * Copyright 2018-2023 @fex
  */
 

package/lib/renderer/TimelineItemControl.js

@@ -1,5 +1,5 @@
 /**
- * amis-editor v5.4.0
+ * amis-editor v5.5.0
  * Copyright 2018-2023 @fex
  */
 

package/lib/renderer/TplFormulaControl.d.ts

@@ -42,6 +42,7 @@ interface TplFormulaControlState {
     tooltipStyle: {
         [key: string]: string;
     };
+    loading: boolean;
 }
 export declare class TplFormulaControl extends React.Component<TplFormulaControlProps, TplFormulaControlState> {
     static defaultProps: Partial<TplFormulaControlProps>;
@@ -53,9 +54,7 @@ export declare class TplFormulaControl extends React.Component<TplFormulaControl
     appCorpusData: any;
     constructor(props: TplFormulaControlProps);
     componentDidMount(): Promise<void>;
-    componentDidUpdate(prevProps: TplFormulaControlProps): Promise<void>;
     componentWillUnmount(): void;
-    onExpressionClick(expression: string, brace?: Array<CodeMirror.Position>): void;
     onExpressionMouseEnter(e: MouseEvent, expression: string, brace?: Array<CodeMirror.Position>): void;
     hiddenToolTip(): void;
     handleKeyDown(e: any): void;
@@ -64,7 +63,11 @@ export declare class TplFormulaControl extends React.Component<TplFormulaControl
     handleOnChange(value: any): void;
     checkOpenFormulaPicker(value: string): void;
     handleClear(): void;
-    handleFormulaClick(): void;
+    /**
+     * 公式编辑器打开完成一些异步任务的加载
+     */
+    beforeFormulaEditorOpen(): Promise<void>;
+    handleFormulaClick(e: React.MouseEvent, type?: string): Promise<void>;
     editorFactory(dom: HTMLElement, cm: any): any;
     handleEditorMounted(cm: any, editor: any): void;
     editorAutoMark(): void;

package/lib/renderer/TplFormulaControl.js

@@ -1,5 +1,5 @@
 /**
- * amis-editor v5.4.0
+ * amis-editor v5.5.0
  * Copyright 2018-2023 @fex
  */
 
@@ -15,9 +15,9 @@ var amisUi = require('amis-ui');
 var amis = require('amis');
 var amisCore = require('amis-core');
 var plugin = require('./textarea-formula/plugin.js');
-var utils = require('./textarea-formula/utils.js');
 var FormulaControl = require('./FormulaControl.js');
 var FormulaPicker = require('./textarea-formula/FormulaPicker.js');
+var amisEditorCore = require('amis-editor-core');
 var i18nRuntime = require('i18n-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -45,77 +45,38 @@ var TplFormulaControl = /** @class */function (_super) {
       formulaPickerValue: '',
       tooltipStyle: {
         display: 'none'
-      }
+      },
+      loading: false
     };
     return _this;
   }
   TplFormulaControl.prototype.componentDidMount = function () {
     return tslib.__awaiter(this, void 0, void 0, function () {
-      var editorStore, variablesArr;
+      var editorStore;
       var _this = this;
       return tslib.__generator(this, function (_a) {
-        switch (_a.label) {
-          case 0:
-            editorStore = window.editorStore;
-            this.appLocale = editorStore === null || editorStore === void 0 ? void 0 : editorStore.appLocale;
-            this.appCorpusData = editorStore === null || editorStore === void 0 ? void 0 : editorStore.appCorpusData;
-            this.unReaction = mobx.reaction(function () {
-              return editorStore === null || editorStore === void 0 ? void 0 : editorStore.appLocaleState;
-            }, function () {
-              return tslib.__awaiter(_this, void 0, void 0, function () {
-                var variablesArr;
-                return tslib.__generator(this, function (_a) {
-                  switch (_a.label) {
-                    case 0:
-                      this.appLocale = editorStore === null || editorStore === void 0 ? void 0 : editorStore.appLocale;
-                      this.appCorpusData = editorStore === null || editorStore === void 0 ? void 0 : editorStore.appCorpusData;
-                      return [4 /*yield*/, utils.getVariables(this)];
-                    case 1:
-                      variablesArr = _a.sent();
-                      this.setState({
-                        variables: variablesArr
-                      });
-                      return [2 /*return*/];
-                  }
-                });
-              });
+        editorStore = window.editorStore;
+        this.appLocale = editorStore === null || editorStore === void 0 ? void 0 : editorStore.appLocale;
+        this.appCorpusData = editorStore === null || editorStore === void 0 ? void 0 : editorStore.appCorpusData;
+        this.unReaction = mobx.reaction(function () {
+          return editorStore === null || editorStore === void 0 ? void 0 : editorStore.appLocaleState;
+        }, function () {
+          return tslib.__awaiter(_this, void 0, void 0, function () {
+            return tslib.__generator(this, function (_a) {
+              this.appLocale = editorStore === null || editorStore === void 0 ? void 0 : editorStore.appLocale;
+              this.appCorpusData = editorStore === null || editorStore === void 0 ? void 0 : editorStore.appCorpusData;
+              return [2 /*return*/];
             });
+          });
+        });
 
-            return [4 /*yield*/, utils.getVariables(this)];
-          case 1:
-            variablesArr = _a.sent();
-            this.setState({
-              variables: variablesArr
-            });
-            if (this.tooltipRef.current) {
-              this.tooltipRef.current.addEventListener('mouseleave', this.hiddenToolTip);
-            }
-            if (this.wrapRef.current) {
-              this.wrapRef.current.addEventListener('keydown', this.handleKeyDown, true);
-            }
-            return [2 /*return*/];
+        if (this.tooltipRef.current) {
+          this.tooltipRef.current.addEventListener('mouseleave', this.hiddenToolTip);
         }
-      });
-    });
-  };
-
-  TplFormulaControl.prototype.componentDidUpdate = function (prevProps) {
-    return tslib.__awaiter(this, void 0, void 0, function () {
-      var variablesArr;
-      return tslib.__generator(this, function (_a) {
-        switch (_a.label) {
-          case 0:
-            if (!(this.props.data !== prevProps.data)) return [3 /*break*/, 2];
-            return [4 /*yield*/, utils.getVariables(this)];
-          case 1:
-            variablesArr = _a.sent();
-            this.setState({
-              variables: variablesArr
-            });
-            _a.label = 2;
-          case 2:
-            return [2 /*return*/];
+        if (this.wrapRef.current) {
+          this.wrapRef.current.addEventListener('keydown', this.handleKeyDown, true);
         }
+        return [2 /*return*/];
       });
     });
   };
@@ -131,13 +92,6 @@ var TplFormulaControl = /** @class */function (_super) {
     (_a = this.editorPlugin) === null || _a === void 0 ? void 0 : _a.dispose();
     (_b = this.unReaction) === null || _b === void 0 ? void 0 : _b.call(this);
   };
-  TplFormulaControl.prototype.onExpressionClick = function (expression, brace) {
-    this.setState({
-      formulaPickerValue: expression,
-      formulaPickerOpen: true,
-      expressionBrace: brace
-    });
-  };
   TplFormulaControl.prototype.onExpressionMouseEnter = function (e, expression, brace) {
     var _a;
     var wrapperRect = (_a = this.wrapRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
@@ -249,13 +203,91 @@ var TplFormulaControl = /** @class */function (_super) {
     var _a;
     (_a = this.editorPlugin) === null || _a === void 0 ? void 0 : _a.setValue('');
   };
-  TplFormulaControl.prototype.handleFormulaClick = function () {
-    this.setState({
-      formulaPickerOpen: true,
-      formulaPickerValue: '',
-      expressionBrace: undefined
+  /**
+   * 公式编辑器打开完成一些异步任务的加载
+   */
+  TplFormulaControl.prototype.beforeFormulaEditorOpen = function () {
+    var _a;
+    return tslib.__awaiter(this, void 0, void 0, function () {
+      var _b, node, manager, data, onFormulaEditorOpen, res, variables, variables, error_1;
+      return tslib.__generator(this, function (_c) {
+        switch (_c.label) {
+          case 0:
+            _b = this.props, node = _b.node, manager = _b.manager, data = _b.data;
+            onFormulaEditorOpen = (_a = manager === null || manager === void 0 ? void 0 : manager.config) === null || _a === void 0 ? void 0 : _a.onFormulaEditorOpen;
+            this.setState({
+              loading: true
+            });
+            _c.label = 1;
+          case 1:
+            _c.trys.push([1, 8,, 9]);
+            if (!(manager && onFormulaEditorOpen && typeof onFormulaEditorOpen === 'function')) return [3 /*break*/, 5];
+            return [4 /*yield*/, onFormulaEditorOpen(node, manager, data)];
+          case 2:
+            res = _c.sent();
+            if (!(res !== false)) return [3 /*break*/, 4];
+            return [4 /*yield*/, amisEditorCore.getVariables(this)];
+          case 3:
+            variables = _c.sent();
+            this.setState({
+              variables: variables
+            });
+            _c.label = 4;
+          case 4:
+            return [3 /*break*/, 7];
+          case 5:
+            return [4 /*yield*/, amisEditorCore.getVariables(this)];
+          case 6:
+            variables = _c.sent();
+            this.setState({
+              variables: variables
+            });
+            _c.label = 7;
+          case 7:
+            return [3 /*break*/, 9];
+          case 8:
+            error_1 = _c.sent();
+            console.error('[amis-editor] onFormulaEditorOpen failed: ', error_1 === null || error_1 === void 0 ? void 0 : error_1.stack);
+            return [3 /*break*/, 9];
+          case 9:
+            this.setState({
+              loading: false
+            });
+            return [2 /*return*/];
+        }
+      });
     });
   };
+
+  TplFormulaControl.prototype.handleFormulaClick = function (e, type) {
+    return tslib.__awaiter(this, void 0, void 0, function () {
+      return tslib.__generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            _a.trys.push([0, 2,, 3]);
+            return [4 /*yield*/, this.beforeFormulaEditorOpen()];
+          case 1:
+            _a.sent();
+            return [3 /*break*/, 3];
+          case 2:
+            _a.sent();
+            return [3 /*break*/, 3];
+          case 3:
+            this.setState({
+              formulaPickerOpen: true
+            });
+            if (type !== 'update') {
+              this.setState({
+                formulaPickerValue: '',
+                expressionBrace: undefined
+              });
+            }
+            return [2 /*return*/];
+        }
+      });
+    });
+  };
+
   TplFormulaControl.prototype.editorFactory = function (dom, cm) {
     return plugin.editorFactory(dom, cm, this.props.value, {
       lineWrapping: false,
@@ -271,7 +303,6 @@ var TplFormulaControl = /** @class */function (_super) {
           variables: variables
         });
       },
-      onExpressionClick: this.onExpressionClick,
       onExpressionMouseEnter: this.onExpressionMouseEnter,
       showPopover: false,
       showClearIcon: true
@@ -295,7 +326,8 @@ var TplFormulaControl = /** @class */function (_super) {
       formulaPickerOpen = _b.formulaPickerOpen,
       formulaPickerValue = _b.formulaPickerValue,
       variables = _b.variables,
-      tooltipStyle = _b.tooltipStyle;
+      tooltipStyle = _b.tooltipStyle,
+      loading = _b.loading;
     var FormulaPickerCmp = customFormulaPicker !== null && customFormulaPicker !== void 0 ? customFormulaPicker : FormulaPicker["default"];
     var highlightValue = amisUi.FormulaEditor.highlightValue(formulaPickerValue, variables) || {
       html: formulaPickerValue
@@ -331,7 +363,8 @@ var TplFormulaControl = /** @class */function (_super) {
         placement: 'left',
         mouseLeaveDelay: 0
       },
-      onClick: this.handleFormulaClick
+      onClick: this.handleFormulaClick,
+      loading: loading
     }, React__default["default"].createElement(amis.Icon, {
       icon: "input-add-fx",
       className: cx__default["default"]('ae-TplFormulaControl-icon', 'icon')
@@ -351,10 +384,8 @@ var TplFormulaControl = /** @class */function (_super) {
       className: "ae-TplFormulaControl-tooltip",
       style: tooltipStyle,
       ref: this.tooltipRef,
-      onClick: function () {
-        _this.setState({
-          formulaPickerOpen: true
-        });
+      onClick: function (e) {
+        return _this.handleFormulaClick(e, 'update');
       }
     })), formulaPickerOpen ? React__default["default"].createElement(FormulaPickerCmp, tslib.__assign({}, this.props, {
       value: formulaPickerValue,
@@ -368,11 +399,10 @@ var TplFormulaControl = /** @class */function (_super) {
     })) : null);
   };
   TplFormulaControl.defaultProps = {
-    variableMode: 'tabs',
+    variableMode: 'tree',
     requiredDataPropsVariables: false,
     placeholder: i18nRuntime.i18n("02cc4f8f5a9aefbc03c778f7a5c989c7")
   };
-  tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [String, Array]), tslib.__metadata("design:returntype", void 0)], TplFormulaControl.prototype, "onExpressionClick", null);
   tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [MouseEvent, String, Array]), tslib.__metadata("design:returntype", void 0)], TplFormulaControl.prototype, "onExpressionMouseEnter", null);
   tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", []), tslib.__metadata("design:returntype", void 0)], TplFormulaControl.prototype, "hiddenToolTip", null);
   tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [Object]), tslib.__metadata("design:returntype", void 0)], TplFormulaControl.prototype, "handleKeyDown", null);
@@ -380,7 +410,8 @@ var TplFormulaControl = /** @class */function (_super) {
   tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [Object]), tslib.__metadata("design:returntype", void 0)], TplFormulaControl.prototype, "handleConfirm", null);
   tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [Object]), tslib.__metadata("design:returntype", void 0)], TplFormulaControl.prototype, "handleOnChange", null);
   tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", []), tslib.__metadata("design:returntype", void 0)], TplFormulaControl.prototype, "handleClear", null);
-  tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", []), tslib.__metadata("design:returntype", void 0)], TplFormulaControl.prototype, "handleFormulaClick", null);
+  tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", []), tslib.__metadata("design:returntype", Promise)], TplFormulaControl.prototype, "beforeFormulaEditorOpen", null);
+  tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [Object, String]), tslib.__metadata("design:returntype", Promise)], TplFormulaControl.prototype, "handleFormulaClick", null);
   tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [HTMLElement, Object]), tslib.__metadata("design:returntype", void 0)], TplFormulaControl.prototype, "editorFactory", null);
   tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [Object, Object]), tslib.__metadata("design:returntype", void 0)], TplFormulaControl.prototype, "handleEditorMounted", null);
   tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", []), tslib.__metadata("design:returntype", void 0)], TplFormulaControl.prototype, "editorAutoMark", null);