amis-editor 6.5.0 → 6.7.0

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

@@ -1,20 +1,20 @@
 /**
- * amis-editor v6.5.0
- * build time: 2024-05-31
+ * amis-editor v6.7.0
+ * build time: 2024-08-06
  * Copyright 2018-2024 @fex
  */
 
-import { __extends, __awaiter, __generator, __assign, __rest, __decorate, __metadata } from 'tslib';
+import { __extends, __awaiter, __generator, __assign, __spreadArray, __read, __rest, __decorate, __metadata } from 'tslib';
 import React__default from 'react';
 import cx from 'classnames';
 import { Icon, Spinner, TooltipWrapper, FormItem } from 'amis';
-import { render, autobind } from 'amis-core';
-import { FormulaEditor, CodeMirrorEditor } from 'amis-ui';
+import { RootClose, isMobile, render, autobind } from 'amis-core';
+import { Overlay, PopOver, VariableList, FormulaEditor, CodeMirrorEditor } from 'amis-ui';
 import { editorFactory, FormulaPlugin } from './plugin.js';
 import FormulaPicker from './FormulaPicker.js';
 import { reaction } from 'mobx';
 import { renderFormulaValue } from '../FormulaControl.js';
-import { getVariables } from 'amis-editor-core';
+import { getQuickVariables, getVariables } from 'amis-editor-core';
 import { findDOMNode } from 'react-dom';
 import { i18n } from 'i18n-runtime';
 
@@ -30,37 +30,53 @@ var TextareaFormulaControl = /** @class */function (_super) {
     _this.state = {
       value: _this.props.value || '',
       variables: [],
+      quickVariables: [],
       formulaPickerOpen: false,
       formulaPickerValue: '',
       isFullscreen: false,
       tooltipStyle: {},
-      loading: false
+      loading: false,
+      menuIsOpened: false,
+      quickVariablesIsOpened: false
     };
     return _this;
   }
   TextareaFormulaControl.prototype.componentDidMount = function () {
     return __awaiter(this, void 0, void 0, function () {
-      var editorStore;
+      var editorStore, variables, quickVariables;
       var _this = this;
       return __generator(this, function (_a) {
-        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 () {
-            return __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*/];
+        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 () {
+                return __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*/];
+                });
+              });
             });
-          });
-        });
-        if (this.tooltipRef.current) {
-          this.tooltipRef.current.addEventListener('mouseleave', this.hiddenToolTip);
+            if (this.tooltipRef.current) {
+              this.tooltipRef.current.addEventListener('mouseleave', this.hiddenToolTip);
+            }
+            return [4 /*yield*/, getVariables(this)];
+          case 1:
+            variables = _a.sent();
+            return [4 /*yield*/, getQuickVariables(this)];
+          case 2:
+            quickVariables = _a.sent();
+            this.setState({
+              variables: variables,
+              quickVariables: quickVariables
+            });
+            return [2 /*return*/];
         }
-        return [2 /*return*/];
       });
     });
   };
@@ -85,6 +101,9 @@ var TextareaFormulaControl = /** @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);
   };
+  TextareaFormulaControl.prototype.menuRef = function (ref) {
+    this.buttonTarget = ref;
+  };
   TextareaFormulaControl.prototype.onExpressionMouseEnter = function (e, expression, brace) {
     var _a;
     var wrapperRect = (_a = this.wrapRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
@@ -145,11 +164,12 @@ var TextareaFormulaControl = /** @class */function (_super) {
   };
   TextareaFormulaControl.prototype.handleEditorMounted = function (cm, editor) {
     var _this = this;
-    var variables = this.state.variables || this.props.variables || [];
+    var variables = this.state.variables || [];
+    var quickVariables = this.state.quickVariables || [];
     this.editorPlugin = new FormulaPlugin(editor, {
       getProps: function () {
         return __assign(__assign({}, _this.props), {
-          variables: variables
+          variables: __spreadArray(__spreadArray([], __read(variables), false), __read(quickVariables), false)
         });
       },
       onExpressionMouseEnter: this.onExpressionMouseEnter,
@@ -258,6 +278,129 @@ var TextareaFormulaControl = /** @class */function (_super) {
       insertContent: this.editorPlugin.insertContent
     });
   };
+  TextareaFormulaControl.prototype.closeMenuOuter = function () {
+    this.setState({
+      menuIsOpened: false
+    });
+  };
+  TextareaFormulaControl.prototype.closeQuickVariablesOuter = function () {
+    this.setState({
+      quickVariablesIsOpened: false
+    });
+  };
+  TextareaFormulaControl.prototype.renderMenuOuter = function () {
+    var _this = this;
+    var _a = this.props,
+      popOverContainer = _a.popOverContainer,
+      cx = _a.classnames,
+      ns = _a.classPrefix;
+    var menuIsOpened = this.state.menuIsOpened;
+    return React__default.createElement(Overlay, {
+      container: popOverContainer || this.wrapRef.current,
+      target: function () {
+        return _this.wrapRef.current;
+      },
+      placement: "right-bottom-right-top",
+      show: true
+    }, React__default.createElement(PopOver, {
+      classPrefix: ns,
+      className: cx('DropDown-popover')
+    }, React__default.createElement(RootClose, {
+      disabled: !menuIsOpened,
+      onRootClose: this.closeMenuOuter
+    }, function (ref) {
+      return React__default.createElement("ul", {
+        className: cx('DropDown-menu-root', 'DropDown-menu', {
+          'is-mobile': isMobile()
+        }),
+        onClick: _this.closeMenuOuter,
+        ref: ref
+      }, React__default.createElement("li", {
+        onClick: function () {
+          return _this.setState({
+            quickVariablesIsOpened: true
+          });
+        }
+      }, "\u5FEB\u6377\u53D8\u91CF"), React__default.createElement("li", {
+        onClick: _this.handleFormulaClick
+      }, "\u51FD\u6570\u8BA1\u7B97"));
+    })));
+  };
+  TextareaFormulaControl.prototype.renderQuickVariablesOuter = function () {
+    var _this = this;
+    var _a = this.props,
+      popOverContainer = _a.popOverContainer,
+      cx = _a.classnames,
+      ns = _a.classPrefix;
+    var _b = this.state,
+      quickVariables = _b.quickVariables,
+      quickVariablesIsOpened = _b.quickVariablesIsOpened;
+    return React__default.createElement(Overlay, {
+      container: popOverContainer || this.wrapRef.current,
+      target: function () {
+        return _this.wrapRef.current;
+      },
+      placement: "right-bottom-right-top",
+      show: true
+    }, React__default.createElement(PopOver, {
+      classPrefix: ns,
+      className: cx('DropDown-popover')
+    }, React__default.createElement(RootClose, {
+      disabled: !quickVariablesIsOpened,
+      onRootClose: this.closeQuickVariablesOuter
+    }, function (ref) {
+      return React__default.createElement("ul", {
+        className: cx('DropDown-menu-root', 'DropDown-menu', {
+          'is-mobile': isMobile()
+        }),
+        ref: ref
+      }, React__default.createElement(VariableList, {
+        className: cx('FormulaEditor-VariableList', 'FormulaEditor-VariableList-root'),
+        data: quickVariables,
+        onSelect: _this.handleQuickVariableSelect,
+        popOverContainer: popOverContainer,
+        simplifyMemberOprs: true
+      }));
+    })));
+  };
+  TextareaFormulaControl.prototype.handleQuickVariableSelect = function (item) {
+    var _this = this;
+    var value = this.props.value || '';
+    var newValue = value + '${' + item.value + '}';
+    this.handleOnChange(newValue);
+    this.closeQuickVariablesOuter();
+    setTimeout(function () {
+      _this.editorAutoMark();
+    }, 100);
+  };
+  TextareaFormulaControl.prototype.renderButton = function () {
+    var _this = this;
+    var _a = this.props;
+      _a.loading;
+      var quickVariables = _a.quickVariables;
+    var _b = this.state,
+      menuIsOpened = _b.menuIsOpened,
+      quickVariablesIsOpened = _b.quickVariablesIsOpened;
+    return React__default.createElement("div", {
+      ref: this.menuRef
+    }, quickVariables ? React__default.createElement("a", {
+      onClick: function () {
+        return _this.setState({
+          menuIsOpened: true
+        });
+      }
+    }, React__default.createElement(Icon, {
+      icon: "add",
+      className: cx('ae-TplFormulaControl-icon', 'icon')
+    })) : React__default.createElement("a", {
+      "data-tooltip": i18n("a9400c408441f1f7f6d6954deb05ae9a"),
+      "data-position": "top",
+      onClick: this.handleFormulaClick
+    }, React__default.createElement(Icon, {
+      icon: "input-add-fx",
+      className: "icon"
+    })), menuIsOpened ? this.renderMenuOuter() : null, quickVariablesIsOpened ? this.renderQuickVariablesOuter() : null);
+  };
   TextareaFormulaControl.prototype.render = function () {
     var _this = this;
     var _a = this.props,
@@ -268,10 +411,11 @@ var TextareaFormulaControl = /** @class */function (_super) {
       height = _a.height,
       additionalMenus = _a.additionalMenus,
       onOverallClick = _a.onOverallClick,
-      customFormulaPicker = _a.customFormulaPicker,
-      _b = _a.allowFullscreen,
+      customFormulaPicker = _a.customFormulaPicker;
+      _a.quickVariables;
+      var _b = _a.allowFullscreen,
       allowFullscreen = _b === void 0 ? true : _b,
-      rest = __rest(_a, ["className", "header", "label", "placeholder", "height", "additionalMenus", "onOverallClick", "customFormulaPicker", "allowFullscreen"]);
+      rest = __rest(_a, ["className", "header", "label", "placeholder", "height", "additionalMenus", "onOverallClick", "customFormulaPicker", "quickVariables", "allowFullscreen"]);
     var _c = this.state,
       formulaPickerOpen = _c.formulaPickerOpen,
       formulaPickerValue = _c.formulaPickerValue,
@@ -325,14 +469,7 @@ var TextareaFormulaControl = /** @class */function (_super) {
       show: true,
       icon: "reload",
       size: "sm"
-    }) : React__default.createElement("a", {
-      "data-tooltip": i18n("a9400c408441f1f7f6d6954deb05ae9a"),
-      "data-position": "top",
-      onClick: this.handleFormulaClick
-    }, React__default.createElement(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) {
+    }) : this.renderButton()), Array.isArray(additionalMenus) && additionalMenus.length > 0 && (additionalMenus === null || additionalMenus === void 0 ? void 0 : additionalMenus.map(function (item, i) {
       return React__default.createElement("li", {
         key: i
       }, item.icon ? React__default.createElement("a", {
@@ -393,6 +530,7 @@ var TextareaFormulaControl = /** @class */function (_super) {
     height: 100,
     placeholder: i18n("02cc4f8f5a9aefbc03c778f7a5c989c7")
   };
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [HTMLDivElement]), __metadata("design:returntype", void 0)], TextareaFormulaControl.prototype, "menuRef", null);
   __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object, String, Array]), __metadata("design:returntype", void 0)], TextareaFormulaControl.prototype, "onExpressionMouseEnter", null);
   __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", void 0)], TextareaFormulaControl.prototype, "hiddenToolTip", null);
   __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", void 0)], TextareaFormulaControl.prototype, "closeFormulaPicker", null);
@@ -405,6 +543,12 @@ var TextareaFormulaControl = /** @class */function (_super) {
   __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object, String]), __metadata("design:returntype", Promise)], TextareaFormulaControl.prototype, "handleFormulaClick", null);
   __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", void 0)], TextareaFormulaControl.prototype, "editorAutoMark", null);
   __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object, Object]), __metadata("design:returntype", void 0)], TextareaFormulaControl.prototype, "handleAddtionalMenuClick", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", void 0)], TextareaFormulaControl.prototype, "closeMenuOuter", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", void 0)], TextareaFormulaControl.prototype, "closeQuickVariablesOuter", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", void 0)], TextareaFormulaControl.prototype, "renderMenuOuter", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", void 0)], TextareaFormulaControl.prototype, "renderQuickVariablesOuter", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object]), __metadata("design:returntype", void 0)], TextareaFormulaControl.prototype, "handleQuickVariableSelect", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", void 0)], TextareaFormulaControl.prototype, "renderButton", null);
   return TextareaFormulaControl;
 }(React__default.Component);
 /** @class */(function (_super) {
@@ -419,4 +563,4 @@ var TextareaFormulaControl = /** @class */function (_super) {
 })(TextareaFormulaControl);
 
 export { TextareaFormulaControl };
-window.amisEditorVersionInfo={version:'6.5.0',buildTime:'2024-05-31'};
+window.amisEditorVersionInfo={version:'6.7.0',buildTime:'2024-08-06'};

package/esm/renderer/textarea-formula/plugin.js

@@ -1,6 +1,6 @@
 /**
- * amis-editor v6.5.0
- * build time: 2024-05-31
+ * amis-editor v6.7.0
+ * build time: 2024-08-06
  * Copyright 2018-2024 @fex
  */
 
@@ -179,7 +179,7 @@ var FormulaPlugin = /** @class */ (function () {
         if (className === void 0) { className = 'cm-expression'; }
         var _b = this.config, onExpressionMouseEnter = _b.onExpressionMouseEnter, getProps = _b.getProps, showPopover = _b.showPopover, showClearIcon = _b.showClearIcon;
         var variables = (_a = getProps()) === null || _a === void 0 ? void 0 : _a.variables;
-        var highlightValue = FormulaEditor.highlightValue(expression, variables) || {
+        var highlightValue = FormulaEditor.highlightValue(expression, variables, true, false) || {
             html: expression
         };
         var wrap = document.createElement('span');
@@ -231,4 +231,4 @@ var FormulaPlugin = /** @class */ (function () {
 }());
 
 export { FormulaPlugin, editorFactory };
-window.amisEditorVersionInfo={version:'6.5.0',buildTime:'2024-05-31'};
+window.amisEditorVersionInfo={version:'6.7.0',buildTime:'2024-08-06'};

package/esm/tpl/api.js

@@ -1,6 +1,6 @@
 /**
- * amis-editor v6.5.0
- * build time: 2024-05-31
+ * amis-editor v6.7.0
+ * build time: 2024-08-06
  * Copyright 2018-2024 @fex
  */
 
@@ -545,4 +545,4 @@ setSchemaTpl('loadingConfig', function (patch, _a) {
     }
   });
 });
-window.amisEditorVersionInfo={version:'6.5.0',buildTime:'2024-05-31'};
+window.amisEditorVersionInfo={version:'6.7.0',buildTime:'2024-08-06'};

package/esm/tpl/common.js

@@ -1,6 +1,6 @@
 /**
- * amis-editor v6.5.0
- * build time: 2024-05-31
+ * amis-editor v6.7.0
+ * build time: 2024-08-06
  * Copyright 2018-2024 @fex
  */
 
@@ -88,9 +88,12 @@ setSchemaTpl('formItemMode', function (config) {
     }, {
       label: i18n("75ac842f8e77305846f1d776f97dfaf8"),
       value: 'normal'
-    }, (config === null || config === void 0 ? void 0 : config.isForm) ? null : {
+    }, !(config === null || config === void 0 ? void 0 : config.isForm) && {
       label: i18n("2dde3029c4170a1c8e961a90766e0194"),
       value: ''
+    }, (config === null || config === void 0 ? void 0 : config.isForm) && {
+      label: '网格',
+      value: 'flex'
     }].filter(function (i) {
       return i;
     }),
@@ -225,6 +228,21 @@ setSchemaTpl('labelHide', function () {
     visibleOn: 'this.__props__ && this.__props__.formMode === "horizontal" || this.mode === "horizontal"'
   });
 });
+setSchemaTpl('theme:labelHide', function () {
+  return getSchemaTpl('switch', {
+    name: '__label',
+    label: i18n("4e9ce9dfe13d97031d228fc5ae229f0d"),
+    value: '${label === false}',
+    onChange: function (value, origin, item, form) {
+      if (value) {
+        form.setValueByName('$$tempLabel', form.getValueByName('label') || item.label);
+        form.setValueByName('label', false);
+      } else {
+        form.setValueByName('label', form.getValueByName('$$tempLabel') || item['$$tempLabel'] || '');
+      }
+    }
+  });
+});
 setSchemaTpl('placeholder', {
   label: i18n("940b12c19fcf7aced0cdd164edc9acbc"),
   name: 'placeholder',
@@ -1471,4 +1489,4 @@ setSchemaTpl('signBtn', function (options) {
     }]
   };
 });
-window.amisEditorVersionInfo={version:'6.5.0',buildTime:'2024-05-31'};
+window.amisEditorVersionInfo={version:'6.7.0',buildTime:'2024-08-06'};

package/esm/tpl/horizontal.js

@@ -1,6 +1,6 @@
 /**
- * amis-editor v6.5.0
- * build time: 2024-05-31
+ * amis-editor v6.7.0
+ * build time: 2024-08-06
  * Copyright 2018-2024 @fex
  */
 
@@ -253,4 +253,4 @@ setSchemaTpl('subFormHorizontal', {
     }
   }]
 });
-window.amisEditorVersionInfo={version:'6.5.0',buildTime:'2024-05-31'};
+window.amisEditorVersionInfo={version:'6.7.0',buildTime:'2024-08-06'};

package/esm/tpl/layout.js

@@ -1,6 +1,6 @@
 /**
- * amis-editor v6.5.0
- * build time: 2024-05-31
+ * amis-editor v6.7.0
+ * build time: 2024-08-06
  * Copyright 2018-2024 @fex
  */
 
@@ -1005,4 +1005,4 @@ setSchemaTpl('layout:wrapper-contanier', function (config) {
     visibleOn: config === null || config === void 0 ? void 0 : config.visibleOn
   };
 });
-window.amisEditorVersionInfo={version:'6.5.0',buildTime:'2024-05-31'};
+window.amisEditorVersionInfo={version:'6.7.0',buildTime:'2024-08-06'};

package/esm/tpl/options.js

@@ -1,6 +1,6 @@
 /**
- * amis-editor v6.5.0
- * build time: 2024-05-31
+ * amis-editor v6.7.0
+ * build time: 2024-08-06
  * Copyright 2018-2024 @fex
  */
 
@@ -661,4 +661,4 @@ setSchemaTpl('optionDeleteControl', function (params) {
     }
   }));
 });
-window.amisEditorVersionInfo={version:'6.5.0',buildTime:'2024-05-31'};
+window.amisEditorVersionInfo={version:'6.7.0',buildTime:'2024-08-06'};

package/esm/tpl/remark.js

@@ -1,6 +1,6 @@
 /**
- * amis-editor v6.5.0
- * build time: 2024-05-31
+ * amis-editor v6.7.0
+ * build time: 2024-08-06
  * Copyright 2018-2024 @fex
  */
 
@@ -8,14 +8,18 @@ import { setSchemaTpl } from 'amis-editor-core';
 import { remarkTpl } from '../component/BaseControl.js';
 import { i18n } from 'i18n-runtime';
 
-setSchemaTpl('remark', remarkTpl({
-  name: 'remark',
-  label: i18n("ff255db9b108589abd5c649e2a02e3f1"),
-  labelRemark: i18n("9e783b34207fe24bc488136faba65442")
-}));
-setSchemaTpl('labelRemark', remarkTpl({
-  name: 'labelRemark',
-  label: i18n("3ba265c6b63bde0319822afd6b9a649d"),
-  labelRemark: i18n("7ad83bbe4646a0011ece7fd338d1e189")
-}));
-window.amisEditorVersionInfo={version:'6.5.0',buildTime:'2024-05-31'};
+setSchemaTpl('remark', function () {
+  return remarkTpl({
+    name: 'remark',
+    label: i18n("ff255db9b108589abd5c649e2a02e3f1"),
+    labelRemark: i18n("9e783b34207fe24bc488136faba65442")
+  });
+});
+setSchemaTpl('labelRemark', function () {
+  return remarkTpl({
+    name: 'labelRemark',
+    label: i18n("3ba265c6b63bde0319822afd6b9a649d"),
+    labelRemark: i18n("7ad83bbe4646a0011ece7fd338d1e189")
+  });
+});
+window.amisEditorVersionInfo={version:'6.7.0',buildTime:'2024-08-06'};