amis-editor 5.2.5 → 5.3.0

package/esm/renderer/FormulaControl.js

@@ -1,9 +1,9 @@
 /**
- * amis-editor v5.2.4-beta.39
+ * amis-editor v5.3.0
  * Copyright 2018-2023 @fex
  */
 
-import { __extends, __awaiter, __generator, __rest, __assign, __decorate, __metadata } from 'tslib';
+import { __extends, __awaiter, __generator, __spreadArray, __read, __rest, __assign, __decorate, __metadata } from 'tslib';
 import React__default from 'react';
 import isNumber from 'lodash/isNumber';
 import isBoolean from 'lodash/isBoolean';
@@ -12,8 +12,9 @@ import isArray from 'lodash/isArray';
 import isString from 'lodash/isString';
 import omit from 'lodash/omit';
 import cx from 'classnames';
-import { isExpression, FormulaExec, InputBox, TooltipWrapper, ResultBox, PickerContainer, Button, Icon, FormItem } from 'amis';
-import { FormulaEditor } from 'amis-ui/lib/components/formula/Editor';
+import { isExpression, FormulaExec, InputBox, TooltipWrapper, ResultBox, Icon, Button, FormItem } from 'amis';
+import { FormulaEditor } from 'amis-ui';
+import FormulaPicker from './textarea-formula/FormulaPicker.js';
 import { translateSchema, autobind } from 'amis-editor-core';
 import { reaction } from 'mobx';
 import { getVariables } from './textarea-formula/utils.js';
@@ -28,516 +29,420 @@ var FormulaDateType;
   FormulaDateType[FormulaDateType["IsDate"] = 1] = "IsDate";
   FormulaDateType[FormulaDateType["IsRange"] = 2] = "IsRange"; // 日期时间范围类
 })(FormulaDateType || (FormulaDateType = {}));
+function renderFormulaValue(item) {
+  var html = {
+    __html: typeof item === 'string' ? item : item.html
+  };
+  // bca-disable-next-line
+  return React__default.createElement("span", {
+    dangerouslySetInnerHTML: html
+  });
+}
 var FormulaControl = /** @class */function (_super) {
   __extends(FormulaControl, _super);
   function FormulaControl(props) {
     var _this = _super.call(this, props) || this;
-    Object.defineProperty(_this, "isUnmount", {
-      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, "handleSimpleInputChange", {
-      enumerable: true,
-      configurable: true,
-      writable: true,
-      value: function (value) {
-        var _a, _b;
-        var curValue = _this.outReplaceExpression(value);
-        (_b = (_a = _this.props) === null || _a === void 0 ? void 0 : _a.onChange) === null || _b === void 0 ? void 0 : _b.call(_a, curValue);
-      }
-    });
-    Object.defineProperty(_this, "handleInputChange", {
-      enumerable: true,
-      configurable: true,
-      writable: true,
-      value: function (value) {
-        var _a, _b;
-        (_b = (_a = _this.props) === null || _a === void 0 ? void 0 : _a.onChange) === null || _b === void 0 ? void 0 : _b.call(_a, value);
-      }
-    });
+    _this.handleSimpleInputChange = function (value) {
+      var _a, _b;
+      var curValue = _this.outReplaceExpression(value);
+      (_b = (_a = _this.props) === null || _a === void 0 ? void 0 : _a.onChange) === null || _b === void 0 ? void 0 : _b.call(_a, curValue);
+    };
+    _this.handleInputChange = function (value) {
+      var _a, _b;
+      (_b = (_a = _this.props) === null || _a === void 0 ? void 0 : _a.onChange) === null || _b === void 0 ? void 0 : _b.call(_a, value);
+    };
     _this.state = {
       variables: [],
-      variableMode: 'tabs'
+      variableMode: 'tabs',
+      formulaPickerOpen: false
     };
     return _this;
   }
-  Object.defineProperty(FormulaControl.prototype, "componentDidMount", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function () {
-      return __awaiter(this, void 0, void 0, function () {
-        var editorStore, variablesArr;
-        var _this = this;
-        return __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 = reaction(function () {
-                return editorStore === null || editorStore === void 0 ? void 0 : editorStore.appLocaleState;
-              }, function () {
-                return __awaiter(_this, void 0, void 0, function () {
-                  var variablesArr;
-                  return __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*/, getVariables(this)];
-                      case 1:
-                        variablesArr = _a.sent();
-                        this.setState({
-                          variables: variablesArr
-                        });
-                        return [2 /*return*/];
-                    }
-                  });
+  FormulaControl.prototype.componentDidMount = function () {
+    return __awaiter(this, void 0, void 0, function () {
+      var editorStore, variablesArr;
+      var _this = this;
+      return __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 = reaction(function () {
+              return editorStore === null || editorStore === void 0 ? void 0 : editorStore.appLocaleState;
+            }, function () {
+              return __awaiter(_this, void 0, void 0, function () {
+                var variablesArr;
+                return __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*/, getVariables(this)];
+                    case 1:
+                      variablesArr = _a.sent();
+                      this.setState({
+                        variables: variablesArr
+                      });
+                      return [2 /*return*/];
+                  }
                 });
               });
+            });
 
-              return [4 /*yield*/, getVariables(this)];
-            case 1:
-              variablesArr = _a.sent();
-              this.setState({
-                variables: variablesArr
-              });
-              return [2 /*return*/];
-          }
-        });
+            return [4 /*yield*/, getVariables(this)];
+          case 1:
+            variablesArr = _a.sent();
+            this.setState({
+              variables: variablesArr
+            });
+            return [2 /*return*/];
+        }
       });
-    }
-  });
+    });
+  };
 
-  Object.defineProperty(FormulaControl.prototype, "componentDidUpdate", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function (prevProps) {
-      return __awaiter(this, void 0, void 0, function () {
-        var variablesArr;
-        return __generator(this, function (_a) {
-          switch (_a.label) {
-            case 0:
-              if (!(this.props.data !== prevProps.data)) return [3 /*break*/, 2];
-              return [4 /*yield*/, getVariables(this)];
-            case 1:
-              variablesArr = _a.sent();
-              this.setState({
-                variables: variablesArr
-              });
-              _a.label = 2;
-            case 2:
-              return [2 /*return*/];
-          }
-        });
+  FormulaControl.prototype.componentDidUpdate = function (prevProps) {
+    return __awaiter(this, void 0, void 0, function () {
+      var variablesArr;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            if (!(this.props.data !== prevProps.data)) return [3 /*break*/, 2];
+            return [4 /*yield*/, getVariables(this)];
+          case 1:
+            variablesArr = _a.sent();
+            this.setState({
+              variables: variablesArr
+            });
+            _a.label = 2;
+          case 2:
+            return [2 /*return*/];
+        }
       });
-    }
-  });
+    });
+  };
 
-  Object.defineProperty(FormulaControl.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);
-    }
-  });
+  FormulaControl.prototype.componentWillUnmount = function () {
+    var _a;
+    this.isUnmount = true;
+    (_a = this.unReaction) === null || _a === void 0 ? void 0 : _a.call(this);
+  };
   /**
    * 将 ${xx}（非 \${xx}）替换成 \${xx}
    * 备注: 手动编辑时，自动处理掉 ${xx}，避免识别成 公式表达式
    */
-  Object.defineProperty(FormulaControl.prototype, "outReplaceExpression", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function (expression) {
-      if (expression && isString(expression) && isExpression(expression)) {
-        return expression.replace(/(^|[^\\])\$\{/g, '\\${');
-      }
-      return expression;
+  FormulaControl.prototype.outReplaceExpression = function (expression) {
+    if (expression && isString(expression) && isExpression(expression)) {
+      return expression.replace(/(^|[^\\])\$\{/g, '\\${');
     }
-  });
-  Object.defineProperty(FormulaControl.prototype, "inReplaceExpression", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function (expression) {
-      if (expression && isString(expression)) {
-        return expression.replace(/\\\$\{/g, '${');
-      }
-      return expression;
+    return expression;
+  };
+  FormulaControl.prototype.inReplaceExpression = function (expression) {
+    if (expression && isString(expression)) {
+      return expression.replace(/\\\$\{/g, '${');
     }
-  });
+    return expression;
+  };
   // 根据 name 值 判断当前表达式是否 存在循环引用问题
-  Object.defineProperty(FormulaControl.prototype, "isLoopExpression", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function (expression, selfName) {
-      if (!expression || !selfName || !isString(expression)) {
-        return false;
-      }
-      var variables = [];
-      try {
-        variables = FormulaExec.collect(expression);
-      } catch (e) {}
-      return variables.some(function (variable) {
-        return variable === selfName;
-      });
+  FormulaControl.prototype.isLoopExpression = function (expression, selfName) {
+    if (!expression || !selfName || !isString(expression)) {
+      return false;
     }
-  });
+    var variables = [];
+    try {
+      variables = FormulaExec.collect(expression);
+    } catch (e) {}
+    return variables.some(function (variable) {
+      return variable === selfName;
+    });
+  };
   // 判断是否是期望类型
-  Object.defineProperty(FormulaControl.prototype, "isExpectType", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function (value) {
-      if (value === null || value === undefined) {
-        return true; // 数值为空不进行类型识别
-      }
+  FormulaControl.prototype.isExpectType = function (value) {
+    if (value === null || value === undefined) {
+      return true; // 数值为空不进行类型识别
+    }
 
-      var rendererSchema = this.props.rendererSchema;
-      var expectType = this.props.valueType;
-      if (expectType === null || expectType === undefined) {
-        return true; // expectType为空，则不进行类型识别
-      }
-      // 当前数据域
-      var curData = this.getContextData();
-      if (rendererSchema.type === 'switch' && (rendererSchema.trueValue !== undefined || rendererSchema.falseValue !== undefined)) {
-        // 开关类型组件单独处理
-        return rendererSchema.trueValue === value || rendererSchema.falseValue === value;
-      } else if (expectType === 'number' && isNumber(value) || expectType === 'boolean' && isBoolean(value) || expectType === 'object' && isPlainObject(value) || expectType === 'array' && isArray(value)) {
-        return true;
-      } else if (isString(value)) {
-        if (isExpression(value)) {
-          // 根据公式运算结果判断类型
-          var formulaValue = FormulaExec.formula(value, curData);
-          if (expectType === 'number' && isNumber(formulaValue) || expectType === 'boolean' && isBoolean(formulaValue) || expectType === 'object' && isPlainObject(formulaValue) || expectType === 'array' && isArray(formulaValue) || expectType === 'string' && isString(formulaValue)) {
-            return true;
-          }
-        } else if (expectType === 'string') {
-          // 非公式字符串
+    var rendererSchema = this.props.rendererSchema;
+    var expectType = this.props.valueType;
+    if (expectType === null || expectType === undefined) {
+      return true; // expectType为空，则不进行类型识别
+    }
+    // 当前数据域
+    var curData = this.getContextData();
+    if (rendererSchema.type === 'switch' && (rendererSchema.trueValue !== undefined || rendererSchema.falseValue !== undefined)) {
+      // 开关类型组件单独处理
+      return rendererSchema.trueValue === value || rendererSchema.falseValue === value;
+    } else if (expectType === 'number' && isNumber(value) || expectType === 'boolean' && isBoolean(value) || expectType === 'object' && isPlainObject(value) || expectType === 'array' && isArray(value)) {
+      return true;
+    } else if (isString(value)) {
+      if (isExpression(value)) {
+        // 根据公式运算结果判断类型
+        var formulaValue = FormulaExec.formula(value, curData);
+        if (expectType === 'number' && isNumber(formulaValue) || expectType === 'boolean' && isBoolean(formulaValue) || expectType === 'object' && isPlainObject(formulaValue) || expectType === 'array' && isArray(formulaValue) || expectType === 'string' && isString(formulaValue)) {
           return true;
         }
+      } else if (expectType === 'string') {
+        // 非公式字符串
+        return true;
       }
-      return false;
     }
-  });
-  Object.defineProperty(FormulaControl.prototype, "matchDate", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function (str) {
-      var matchDate = /^(.+)?(\+|-)(\d+)(minute|min|hour|day|week|month|year|weekday|second|millisecond)s?$/i;
-      var m = matchDate.exec(str);
-      return m ? m[1] ? this.matchDate(m[1]) : true : false;
+    return false;
+  };
+  FormulaControl.prototype.matchDate = function (str) {
+    var matchDate = /^(.+)?(\+|-)(\d+)(minute|min|hour|day|week|month|year|weekday|second|millisecond)s?$/i;
+    var m = matchDate.exec(str);
+    return m ? m[1] ? this.matchDate(m[1]) : true : false;
+  };
+  FormulaControl.prototype.matchDateRange = function (str) {
+    if (/^(now|today)$/.test(str)) {
+      return true;
     }
-  });
-  Object.defineProperty(FormulaControl.prototype, "matchDateRange", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function (str) {
+    return this.matchDate(str);
+  };
+  // 日期类组件 & 是否存在快捷键判断
+  FormulaControl.prototype.hasDateShortcutkey = function (str) {
+    var _a;
+    var DateTimeType = this.props.DateTimeType;
+    if (DateTimeType === FormulaDateType.IsDate) {
       if (/^(now|today)$/.test(str)) {
         return true;
       }
       return this.matchDate(str);
-    }
-  });
-  // 日期类组件 & 是否存在快捷键判断
-  Object.defineProperty(FormulaControl.prototype, "hasDateShortcutkey", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function (str) {
-      var _a;
-      var DateTimeType = this.props.DateTimeType;
-      if (DateTimeType === FormulaDateType.IsDate) {
-        if (/^(now|today)$/.test(str)) {
-          return true;
-        }
-        return this.matchDate(str);
-      } else if (DateTimeType === FormulaDateType.IsRange) {
-        var start_end = (_a = str === null || str === void 0 ? void 0 : str.split) === null || _a === void 0 ? void 0 : _a.call(str, ',');
-        if (start_end && start_end.length === 2) {
-          return this.matchDateRange(start_end[0].trim()) && this.matchDateRange(start_end[1].trim());
-        }
+    } else if (DateTimeType === FormulaDateType.IsRange) {
+      var start_end = (_a = str === null || str === void 0 ? void 0 : str.split) === null || _a === void 0 ? void 0 : _a.call(str, ',');
+      if (start_end && start_end.length === 2) {
+        return this.matchDateRange(start_end[0].trim()) && this.matchDateRange(start_end[1].trim());
       }
-      // 非日期类组件使用，也直接false
-      // if (DateTimeType === FormulaDateType.NotDate) {
-      //   return false;
-      // }
-      return false;
     }
-  });
-  Object.defineProperty(FormulaControl.prototype, "transExpr", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function (str) {
-      if (typeof str === 'string' && (str === null || str === void 0 ? void 0 : str.slice(0, 2)) === '${' && (str === null || str === void 0 ? void 0 : str.slice(-1)) === '}') {
-        // 非最外层内容还存在表达式情况
-        if (isExpression(str.slice(2, -1))) {
-          return str;
-        }
-        if (str.lastIndexOf('${') > str.indexOf('}') && str.indexOf('}') > -1) {
-          return str;
-        }
-        return str.slice(2, -1);
+    // 非日期类组件使用，也直接false
+    // if (DateTimeType === FormulaDateType.NotDate) {
+    //   return false;
+    // }
+    return false;
+  };
+  FormulaControl.prototype.transExpr = function (str) {
+    if (typeof str === 'string' && (str === null || str === void 0 ? void 0 : str.slice(0, 2)) === '${' && (str === null || str === void 0 ? void 0 : str.slice(-1)) === '}') {
+      // 非最外层内容还存在表达式情况
+      if (isExpression(str.slice(2, -1))) {
+        return str;
       }
-      return str;
-    }
-  });
-  Object.defineProperty(FormulaControl.prototype, "handleConfirm", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function (value) {
-      var _a, _b;
-      var val = !value ? undefined : isExpression(value) || this.hasDateShortcutkey(value) ? value : "${".concat(value, "}");
-      (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.onChange) === null || _b === void 0 ? void 0 : _b.call(_a, val);
+      if (str.lastIndexOf('${') > str.indexOf('}') && str.indexOf('}') > -1) {
+        return str;
+      }
+      return str.slice(2, -1);
     }
-  });
+    return str;
+  };
+  FormulaControl.prototype.handleConfirm = function (value) {
+    var _a, _b;
+    value = value.replace(/\r\n|\r|\n/g, ' ');
+    var val = !value ? undefined : isExpression(value) || this.hasDateShortcutkey(value) ? value : "${".concat(value, "}");
+    (_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.handleFormulaClick = function () {
+    this.setState({
+      formulaPickerOpen: true
+    });
+  };
+  FormulaControl.prototype.closeFormulaPicker = function () {
+    this.setState({
+      formulaPickerOpen: false
+    });
+  };
   // 剔除掉一些用不上的属性
-  Object.defineProperty(FormulaControl.prototype, "filterCustomRendererProps", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function (rendererSchema) {
-      var _a, _b, _c;
-      var _d = this.props,
-        data = _d.data,
-        name = _d.name,
-        placeholder = _d.placeholder;
-      var curRendererSchema = null;
-      if (rendererSchema) {
-        curRendererSchema = Object.assign({}, rendererSchema, data, {
-          type: (_a = rendererSchema.type) !== null && _a !== void 0 ? _a : data.type,
-          name: (_c = (_b = rendererSchema.name) !== null && _b !== void 0 ? _b : data.name) !== null && _c !== void 0 ? _c : 'value'
-        });
-        // 默认要剔除的字段
-        var deleteProps = ['label', 'id', '$$id', 'className', 'style', 'readOnly', 'horizontal', 'size', 'remark', 'labelRemark', 'hidden', 'hiddenOn', 'visible', 'visibleOn', 'disabled', 'disabledOn', 'required', 'requiredOn', 'className', 'labelClassName', 'labelAlign', 'inputClassName', 'description', 'autoUpdate', 'prefix', 'suffix', 'unitOptions', 'keyboard', 'kilobitSeparator', 'value', 'inputControlClassName', 'css'];
-        // 当前组件要剔除的字段
-        if (this.props.needDeleteProps) {
-          deleteProps.push.apply(deleteProps, this.props.needDeleteProps);
-        }
-        if (name && name === 'min') {
-          // 避免min影响自身默认值设置
-          deleteProps.push('min');
-        }
-        if (name && name === 'max') {
-          // 避免max影响自身默认值设置
-          deleteProps.push('max');
-        }
-        curRendererSchema = omit(curRendererSchema, deleteProps);
-        // 设置可清空
-        curRendererSchema.clearable = true;
-        // 设置统一的占位提示
-        if (curRendererSchema.type === 'select') {
-          !curRendererSchema.placeholder && (curRendererSchema.placeholder = i18n("8f7ae284d0039fe05b9f57fd5ae3ede9"));
-          curRendererSchema.inputClassName = 'ae-editor-FormulaControl-select-style';
-        } else if (placeholder) {
-          curRendererSchema.placeholder = placeholder;
-        } else {
-          curRendererSchema.placeholder = i18n("e0c7ac5eb397512fdbe71600baa09dab");
-        }
-        // 设置popOverContainer
-        curRendererSchema.popOverContainer = window.document.body;
+  FormulaControl.prototype.filterCustomRendererProps = function (rendererSchema) {
+    var _a, _b, _c;
+    var _d = this.props,
+      data = _d.data,
+      name = _d.name,
+      placeholder = _d.placeholder;
+    var curRendererSchema = null;
+    if (rendererSchema) {
+      curRendererSchema = Object.assign({}, rendererSchema, data, {
+        type: (_a = rendererSchema.type) !== null && _a !== void 0 ? _a : data.type,
+        name: (_c = (_b = rendererSchema.name) !== null && _b !== void 0 ? _b : data.name) !== null && _c !== void 0 ? _c : 'value'
+      });
+      // 默认要剔除的字段
+      var deleteProps = ['label', 'id', '$$id', 'className', 'style', 'readOnly', 'horizontal', 'size', 'remark', 'labelRemark', 'static', 'staticOn', 'hidden', 'hiddenOn', 'visible', 'visibleOn', 'disabled', 'disabledOn', 'required', 'requiredOn', 'className', 'labelClassName', 'labelAlign', 'inputClassName', 'description', 'autoUpdate', 'prefix', 'suffix', 'unitOptions', 'keyboard', 'kilobitSeparator', 'value', 'inputControlClassName', 'css', 'validateApi', 'themeCss'];
+      // 当前组件要剔除的字段
+      if (this.props.needDeleteProps) {
+        deleteProps.push.apply(deleteProps, __spreadArray([], __read(this.props.needDeleteProps), false));
       }
-      // 对 schema 进行国际化翻译
-      if (this.appLocale && this.appCorpusData) {
-        return translateSchema(curRendererSchema, this.appCorpusData);
+      if (name && name === 'min') {
+        // 避免min影响自身默认值设置
+        deleteProps.push('min');
       }
-      return curRendererSchema;
-    }
-  });
-  Object.defineProperty(FormulaControl.prototype, "renderFormulaValue", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function (item) {
-      var html = {
-        __html: item.html
-      };
-      // bca-disable-next-line
-      return React__default.createElement("span", {
-        dangerouslySetInnerHTML: html
-      });
+      if (name && name === 'max') {
+        // 避免max影响自身默认值设置
+        deleteProps.push('max');
+      }
+      curRendererSchema = omit(curRendererSchema, deleteProps);
+      // 设置可清空
+      curRendererSchema.clearable = true;
+      // 设置统一的占位提示
+      if (curRendererSchema.type === 'select') {
+        !curRendererSchema.placeholder && (curRendererSchema.placeholder = i18n("8f7ae284d0039fe05b9f57fd5ae3ede9"));
+        curRendererSchema.inputClassName = 'ae-editor-FormulaControl-select-style';
+      } else if (placeholder) {
+        curRendererSchema.placeholder = placeholder;
+      } else {
+        curRendererSchema.placeholder = i18n("e0c7ac5eb397512fdbe71600baa09dab");
+      }
+      // 设置popOverContainer
+      curRendererSchema.popOverContainer = window.document.body;
     }
-  });
-  Object.defineProperty(FormulaControl.prototype, "getContextData", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function () {
-      var _a, _b, _c, _d;
-      // 当前数据域
-      return ((_c = (_b = (_a = this.props.data) === null || _a === void 0 ? void 0 : _a.__super) === null || _b === void 0 ? void 0 : _b.__props__) === null || _c === void 0 ? void 0 : _c.data) || ((_d = this.props.manager) === null || _d === void 0 ? void 0 : _d.amisStore) || {};
+    // 对 schema 进行国际化翻译
+    if (this.appLocale && this.appCorpusData) {
+      return translateSchema(curRendererSchema, this.appCorpusData);
     }
-  });
-  Object.defineProperty(FormulaControl.prototype, "render", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function () {
-      var _this = this;
-      var _a, _b;
-      var _c = this.props,
-        className = _c.className;
-        _c.label;
-        var value = _c.value,
-        header = _c.header;
-        _c.variables;
-        var placeholder = _c.placeholder,
-        simple = _c.simple,
-        rendererSchema = _c.rendererSchema,
-        rendererWrapper = _c.rendererWrapper,
-        manager = _c.manager,
-        _d = _c.useExternalFormData,
-        useExternalFormData = _d === void 0 ? false : _d,
-        render = _c.render,
-        rest = __rest(_c, ["className", "label", "value", "header", "variables", "placeholder", "simple", "rendererSchema", "rendererWrapper", "manager", "useExternalFormData", "render"]);
-      // 自身字段
-      var selfName = (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.name;
-      // 判断是否含有公式表达式
-      var isExpr = isExpression(value);
-      // 判断当前是否有循环引用，备注：非精准识别，待优化
-      var isLoop = false;
-      if (isExpr && (rendererSchema === null || rendererSchema === void 0 ? void 0 : rendererSchema.name)) {
-        isLoop = (rendererSchema === null || rendererSchema === void 0 ? void 0 : rendererSchema.name) ? this.isLoopExpression(value, rendererSchema === null || rendererSchema === void 0 ? void 0 : rendererSchema.name) : false;
+    return curRendererSchema;
+  };
+  FormulaControl.prototype.getContextData = function () {
+    var _a, _b, _c, _d, _e;
+    var curContextData = (_c = (_b = (_a = this.props.data) === null || _a === void 0 ? void 0 : _a.__super) === null || _b === void 0 ? void 0 : _b.__props__) === null || _c === void 0 ? void 0 : _c.data;
+    if (!curContextData) {
+      var curComp = (_d = this.props.node) === null || _d === void 0 ? void 0 : _d.getComponent();
+      if ((_e = curComp === null || curComp === void 0 ? void 0 : curComp.props) === null || _e === void 0 ? void 0 : _e.data) {
+        curContextData = curComp.props.data;
       }
-      // 判断是否含有公式表达式
-      var isTypeError = !this.isExpectType(value);
-      var exprValue = this.transExpr(value);
-      var isError = isLoop || isTypeError;
-      var highlightValue = isExpression(value) ? FormulaEditor.highlightValue(exprValue, this.state.variables) || {
-        html: exprValue
-      } : value;
-      // 公式表达式弹窗内容过滤
-      var filterValue = isExpression(value) ? exprValue : this.hasDateShortcutkey(value) ? value : undefined;
-      // 值 是表达式或日期快捷
-      var isFx = !simple && (isExpr || this.hasDateShortcutkey(value));
-      return React__default.createElement("div", {
-        className: cx('ae-editor-FormulaControl', isError ? 'is-has-tooltip' : '', className)
-      }, !simple && !isExpr && !this.hasDateShortcutkey(value) && !rendererSchema && React__default.createElement(InputBox, {
-        className: "ae-editor-FormulaControl-input",
-        value: this.inReplaceExpression(value),
-        clearable: true,
-        placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : i18n("e0c7ac5eb397512fdbe71600baa09dab"),
-        onChange: this.handleSimpleInputChange
-      }), !simple && !isExpr && !this.hasDateShortcutkey(value) && rendererSchema && React__default.createElement("div", {
-        className: cx('ae-editor-FormulaControl-custom-renderer', rendererWrapper ? 'border-wrapper' : '')
-      }, render('inner', this.filterCustomRendererProps(rendererSchema), {
-        inputOnly: true,
-        value: this.inReplaceExpression(value),
-        data: useExternalFormData ? __assign({}, this.props.data) : {},
-        onChange: this.handleSimpleInputChange,
-        manager: manager
-      })), isFx && React__default.createElement(TooltipWrapper, {
-        trigger: "hover",
-        placement: "top",
-        style: {
-          fontSize: '12px'
-        },
-        tooltip: {
-          tooltipTheme: 'dark',
-          mouseLeaveDelay: 20,
-          content: exprValue,
-          children: function () {
-            return _this.renderFormulaValue(highlightValue);
-          }
-        }
-      }, React__default.createElement("div", {
-        className: "ae-editor-FormulaControl-tooltipBox"
-      }, React__default.createElement(ResultBox, {
-        className: cx('ae-editor-FormulaControl-ResultBox', isError ? 'is-error' : ''),
-        allowInput: false,
-        clearable: true,
-        value: value,
-        result: {
-          html: this.hasDateShortcutkey(value) ? i18n("48942ef507ea38d8ead03f8bfdffae5a") : i18n("0d9d899edb456e8806a99850e9c38212")
-        },
-        itemRender: this.renderFormulaValue,
-        onChange: this.handleInputChange,
-        onResultChange: function () {
-          _this.handleInputChange(undefined);
-        }
-      }))), React__default.createElement(PickerContainer, {
-        showTitle: false,
-        bodyRender: function (_a) {
-          var _b;
-          _a.value;
-            var onChange = _a.onChange;
-          return React__default.createElement(FormulaEditor, __assign({}, rest, {
-            evalMode: true,
-            variableMode: (_b = rest.variableMode) !== null && _b !== void 0 ? _b : _this.state.variableMode,
-            variables: _this.state.variables,
-            header: header || i18n("a9400c408441f1f7f6d6954deb05ae9a"),
-            value: filterValue,
-            onChange: onChange,
-            selfVariableName: selfName
-          }));
-        },
-        value: value,
-        onConfirm: this.handleConfirm,
-        size: "md"
-      }, function (_a) {
-        var _b;
-        var onClick = _a.onClick;
-        return React__default.createElement(Button, {
-          className: "ae-editor-FormulaControl-button",
-          size: "sm",
-          tooltip: {
-            enterable: false,
-            content: i18n("303efd5ba79e639001b4328cd266dddc"),
-            placement: 'left',
-            mouseLeaveDelay: 0
-          },
-          onClick: onClick
-        }, React__default.createElement(Icon, {
-          icon: "function",
-          className: cx('ae-editor-FormulaControl-icon', 'icon', (_b = {}, _b['is-filled'] = !!isFx, _b))
-        }));
-      }), isError && React__default.createElement("div", {
-        className: "desc-msg error-msg"
-      }, isLoop ? i18n("7d92f998d24da41b58db140b1864f773") : i18n("b5cc1cd60cd694f45142dc52a5bf53fc")));
     }
-  });
-  Object.defineProperty(FormulaControl, "defaultProps", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: {
-      simple: false,
-      rendererWrapper: false,
-      DateTimeType: FormulaDateType.NotDate,
-      requiredDataPropsVariables: false
+    // 当前数据域
+    return curContextData;
+  };
+  FormulaControl.prototype.render = function () {
+    var _a;
+    var _this = this;
+    var _b, _c, _d;
+    var _e = this.props,
+      className = _e.className;
+      _e.label;
+      var value = _e.value,
+      header = _e.header,
+      placeholder = _e.placeholder,
+      simple = _e.simple,
+      rendererSchema = _e.rendererSchema,
+      rendererWrapper = _e.rendererWrapper,
+      manager = _e.manager,
+      _f = _e.useExternalFormData,
+      useExternalFormData = _f === void 0 ? false : _f,
+      customFormulaPicker = _e.customFormulaPicker;
+      _e.clearable;
+      var render = _e.render,
+      rest = __rest(_e, ["className", "label", "value", "header", "placeholder", "simple", "rendererSchema", "rendererWrapper", "manager", "useExternalFormData", "customFormulaPicker", "clearable", "render"]);
+    var _h = this.state,
+      formulaPickerOpen = _h.formulaPickerOpen,
+      variables = _h.variables,
+      variableMode = _h.variableMode;
+    // 自身字段
+    (_c = (_b = this.props) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.name;
+    // 判断是否含有公式表达式
+    var isExpr = isExpression(value);
+    // 判断当前是否有循环引用，备注：非精准识别，待优化
+    var isLoop = false;
+    if (isExpr && (rendererSchema === null || rendererSchema === void 0 ? void 0 : rendererSchema.name)) {
+      isLoop = (rendererSchema === null || rendererSchema === void 0 ? void 0 : rendererSchema.name) ? this.isLoopExpression(value, rendererSchema === null || rendererSchema === void 0 ? void 0 : rendererSchema.name) : false;
     }
-  });
+    // 判断是否含有公式表达式
+    // const isTypeError = !this.isExpectType(value);
+    var exprValue = this.transExpr(value);
+    var isError = isLoop;
+    var FormulaPickerCmp = customFormulaPicker !== null && customFormulaPicker !== void 0 ? customFormulaPicker : FormulaPicker;
+    var highlightValue = isExpression(value) ? FormulaEditor.highlightValue(exprValue, variables) || {
+      html: exprValue
+    } : value;
+    // 公式表达式弹窗内容过滤
+    var filterValue = isExpression(value) ? exprValue : this.hasDateShortcutkey(value) ? value : undefined;
+    // 值 是表达式或日期快捷
+    var isFx = !simple && (isExpr || this.hasDateShortcutkey(value));
+    return React__default.createElement("div", {
+      className: cx('ae-editor-FormulaControl', isError ? 'is-has-tooltip' : '', className)
+    }, !simple && !isExpr && !this.hasDateShortcutkey(value) && !rendererSchema && React__default.createElement(InputBox, {
+      className: "ae-editor-FormulaControl-input",
+      value: this.inReplaceExpression(value),
+      clearable: true,
+      placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : i18n("e0c7ac5eb397512fdbe71600baa09dab"),
+      onChange: this.handleSimpleInputChange
+    }), !simple && !isExpr && !this.hasDateShortcutkey(value) && rendererSchema && React__default.createElement("div", {
+      className: cx('ae-editor-FormulaControl-custom-renderer', rendererWrapper ? 'border-wrapper' : '')
+    }, render('inner', this.filterCustomRendererProps(rendererSchema), {
+      inputOnly: true,
+      value: this.inReplaceExpression(value),
+      data: useExternalFormData ? __assign({}, this.props.data) : {},
+      onChange: this.handleSimpleInputChange,
+      manager: manager
+    })), isFx && React__default.createElement(TooltipWrapper, {
+      trigger: "hover",
+      placement: "top",
+      style: {
+        fontSize: '12px'
+      },
+      tooltip: {
+        tooltipTheme: 'dark',
+        mouseLeaveDelay: 20,
+        content: exprValue,
+        children: function () {
+          return renderFormulaValue(highlightValue);
+        }
+      }
+    }, React__default.createElement("div", {
+      className: "ae-editor-FormulaControl-tooltipBox"
+    }, React__default.createElement("div", {
+      className: "ae-editor-FormulaControl-ResultBox-wrapper",
+      onClick: this.handleFormulaClick
+    }, React__default.createElement(ResultBox, {
+      className: cx('ae-editor-FormulaControl-ResultBox', isError ? 'is-error' : ''),
+      allowInput: false,
+      value: value,
+      result: {
+        html: this.hasDateShortcutkey(value) ? value : highlightValue.html
+      },
+      itemRender: renderFormulaValue,
+      onChange: this.handleInputChange,
+      onResultChange: function () {
+        _this.handleInputChange(undefined);
+      }
+    })), value && React__default.createElement(Icon, {
+      icon: "input-clear",
+      className: "input-clear-icon",
+      iconContent: "InputText-clear",
+      onClick: function () {
+        return _this.handleInputChange('');
+      }
+    }))), React__default.createElement(Button, {
+      className: "ae-editor-FormulaControl-button",
+      size: "sm",
+      tooltip: {
+        enterable: false,
+        content: i18n("303efd5ba79e639001b4328cd266dddc"),
+        tooltipTheme: 'dark',
+        placement: 'left',
+        mouseLeaveDelay: 0
+      },
+      onClick: this.handleFormulaClick
+    }, React__default.createElement(Icon, {
+      icon: "input-fx",
+      className: cx('ae-editor-FormulaControl-icon', 'icon', (_a = {}, _a['is-filled'] = !!isFx, _a))
+    })), isError && React__default.createElement("div", {
+      className: "desc-msg error-msg"
+    }, isLoop ? i18n("7d92f998d24da41b58db140b1864f773") : i18n("b5cc1cd60cd694f45142dc52a5bf53fc")), formulaPickerOpen ? React__default.createElement(FormulaPickerCmp, __assign({}, this.props, {
+      value: filterValue,
+      initable: true,
+      header: header,
+      variables: variables,
+      variableMode: (_d = rest.variableMode) !== null && _d !== void 0 ? _d : variableMode,
+      evalMode: true,
+      onClose: this.closeFormulaPicker,
+      onConfirm: this.handleConfirm
+    })) : null);
+  };
+  FormulaControl.defaultProps = {
+    simple: false,
+    rendererWrapper: false,
+    DateTimeType: FormulaDateType.NotDate,
+    requiredDataPropsVariables: false
+  };
   __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object]), __metadata("design:returntype", Object)], FormulaControl.prototype, "outReplaceExpression", null);
   __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object]), __metadata("design:returntype", Object)], FormulaControl.prototype, "inReplaceExpression", null);
   __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object, String]), __metadata("design:returntype", Boolean)], FormulaControl.prototype, "isLoopExpression", null);
@@ -545,8 +450,9 @@ var FormulaControl = /** @class */function (_super) {
   __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [String]), __metadata("design:returntype", Boolean)], FormulaControl.prototype, "hasDateShortcutkey", null);
   __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [String]), __metadata("design:returntype", void 0)], FormulaControl.prototype, "transExpr", null);
   __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object]), __metadata("design:returntype", void 0)], FormulaControl.prototype, "handleConfirm", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", void 0)], FormulaControl.prototype, "handleFormulaClick", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", void 0)], FormulaControl.prototype, "closeFormulaPicker", null);
   __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object]), __metadata("design:returntype", void 0)], FormulaControl.prototype, "filterCustomRendererProps", null);
-  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object]), __metadata("design:returntype", void 0)], FormulaControl.prototype, "renderFormulaValue", null);
   __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", void 0)], FormulaControl.prototype, "getContextData", null);
   return FormulaControl;
 }(React__default.Component);
@@ -556,9 +462,10 @@ var FormulaControl = /** @class */function (_super) {
     return _super !== null && _super.apply(this, arguments) || this;
   }
   FormulaControlRenderer = __decorate([FormItem({
-    type: 'ae-formulaControl'
+    type: 'ae-formulaControl',
+    detectProps: ['rendererSchema']
   })], FormulaControlRenderer);
   return FormulaControlRenderer;
 })(FormulaControl);
 
-export { FormulaDateType, FormulaControl as default };
+export { FormulaDateType, FormulaControl as default, renderFormulaValue };