amis-editor 5.2.5-beta.7 → 5.3.0

package/lib/renderer/TplFormulaControl.js

@@ -0,0 +1,400 @@
+/**
+ * amis-editor v5.3.0
+ * Copyright 2018-2023 @fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var cx = require('classnames');
+var mobx = require('mobx');
+var amisUi = require('amis-ui');
+var amis = require('amis');
+var amisCore = require('amis-core');
+var plugin = require('./textarea-formula/plugin.js');
+var utils = require('./textarea-formula/utils.js');
+var FormulaControl = require('./FormulaControl.js');
+var FormulaPicker = require('./textarea-formula/FormulaPicker.js');
+var 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);
+
+/**
+ * @file 长文本公式输入框
+ */
+var preInputLocation = {
+  start: 0,
+  end: 0
+};
+var TplFormulaControl = /** @class */function (_super) {
+  tslib.__extends(TplFormulaControl, _super);
+  function TplFormulaControl(props) {
+    var _this = _super.call(this, props) || this;
+    _this.wrapRef = React__default["default"].createRef();
+    _this.tooltipRef = React__default["default"].createRef();
+    _this.state = {
+      value: '',
+      variables: [],
+      formulaPickerOpen: false,
+      formulaPickerValue: '',
+      tooltipStyle: {
+        display: 'none'
+      }
+    };
+    return _this;
+  }
+  TplFormulaControl.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
+            });
+            if (this.tooltipRef.current) {
+              this.tooltipRef.current.addEventListener('mouseleave', this.hiddenToolTip);
+            }
+            if (this.wrapRef.current) {
+              this.wrapRef.current.addEventListener('keydown', this.handleKeyDown, true);
+            }
+            return [2 /*return*/];
+        }
+      });
+    });
+  };
+
+  TplFormulaControl.prototype.componentDidUpdate = function (prevProps) {
+    return tslib.__awaiter(this, void 0, void 0, function () {
+      var variablesArr;
+      return tslib.__generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            if (!(this.props.data !== prevProps.data)) return [3 /*break*/, 2];
+            return [4 /*yield*/, utils.getVariables(this)];
+          case 1:
+            variablesArr = _a.sent();
+            this.setState({
+              variables: variablesArr
+            });
+            _a.label = 2;
+          case 2:
+            return [2 /*return*/];
+        }
+      });
+    });
+  };
+
+  TplFormulaControl.prototype.componentWillUnmount = function () {
+    var _a, _b;
+    if (this.tooltipRef.current) {
+      this.tooltipRef.current.removeEventListener('mouseleave', this.hiddenToolTip);
+    }
+    if (this.wrapRef.current) {
+      this.wrapRef.current.removeEventListener('keydown', this.handleKeyDown);
+    }
+    (_a = this.editorPlugin) === null || _a === void 0 ? void 0 : _a.dispose();
+    (_b = this.unReaction) === null || _b === void 0 ? void 0 : _b.call(this);
+  };
+  TplFormulaControl.prototype.onExpressionClick = function (expression, brace) {
+    this.setState({
+      formulaPickerValue: expression,
+      formulaPickerOpen: true,
+      expressionBrace: brace
+    });
+  };
+  TplFormulaControl.prototype.onExpressionMouseEnter = function (e, expression, brace) {
+    var _a;
+    var wrapperRect = (_a = this.wrapRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    var expressionRect = e.target.getBoundingClientRect();
+    if (!wrapperRect) {
+      return;
+    }
+    var left = expressionRect.left - wrapperRect.left;
+    this.setState({
+      tooltipStyle: {
+        left: "".concat(left, "px"),
+        width: "".concat(expressionRect.width, "px")
+      },
+      formulaPickerValue: expression,
+      expressionBrace: brace
+    });
+  };
+  TplFormulaControl.prototype.hiddenToolTip = function () {
+    this.setState({
+      tooltipStyle: {
+        display: 'none'
+      }
+    });
+  };
+  TplFormulaControl.prototype.handleKeyDown = function (e) {
+    // 组件禁止回车折行，否则会导致内容超过一行
+    if (e.key === 'Enter') {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  };
+  TplFormulaControl.prototype.closeFormulaPicker = function () {
+    this.setState({
+      formulaPickerOpen: false
+    });
+  };
+  TplFormulaControl.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
+    });
+  };
+  TplFormulaControl.prototype.handleOnChange = function (value) {
+    var _a, _b;
+    this.checkOpenFormulaPicker(value);
+    (_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, value);
+  };
+  // 检测用户输入'${}'自动打开表达式弹窗
+  TplFormulaControl.prototype.checkOpenFormulaPicker = function (value) {
+    var _a;
+    var preLength = ((_a = this.props.value) === null || _a === void 0 ? void 0 : _a.length) || 0;
+    // 删除了文本，无需检测
+    if (value.length < preLength || value === this.props.value) {
+      return;
+    }
+    var left = 0;
+    var right = 0;
+    var length = value.length;
+    while (left < preLength && value.charAt(left) === this.props.value.charAt(left)) {
+      left++;
+    }
+    while (right < preLength && value.charAt(length - 1 - right) === this.props.value.charAt(preLength - 1 - right)) {
+      right++;
+    }
+    if ((preInputLocation === null || preInputLocation === void 0 ? void 0 : preInputLocation.end) !== left) {
+      preInputLocation = null;
+    }
+    var start = preInputLocation ? preInputLocation.start : left;
+    var end = left === length - right ? left + 1 : length - right;
+    var inputText = value.substring(start, end);
+    if (/\$|\{|\}$/.test(inputText)) {
+      if (/\$\{\}/.test(inputText)) {
+        var newValue = value.slice(0, start) + inputText.replace('${}', '') + value.slice(end);
+        this.props.onChange(newValue);
+        var corsur = this.editorPlugin.getCorsur();
+        this.setState({
+          formulaPickerOpen: true,
+          formulaPickerValue: '',
+          expressionBrace: [{
+            line: corsur === null || corsur === void 0 ? void 0 : corsur.line,
+            ch: end - 3
+          }, {
+            line: corsur === null || corsur === void 0 ? void 0 : corsur.line,
+            ch: end
+          }]
+        });
+        preInputLocation = null;
+      } else {
+        preInputLocation = tslib.__assign(tslib.__assign({
+          start: left
+        }, preInputLocation), {
+          end: end
+        });
+      }
+    } else {
+      preInputLocation = null;
+    }
+  };
+  TplFormulaControl.prototype.handleClear = function () {
+    var _a;
+    (_a = this.editorPlugin) === null || _a === void 0 ? void 0 : _a.setValue('');
+  };
+  TplFormulaControl.prototype.handleFormulaClick = function () {
+    this.setState({
+      formulaPickerOpen: true,
+      formulaPickerValue: '',
+      expressionBrace: undefined
+    });
+  };
+  TplFormulaControl.prototype.editorFactory = function (dom, cm) {
+    return plugin.editorFactory(dom, cm, this.props.value, {
+      lineWrapping: false,
+      cursorHeight: 0.85
+    });
+  };
+  TplFormulaControl.prototype.handleEditorMounted = function (cm, editor) {
+    var _this = this;
+    var variables = this.props.variables || this.state.variables;
+    this.editorPlugin = new plugin.FormulaPlugin(editor, {
+      getProps: function () {
+        return tslib.__assign(tslib.__assign({}, _this.props), {
+          variables: variables
+        });
+      },
+      onExpressionClick: this.onExpressionClick,
+      onExpressionMouseEnter: this.onExpressionMouseEnter,
+      showPopover: false,
+      showClearIcon: true
+    });
+  };
+  TplFormulaControl.prototype.editorAutoMark = function () {
+    var _a;
+    (_a = this.editorPlugin) === null || _a === void 0 ? void 0 : _a.autoMark();
+  };
+  TplFormulaControl.prototype.render = function () {
+    var _this = this;
+    var _a = this.props,
+      className = _a.className,
+      header = _a.header;
+      _a.label;
+      var placeholder = _a.placeholder,
+      customFormulaPicker = _a.customFormulaPicker,
+      clearable = _a.clearable,
+      rest = tslib.__rest(_a, ["className", "header", "label", "placeholder", "customFormulaPicker", "clearable"]);
+    var _b = this.state,
+      formulaPickerOpen = _b.formulaPickerOpen,
+      formulaPickerValue = _b.formulaPickerValue,
+      variables = _b.variables,
+      tooltipStyle = _b.tooltipStyle;
+    var FormulaPickerCmp = customFormulaPicker !== null && customFormulaPicker !== void 0 ? customFormulaPicker : FormulaPicker["default"];
+    var highlightValue = amisUi.FormulaEditor.highlightValue(formulaPickerValue, variables) || {
+      html: formulaPickerValue
+    };
+    return React__default["default"].createElement("div", {
+      className: cx__default["default"]('ae-TplFormulaControl', className, {
+        clearable: clearable
+      }),
+      ref: this.wrapRef
+    }, React__default["default"].createElement("div", {
+      className: cx__default["default"]('ae-TplResultBox')
+    }, React__default["default"].createElement(amisUi.CodeMirrorEditor, {
+      className: "ae-TplResultBox-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-TplFormulaControl-placeholder"
+    }, placeholder), clearable && this.props.value && React__default["default"].createElement(amis.Icon, {
+      icon: "input-clear",
+      className: "input-clear-icon",
+      iconContent: "InputText-clear",
+      onClick: this.handleClear
+    })), React__default["default"].createElement(amis.Button, {
+      className: "ae-TplFormulaControl-button",
+      size: "sm",
+      tooltip: {
+        enterable: false,
+        content: i18nRuntime.i18n("303efd5ba79e639001b4328cd266dddc"),
+        tooltipTheme: 'dark',
+        placement: 'left',
+        mouseLeaveDelay: 0
+      },
+      onClick: this.handleFormulaClick
+    }, React__default["default"].createElement(amis.Icon, {
+      icon: "input-add-fx",
+      className: cx__default["default"]('ae-TplFormulaControl-icon', 'icon')
+    })), 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,
+      header: header,
+      variables: variables,
+      variableMode: rest.variableMode,
+      evalMode: true,
+      onClose: this.closeFormulaPicker,
+      onConfirm: this.handleConfirm
+    })) : null);
+  };
+  TplFormulaControl.defaultProps = {
+    variableMode: 'tabs',
+    requiredDataPropsVariables: false,
+    placeholder: i18nRuntime.i18n("02cc4f8f5a9aefbc03c778f7a5c989c7")
+  };
+  tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [String, Array]), tslib.__metadata("design:returntype", void 0)], TplFormulaControl.prototype, "onExpressionClick", null);
+  tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [MouseEvent, String, Array]), tslib.__metadata("design:returntype", void 0)], TplFormulaControl.prototype, "onExpressionMouseEnter", null);
+  tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", []), tslib.__metadata("design:returntype", void 0)], TplFormulaControl.prototype, "hiddenToolTip", null);
+  tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [Object]), tslib.__metadata("design:returntype", void 0)], TplFormulaControl.prototype, "handleKeyDown", null);
+  tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", []), tslib.__metadata("design:returntype", void 0)], TplFormulaControl.prototype, "closeFormulaPicker", null);
+  tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [Object]), tslib.__metadata("design:returntype", void 0)], TplFormulaControl.prototype, "handleConfirm", null);
+  tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [Object]), tslib.__metadata("design:returntype", void 0)], TplFormulaControl.prototype, "handleOnChange", null);
+  tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", []), tslib.__metadata("design:returntype", void 0)], TplFormulaControl.prototype, "handleClear", null);
+  tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", []), tslib.__metadata("design:returntype", void 0)], TplFormulaControl.prototype, "handleFormulaClick", null);
+  tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [HTMLElement, Object]), tslib.__metadata("design:returntype", void 0)], TplFormulaControl.prototype, "editorFactory", null);
+  tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [Object, Object]), tslib.__metadata("design:returntype", void 0)], TplFormulaControl.prototype, "handleEditorMounted", null);
+  tslib.__decorate([amisCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", []), tslib.__metadata("design:returntype", void 0)], TplFormulaControl.prototype, "editorAutoMark", null);
+  return TplFormulaControl;
+}(React__default["default"].Component);
+/** @class */(function (_super) {
+  tslib.__extends(TplFormulaControlRenderer, _super);
+  function TplFormulaControlRenderer() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+  TplFormulaControlRenderer = tslib.__decorate([amis.FormItem({
+    type: 'ae-tplFormulaControl'
+  })], TplFormulaControlRenderer);
+  return TplFormulaControlRenderer;
+})(TplFormulaControl);
+
+exports.TplFormulaControl = TplFormulaControl;

package/lib/renderer/TransferTableControl.d.ts

@@ -2,17 +2,18 @@
  * @file Transfer的表格对应选项
  */
 import React from 'react';
-import { SchemaApi } from 'amis/lib/Schema';
+import type { SchemaApi } from 'amis';
 import type { FormControlProps } from 'amis-core';
 import type { Option } from 'amis';
 interface OptionControlProps extends FormControlProps {
     className?: string;
 }
+type SourceType = 'custom' | 'api' | 'form' | 'variable';
 interface OptionControlState {
     api: SchemaApi;
     labelField: string;
     valueField: string;
-    source: 'custom' | 'api' | 'form';
+    source: SourceType;
 }
 export default class TransferTableOption extends React.Component<OptionControlProps, {}> {
     addColumns(): {
@@ -110,7 +111,7 @@ declare const TransferTableControl: {
         /**
          * 切换选项类型
          */
-        handleSourceChange(source: 'custom' | 'api' | 'form'): void;
+        handleSourceChange(source: SourceType): void;
         handleAPIChange(source: SchemaApi): void;
         handleLableFieldChange(labelField: string): void;
         handleValueFieldChange(valueField: string): void;

package/lib/renderer/TransferTableControl.js

@@ -1,5 +1,5 @@
 /**
- * amis-editor v5.2.5-alpha.12
+ * amis-editor v5.3.0
  * Copyright 2018-2023 @fex
  */
 
@@ -32,7 +32,7 @@ function BaseOptionControl(Cmpt) {
           api: props.data.source,
           labelField: props.data.labelField,
           valueField: props.data.valueField,
-          source: props.data.source ? 'api' : 'custom'
+          source: props.data.source ? /\$\{(.*?)\}/g.test(props.data.source) ? 'variable' : 'api' : 'custom'
         };
         _this.handleSourceChange = _this.handleSourceChange.bind(_this);
         _this.handleAPIChange = _this.handleAPIChange.bind(_this);
@@ -53,7 +53,7 @@ function BaseOptionControl(Cmpt) {
           labelField: undefined,
           valueField: undefined
         };
-        if (source === 'api') {
+        if (['api', 'variable'].includes(source)) {
           var _a = this.state,
             api = _a.api,
             labelField = _a.labelField,
@@ -70,6 +70,7 @@ function BaseOptionControl(Cmpt) {
        */
       class_1.prototype.handleSourceChange = function (source) {
         this.setState({
+          api: '',
           source: source
         }, this.onChange);
       };
@@ -152,6 +153,9 @@ function BaseOptionControl(Cmpt) {
         }, {
           label: i18nRuntime.i18n("c8158b3cad598b0b5939788ca4efb298"),
           value: 'api'
+        }, {
+          label: i18nRuntime.i18n("50334fc77fc5a2c2636f14f158d3c417"),
+          value: 'variable'
         }].map(function (item) {
           return tslib.__assign(tslib.__assign({}, item), {
             onClick: function () {
@@ -229,7 +233,9 @@ function BaseOptionControl(Cmpt) {
           api = _b.api,
           labelField = _b.labelField,
           valueField = _b.valueField;
-        var className = this.props.className;
+        var _c = this.props,
+          className = _c.className,
+          render = _c.render;
         var cmptProps = tslib.__assign(tslib.__assign({}, this.props), {
           data: tslib.__assign({
             api: api,
@@ -239,7 +245,12 @@ function BaseOptionControl(Cmpt) {
         });
         return React__default["default"].createElement("div", {
           className: cx__default["default"]('ae-OptionControl', className)
-        }, this.renderHeader(), source === 'custom' ? React__default["default"].createElement(Cmpt, tslib.__assign({}, cmptProps)) : null, this.renderApiPanel());
+        }, this.renderHeader(), source === 'custom' ? React__default["default"].createElement(Cmpt, tslib.__assign({}, cmptProps)) : null, source === 'api' ? this.renderApiPanel() : null, source === 'variable' ? render('variable', amisEditorCore.getSchemaTpl('sourceBindControl', {
+          label: false,
+          className: 'ae-ExtendMore'
+        }), {
+          onChange: this.handleAPIChange
+        }) : null);
       };
       return class_1;
     }(React__default["default"].Component)

package/lib/renderer/TreeOptionControl.d.ts

@@ -5,7 +5,7 @@ import React from 'react';
 import Sortable from 'sortablejs';
 import type { Option } from 'amis';
 import type { FormControlProps } from 'amis-core';
-import { SchemaApi } from 'amis/lib/Schema';
+import type { SchemaApi } from 'amis';
 export type OptionControlItem = Option & {
     checked?: boolean;
     _key?: string;
@@ -14,13 +14,14 @@ export interface OptionControlProps extends FormControlProps {
     className?: string;
     showIconField?: boolean;
 }
+export type SourceType = 'custom' | 'api' | 'apicenter' | 'variable';
 export interface OptionControlState {
     options: Array<OptionControlItem>;
     api: SchemaApi;
     labelField: string;
     valueField: string;
     iconField: string;
-    source: 'custom' | 'api' | 'apicenter';
+    source: SourceType;
     modalVisible: boolean;
 }
 export default class TreeOptionControl extends React.Component<OptionControlProps, OptionControlState> {
@@ -40,7 +41,7 @@ export default class TreeOptionControl extends React.Component<OptionControlProp
     /**
      * 切换选项类型
      */
-    handleSourceChange(source: 'custom' | 'api' | 'apicenter'): void;
+    handleSourceChange(source: SourceType): void;
     renderHeader(): JSX.Element;
     handleEditLabelOrValue(value: string, path: string, key: string): void;
     handleDelete(pathStr: string, index: number): void;

package/lib/renderer/TreeOptionControl.js

@@ -1,5 +1,5 @@
 /**
- * amis-editor v5.2.5-alpha.12
+ * amis-editor v5.3.0
  * Copyright 2018-2023 @fex
  */
 
@@ -51,7 +51,7 @@ var TreeOptionControl = /** @class */function (_super) {
       labelField: labelField,
       valueField: valueField,
       iconField: showIconField ? iconField : undefined,
-      source: source ? 'api' : 'custom',
+      source: source ? /\$\{(.*?)\}/g.test(source) ? 'variable' : 'api' : 'custom',
       modalVisible: false
     };
     _this.sortables = [];
@@ -84,7 +84,12 @@ var TreeOptionControl = /** @class */function (_super) {
    * 更新options字段的统一出口
    */
   TreeOptionControl.prototype.onChange = function () {
-    var source = this.state.source;
+    var _a = this.state,
+      source = _a.source,
+      api = _a.api,
+      labelField = _a.labelField,
+      valueField = _a.valueField,
+      iconField = _a.iconField;
     var onBulkChange = this.props.onBulkChange;
     var data = {
       source: undefined,
@@ -97,12 +102,7 @@ var TreeOptionControl = /** @class */function (_super) {
       var options = this.state.options.concat();
       data.options = this.pretreatOptions(options);
     }
-    if (source === 'api' || source === 'apicenter') {
-      var _a = this.state,
-        api = _a.api,
-        labelField = _a.labelField,
-        valueField = _a.valueField,
-        iconField = _a.iconField;
+    if (source === 'api' || source === 'apicenter' || source === 'variable') {
       data.source = api;
       data.labelField = labelField || undefined;
       data.valueField = valueField || undefined;
@@ -116,6 +116,7 @@ var TreeOptionControl = /** @class */function (_super) {
    */
   TreeOptionControl.prototype.handleSourceChange = function (source) {
     this.setState({
+      api: '',
       source: source
     }, this.onChange);
   };
@@ -132,7 +133,7 @@ var TreeOptionControl = /** @class */function (_super) {
       hasApiCenter = _b.hasApiCenter;
     var classPrefix = (_a = env === null || env === void 0 ? void 0 : env.theme) === null || _a === void 0 ? void 0 : _a.classPrefix;
     var source = this.state.source;
-    var optionSourceList = tslib.__spreadArray([{
+    var optionSourceList = tslib.__spreadArray(tslib.__spreadArray([{
       label: i18nRuntime.i18n("01820262aa9ad5b130f8f5b86bfd2968"),
       value: 'custom'
     }, {
@@ -141,7 +142,10 @@ var TreeOptionControl = /** @class */function (_super) {
     }], tslib.__read(hasApiCenter ? [{
       label: i18nRuntime.i18n("e6ff6a97bf600c02942db3126a7077b8"),
       value: 'apicenter'
-    }] : []), false).map(function (item) {
+    }] : []), false), [{
+      label: i18nRuntime.i18n("50334fc77fc5a2c2636f14f158d3c417"),
+      value: 'variable'
+    }], false).map(function (item) {
       return tslib.__assign(tslib.__assign({}, item), {
         onClick: function () {
           return _this.handleSourceChange(item.value);
@@ -190,7 +194,7 @@ var TreeOptionControl = /** @class */function (_super) {
   };
   TreeOptionControl.prototype.handleDelete = function (pathStr, index) {
     var _this = this;
-    var _a;
+    var _a, _b;
     var options = cloneDeep__default["default"](this.state.options);
     if (options.length === 1) {
       amis.toast.warning(i18nRuntime.i18n("355c54009e364bf4396be424fba10e0f"), {
@@ -205,7 +209,7 @@ var TreeOptionControl = /** @class */function (_super) {
       var parentPath = this.getNodePath(pathStr).parentPath;
       var parentNode = get__default["default"](options, parentPath, {});
       (_a = parentNode === null || parentNode === void 0 ? void 0 : parentNode.children) === null || _a === void 0 ? void 0 : _a.splice(index, 1);
-      if (!(parentNode === null || parentNode === void 0 ? void 0 : parentNode.children.length)) {
+      if (((_b = parentNode === null || parentNode === void 0 ? void 0 : parentNode.children) === null || _b === void 0 ? void 0 : _b.length) === 0) {
         // 去除僵尸子节点
         delete parentNode.children;
       }
@@ -534,9 +538,6 @@ var TreeOptionControl = /** @class */function (_super) {
       labelField = _c.labelField,
       valueField = _c.valueField,
       iconField = _c.iconField;
-    if (source === 'custom') {
-      return null;
-    }
     return render('api', amisEditorCore.getSchemaTpl('apiControl', {
       label: i18nRuntime.i18n("54ea89b497ec3bb319c68844dfa3687f"),
       name: 'source',
@@ -573,7 +574,9 @@ var TreeOptionControl = /** @class */function (_super) {
   TreeOptionControl.prototype.render = function () {
     var _this = this;
     var source = this.state.source;
-    var className = this.props.className;
+    var _a = this.props,
+      className = _a.className,
+      render = _a.render;
     return React__default["default"].createElement("div", {
       className: cx__default["default"]('ae-TreeOptionControl', className)
     }, this.renderHeader(), source === 'custom' ? React__default["default"].createElement("div", {
@@ -585,7 +588,12 @@ var TreeOptionControl = /** @class */function (_super) {
           modalVisible: true
         });
       }
-    }, "\u9009\u9879\u7BA1\u7406"), this.renderModal())) : null, this.renderApiPanel());
+    }, "\u9009\u9879\u7BA1\u7406"), this.renderModal())) : null, source === 'api' || source === 'apicenter' ? this.renderApiPanel() : null, source === 'variable' ? render('variable', amisEditorCore.getSchemaTpl('sourceBindControl', {
+      label: false,
+      className: 'ae-ExtendMore'
+    }), {
+      onChange: this.handleAPIChange
+    }) : null);
   };
   tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [String]), tslib.__metadata("design:returntype", void 0)], TreeOptionControl.prototype, "handleSourceChange", null);
   tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [String, Number]), tslib.__metadata("design:returntype", void 0)], TreeOptionControl.prototype, "handleDelete", null);

package/lib/renderer/ValidationControl.d.ts

@@ -58,6 +58,7 @@ export default class ValidationControl extends React.Component<ValidationControl
      * 规则列表
      */
     renderValidaton(): JSX.Element;
+    renderValidateApiControl(): JSX.Element;
     render(): JSX.Element;
 }
 export declare class ValidationControlRenderer extends ValidationControl {