amis-editor 6.5.0 → 6.7.0

package/esm/renderer/OptionControl.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
  */
 
@@ -11,162 +11,24 @@ import cx from 'classnames';
 import DeepDiff from 'deep-diff';
 import uniqBy from 'lodash/uniqBy';
 import omit from 'lodash/omit';
-import get from 'lodash/get';
 import Sortable from 'sortablejs';
-import { Icon, Checkbox, render, Button, FormItem } from 'amis';
+import { Icon, Checkbox, Button, normalizeApi, Renderer } from 'amis';
 import { value2array } from 'amis-ui/lib/components/Select';
-import { getI18nEnabled, getSchemaTpl, tipedLabel, autobind } from 'amis-editor-core';
-import debounce from 'lodash/debounce';
+import { getI18nEnabled, getSchemaTpl, autobind, tipedLabel } from 'amis-editor-core';
 import { i18n } from 'i18n-runtime';
 
 /**
  * @file 组件选项组件的可视化编辑控件
  */
-var OptionControl = /** @class */function (_super) {
-  __extends(OptionControl, _super);
-  function OptionControl(props) {
-    var _this = _super.call(this, props) || this;
-    _this.internalProps = ['checked', 'editing'];
-    var source = 'custom';
-    if (props.data.hasOwnProperty('source') && props.data.source) {
-      var api = props.data.source;
-      var url = typeof api === 'string' ? api : typeof api === 'object' ? api.url || '' : '';
-      source = /\$\{(.*?)\}/g.test(props.data.source) ? 'variable' : !url.indexOf('api://') ? 'apicenter' : 'api';
-    }
-    _this.state = {
-      options: _this.transformOptions(props) || [],
-      api: props.data.source,
-      labelField: props.data.labelField,
-      valueField: props.data.valueField,
-      source: source
-    };
-    return _this;
+var CustomOptionControl = /** @class */function (_super) {
+  __extends(CustomOptionControl, _super);
+  function CustomOptionControl() {
+    return _super !== null && _super.apply(this, arguments) || this;
   }
-  /**
-   * 数据更新
-   */
-  OptionControl.prototype.componentWillReceiveProps = function (nextProps) {
-    var options = get(nextProps, 'data.options');
-    // 左侧code手动更新时，同步配置面板
-    if (DeepDiff.diff(options, this.lastOptions)) {
-      this.setState({
-        options: this.transformOptions(nextProps)
-      });
-    }
-  };
-  OptionControl.prototype.transformOptions = function (props) {
-    var ctx = props.data,
-      options = props.value;
-    var defaultValue = ctx.value;
-    var valueArray = value2array(defaultValue, ctx).map(function (item) {
-      var _a;
-      return item[(_a = ctx === null || ctx === void 0 ? void 0 : ctx.valueField) !== null && _a !== void 0 ? _a : 'value'];
-    });
-    return Array.isArray(options) ? options.map(function (item) {
-      var _a;
-      return __assign(__assign(__assign({
-        label: item.label,
-        // 为了使用户编写label时同时生效到value
-        value: item.label === item.value ? null : item.value,
-        checked: !!~valueArray.indexOf(item[(_a = ctx === null || ctx === void 0 ? void 0 : ctx.valueField) !== null && _a !== void 0 ? _a : 'value'])
-      }, (item === null || item === void 0 ? void 0 : item.badge) ? {
-        badge: item.badge
-      } : {}), item.hidden !== undefined ? {
-        hidden: item.hidden
-      } : {}), item.hiddenOn !== undefined ? {
-        hiddenOn: item.hiddenOn
-      } : {});
-    }) : [];
-  };
-  /**
-   * 处理当前组件的默认值
-   */
-  OptionControl.prototype.normalizeValue = function () {
-    var _this = this;
-    var _a = this.props,
-      _b = _a.data,
-      ctx = _b === void 0 ? {} : _b,
-      multipleProps = _a.multiple;
-    var _c = ctx.joinValues,
-      joinValues = _c === void 0 ? true : _c,
-      extractValue = ctx.extractValue,
-      multiple = ctx.multiple,
-      delimiter = ctx.delimiter,
-      valueField = ctx.valueField;
-    var checkedOptions = this.state.options.filter(function (item) {
-      return item.checked && (item === null || item === void 0 ? void 0 : item.hidden) !== true;
-    }).map(function (item) {
-      return omit(item, _this.internalProps);
-    });
-    var value;
-    if (!checkedOptions.length) {
-      return undefined;
-    }
-    if (multiple || multipleProps) {
-      value = checkedOptions;
-      if (joinValues) {
-        value = checkedOptions.map(function (item) {
-          return item[valueField || 'value'] || item[valueField || 'label'];
-        }).join(delimiter || ',');
-      } else if (extractValue) {
-        value = checkedOptions.map(function (item) {
-          return item[valueField || 'value'] || item[valueField || 'label'];
-        });
-      }
-    } else {
-      value = checkedOptions[0];
-      if (joinValues || extractValue) {
-        value = value[valueField || 'value'] || value[valueField || 'label'];
-      }
-    }
-    return value;
-  };
-  /**
-   * 更新options字段的统一出口
-   */
-  OptionControl.prototype.onChange = function () {
-    var _a = this.state,
-      source = _a.source,
-      options = _a.options;
-    var onBulkChange = this.props.onBulkChange;
-    var defaultValue = this.normalizeValue();
-    var data = {
-      source: undefined,
-      options: undefined,
-      labelField: undefined,
-      valueField: undefined
-    };
-    if (source === 'custom') {
-      data.options = options.map(function (item) {
-        return __assign(__assign(__assign({}, (item === null || item === void 0 ? void 0 : item.badge) ? {
-          badge: item.badge
-        } : {}), {
-          label: item.label,
-          value: item.value == null || item.value === '' ? item.label : item.value
-        }), item.hiddenOn !== undefined ? {
-          hiddenOn: item.hiddenOn
-        } : {});
-      });
-      data.value = defaultValue;
-      this.lastOptions = data.options;
-    }
-    if (source === 'api' || source === 'apicenter' || source === 'variable') {
-      var _b = this.state,
-        api = _b.api,
-        labelField = _b.labelField,
-        valueField = _b.valueField;
-      data.source = api;
-      data.labelField = labelField || undefined;
-      data.valueField = valueField || undefined;
-      this.lastOptions = data.source;
-    }
-    onBulkChange && onBulkChange(data);
-    return;
-  };
-  OptionControl.prototype.targetRef = function (ref) {
+  CustomOptionControl.prototype.targetRef = function (ref) {
     this.target = ref ? findDOMNode(ref) : null;
   };
-  OptionControl.prototype.dragRef = function (ref) {
+  CustomOptionControl.prototype.dragRef = function (ref) {
     if (!this.drag && ref) {
       this.initDragging();
     } else if (this.drag && !ref) {
@@ -174,8 +36,9 @@ var OptionControl = /** @class */function (_super) {
     }
     this.drag = ref;
   };
-  OptionControl.prototype.initDragging = function () {
+  CustomOptionControl.prototype.initDragging = function () {
     var _this = this;
+    var onChange = this.props.onChange;
     var dom = findDOMNode(this);
     this.sortable = new Sortable(dom.querySelector('.ae-OptionControl-content'), {
       group: 'OptionControlGroup',
@@ -194,56 +57,39 @@ var OptionControl = /** @class */function (_super) {
         } else {
           parent.appendChild(e.item);
         }
-        var options = _this.state.options.concat();
+        var options = _this.props.options.concat();
         options.splice(e.newIndex, 0, options.splice(e.oldIndex, 1)[0]);
-        _this.setState({
+        onChange({
           options: options
-        }, function () {
-          return _this.onChange();
         });
       }
     });
   };
-  OptionControl.prototype.destroyDragging = function () {
+  CustomOptionControl.prototype.destroyDragging = function () {
     this.sortable && this.sortable.destroy();
   };
-  OptionControl.prototype.scroll2Bottom = function () {
-    var _a, _b;
-    this.drag && ((_b = (_a = this.drag) === null || _a === void 0 ? void 0 : _a.lastElementChild) === null || _b === void 0 ? void 0 : _b.scrollIntoView({
-      behavior: 'smooth',
-      block: 'nearest',
-      inline: 'start'
-    }));
-  };
-  /**
-   * 切换选项类型
-   */
-  OptionControl.prototype.handleSourceChange = function (source) {
-    this.setState({
-      api: '',
-      source: source
-    }, this.onChange);
-  };
   /**
    * 删除选项
    */
-  OptionControl.prototype.handleDelete = function (index) {
-    var _this = this;
-    var options = this.state.options.concat();
+  CustomOptionControl.prototype.handleDelete = function (index) {
+    var _a = this.props,
+      onChange = _a.onChange,
+      originOptions = _a.options;
+    var options = originOptions.concat();
     options.splice(index, 1);
-    this.setState({
+    onChange({
       options: options
-    }, function () {
-      return _this.onChange();
     });
   };
   /**
    * 设置默认选项
    */
-  OptionControl.prototype.handleToggleDefaultValue = function (index, checked, shift) {
-    var _this = this;
+  CustomOptionControl.prototype.handleToggleDefaultValue = function (index, checked, shift) {
     var _a, _b, _c;
-    var options = this.state.options.concat();
+    var _d = this.props,
+      onChange = _d.onChange,
+      originOptions = _d.options;
+    var options = originOptions.concat();
     var isMultiple = ((_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.multiple) || ((_c = this.props) === null || _c === void 0 ? void 0 : _c.multiple);
     if (isMultiple) {
       options.splice(index, 1, __assign(__assign({}, options[index]), {
@@ -256,92 +102,104 @@ var OptionControl = /** @class */function (_super) {
         });
       });
     }
-    this.setState({
+    onChange({
       options: options
-    }, function () {
-      return _this.onChange();
     });
   };
   /**
    * 编辑选项
    */
-  OptionControl.prototype.toggleEdit = function (index) {
-    var options = this.state.options;
-    options[index].editing = !options[index].editing;
-    this.setState({
+  CustomOptionControl.prototype.toggleEdit = function (index) {
+    var _a = this.props,
+      onChange = _a.onChange,
+      originOptions = _a.options;
+    var options = originOptions.concat();
+    options.splice(index, 1, __assign(__assign({}, options[index]), {
+      editing: !options[index].editing
+    }));
+    onChange({
       options: options
     });
   };
   /**
    * 编辑角标
    */
-  OptionControl.prototype.toggleBadge = function (index, value) {
-    var _this = this;
-    var options = this.state.options;
-    options[index].badge = value;
-    this.setState({
+  CustomOptionControl.prototype.toggleBadge = function (index, value) {
+    var _a = this.props,
+      onChange = _a.onChange,
+      originOptions = _a.options;
+    var options = originOptions.concat();
+    options.splice(index, 1, __assign(__assign({}, options[index]), {
+      badge: value
+    }));
+    onChange({
       options: options
-    }, function () {
-      return _this.onChange();
     });
   };
-  OptionControl.prototype.handleEditLabel = function (index, value) {
-    var _this = this;
-    var options = this.state.options.concat();
+  CustomOptionControl.prototype.handleEditLabel = function (index, value) {
+    var _a = this.props,
+      onChange = _a.onChange,
+      originOptions = _a.options;
+    var options = originOptions.concat();
     options.splice(index, 1, __assign(__assign({}, options[index]), {
       label: value
     }));
-    this.setState({
+    onChange({
       options: options
-    }, function () {
-      return _this.onChange();
     });
   };
-  OptionControl.prototype.handleHiddenValueChange = function (index, value) {
-    var _this = this;
-    var options = this.state.options.concat();
-    var _a = options[index];
-      _a.hiddenOn;
-      var option = __rest(_a, ["hiddenOn"]);
-    options.splice(index, 1, __assign(__assign({}, option), !value ? {} : {
-      hiddenOn: value
-    }));
-    this.setState({
+  CustomOptionControl.prototype.handleHiddenValueChange = function (index, value) {
+    var _a = this.props,
+      onChange = _a.onChange,
+      originOptions = _a.options;
+    var options = originOptions.concat();
+    var _b = options[index];
+      _b.hiddenOn;
+      var option = __rest(_b, ["hiddenOn"]);
+    var newOption = __assign({}, option);
+    if (value) {
+      newOption.hiddenOn = value;
+    } else {
+      delete newOption.hiddenOn;
+    }
+    options.splice(index, 1, newOption);
+    onChange({
       options: options
-    }, function () {
-      return _this.onChange();
     });
   };
-  OptionControl.prototype.handleAdd = function () {
-    var _this = this;
-    var options = this.state.options;
+  CustomOptionControl.prototype.handleAdd = function () {
+    var _a = this.props,
+      onChange = _a.onChange,
+      originOptions = _a.options;
+    var options = originOptions.concat();
     options.push({
       label: '',
       value: null,
       checked: false
     });
-    this.setState({
+    onChange({
       options: options
-    }, function () {
-      _this.onChange();
     });
   };
-  OptionControl.prototype.handleValueChange = function (index, value) {
-    var _this = this;
-    var options = this.state.options.concat();
+  CustomOptionControl.prototype.handleValueChange = function (index, value) {
+    var _a = this.props,
+      onChange = _a.onChange,
+      originOptions = _a.options;
+    var options = originOptions.concat();
     options[index].value = value;
-    this.setState({
+    onChange({
       options: options
-    }, function () {
-      return _this.onChange();
     });
   };
-  OptionControl.prototype.handleBatchAdd = function (values, action) {
-    var _this = this;
-    var options = this.state.options.concat();
+  CustomOptionControl.prototype.handleBatchAdd = function (values, action) {
+    var _a = this.props,
+      onChange = _a.onChange,
+      _b = _a.customEdit,
+      customEdit = _b === void 0 ? true : _b;
+    var options = this.props.data.options || [];
     var addedOptions = values[0].batchOption.split('\n').map(function (option) {
       var item = option.trim();
-      if (~item.indexOf(' ')) {
+      if (~item.indexOf(' ') && customEdit) {
         var _a = __read(item.split(' '), 2),
           label = _a[0],
           value = _a[1];
@@ -358,96 +216,30 @@ var OptionControl = /** @class */function (_super) {
       };
     });
     var newOptions = uniqBy(__spreadArray(__spreadArray([], __read(options), false), __read(addedOptions), false), 'value');
-    this.setState({
+    onChange({
       options: newOptions
-    }, function () {
-      return _this.onChange();
     });
   };
-  OptionControl.prototype.renderHeader = function () {
-    var _this = this;
-    var _a;
-    var _b = this.props,
-      render = _b.render,
-      label = _b.label,
-      labelRemark = _b.labelRemark,
-      useMobileUI = _b.useMobileUI,
-      env = _b.env,
-      popOverContainer = _b.popOverContainer,
-      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 = __spreadArray(__spreadArray([{
-      label: i18n("01820262aa9ad5b130f8f5b86bfd2968"),
-      value: 'custom'
-    }, {
-      label: i18n("f99603414a616bdee85de0e6e3938b65"),
-      value: 'api'
-    }], __read(hasApiCenter ? [{
-      label: i18n("e6ff6a97bf600c02942db3126a7077b8"),
-      value: 'apicenter'
-    }] : []), false), [{
-      label: i18n("50334fc77fc5a2c2636f14f158d3c417"),
-      value: 'variable'
-    }
-    // {
-    //   label: '表单实体',
-    //   value: 'form'
-    // }
-    ], false).map(function (item) {
-      return __assign(__assign({}, item), {
-        onClick: function () {
-          return _this.handleSourceChange(item.value);
-        }
-      });
-    });
-    return React__default.createElement("header", {
-      className: "ae-OptionControl-header"
-    }, React__default.createElement("label", {
-      className: cx("".concat(classPrefix, "Form-label"))
-    }, label || '', labelRemark ? render('label-remark', {
-      type: 'remark',
-      icon: labelRemark.icon || 'warning-mark',
-      tooltip: labelRemark,
-      className: cx("Form-lableRemark", labelRemark === null || labelRemark === void 0 ? void 0 : labelRemark.className),
-      useMobileUI: useMobileUI,
-      container: popOverContainer || env.getModalContainer
-    }) : null), React__default.createElement("div", null, render('validation-control-addBtn', {
-      type: 'dropdown-button',
-      level: 'link',
-      size: 'sm',
-      label: '${selected}',
-      align: 'right',
-      closeOnClick: true,
-      closeOnOutside: true,
-      buttons: optionSourceList
-    }, {
-      popOverContainer: null,
-      data: {
-        selected: optionSourceList.find(function (item) {
-          return item.value === source;
-        }).label
-      }
-    })));
-  };
-  OptionControl.prototype.renderOption = function (props) {
+  CustomOptionControl.prototype.renderOption = function (props) {
     var _this = this;
     var checked = props.checked,
       index = props.index,
       editing = props.editing,
       multipleProps = props.multipleProps,
       closeDefaultCheck = props.closeDefaultCheck,
-      hiddenOn = props.hiddenOn;
-    var _a = this.props,
-      render$1 = _a.render,
-      ctx = _a.data,
-      node = _a.node;
+      hiddenOn = props.hiddenOn,
+      _a = props.customEdit,
+      customEdit = _a === void 0 ? true : _a;
+    var _b = this.props,
+      render = _b.render,
+      ctx = _b.data,
+      node = _b.node;
     var isMultiple = (ctx === null || ctx === void 0 ? void 0 : ctx.multiple) === true || multipleProps;
     var i18nEnabled = getI18nEnabled();
     var showBadge = node.type === 'button-group-select';
     var editDom = editing ? React__default.createElement("div", {
       className: "ae-OptionControlItem-extendMore"
-    }, render$1('option', {
+    }, render('option', {
       type: 'container',
       className: 'ae-ExtendMore right mb-2',
       body: [{
@@ -460,47 +252,86 @@ var OptionControl = /** @class */function (_super) {
           return _this.toggleEdit(index);
         }
       }, {
-        type: i18nEnabled ? 'input-text-i18n' : 'input-text',
-        placeholder: i18n("b4fdf79b8f54856b072ec3874b830d1f"),
-        label: i18n("97d07614380da93d257f9fbf81aa56fb"),
-        mode: 'horizontal',
-        value: props === null || props === void 0 ? void 0 : props.label,
-        labelClassName: 'ae-OptionControlItem-EditLabel',
-        valueClassName: 'ae-OptionControlItem-EditValue',
-        onChange: function (v) {
-          return _this.handleEditLabel(index, v);
+        children: function (_a) {
+          var render = _a.render,
+            innerValue = _a.innerValue;
+          return render('innerLabel', {
+            name: 'label',
+            type: i18nEnabled ? 'input-text-i18n' : 'input-text',
+            placeholder: i18n("b4fdf79b8f54856b072ec3874b830d1f"),
+            label: i18n("97d07614380da93d257f9fbf81aa56fb"),
+            mode: 'horizontal',
+            labelClassName: 'ae-OptionControlItem-EditLabel',
+            valueClassName: 'ae-OptionControlItem-EditValue'
+          }, {
+            value: innerValue.label || '',
+            onChange: function (v) {
+              return _this.handleEditLabel(index, v);
+            }
+          });
         }
       }, {
-        type: 'ae-valueFormat',
-        placeholder: i18n("f4ab507e2fa2d2bd66bcdeafd9fef797"),
-        labelClassName: 'ae-OptionControlItem-EditLabel',
-        valueClassName: 'ae-OptionControlItem-EditValue',
-        label: i18n("fe7509e0ed085b86f07e3e9975cc5b3d"),
-        value: props === null || props === void 0 ? void 0 : props.value,
-        onChange: function (v) {
-          return _this.handleValueChange(index, v);
+        children: function (_a) {
+          var render = _a.render,
+            innerValue = _a.innerValue;
+          return render('innerValue', {
+            name: 'value',
+            type: 'ae-valueFormat',
+            placeholder: i18n("f4ab507e2fa2d2bd66bcdeafd9fef797"),
+            labelClassName: 'ae-OptionControlItem-EditLabel',
+            valueClassName: 'ae-OptionControlItem-EditValue',
+            label: i18n("fe7509e0ed085b86f07e3e9975cc5b3d")
+          }, {
+            value: (innerValue === null || innerValue === void 0 ? void 0 : innerValue.value) || '',
+            onChange: function (v) {
+              return _this.handleValueChange(index, v);
+            }
+          });
         }
-      }, getSchemaTpl('expressionFormulaControl', {
-        label: i18n("dce5379cb978a8259ecfca8f08f00817"),
-        value: hiddenOn,
-        labelClassName: 'ae-OptionControlItem-EditLabel',
-        valueClassName: 'ae-OptionControlItem-EditValue',
-        onChange: function (v) {
-          return _this.handleHiddenValueChange(index, v);
+      }, {
+        children: function (_a) {
+          var render = _a.render,
+            innerValue = _a.innerValue;
+          return render('innerHiddenOn', getSchemaTpl('expressionFormulaControl', {
+            label: i18n("dce5379cb978a8259ecfca8f08f00817"),
+            name: 'hiddenOn',
+            labelClassName: 'ae-OptionControlItem-EditLabel',
+            valueClassName: 'ae-OptionControlItem-EditValue'
+          }), {
+            value: innerValue.hiddenOn || '',
+            onChange: function (v) {
+              return _this.handleHiddenValueChange(index, v);
+            }
+          });
         }
-      }), {
-        type: i18nEnabled ? 'input-text-i18n' : 'input-text',
-        placeholder: i18n("7f05bea37729325a6cc84eb26bb9f8c8"),
-        label: i18n("b8c467fce096a649583c0bc9d9281a5c"),
-        mode: 'horizontal',
-        visible: showBadge,
-        value: props === null || props === void 0 ? void 0 : props.badge,
-        labelClassName: 'ae-OptionControlItem-EditLabel',
-        valueClassName: 'ae-OptionControlItem-EditValue',
-        onChange: function (v) {
-          return _this.toggleBadge(index, v);
+      }, {
+        children: function (_a) {
+          var render = _a.render,
+            innerValue = _a.innerValue;
+          return render('innerBadge', {
+            type: i18nEnabled ? 'input-text-i18n' : 'input-text',
+            placeholder: i18n("7f05bea37729325a6cc84eb26bb9f8c8"),
+            label: i18n("b8c467fce096a649583c0bc9d9281a5c"),
+            mode: 'horizontal',
+            name: 'badge',
+            visible: showBadge,
+            labelClassName: 'ae-OptionControlItem-EditLabel',
+            valueClassName: 'ae-OptionControlItem-EditValue'
+          }, {
+            value: innerValue.badge || '',
+            onChange: function (v) {
+              return _this.toggleBadge(index, v);
+            }
+          });
         }
       }]
+    }, {
+      innerValue: {
+        label: props.label,
+        value: props.value,
+        badge: props.badge,
+        hiddenOn: hiddenOn
+      }
     })) : null;
     var operationBtn = [{
       type: 'button',
@@ -551,16 +382,20 @@ var OptionControl = /** @class */function (_super) {
       onChange: function (newChecked, shift) {
         return _this.handleToggleDefaultValue(index, newChecked, shift);
       }
-    })), render({
+    })), render('label', {
+      name: 'label',
       type: i18nEnabled ? 'input-text-i18n' : 'input-text',
+      label: false,
       className: 'ae-OptionControlItem-input',
-      value: props === null || props === void 0 ? void 0 : props.label,
       placeholder: i18n("5d26b8a41e805204c9dcd5ea7e23b150"),
-      clearable: false,
+      clearable: false
+    }, {
+      value: (props === null || props === void 0 ? void 0 : props.label) || '',
+      disabled: editing,
       onChange: function (value) {
         _this.handleEditLabel(index, value);
       }
-    }), render$1('dropdown', {
+    }), customEdit ? render('dropdown', {
       type: 'dropdown-button',
       className: 'ae-OptionControlItem-dropdown',
       btnClassName: 'px-2',
@@ -572,9 +407,19 @@ var OptionControl = /** @class */function (_super) {
       buttons: operationBtn
     }, {
       popOverContainer: null // amis 渲染挂载节点会使用 this.target
+    }) : render('delete', {
+      type: 'button',
+      className: 'ae-OptionControlItem-action-delete',
+      icon: 'fa fa-trash',
+      level: 'link',
+      onClick: function () {
+        return _this.handleDelete(index);
+      }
     })), editDom);
   };
-  OptionControl.prototype.buildBatchAddSchema = function () {
+  CustomOptionControl.prototype.buildBatchAddSchema = function () {
+    var _a = this.props.customEdit,
+      customEdit = _a === void 0 ? true : _a;
     return {
       type: 'action',
       actionType: 'dialog',
@@ -591,7 +436,7 @@ var OptionControl = /** @class */function (_super) {
           level: 'warning',
           body: [{
             type: 'tpl',
-            tpl: i18n("c130bd5b55edefdaf8923269e9a52439")
+            tpl: '每个选项单列一行，将所有值不重复的项加为新的选项;' + (customEdit ? '<br/>每行可通过空格来分别设置label和value,例："张三 zhangsan"' : '')
           }],
           showIcon: true,
           className: 'mb-2.5'
@@ -621,79 +466,19 @@ var OptionControl = /** @class */function (_super) {
       }
     };
   };
-  OptionControl.prototype.handleAPIChange = function (source) {
-    this.setState({
-      api: source
-    }, this.onChange);
-  };
-  OptionControl.prototype.handleLableFieldChange = function (labelField) {
-    this.setState({
-      labelField: labelField
-    }, this.onChange);
-  };
-  OptionControl.prototype.handleValueFieldChange = function (valueField) {
-    this.setState({
-      valueField: valueField
-    }, this.onChange);
-  };
-  /** 获取功能性字段控件 schema */
-  OptionControl.prototype.getFuncFieldSchema = function () {
-    var _a = this.state,
-      labelField = _a.labelField,
-      valueField = _a.valueField;
-    return [{
-      label: tipedLabel(i18n("7e9c83e86beb612377a94e6e8d1fc644"), i18n("26ff46d82166741297ce666b2792af85")),
-      type: 'input-text',
-      name: 'labelField',
-      clearable: true,
-      value: labelField,
-      placeholder: i18n("6d4ce0631f37676a887c9599691fabec"),
-      onChange: this.handleLableFieldChange
-    }, {
-      label: i18n("2e01f5f5889e33d003bec7857cd38445"),
-      type: 'input-text',
-      name: 'valueField',
-      clearable: true,
-      value: valueField,
-      placeholder: i18n("959c27193eb0a41d01f4b53dcc4b9245"),
-      onChange: this.handleValueFieldChange
-    }];
-  };
-  OptionControl.prototype.renderApiPanel = function () {
-    var render = this.props.render;
-    var _a = this.state,
-      source = _a.source,
-      api = _a.api;
-    return render('api', getSchemaTpl('apiControl', {
-      label: i18n("54ea89b497ec3bb319c68844dfa3687f"),
-      name: 'source',
-      mode: 'normal',
-      className: 'ae-ExtendMore',
-      visibleOn: 'this.autoComplete !== false',
-      value: api,
-      onChange: this.handleAPIChange,
-      sourceType: source,
-      footer: this.getFuncFieldSchema()
-    }));
-  };
-  OptionControl.prototype.render = function () {
+  CustomOptionControl.prototype.render = function () {
     var _this = this;
-    var _a = this.state,
+    var _a = this.props,
       options = _a.options,
-      source = _a.source;
-    var _b = this.props,
-      render = _b.render,
-      className = _b.className,
-      multipleProps = _b.multiple;
+      multipleProps = _a.multiple,
+      render = _a.render;
     return React__default.createElement("div", {
-      className: cx('ae-OptionControl', className)
-    }, this.renderHeader(), source === 'custom' ? React__default.createElement("div", {
       className: "ae-OptionControl-wrapper"
     }, Array.isArray(options) && options.length ? React__default.createElement("ul", {
       className: "ae-OptionControl-content",
       ref: this.dragRef
     }, options.map(function (option, index) {
-      return _this.renderOption(__assign(__assign({}, option), {
+      return _this.renderOption(__assign(__assign(__assign({}, _this.props), option), {
         index: index,
         multipleProps: multipleProps
       }));
@@ -705,26 +490,453 @@ var OptionControl = /** @class */function (_super) {
       level: "enhance",
       onClick: this.handleAdd,
       ref: this.targetRef
-    }, i18n("e8755fb1e985a5d26df0fce1f0b7b0f8")), render('inner', this.buildBatchAddSchema()))) : null, source === 'api' || source === 'apicenter' ? this.renderApiPanel() : null, source === 'variable' ? render('variable', {
+    }, i18n("e8755fb1e985a5d26df0fce1f0b7b0f8")), render('inner', this.buildBatchAddSchema())));
+  };
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object]), __metadata("design:returntype", void 0)], CustomOptionControl.prototype, "targetRef", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object]), __metadata("design:returntype", void 0)], CustomOptionControl.prototype, "dragRef", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Number, String]), __metadata("design:returntype", void 0)], CustomOptionControl.prototype, "handleEditLabel", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Number, String]), __metadata("design:returntype", void 0)], CustomOptionControl.prototype, "handleHiddenValueChange", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", void 0)], CustomOptionControl.prototype, "handleAdd", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Array, Object]), __metadata("design:returntype", void 0)], CustomOptionControl.prototype, "handleBatchAdd", null);
+  return CustomOptionControl;
+}(React__default.Component);
+// 负责 api 和 apicenter 的配置
+function APIOptionControl(_a) {
+  var render = _a.render,
+    source = _a.source,
+    api = _a.api,
+    onChange = _a.onChange,
+    labelField = _a.labelField,
+    valueField = _a.valueField;
+  var handleAPIChange = React__default.useCallback(function (source) {
+    onChange({
+      api: source
+    });
+  }, []);
+  var handleLabelFieldChange = React__default.useCallback(function (value) {
+    onChange({
+      labelField: value
+    });
+  }, []);
+  var handleValueFieldChange = React__default.useCallback(function (value) {
+    onChange({
+      valueField: value
+    });
+  }, []);
+  var footer = React__default.useMemo(function () {
+    return [{
+      children: function (_a) {
+        var render = _a.render,
+          labelField = _a.labelField;
+        return render('inner', {
+          label: tipedLabel(i18n("7e9c83e86beb612377a94e6e8d1fc644"), i18n("26ff46d82166741297ce666b2792af85")),
+          type: 'input-text',
+          name: 'labelField',
+          clearable: true,
+          placeholder: i18n("6d4ce0631f37676a887c9599691fabec")
+        }, {
+          value: labelField,
+          onChange: handleLabelFieldChange
+        });
+      }
+    }, {
+      children: function (_a) {
+        var render = _a.render,
+          valueField = _a.valueField;
+        return render('inner', {
+          label: i18n("2e01f5f5889e33d003bec7857cd38445"),
+          type: 'input-text',
+          name: 'valueField',
+          clearable: true,
+          placeholder: i18n("959c27193eb0a41d01f4b53dcc4b9245")
+        }, {
+          value: valueField,
+          onChange: handleValueFieldChange
+        });
+      }
+    }];
+  }, []);
+  var schema = React__default.useMemo(function () {
+    return getSchemaTpl('apiControl', {
+      label: i18n("54ea89b497ec3bb319c68844dfa3687f"),
+      name: 'source',
+      mode: 'normal',
+      className: 'ae-ExtendMore',
+      visibleOn: 'this.autoComplete !== false',
+      footer: footer
+    });
+  }, [footer]);
+  return render('api', schema, {
+    value: api,
+    onChange: handleAPIChange,
+    sourceType: source,
+    labelField: labelField,
+    valueField: valueField
+  });
+}
+// 负责上下文变量绑定的配置
+function variableOptionControl(_a) {
+  var render = _a.render,
+    api = _a.api,
+    onChange = _a.onChange,
+    labelField = _a.labelField,
+    valueField = _a.valueField;
+  var handleAPIChange = React__default.useCallback(function (source) {
+    onChange({
+      api: source
+    });
+  }, []);
+  var handleLabelFieldChange = React__default.useCallback(function (value) {
+    onChange({
+      labelField: value
+    });
+  }, []);
+  var handleValueFieldChange = React__default.useCallback(function (value) {
+    onChange({
+      valueField: value
+    });
+  }, []);
+  var footer = React__default.useMemo(function () {
+    return [{
+      children: function (_a) {
+        var render = _a.render,
+          controlledValue = _a.controlledValue;
+        return render('inner', {
+          label: tipedLabel(i18n("7e9c83e86beb612377a94e6e8d1fc644"), i18n("26ff46d82166741297ce666b2792af85")),
+          type: 'input-text',
+          name: 'labelField',
+          clearable: true,
+          placeholder: i18n("6d4ce0631f37676a887c9599691fabec")
+        }, {
+          value: controlledValue.labelField,
+          onChange: handleLabelFieldChange
+        });
+      }
+    }, {
+      children: function (_a) {
+        var render = _a.render,
+          controlledValue = _a.controlledValue;
+        return render('inner', {
+          label: i18n("2e01f5f5889e33d003bec7857cd38445"),
+          type: 'input-text',
+          name: 'valueField',
+          clearable: true,
+          placeholder: i18n("959c27193eb0a41d01f4b53dcc4b9245")
+        }, {
+          value: controlledValue.valueField,
+          onChange: handleValueFieldChange
+        });
+      }
+    }];
+  }, []);
+  var schema = React__default.useMemo(function () {
+    return {
       type: 'control',
       label: false,
       className: 'ae-ExtendMore',
-      body: [getSchemaTpl('sourceBindControl', {
-        label: false,
-        onChange: debounce(this.handleAPIChange, 1000)
-      })].concat(this.getFuncFieldSchema())
-    }) : null);
+      body: [{
+        children: function (_a) {
+          var render = _a.render,
+            controlledValue = _a.controlledValue;
+          return render('inner', getSchemaTpl('sourceBindControl', {
+            label: false
+          }), {
+            value: controlledValue.api,
+            onChange: handleAPIChange
+          });
+        }
+      }].concat(footer)
+    };
+  }, [footer]);
+  return render('api', schema, {
+    controlledValue: {
+      api: api,
+      labelField: labelField,
+      valueField: valueField
+    }
+  });
+}
+var builtinOptionSource = [{
+  label: i18n("01820262aa9ad5b130f8f5b86bfd2968"),
+  value: 'custom',
+  component: CustomOptionControl
+}, {
+  label: i18n("f99603414a616bdee85de0e6e3938b65"),
+  value: 'api',
+  component: APIOptionControl,
+  test: function (_a) {
+    var api = _a.api;
+    var url = normalizeApi(api).url;
+    return !!(typeof url === 'string' && url && !(typeof api === 'string' && /\$\{(.*?)\}/g.test(api)));
+  }
+}, {
+  label: i18n("e6ff6a97bf600c02942db3126a7077b8"),
+  value: 'apicenter',
+  component: APIOptionControl,
+  test: function (_a) {
+    var api = _a.api;
+    var url = normalizeApi(api).url;
+    return typeof url === 'string' && url.startsWith('api://');
+  }
+}, {
+  label: i18n("50334fc77fc5a2c2636f14f158d3c417"),
+  value: 'variable',
+  component: variableOptionControl,
+  test: function (_a) {
+    var api = _a.api;
+    return typeof api === 'string' && /\$\{(.*?)\}/g.test(api);
+  }
+}];
+var OptionControl = /** @class */function (_super) {
+  __extends(OptionControl, _super);
+  function OptionControl(props) {
+    var _this = _super.call(this, props) || this;
+    _this.internalProps = ['checked', 'editing'];
+    _this.optionSources = [];
+    _this.optionSources = builtinOptionSource.concat(Array.isArray(props.extraOptionSources) ? props.extraOptionSources : []);
+    var state = {
+      options: _this.transformOptions(props) || [],
+      api: props.data.source,
+      labelField: props.data.labelField,
+      valueField: props.data.valueField
+    };
+    var source = _this.enabledOptionSources.reduce(function (type, source) {
+      var _a;
+      return type !== null && type !== void 0 ? type : ((_a = source.test) === null || _a === void 0 ? void 0 : _a.call(source, state)) === true ? source.value : type;
+    }, undefined) || 'custom';
+    _this.state = __assign(__assign({}, state), {
+      source: source
+    });
+    return _this;
+  }
+  /**
+   * 数据更新
+   */
+  OptionControl.prototype.componentWillReceiveProps = function (nextProps) {
+    var options = nextProps.data.options;
+    // 左侧code手动更新时，同步配置面板
+    if (DeepDiff.diff(options, this.lastOptions)) {
+      this.setState({
+        options: this.transformOptions(nextProps)
+      });
+    }
+  };
+  Object.defineProperty(OptionControl.prototype, "enabledOptionSources", {
+    get: function () {
+      var _a = this.props,
+        hasApiCenter = _a.hasApiCenter,
+        enabledOptionSourceType = _a.enabledOptionSourceType;
+      var options = this.optionSources;
+      if (!hasApiCenter) {
+        options = options.filter(function (item) {
+          return item.value !== 'apicenter';
+        });
+      }
+      if (Array.isArray(enabledOptionSourceType)) {
+        options = enabledOptionSourceType.map(function (type) {
+          return options.find(function (a) {
+            return a.value === type;
+          });
+        }).filter(function (item) {
+          return item;
+        });
+      }
+      return options;
+    },
+    enumerable: false,
+    configurable: true
+  });
+  OptionControl.prototype.transformOptions = function (props) {
+    var ctx = props.data;
+    var options = ctx.options;
+    var defaultValue = ctx.value;
+    var valueArray = value2array(defaultValue, ctx).map(function (item) {
+      var _a;
+      return item[(_a = ctx === null || ctx === void 0 ? void 0 : ctx.valueField) !== null && _a !== void 0 ? _a : 'value'];
+    });
+    return Array.isArray(options) ? options.map(function (item) {
+      var _a;
+      return __assign(__assign(__assign({
+        label: item.label,
+        // 为了使用户编写label时同时生效到value
+        value: item.label === item.value ? null : item.value,
+        checked: !!~valueArray.indexOf(item[(_a = ctx === null || ctx === void 0 ? void 0 : ctx.valueField) !== null && _a !== void 0 ? _a : 'value'])
+      }, (item === null || item === void 0 ? void 0 : item.badge) ? {
+        badge: item.badge
+      } : {}), item.hidden !== undefined ? {
+        hidden: item.hidden
+      } : {}), item.hiddenOn !== undefined ? {
+        hiddenOn: item.hiddenOn
+      } : {});
+    }) : [];
+  };
+  /**
+   * 处理当前组件的默认值
+   */
+  OptionControl.prototype.normalizeValue = function () {
+    var _this = this;
+    var _a = this.props,
+      _b = _a.data,
+      ctx = _b === void 0 ? {} : _b,
+      multipleProps = _a.multiple;
+    var _c = ctx.joinValues,
+      joinValues = _c === void 0 ? true : _c,
+      extractValue = ctx.extractValue,
+      multiple = ctx.multiple,
+      delimiter = ctx.delimiter,
+      valueField = ctx.valueField;
+    var checkedOptions = this.state.options.filter(function (item) {
+      return item.checked && (item === null || item === void 0 ? void 0 : item.hidden) !== true;
+    }).map(function (item) {
+      return omit(item, _this.internalProps);
+    });
+    var value;
+    if (!checkedOptions.length) {
+      return undefined;
+    }
+    if (multiple || multipleProps) {
+      value = checkedOptions;
+      if (joinValues) {
+        value = checkedOptions.map(function (item) {
+          return item[valueField || 'value'] || item[valueField || 'label'];
+        }).join(delimiter || ',');
+      } else if (extractValue) {
+        value = checkedOptions.map(function (item) {
+          return item[valueField || 'value'] || item[valueField || 'label'];
+        });
+      }
+    } else {
+      value = checkedOptions[0];
+      if (joinValues || extractValue) {
+        value = value[valueField || 'value'] || value[valueField || 'label'];
+      }
+    }
+    return value;
+  };
+  /**
+   * 更新options字段的统一出口
+   */
+  OptionControl.prototype.emitChange = function () {
+    var _a = this.state,
+      source = _a.source,
+      options = _a.options;
+    var onBulkChange = this.props.onBulkChange;
+    var defaultValue = this.normalizeValue();
+    var data = {
+      source: undefined,
+      options: undefined,
+      labelField: undefined,
+      valueField: undefined
+    };
+    if (source === 'custom') {
+      data.options = options.map(function (item) {
+        return __assign(__assign(__assign({}, (item === null || item === void 0 ? void 0 : item.badge) ? {
+          badge: item.badge
+        } : {}), {
+          label: item.label,
+          value: item.value == null || item.value === '' ? item.label : item.value
+        }), item.hiddenOn !== undefined ? {
+          hiddenOn: item.hiddenOn
+        } : {});
+      });
+      data.value = defaultValue;
+      this.lastOptions = data.options;
+    }
+    if (source === 'api' || source === 'apicenter' || source === 'variable') {
+      var _b = this.state,
+        api = _b.api,
+        labelField = _b.labelField,
+        valueField = _b.valueField;
+      data.source = api;
+      data.labelField = labelField || undefined;
+      data.valueField = valueField || undefined;
+      this.lastOptions = data.source;
+    }
+    onBulkChange && onBulkChange(data);
+  };
+  /**
+   * 切换选项类型
+   */
+  OptionControl.prototype.handleSourceChange = function (source) {
+    if (this.state.source === source) {
+      return;
+    }
+    this.setState({
+      api: '',
+      source: source
+    }, this.emitChange);
+  };
+  OptionControl.prototype.handleSourceControlChange = function (value) {
+    this.setState(value, this.emitChange);
+  };
+  OptionControl.prototype.renderHeader = function () {
+    var _this = this;
+    var _a, _b;
+    var _c = this.props,
+      render = _c.render,
+      label = _c.label,
+      labelRemark = _c.labelRemark,
+      useMobileUI = _c.useMobileUI,
+      env = _c.env,
+      popOverContainer = _c.popOverContainer;
+    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 = this.enabledOptionSources.map(function (item) {
+      return {
+        label: item.label,
+        value: item.value,
+        onClick: function () {
+          return _this.handleSourceChange(item.value);
+        }
+      };
+    });
+    return React__default.createElement("header", {
+      className: "ae-OptionControl-header"
+    }, React__default.createElement("label", {
+      className: cx("".concat(classPrefix, "Form-label"))
+    }, label || '', labelRemark ? render('label-remark', {
+      type: 'remark',
+      icon: labelRemark.icon || 'warning-mark',
+      tooltip: labelRemark,
+      className: cx("Form-lableRemark", labelRemark === null || labelRemark === void 0 ? void 0 : labelRemark.className),
+      useMobileUI: useMobileUI,
+      container: popOverContainer || env.getModalContainer
+    }) : null), React__default.createElement("div", null, render('validation-control-addBtn', {
+      type: 'dropdown-button',
+      level: 'link',
+      size: 'sm',
+      label: '${selected}',
+      align: 'right',
+      closeOnClick: true,
+      closeOnOutside: true,
+      buttons: optionSourceList
+    }, {
+      popOverContainer: null,
+      data: {
+        selected: (_b = optionSourceList.find(function (item) {
+          return item.value === source;
+        })) === null || _b === void 0 ? void 0 : _b.label
+      }
+    })));
+  };
+  OptionControl.prototype.render = function () {
+    var source = this.state.source;
+    var className = this.props.className;
+    var sourceControl = this.optionSources.find(function (item) {
+      return item.value === source;
+    });
+    var sourceControlProps = __assign(__assign(__assign({}, this.props), this.state), {
+      onChange: this.handleSourceControlChange
+    });
+    return React__default.createElement("div", {
+      className: cx('ae-OptionControl', className)
+    }, this.renderHeader(), sourceControl ? sourceControl.component ? React__default.createElement(sourceControl.component, __assign({}, sourceControlProps, {
+      key: source
+    })) : sourceControl.render(sourceControlProps) : null);
   };
-  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object]), __metadata("design:returntype", void 0)], OptionControl.prototype, "targetRef", null);
-  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object]), __metadata("design:returntype", void 0)], OptionControl.prototype, "dragRef", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", void 0)], OptionControl.prototype, "emitChange", null);
   __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [String]), __metadata("design:returntype", void 0)], OptionControl.prototype, "handleSourceChange", null);
-  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Number, String]), __metadata("design:returntype", void 0)], OptionControl.prototype, "handleEditLabel", null);
-  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Number, String]), __metadata("design:returntype", void 0)], OptionControl.prototype, "handleHiddenValueChange", null);
-  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", void 0)], OptionControl.prototype, "handleAdd", null);
-  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Array, Object]), __metadata("design:returntype", void 0)], OptionControl.prototype, "handleBatchAdd", null);
-  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object]), __metadata("design:returntype", void 0)], OptionControl.prototype, "handleAPIChange", null);
-  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [String]), __metadata("design:returntype", void 0)], OptionControl.prototype, "handleLableFieldChange", null);
-  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [String]), __metadata("design:returntype", void 0)], OptionControl.prototype, "handleValueFieldChange", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object]), __metadata("design:returntype", void 0)], OptionControl.prototype, "handleSourceControlChange", null);
   return OptionControl;
 }(React__default.Component);
 /** @class */(function (_super) {
@@ -732,12 +944,11 @@ var OptionControl = /** @class */function (_super) {
   function OptionControlRenderer() {
     return _super !== null && _super.apply(this, arguments) || this;
   }
-  OptionControlRenderer = __decorate([FormItem({
-    type: 'ae-optionControl',
-    renderLabel: false
+  OptionControlRenderer = __decorate([Renderer({
+    type: 'ae-optionControl'
   })], OptionControlRenderer);
   return OptionControlRenderer;
 })(OptionControl);
 
 export { OptionControl as default };
-window.amisEditorVersionInfo={version:'6.5.0',buildTime:'2024-05-31'};
+window.amisEditorVersionInfo={version:'6.7.0',buildTime:'2024-08-06'};