amis-editor 5.2.5 → 5.3.0

package/lib/renderer/textarea-formula/TextareaFormulaControl.js

@@ -1,5 +1,5 @@
 /**
- * amis-editor v5.2.4-beta.39
+ * amis-editor v5.3.0
  * Copyright 2018-2023 @fex
  */
 
@@ -12,20 +12,18 @@ var React = require('react');
 var cx = require('classnames');
 var amis = require('amis');
 var amisCore = require('amis-core');
-var CodeMirrorEditor = require('amis-ui/lib/components/CodeMirror');
+var amisUi = require('amis-ui');
 var plugin = require('./plugin.js');
 var FormulaPicker = require('./FormulaPicker.js');
-var debounce = require('lodash/debounce');
 var utils = require('./utils.js');
 var mobx = require('mobx');
+var FormulaControl = require('../FormulaControl.js');
 var i18nRuntime = require('i18n-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-var CodeMirrorEditor__default = /*#__PURE__*/_interopDefaultLegacy(CodeMirrorEditor);
-var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 
 /**
  * @file 长文本公式输入框
@@ -34,360 +32,342 @@ var TextareaFormulaControl = /** @class */function (_super) {
   tslib.__extends(TextareaFormulaControl, _super);
   function TextareaFormulaControl(props) {
     var _this = _super.call(this, props) || this;
-    Object.defineProperty(_this, "isUnmount", {
-      enumerable: true,
-      configurable: true,
-      writable: true,
-      value: void 0
-    });
-    Object.defineProperty(_this, "editorPlugin", {
-      enumerable: true,
-      configurable: true,
-      writable: true,
-      value: void 0
-    });
-    Object.defineProperty(_this, "unReaction", {
-      enumerable: true,
-      configurable: true,
-      writable: true,
-      value: void 0
-    });
-    Object.defineProperty(_this, "appLocale", {
-      enumerable: true,
-      configurable: true,
-      writable: true,
-      value: void 0
-    });
-    Object.defineProperty(_this, "appCorpusData", {
-      enumerable: true,
-      configurable: true,
-      writable: true,
-      value: void 0
-    });
-    Object.defineProperty(_this, "handleOnChange", {
-      enumerable: true,
-      configurable: true,
-      writable: true,
-      value: debounce__default["default"](function (value) {
-        var _a, _b;
-        (_b = (_a = _this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, value);
-      }, 200)
-    });
+    _this.wrapRef = React__default["default"].createRef();
+    _this.tooltipRef = React__default["default"].createRef();
     _this.state = {
       value: '',
       variables: [],
       formulaPickerOpen: false,
       formulaPickerValue: '',
-      isFullscreen: false
+      isFullscreen: false,
+      tooltipStyle: {}
     };
     return _this;
   }
-  Object.defineProperty(TextareaFormulaControl.prototype, "componentDidMount", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function () {
-      return tslib.__awaiter(this, void 0, void 0, function () {
-        var editorStore, variablesArr;
-        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*/];
-                    }
-                  });
+  TextareaFormulaControl.prototype.componentDidMount = function () {
+    return tslib.__awaiter(this, void 0, void 0, function () {
+      var editorStore, variablesArr;
+      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*/];
+                  }
                 });
               });
+            });
 
-              return [4 /*yield*/, utils.getVariables(this)];
-            case 1:
-              variablesArr = _a.sent();
-              this.setState({
-                variables: variablesArr
-              });
-              return [2 /*return*/];
-          }
-        });
+            if (this.tooltipRef.current) {
+              this.tooltipRef.current.addEventListener('mouseleave', this.hiddenToolTip);
+            }
+            return [4 /*yield*/, utils.getVariables(this)];
+          case 1:
+            variablesArr = _a.sent();
+            this.setState({
+              variables: variablesArr
+            });
+            return [2 /*return*/];
+        }
       });
-    }
-  });
+    });
+  };
 
-  Object.defineProperty(TextareaFormulaControl.prototype, "componentDidUpdate", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: 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();
+  TextareaFormulaControl.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:
+            if (this.state.value !== this.props.value) {
               this.setState({
-                variables: variablesArr
-              });
-              _a.label = 2;
-            case 2:
-              return [2 /*return*/];
-          }
-        });
+                value: this.props.value
+              }, this.editorAutoMark);
+            }
+            return [2 /*return*/];
+        }
       });
-    }
-  });
+    });
+  };
 
-  Object.defineProperty(TextareaFormulaControl.prototype, "componentWillUnmount", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function () {
-      var _a;
-      this.isUnmount = true;
-      (_a = this.unReaction) === null || _a === void 0 ? void 0 : _a.call(this);
-    }
-  });
-  Object.defineProperty(TextareaFormulaControl.prototype, "onExpressionClick", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function (expression, brace) {
-      this.setState({
-        formulaPickerValue: expression,
-        formulaPickerOpen: true,
-        expressionBrace: brace
-      });
-    }
-  });
-  Object.defineProperty(TextareaFormulaControl.prototype, "closeFormulaPicker", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function () {
-      this.setState({
-        formulaPickerOpen: false
-      });
+  TextareaFormulaControl.prototype.componentWillUnmount = function () {
+    var _a, _b;
+    if (this.tooltipRef.current) {
+      this.tooltipRef.current.removeEventListener('mouseleave', this.hiddenToolTip);
     }
-  });
-  Object.defineProperty(TextareaFormulaControl.prototype, "handleConfirm", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function (value) {
-      var _a;
-      var expressionBrace = this.state.expressionBrace;
-      // 去除可能包裹的最外层的${}
-      value = value.replace(/^\$\{(.*)\}$/, function (match, p1) {
-        return p1;
-      });
-      value = value ? "${".concat(value, "}") : value;
-      (_a = this.editorPlugin) === null || _a === void 0 ? void 0 : _a.insertContent(value, 'expression', expressionBrace);
-      this.setState({
-        formulaPickerOpen: false,
-        expressionBrace: undefined
-      });
-      this.closeFormulaPicker();
-    }
-  });
-  Object.defineProperty(TextareaFormulaControl.prototype, "editorFactory", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function (dom, cm) {
-      var variables = this.props.variables || this.state.variables;
-      return plugin.editorFactory(dom, cm, tslib.__assign(tslib.__assign({}, this.props), {
-        variables: variables
-      }));
+    (_a = this.editorPlugin) === null || _a === void 0 ? void 0 : _a.dispose();
+    (_b = this.unReaction) === null || _b === void 0 ? void 0 : _b.call(this);
+  };
+  TextareaFormulaControl.prototype.onExpressionClick = function (expression, brace) {
+    this.setState({
+      formulaPickerValue: expression,
+      formulaPickerOpen: true,
+      expressionBrace: brace
+    });
+  };
+  TextareaFormulaControl.prototype.onExpressionMouseEnter = function (e, expression, brace) {
+    var _a;
+    var wrapperRect = (_a = this.wrapRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    var expressionRect = e.target.getBoundingClientRect();
+    if (!wrapperRect) {
+      return;
     }
-  });
-  Object.defineProperty(TextareaFormulaControl.prototype, "handleEditorMounted", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function (cm, editor) {
-      var _this = this;
-      var variables = this.props.variables || this.state.variables;
-      this.editorPlugin = new plugin.FormulaPlugin(editor, cm, function () {
+    var left = expressionRect.left - wrapperRect.left;
+    var top = expressionRect.top - wrapperRect.top;
+    this.setState({
+      tooltipStyle: {
+        left: "".concat(left, "px"),
+        top: "".concat(top, "px"),
+        width: "".concat(expressionRect.width, "px")
+      },
+      formulaPickerValue: expression,
+      expressionBrace: brace
+    });
+  };
+  TextareaFormulaControl.prototype.hiddenToolTip = function () {
+    this.setState({
+      tooltipStyle: {
+        display: 'none'
+      }
+    });
+  };
+  TextareaFormulaControl.prototype.closeFormulaPicker = function () {
+    this.setState({
+      formulaPickerOpen: false
+    });
+  };
+  TextareaFormulaControl.prototype.handleConfirm = function (value) {
+    var _a;
+    var expressionBrace = this.state.expressionBrace;
+    // 去除可能包裹的最外层的${}
+    value = value.replace(/^\$\{(.*)\}$/, function (match, p1) {
+      return p1;
+    });
+    value = value ? "${".concat(value, "}") : value;
+    value = value.replace(/\r\n|\r|\n/g, ' ');
+    (_a = this.editorPlugin) === null || _a === void 0 ? void 0 : _a.insertContent(value, 'expression', expressionBrace);
+    this.setState({
+      formulaPickerOpen: false,
+      expressionBrace: undefined
+    });
+  };
+  TextareaFormulaControl.prototype.handleOnChange = function (value) {
+    var _a, _b;
+    (_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, value);
+  };
+  TextareaFormulaControl.prototype.editorFactory = function (dom, cm) {
+    return plugin.editorFactory(dom, cm, this.props.value);
+  };
+  TextareaFormulaControl.prototype.handleEditorMounted = function (cm, editor) {
+    var _this = this;
+    var variables = this.state.variables || this.props.variables || [];
+    this.editorPlugin = new plugin.FormulaPlugin(editor, {
+      getProps: function () {
         return tslib.__assign(tslib.__assign({}, _this.props), {
           variables: variables
         });
-      }, this.onExpressionClick);
-    }
-  });
-  Object.defineProperty(TextareaFormulaControl.prototype, "handleFullscreenModeChange", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function () {
-      if (this.props.onOverallClick) {
-        return;
-      }
-      this.setState({
-        isFullscreen: !this.state.isFullscreen
-      });
+      },
+      onExpressionClick: this.onExpressionClick,
+      onExpressionMouseEnter: this.onExpressionMouseEnter,
+      customMarkText: this.props.customMarkText,
+      onPluginInit: this.props.onPluginInit,
+      showClearIcon: true
+    });
+  };
+  TextareaFormulaControl.prototype.handleFullscreenModeChange = function () {
+    if (this.props.onOverallClick) {
+      return;
     }
-  });
-  Object.defineProperty(TextareaFormulaControl.prototype, "handleFormulaClick", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function () {
-      if (this.props.onOverallClick) {
-        return;
-      }
-      this.setState({
-        formulaPickerOpen: true,
-        formulaPickerValue: '',
-        expressionBrace: undefined
-      });
+    this.setState({
+      isFullscreen: !this.state.isFullscreen
+    });
+  };
+  TextareaFormulaControl.prototype.handleFormulaClick = function () {
+    if (this.props.onOverallClick) {
+      return;
     }
-  });
-  Object.defineProperty(TextareaFormulaControl.prototype, "editorAutoMark", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function () {
-      var _a;
-      (_a = this.editorPlugin) === null || _a === void 0 ? void 0 : _a.autoMark();
+    this.setState({
+      formulaPickerOpen: true,
+      formulaPickerValue: '',
+      expressionBrace: undefined
+    });
+  };
+  TextareaFormulaControl.prototype.editorAutoMark = function () {
+    var _a;
+    (_a = this.editorPlugin) === null || _a === void 0 ? void 0 : _a.autoMark();
+  };
+  TextareaFormulaControl.prototype.handleAddtionalMenuClick = function (e, item) {
+    var _a;
+    (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, e, {
+      value: this.props.value || '',
+      setValue: this.editorPlugin.setValue,
+      insertContent: this.editorPlugin.insertContent
+    });
+  };
+  TextareaFormulaControl.prototype.render = function () {
+    var _this = this;
+    var _a = this.props,
+      className = _a.className,
+      header = _a.header;
+      _a.label;
+      var placeholder = _a.placeholder,
+      height = _a.height,
+      additionalMenus = _a.additionalMenus,
+      onOverallClick = _a.onOverallClick,
+      customFormulaPicker = _a.customFormulaPicker,
+      rest = tslib.__rest(_a, ["className", "header", "label", "placeholder", "height", "additionalMenus", "onOverallClick", "customFormulaPicker"]);
+    var _b = this.state,
+      formulaPickerOpen = _b.formulaPickerOpen,
+      formulaPickerValue = _b.formulaPickerValue,
+      isFullscreen = _b.isFullscreen,
+      variables = _b.variables,
+      tooltipStyle = _b.tooltipStyle;
+    var FormulaPickerCmp = customFormulaPicker !== null && customFormulaPicker !== void 0 ? customFormulaPicker : FormulaPicker["default"];
+    // 输入框样式
+    var resultBoxStyle = {};
+    if (height) {
+      resultBoxStyle.height = "".concat(height, "px");
     }
-  });
-  Object.defineProperty(TextareaFormulaControl.prototype, "render", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function () {
-      var _this = this;
-      var _a = this.props,
-        className = _a.className;
-        _a.header;
-        _a.label;
-        _a.placeholder;
-        var height = _a.height,
-        additionalMenus = _a.additionalMenus,
-        onOverallClick = _a.onOverallClick,
-        customFormulaPicker = _a.customFormulaPicker,
-        rest = tslib.__rest(_a, ["className", "header", "label", "placeholder", "height", "additionalMenus", "onOverallClick", "customFormulaPicker"]);
-      var _b = this.state,
-        value = _b.value,
-        formulaPickerOpen = _b.formulaPickerOpen,
-        formulaPickerValue = _b.formulaPickerValue,
-        isFullscreen = _b.isFullscreen,
-        variables = _b.variables;
-      var FormulaPickerCmp = customFormulaPicker !== null && customFormulaPicker !== void 0 ? customFormulaPicker : FormulaPicker["default"];
-      // 输入框样式
-      var resultBoxStyle = {};
-      if (height) {
-        resultBoxStyle.height = "".concat(height, "px");
-      }
-      return React__default["default"].createElement("div", {
-        className: cx__default["default"]('ae-TextareaFormulaControl', {
-          'is-fullscreen': this.state.isFullscreen
-        }, className)
-      }, React__default["default"].createElement("div", {
-        className: cx__default["default"]('ae-TextareaResultBox'),
-        style: resultBoxStyle
-      }, React__default["default"].createElement(CodeMirrorEditor__default["default"], {
-        className: "ae-TextareaResultBox-editor",
-        value: value,
-        onChange: this.handleOnChange,
-        editorFactory: this.editorFactory,
-        editorDidMount: this.handleEditorMounted,
-        onBlur: this.editorAutoMark
-      }), React__default["default"].createElement("ul", {
-        className: "ae-TextareaResultBox-footer"
-      }, React__default["default"].createElement("li", {
-        className: "ae-TextareaResultBox-footer-fullscreen"
-      }, React__default["default"].createElement("a", {
-        className: cx__default["default"]('Modal-fullscreen'),
-        "data-tooltip": isFullscreen ? i18nRuntime.i18n("49041f245018a6d799fee3c6f177c782") : i18nRuntime.i18n("185926bf986c784d03a9a73102da6542"),
-        "data-position": "top",
-        onClick: this.handleFullscreenModeChange
-      }, React__default["default"].createElement(amis.Icon, {
-        icon: isFullscreen ? 'compress-alt' : 'expand-alt',
-        className: "icon"
-      }))), React__default["default"].createElement("li", {
-        className: "ae-TextareaResultBox-footer-fxIcon"
-      }, React__default["default"].createElement("a", {
-        "data-tooltip": "\u8868\u8FBE\u5F0F",
+    var highlightValue = amisUi.FormulaEditor.highlightValue(formulaPickerValue, variables) || {
+      html: formulaPickerValue
+    };
+    return React__default["default"].createElement("div", {
+      className: cx__default["default"]('ae-TextareaFormulaControl', {
+        'is-fullscreen': this.state.isFullscreen
+      }, className),
+      ref: this.wrapRef
+    }, React__default["default"].createElement("div", {
+      className: cx__default["default"]('ae-TextareaResultBox'),
+      style: resultBoxStyle
+    }, React__default["default"].createElement(amisUi.CodeMirrorEditor, {
+      className: "ae-TextareaResultBox-editor",
+      value: this.props.value,
+      onChange: this.handleOnChange,
+      editorFactory: this.editorFactory,
+      editorDidMount: this.handleEditorMounted,
+      onBlur: this.editorAutoMark
+    }), !this.props.value && React__default["default"].createElement("div", {
+      className: "ae-TextareaResultBox-placeholder"
+    }, placeholder), React__default["default"].createElement("ul", {
+      className: "ae-TextareaResultBox-footer"
+    }, React__default["default"].createElement("li", {
+      className: "ae-TextareaResultBox-footer-fullscreen"
+    }, React__default["default"].createElement("a", {
+      className: cx__default["default"]('Modal-fullscreen'),
+      "data-tooltip": isFullscreen ? i18nRuntime.i18n("49041f245018a6d799fee3c6f177c782") : i18nRuntime.i18n("185926bf986c784d03a9a73102da6542"),
+      "data-position": "top",
+      onClick: this.handleFullscreenModeChange
+    }, React__default["default"].createElement(amis.Icon, {
+      icon: isFullscreen ? 'compress-alt' : 'expand-alt',
+      className: "icon"
+    }))), React__default["default"].createElement("li", {
+      className: "ae-TextareaResultBox-footer-fxIcon"
+    }, React__default["default"].createElement("a", {
+      "data-tooltip": "\u8868\u8FBE\u5F0F",
+      "data-position": "top",
+      onClick: this.handleFormulaClick
+    }, React__default["default"].createElement(amis.Icon, {
+      icon: "input-add-fx",
+      className: "icon"
+    }))), Array.isArray(additionalMenus) && additionalMenus.length > 0 && (additionalMenus === null || additionalMenus === void 0 ? void 0 : additionalMenus.map(function (item, i) {
+      return React__default["default"].createElement("li", {
+        key: i
+      }, item.icon ? React__default["default"].createElement("a", {
+        "data-tooltip": item.label,
         "data-position": "top",
-        onClick: this.handleFormulaClick
-      }, React__default["default"].createElement(amis.Icon, {
-        icon: "function",
-        className: "icon"
-      }))), (additionalMenus === null || additionalMenus === void 0 ? void 0 : additionalMenus.length) && (additionalMenus === null || additionalMenus === void 0 ? void 0 : additionalMenus.map(function (item, i) {
-        return React__default["default"].createElement("li", {
-          key: i,
-          className: (item === null || item === void 0 ? void 0 : item.className) || ''
-        }, item.icon ? React__default["default"].createElement("a", {
-          "data-tooltip": item.label,
-          "data-position": "top",
-          onClick: function () {
-            return item.onClick();
-          }
-        }, React__default["default"].createElement(amis.Icon, {
-          icon: item.icon,
-          className: "icon"
-        })) : React__default["default"].createElement("a", {
-          onClick: function () {
-            return item === null || item === void 0 ? void 0 : item.onClick();
-          }
-        }, item.label));
-      })))), !!onOverallClick ? React__default["default"].createElement("div", {
-        className: cx__default["default"]('ae-TextareaResultBox-overlay'),
-        onClick: onOverallClick
-      }) : null, formulaPickerOpen ? React__default["default"].createElement(FormulaPickerCmp, tslib.__assign({}, this.props, {
-        value: formulaPickerValue,
-        initable: true,
-        variables: variables,
-        variableMode: rest.variableMode,
-        evalMode: true,
-        onClose: function () {
-          return _this.setState({
-            formulaPickerOpen: false
-          });
-        },
-        onConfirm: this.handleConfirm
-      })) : null);
-    }
-  });
-  Object.defineProperty(TextareaFormulaControl, "defaultProps", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: {
-      variableMode: 'tabs',
-      requiredDataPropsVariables: false,
-      height: 100
-    }
-  });
+        onClick: function (e) {
+          return _this.handleAddtionalMenuClick(e, item);
+        }
+      }, amisCore.render({
+        type: 'icon',
+        icon: item.icon,
+        vendor: '',
+        className: item.className
+      })) : React__default["default"].createElement("a", {
+        onClick: function (e) {
+          return _this.handleAddtionalMenuClick(e, item);
+        }
+      }, item.label));
+    })))), !!onOverallClick ? React__default["default"].createElement("div", {
+      className: cx__default["default"]('ae-TextareaResultBox-overlay'),
+      onClick: onOverallClick
+    }) : null, React__default["default"].createElement(amis.TooltipWrapper, {
+      trigger: "hover",
+      placement: "top",
+      style: {
+        fontSize: '12px'
+      },
+      tooltip: {
+        tooltipTheme: 'dark',
+        children: function () {
+          return FormulaControl.renderFormulaValue(highlightValue);
+        }
+      }
+    }, React__default["default"].createElement("div", {
+      className: "ae-TplFormulaControl-tooltip",
+      style: tooltipStyle,
+      ref: this.tooltipRef,
+      onClick: function () {
+        _this.setState({
+          formulaPickerOpen: true
+        });
+      }
+    })), formulaPickerOpen ? React__default["default"].createElement(FormulaPickerCmp, tslib.__assign({}, this.props, {
+      value: formulaPickerValue,
+      initable: true,
+      variables: variables,
+      header: header,
+      variableMode: rest.variableMode,
+      evalMode: true,
+      onClose: this.closeFormulaPicker,
+      onConfirm: this.handleConfirm
+    })) : null);
+  };
+  TextareaFormulaControl.defaultProps = {
+    variableMode: 'tabs',
+    requiredDataPropsVariables: false,
+    height: 100,
+    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)], TextareaFormulaControl.prototype, "onExpressionClick", null);
+  tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [Object, String, Array]), tslib.__metadata("design:returntype", void 0)], TextareaFormulaControl.prototype, "onExpressionMouseEnter", null);
+  tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", []), tslib.__metadata("design:returntype", void 0)], TextareaFormulaControl.prototype, "hiddenToolTip", null);
   tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", []), tslib.__metadata("design:returntype", void 0)], TextareaFormulaControl.prototype, "closeFormulaPicker", null);
   tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [Object]), tslib.__metadata("design:returntype", void 0)], TextareaFormulaControl.prototype, "handleConfirm", null);
+  tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [Object]), tslib.__metadata("design:returntype", void 0)], TextareaFormulaControl.prototype, "handleOnChange", null);
   tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [HTMLElement, Object]), tslib.__metadata("design:returntype", void 0)], TextareaFormulaControl.prototype, "editorFactory", null);
   tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [Object, Object]), tslib.__metadata("design:returntype", void 0)], TextareaFormulaControl.prototype, "handleEditorMounted", null);
   tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", []), tslib.__metadata("design:returntype", void 0)], TextareaFormulaControl.prototype, "handleFullscreenModeChange", null);
   tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", []), tslib.__metadata("design:returntype", void 0)], TextareaFormulaControl.prototype, "handleFormulaClick", null);
   tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", []), tslib.__metadata("design:returntype", void 0)], TextareaFormulaControl.prototype, "editorAutoMark", null);
+  tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [Object, Object]), tslib.__metadata("design:returntype", void 0)], TextareaFormulaControl.prototype, "handleAddtionalMenuClick", null);
   return TextareaFormulaControl;
 }(React__default["default"].Component);
 /** @class */(function (_super) {