amis-editor 5.2.0-beta.1 → 5.2.0-beta.2

package/lib/renderer/OptionControl.js

@@ -1,5 +1,5 @@
 /**
- * amis-editor v5.2.0-beta.1
+ * amis-editor v5.2.0-beta.2
  * Copyright 2018-2022 @fex
  */
 
@@ -16,8 +16,8 @@ var omit = require('lodash/omit');
 var Sortable = require('sortablejs');
 var amis = require('amis');
 var Select = require('amis-ui/lib/components/Select');
-var AMisCodeEditor = require('amis-editor-core');
-var BaseControl = require('../component/BaseControl.js');
+var amisEditorCore = require('amis-editor-core');
+var i18nRuntime = require('i18n-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -30,643 +30,827 @@ var Sortable__default = /*#__PURE__*/_interopDefaultLegacy(Sortable);
 /**
  * @file 组件选项组件的可视化编辑控件
  */
-var OptionControl = /** @class */ (function (_super) {
-    tslib.__extends(OptionControl, _super);
-    function OptionControl(props) {
-        var _this = _super.call(this, props) || this;
-        _this.internalProps = ['checked', 'editing'];
-        _this.state = {
-            options: _this.transformOptions(props),
-            api: props.data.source,
-            labelField: props.data.labelField,
-            valueField: props.data.valueField,
-            source: props.data.source ? 'api' : 'custom'
-        };
-        return _this;
+
+var OptionControl =
+/** @class */
+function (_super) {
+  tslib.__extends(OptionControl, _super);
+
+  function OptionControl(props) {
+    var _this = _super.call(this, props) || this;
+
+    _this.internalProps = ['checked', 'editing'];
+    var source = 'custom';
+
+    if (props.data.source) {
+      var api = props.data.source;
+      var url = typeof api === 'string' ? api : typeof api === 'object' ? api.url || '' : '';
+      source = !url.indexOf('api://') ? 'apicenter' : 'api';
     }
-    /**
-     * 获取当前选项值的类型
-     */
-    OptionControl.prototype.getOptionValueType = function (value) {
-        if (typeof value === 'string') {
-            return 'text';
-        }
-        if (typeof value === 'boolean') {
-            return 'boolean';
-        }
-        if (typeof value === 'number') {
-            return 'number';
-        }
-        return 'text';
-    };
-    /**
-     * 将当前选项值转换为选择的类型
-     */
-    OptionControl.prototype.normalizeOptionValue = function (value, valueType) {
-        if (valueType === 'text') {
-            return String(value);
-        }
-        if (valueType === 'number') {
-            var convertTo = Number(value);
-            if (isNaN(convertTo)) {
-                return 0;
-            }
-            return convertTo;
-        }
-        if (valueType === 'boolean') {
-            return !value || value === 'false' ? false : true;
-        }
-        return '';
-    };
-    /**
-     * 处理填入输入框的值
-     */
-    OptionControl.prototype.transformOptionValue = function (value) {
-        return typeof value === 'undefined' || value === null
-            ? ''
-            : typeof value === 'string'
-                ? value
-                : JSON.stringify(value);
-    };
-    OptionControl.prototype.transformOptions = function (props) {
-        var ctx = props.data, options = props.value;
-        var defaultValue = ctx.value;
-        var valueArray = Select.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 ({
-                    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'])
-                });
-            })
-            : [];
-    };
-    /**
-     * 处理当前组件的默认值
-     */
-    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; })
-            .map(function (item) { return omit__default["default"](item, _this.internalProps); });
-        var value;
-        if (!checkedOptions.length) {
-            return '';
-        }
-        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 source = this.state.source;
-        var onBulkChange = this.props.onBulkChange;
-        var defaultValue = this.normalizeValue();
-        var data = {
-            source: undefined,
-            options: undefined,
-            labelField: undefined,
-            valueField: undefined
-        };
-        if (source === 'custom') {
-            var options = this.state.options;
-            data.options = options.map(function (item) { return ({
-                label: item.label,
-                value: item.value == null || item.value === '' ? item.label : item.value
-            }); });
-            data.value = defaultValue || undefined;
-        }
-        if (source === 'api') {
-            var _a = this.state, api = _a.api, labelField = _a.labelField, valueField = _a.valueField;
-            data.source = api;
-            data.labelField = labelField;
-            data.valueField = valueField;
-        }
-        onBulkChange && onBulkChange(data);
-        return;
-    };
-    OptionControl.prototype.targetRef = function (ref) {
-        this.target = ref ? reactDom.findDOMNode(ref) : null;
-    };
-    OptionControl.prototype.dragRef = function (ref) {
-        if (!this.drag && ref) {
-            this.initDragging();
-        }
-        else if (this.drag && !ref) {
-            this.destroyDragging();
-        }
-        this.drag = ref;
+
+    _this.state = {
+      options: _this.transformOptions(props),
+      api: props.data.source,
+      labelField: props.data.labelField,
+      valueField: props.data.valueField,
+      source: source
     };
-    OptionControl.prototype.initDragging = function () {
-        var _this = this;
-        var dom = reactDom.findDOMNode(this);
-        this.sortable = new Sortable__default["default"](dom.querySelector('.ae-OptionControl-content'), {
-            group: 'OptionControlGroup',
-            animation: 150,
-            handle: '.ae-OptionControlItem-dragBar',
-            ghostClass: 'ae-OptionControlItem--dragging',
-            onEnd: function (e) {
-                // 没有移动
-                if (e.newIndex === e.oldIndex) {
-                    return;
-                }
-                // 换回来
-                var parent = e.to;
-                if (e.newIndex < e.oldIndex &&
-                    e.oldIndex < parent.childNodes.length - 1) {
-                    parent.insertBefore(e.item, parent.childNodes[e.oldIndex + 1]);
-                }
-                else if (e.oldIndex < parent.childNodes.length - 1) {
-                    parent.insertBefore(e.item, parent.childNodes[e.oldIndex]);
-                }
-                else {
-                    parent.appendChild(e.item);
-                }
-                var options = _this.state.options.concat();
-                options[e.oldIndex] = options.splice(e.newIndex, 1, options[e.oldIndex])[0];
-                _this.setState({ options: options }, function () { return _this.onChange(); });
-            }
+    return _this;
+  }
+  /**
+   * 获取当前选项值的类型
+   */
+
+
+  OptionControl.prototype.getOptionValueType = function (value) {
+    if (typeof value === 'string') {
+      return 'text';
+    }
+
+    if (typeof value === 'boolean') {
+      return 'boolean';
+    }
+
+    if (typeof value === 'number') {
+      return 'number';
+    }
+
+    return 'text';
+  };
+  /**
+   * 将当前选项值转换为选择的类型
+   */
+
+
+  OptionControl.prototype.normalizeOptionValue = function (value, valueType) {
+    if (valueType === 'text') {
+      return String(value);
+    }
+
+    if (valueType === 'number') {
+      var convertTo = Number(value);
+
+      if (isNaN(convertTo)) {
+        return 0;
+      }
+
+      return convertTo;
+    }
+
+    if (valueType === 'boolean') {
+      return !value || value === 'false' ? false : true;
+    }
+
+    return '';
+  };
+  /**
+   * 处理填入输入框的值
+   */
+
+
+  OptionControl.prototype.transformOptionValue = function (value) {
+    return typeof value === 'undefined' || value === null ? '' : typeof value === 'string' ? value : JSON.stringify(value);
+  };
+
+  OptionControl.prototype.transformOptions = function (props) {
+    var ctx = props.data,
+        options = props.value;
+    var defaultValue = ctx.value;
+    var valueArray = Select.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 {
+        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'])
+      };
+    }) : [];
+  };
+  /**
+   * 处理当前组件的默认值
+   */
+
+
+  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;
+    }).map(function (item) {
+      return omit__default["default"](item, _this.internalProps);
+    });
+    var value;
+
+    if (!checkedOptions.length) {
+      return '';
+    }
+
+    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 source = this.state.source;
+    var onBulkChange = this.props.onBulkChange;
+    var defaultValue = this.normalizeValue();
+    var data = {
+      source: undefined,
+      options: undefined,
+      labelField: undefined,
+      valueField: undefined
     };
-    OptionControl.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({ source: source }, this.onChange);
-    };
-    /**
-     * 删除选项
-     */
-    OptionControl.prototype.handleDelete = function (index) {
-        var _this = this;
-        var options = this.state.options.concat();
-        options.splice(index, 1);
-        this.setState({ options: options }, function () { return _this.onChange(); });
-    };
-    /**
-     * 设置默认选项
-     */
-    OptionControl.prototype.handleToggleDefaultValue = function (index, checked, shift) {
-        var _this = this;
-        var _a, _b, _c;
-        var options = this.state.options.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, tslib.__assign(tslib.__assign({}, options[index]), { checked: checked }));
-        }
-        else {
-            options = options.map(function (item, itemIndex) { return (tslib.__assign(tslib.__assign({}, item), { checked: itemIndex === index })); });
+
+    if (source === 'custom') {
+      var options = this.state.options;
+      data.options = options.map(function (item) {
+        return {
+          label: item.label,
+          value: item.value == null || item.value === '' ? item.label : item.value
+        };
+      });
+      data.value = defaultValue || undefined;
+    }
+
+    if (source === 'api' || source === 'apicenter') {
+      var _a = this.state,
+          api = _a.api,
+          labelField = _a.labelField,
+          valueField = _a.valueField;
+      data.source = api;
+      data.labelField = labelField;
+      data.valueField = valueField;
+    }
+
+    onBulkChange && onBulkChange(data);
+    return;
+  };
+
+  OptionControl.prototype.targetRef = function (ref) {
+    this.target = ref ? reactDom.findDOMNode(ref) : null;
+  };
+
+  OptionControl.prototype.dragRef = function (ref) {
+    if (!this.drag && ref) {
+      this.initDragging();
+    } else if (this.drag && !ref) {
+      this.destroyDragging();
+    }
+
+    this.drag = ref;
+  };
+
+  OptionControl.prototype.initDragging = function () {
+    var _this = this;
+
+    var dom = reactDom.findDOMNode(this);
+    this.sortable = new Sortable__default["default"](dom.querySelector('.ae-OptionControl-content'), {
+      group: 'OptionControlGroup',
+      animation: 150,
+      handle: '.ae-OptionControlItem-dragBar',
+      ghostClass: 'ae-OptionControlItem--dragging',
+      onEnd: function (e) {
+        // 没有移动
+        if (e.newIndex === e.oldIndex) {
+          return;
+        } // 换回来
+
+
+        var parent = e.to;
+
+        if (e.newIndex < e.oldIndex && e.oldIndex < parent.childNodes.length - 1) {
+          parent.insertBefore(e.item, parent.childNodes[e.oldIndex + 1]);
+        } else if (e.oldIndex < parent.childNodes.length - 1) {
+          parent.insertBefore(e.item, parent.childNodes[e.oldIndex]);
+        } else {
+          parent.appendChild(e.item);
         }
-        this.setState({ options: options }, function () { return _this.onChange(); });
-    };
-    /**
-     * 编辑选项
-     */
-    OptionControl.prototype.toggleEdit = function (index) {
-        var options = this.state.options;
-        options[index].editing = !options[index].editing;
-        this.setState({ options: options });
-    };
-    OptionControl.prototype.handleEditLabel = function (index, value) {
-        var _this = this;
-        var options = this.state.options.concat();
-        options.splice(index, 1, tslib.__assign(tslib.__assign({}, options[index]), { label: value }));
-        this.setState({ options: options }, function () { return _this.onChange(); });
-    };
-    OptionControl.prototype.handleAdd = function () {
-        var _this = this;
-        var options = this.state.options;
-        options.push({
-            label: '',
-            value: null,
-            checked: false
-        });
-        this.setState({ options: options }, function () {
-            _this.onChange();
+
+        var options = _this.state.options.concat();
+
+        options[e.oldIndex] = options.splice(e.newIndex, 1, options[e.oldIndex])[0];
+
+        _this.setState({
+          options: options
+        }, function () {
+          return _this.onChange();
         });
-    };
-    OptionControl.prototype.handleValueTypeChange = function (index, type) {
-        var _this = this;
-        var options = this.state.options.concat();
-        options[index].value = this.normalizeOptionValue(options[index].value, type);
-        this.setState({ options: options }, function () { return _this.onChange(); });
-    };
-    OptionControl.prototype.handleValueChange = function (index, value) {
-        var _this = this;
-        var options = this.state.options.concat();
-        var type = this.getOptionValueType(options[index].value);
-        options[index].value = this.normalizeOptionValue(value, type);
-        this.setState({ options: options }, function () { return _this.onChange(); });
-    };
-    OptionControl.prototype.handleBatchAdd = function (values, action) {
-        var _this = this;
-        var options = this.state.options.concat();
-        var addedOptions = values.batchOption
-            .split('\n')
-            .map(function (option) {
-            var item = option.trim();
-            if (~item.indexOf(' ')) {
-                var _a = item.split(' '), label = _a[0], value = _a[1];
-                return { label: label.trim(), value: value.trim(), checked: false };
-            }
-            return { label: item, value: item, checked: false };
+      }
+    });
+  };
+
+  OptionControl.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({
+      source: source
+    }, this.onChange);
+  };
+  /**
+   * 删除选项
+   */
+
+
+  OptionControl.prototype.handleDelete = function (index) {
+    var _this = this;
+
+    var options = this.state.options.concat();
+    options.splice(index, 1);
+    this.setState({
+      options: options
+    }, function () {
+      return _this.onChange();
+    });
+  };
+  /**
+   * 设置默认选项
+   */
+
+
+  OptionControl.prototype.handleToggleDefaultValue = function (index, checked, shift) {
+    var _this = this;
+
+    var _a, _b, _c;
+
+    var options = this.state.options.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, tslib.__assign(tslib.__assign({}, options[index]), {
+        checked: checked
+      }));
+    } else {
+      options = options.map(function (item, itemIndex) {
+        return tslib.__assign(tslib.__assign({}, item), {
+          checked: itemIndex === index ? checked : false // 支持重复点击取消选中
+
         });
-        var newOptions = uniqBy__default["default"](tslib.__spreadArray(tslib.__spreadArray([], options, true), addedOptions, true), 'value');
-        this.setState({ 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;
-        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 = [
-            {
-                label: '自定义选项',
-                value: 'custom'
-            },
-            {
-                label: '接口获取',
-                value: 'api'
-            }
-            // {
-            //   label: '表单实体',
-            //   value: 'form'
-            // }
-        ].map(function (item) { return (tslib.__assign(tslib.__assign({}, item), { onClick: function () { return _this.handleSourceChange(item.value); } })); });
-        return (React__default["default"].createElement("header", { className: "ae-OptionControl-header" },
-            React__default["default"].createElement("label", { className: cx__default["default"]("".concat(classPrefix, "Form-label")) },
-                label || '',
-                labelRemark
-                    ? render('label-remark', {
-                        type: 'remark',
-                        icon: labelRemark.icon || 'warning-mark',
-                        tooltip: labelRemark,
-                        className: cx__default["default"]("Form-lableRemark", labelRemark === null || labelRemark === void 0 ? void 0 : labelRemark.className),
-                        useMobileUI: useMobileUI,
-                        container: popOverContainer
-                            ? popOverContainer
-                            : env && env.getModalContainer
-                                ? env.getModalContainer
-                                : undefined
-                    })
-                    : null),
-            React__default["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) {
-        var _this = this;
-        var checked = props.checked, index = props.index, editing = props.editing, multipleProps = props.multipleProps;
-        var ctx = this.props.data;
-        var isMultiple = (ctx === null || ctx === void 0 ? void 0 : ctx.multiple) === true || multipleProps;
-        var label = this.transformOptionValue(props.label);
-        var value = this.transformOptionValue(props.value);
-        var valueType = this.getOptionValueType(props.value);
-        var editDom = editing ? (React__default["default"].createElement("div", { className: "ae-OptionControlItem-extendMore" }, amis.render({
-            type: 'container',
-            className: 'ae-ExtendMore right mb-2',
-            body: [
-                {
-                    type: 'button',
-                    className: 'ae-OptionControlItem-closeBtn',
-                    label: '×',
-                    level: 'link',
-                    onClick: function () { return _this.toggleEdit(index); }
-                },
-                {
-                    type: 'input-text',
-                    name: 'label',
-                    placeholder: '请输入显示文本',
-                    label: '文本',
-                    mode: 'horizontal',
-                    value: label,
-                    labelClassName: 'ae-OptionControlItem-EditLabel',
-                    valueClassName: 'ae-OptionControlItem-EditValue',
-                    onChange: function (v) { return _this.handleEditLabel(index, v); }
-                },
-                {
-                    type: 'input-group',
-                    name: 'input-group',
-                    label: '值',
-                    labelClassName: 'ae-OptionControlItem-EditLabel',
-                    valueClassName: 'ae-OptionControlItem-EditValue',
-                    mode: 'horizontal',
-                    body: [
-                        {
-                            type: 'select',
-                            name: 'valueType',
-                            value: valueType,
-                            options: [
-                                {
-                                    label: '文本',
-                                    value: 'text'
-                                },
-                                {
-                                    label: '数字',
-                                    value: 'number'
-                                },
-                                {
-                                    label: '布尔',
-                                    value: 'boolean'
-                                }
-                            ],
-                            checkAll: false,
-                            onChange: function (v) {
-                                return _this.handleValueTypeChange(index, v);
-                            }
-                        },
-                        {
-                            type: 'input-text',
-                            placeholder: '默认与文本一致',
-                            name: 'value',
-                            value: value,
-                            visibleOn: "this.optionValueType !== 'boolean'",
-                            onChange: function (v) { return _this.handleValueChange(index, v); }
-                        },
-                        {
-                            type: 'input-text',
-                            placeholder: '默认与文本一致',
-                            name: 'value',
-                            value: value,
-                            visibleOn: "this.optionValueType === 'boolean'",
-                            onChange: function (v) { return _this.handleValueChange(index, v); },
-                            options: [
-                                { label: 'true', value: true },
-                                { label: 'false', value: false }
-                            ]
-                        }
-                    ]
-                }
-            ]
-        }))) : null;
-        return (React__default["default"].createElement("li", { className: "ae-OptionControlItem", key: index },
-            React__default["default"].createElement("div", { className: "ae-OptionControlItem-Main" },
-                React__default["default"].createElement("a", { className: "ae-OptionControlItem-dragBar" },
-                    React__default["default"].createElement(amis.Icon, { icon: "drag-bar", className: "icon" })),
-                !this.props.closeDefaultCheck &&
-                    this.props.data.defaultCheckAll !== true && (React__default["default"].createElement("span", { className: "inline-flex", "data-tooltip": "\u9ED8\u8BA4\u9009\u4E2D\u6B64\u9879" },
-                    React__default["default"].createElement(amis.Checkbox, { className: "ae-OptionControlItem-checkbox", checked: checked, type: isMultiple ? 'checkbox' : 'radio', onChange: function (checked, shift) {
-                            return _this.handleToggleDefaultValue(index, checked, shift);
-                        } }))),
-                React__default["default"].createElement(amis.InputBox, { className: "ae-OptionControlItem-input", value: label, placeholder: "\u8BF7\u8F93\u5165\u6587\u672C/\u503C", clearable: false, onChange: function (value) { return _this.handleEditLabel(index, value); } }),
-                amis.render({
-                    type: 'dropdown-button',
-                    className: 'ae-OptionControlItem-dropdown',
-                    btnClassName: 'px-2',
-                    icon: 'fa fa-ellipsis-h',
-                    hideCaret: true,
-                    closeOnClick: true,
-                    align: 'right',
-                    menuClassName: 'ae-OptionControlItem-ulmenu',
-                    buttons: [
-                        {
-                            type: 'button',
-                            className: 'ae-OptionControlItem-action',
-                            label: '编辑',
-                            onClick: function () { return _this.toggleEdit(index); }
-                        },
-                        {
-                            type: 'button',
-                            className: 'ae-OptionControlItem-action',
-                            label: '删除',
-                            onClick: function () { return _this.handleDelete(index); }
-                        }
-                    ]
-                })),
-            editDom));
-    };
-    OptionControl.prototype.buildBatchAddSchema = function () {
+      });
+    }
+
+    this.setState({
+      options: options
+    }, function () {
+      return _this.onChange();
+    });
+  };
+  /**
+   * 编辑选项
+   */
+
+
+  OptionControl.prototype.toggleEdit = function (index) {
+    var options = this.state.options;
+    options[index].editing = !options[index].editing;
+    this.setState({
+      options: options
+    });
+  };
+
+  OptionControl.prototype.handleEditLabel = function (index, value) {
+    var _this = this;
+
+    var options = this.state.options.concat();
+    options.splice(index, 1, tslib.__assign(tslib.__assign({}, options[index]), {
+      label: value
+    }));
+    this.setState({
+      options: options
+    }, function () {
+      return _this.onChange();
+    });
+  };
+
+  OptionControl.prototype.handleAdd = function () {
+    var _this = this;
+
+    var options = this.state.options;
+    options.push({
+      label: '',
+      value: null,
+      checked: false
+    });
+    this.setState({
+      options: options
+    }, function () {
+      _this.onChange();
+    });
+  };
+
+  OptionControl.prototype.handleValueTypeChange = function (index, type) {
+    var _this = this;
+
+    var options = this.state.options.concat();
+    options[index].value = this.normalizeOptionValue(options[index].value, type);
+    this.setState({
+      options: options
+    }, function () {
+      return _this.onChange();
+    });
+  };
+
+  OptionControl.prototype.handleValueChange = function (index, value) {
+    var _this = this;
+
+    var options = this.state.options.concat();
+    var type = this.getOptionValueType(options[index].value);
+    options[index].value = this.normalizeOptionValue(value, type);
+    this.setState({
+      options: options
+    }, function () {
+      return _this.onChange();
+    });
+  };
+
+  OptionControl.prototype.handleBatchAdd = function (values, action) {
+    var _this = this;
+
+    var options = this.state.options.concat();
+    var addedOptions = values.batchOption.split('\n').map(function (option) {
+      var item = option.trim();
+
+      if (~item.indexOf(' ')) {
+        var _a = item.split(' '),
+            label = _a[0],
+            value = _a[1];
+
         return {
-            type: 'action',
-            actionType: 'dialog',
-            label: '批量添加',
-            dialog: {
-                title: '批量添加选项',
-                headerClassName: 'font-bold',
-                closeOnEsc: true,
-                closeOnOutside: false,
-                showCloseButton: true,
-                body: [
-                    {
-                        type: 'alert',
-                        level: 'warning',
-                        body: [
-                            {
-                                type: 'tpl',
-                                tpl: '每个选项单列一行，将所有值不重复的项加为新的选项;<br/>每行可通过空格来分别设置label和value,例："张三 zhangsan"'
-                            }
-                        ],
-                        showIcon: true,
-                        className: 'mb-2.5'
-                    },
-                    {
-                        type: 'form',
-                        wrapWithPanel: false,
-                        mode: 'normal',
-                        wrapperComponent: 'div',
-                        resetAfterSubmit: true,
-                        autoFocus: true,
-                        preventEnterSubmit: true,
-                        horizontal: {
-                            left: 0,
-                            right: 12
-                        },
-                        body: [
-                            {
-                                name: 'batchOption',
-                                type: 'textarea',
-                                label: '',
-                                placeholder: '请输入选项内容',
-                                trimContents: true,
-                                minRows: 10,
-                                maxRows: 50,
-                                required: true
-                            }
-                        ]
-                    }
-                ]
-            }
+          label: label.trim(),
+          value: value.trim(),
+          checked: false
         };
-    };
-    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);
-    };
-    OptionControl.prototype.renderApiPanel = function () {
-        var render = this.props.render;
-        var _a = this.state, source = _a.source, api = _a.api, labelField = _a.labelField, valueField = _a.valueField;
-        if (source !== 'api') {
-            return null;
+      }
+
+      return {
+        label: item,
+        value: item,
+        checked: false
+      };
+    });
+    var newOptions = uniqBy__default["default"](tslib.__spreadArray(tslib.__spreadArray([], options, true), addedOptions, true), 'value');
+    this.setState({
+      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 = tslib.__spreadArray([{
+      label: i18nRuntime.i18n("01820262aa9ad5b130f8f5b86bfd2968"),
+      value: 'custom'
+    }, {
+      label: i18nRuntime.i18n("f99603414a616bdee85de0e6e3938b65"),
+      value: 'api'
+    }], hasApiCenter ? [{
+      label: i18nRuntime.i18n("e6ff6a97bf600c02942db3126a7077b8"),
+      value: 'apicenter'
+    }] : [] // {
+    //   label: '表单实体',
+    //   value: 'form'
+    // }
+    , true).map(function (item) {
+      return tslib.__assign(tslib.__assign({}, item), {
+        onClick: function () {
+          return _this.handleSourceChange(item.value);
         }
-        return render('api', AMisCodeEditor.getSchemaTpl('apiControl', {
-            label: '接口',
-            name: 'source',
-            className: 'ae-ExtendMore',
-            visibleOn: 'data.autoComplete !== false',
-            value: api,
-            onChange: this.handleAPIChange,
-            footer: [
-                {
-                    label: BaseControl.tipedLabel('显示字段', '选项文本对应的数据字段，多字段合并请通过模板配置'),
-                    type: 'input-text',
-                    name: 'labelField',
-                    value: labelField,
-                    placeholder: '选项文本对应的字段',
-                    onChange: this.handleLableFieldChange
-                },
-                {
-                    label: '值字段',
-                    type: 'input-text',
-                    name: 'valueField',
-                    value: valueField,
-                    placeholder: '值对应的字段',
-                    onChange: this.handleValueFieldChange
-                }
-            ]
-        }));
-    };
-    OptionControl.prototype.render = function () {
-        var _this = this;
-        var _a = this.state, options = _a.options, source = _a.source;
-        var _b = this.props; _b.render; var className = _b.className, multipleProps = _b.multiple;
-        return (React__default["default"].createElement("div", { className: cx__default["default"]('ae-OptionControl', className) },
-            this.renderHeader(),
-            source === 'custom' ? (React__default["default"].createElement("div", { className: "ae-OptionControl-wrapper" },
-                Array.isArray(options) && options.length ? (React__default["default"].createElement("ul", { className: "ae-OptionControl-content", ref: this.dragRef }, options.map(function (option, index) {
-                    return _this.renderOption(tslib.__assign(tslib.__assign({}, option), { index: index, multipleProps: multipleProps }));
-                }))) : (React__default["default"].createElement("div", { className: "ae-OptionControl-placeholder" }, "\u65E0\u9009\u9879")),
-                React__default["default"].createElement("div", { className: "ae-OptionControl-footer" },
-                    React__default["default"].createElement(amis.Button, { level: "enhance", onClick: this.handleAdd, ref: this.targetRef }, "\u6DFB\u52A0\u9009\u9879"),
-                    amis.render(this.buildBatchAddSchema(), {
-                        onSubmit: this.handleBatchAdd
-                    })))) : null,
-            this.renderApiPanel()));
+      });
+    });
+
+    return React__default["default"].createElement("header", {
+      className: "ae-OptionControl-header"
+    }, React__default["default"].createElement("label", {
+      className: cx__default["default"]("".concat(classPrefix, "Form-label"))
+    }, label || '', labelRemark ? render('label-remark', {
+      type: 'remark',
+      icon: labelRemark.icon || 'warning-mark',
+      tooltip: labelRemark,
+      className: cx__default["default"]("Form-lableRemark", labelRemark === null || labelRemark === void 0 ? void 0 : labelRemark.className),
+      useMobileUI: useMobileUI,
+      container: popOverContainer ? popOverContainer : env && env.getModalContainer ? env.getModalContainer : undefined
+    }) : null), React__default["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) {
+    var _this = this;
+
+    var checked = props.checked,
+        index = props.index,
+        editing = props.editing,
+        multipleProps = props.multipleProps,
+        closeDefaultCheck = props.closeDefaultCheck;
+    var render = this.props.render;
+    var ctx = this.props.data;
+    var isMultiple = (ctx === null || ctx === void 0 ? void 0 : ctx.multiple) === true || multipleProps;
+    var label = this.transformOptionValue(props.label);
+    var value = this.transformOptionValue(props.value);
+    var valueType = this.getOptionValueType(props.value);
+    var editDom = editing ? React__default["default"].createElement("div", {
+      className: "ae-OptionControlItem-extendMore"
+    }, render('option', {
+      type: 'container',
+      className: 'ae-ExtendMore right mb-2',
+      body: [{
+        type: 'button',
+        className: 'ae-OptionControlItem-closeBtn',
+        label: '×',
+        level: 'link',
+        onClick: function () {
+          return _this.toggleEdit(index);
+        }
+      }, {
+        type: 'input-text',
+        placeholder: i18nRuntime.i18n("b4fdf79b8f54856b072ec3874b830d1f"),
+        label: i18nRuntime.i18n("97d07614380da93d257f9fbf81aa56fb"),
+        mode: 'horizontal',
+        value: label,
+        labelClassName: 'ae-OptionControlItem-EditLabel',
+        valueClassName: 'ae-OptionControlItem-EditValue',
+        onChange: function (v) {
+          return _this.handleEditLabel(index, v);
+        }
+      }, {
+        type: 'input-group',
+        name: 'input-group',
+        label: i18nRuntime.i18n("fe7509e0ed085b86f07e3e9975cc5b3d"),
+        labelClassName: 'ae-OptionControlItem-EditLabel',
+        valueClassName: 'ae-OptionControlItem-EditValue',
+        mode: 'horizontal',
+        body: [{
+          type: 'select',
+          name: 'valueType',
+          value: valueType,
+          options: [{
+            label: i18nRuntime.i18n("97d07614380da93d257f9fbf81aa56fb"),
+            value: 'text'
+          }, {
+            label: i18nRuntime.i18n("55d4790c5d819cd0462cbe89561b0dd4"),
+            value: 'number'
+          }, {
+            label: i18nRuntime.i18n("97b0b6499334ed889b372513290a2a52"),
+            value: 'boolean'
+          }],
+          checkAll: false,
+          onChange: function (v) {
+            return _this.handleValueTypeChange(index, v);
+          }
+        }, {
+          type: 'input-text',
+          placeholder: i18nRuntime.i18n("f4ab507e2fa2d2bd66bcdeafd9fef797"),
+          name: 'value',
+          value: value,
+          visibleOn: "this.optionValueType !== 'boolean'",
+          onChange: function (v) {
+            return _this.handleValueChange(index, v);
+          }
+        }, {
+          type: 'input-text',
+          placeholder: i18nRuntime.i18n("f4ab507e2fa2d2bd66bcdeafd9fef797"),
+          name: 'value',
+          value: value,
+          visibleOn: "this.optionValueType === 'boolean'",
+          onChange: function (v) {
+            return _this.handleValueChange(index, v);
+          },
+          options: [{
+            label: 'true',
+            value: true
+          }, {
+            label: 'false',
+            value: false
+          }]
+        }]
+      }]
+    })) : null;
+    var operationBtn = [{
+      type: 'button',
+      className: 'ae-OptionControlItem-action',
+      label: i18nRuntime.i18n("95b351c86267f3aedf89520959bce689"),
+      onClick: function () {
+        return _this.toggleEdit(index);
+      }
+    }, {
+      type: 'button',
+      className: 'ae-OptionControlItem-action',
+      label: i18nRuntime.i18n("2f4aaddde33c9b93c36fd2503f3d122b"),
+      onClick: function () {
+        return _this.handleDelete(index);
+      }
+    }]; // 单选模式，选中时增加取消操作
+
+    if (!closeDefaultCheck && !isMultiple && checked) {
+      operationBtn.unshift({
+        type: 'button',
+        className: 'ae-OptionControlItem-action',
+        label: i18nRuntime.i18n("aafda9e8f6b7b613680677c513edb7a6"),
+        onClick: function () {
+          return _this.handleToggleDefaultValue(index, false);
+        }
+      });
+    }
+
+    return React__default["default"].createElement("li", {
+      className: "ae-OptionControlItem",
+      key: index
+    }, React__default["default"].createElement("div", {
+      className: "ae-OptionControlItem-Main"
+    }, React__default["default"].createElement("a", {
+      className: "ae-OptionControlItem-dragBar"
+    }, React__default["default"].createElement(amis.Icon, {
+      icon: "drag-bar",
+      className: "icon"
+    })), !this.props.closeDefaultCheck && this.props.data.defaultCheckAll !== true && React__default["default"].createElement("span", {
+      className: "inline-flex",
+      "data-tooltip": "\u9ED8\u8BA4\u9009\u4E2D\u6B64\u9879"
+    }, React__default["default"].createElement(amis.Checkbox, {
+      className: "ae-OptionControlItem-checkbox",
+      checked: checked,
+      type: isMultiple ? 'checkbox' : 'radio',
+      onChange: function (newChecked, shift) {
+        return _this.handleToggleDefaultValue(index, newChecked, shift);
+      }
+    })), React__default["default"].createElement(amis.InputBox, {
+      className: "ae-OptionControlItem-input",
+      value: label,
+      placeholder: "\u8BF7\u8F93\u5165\u6587\u672C/\u503C",
+      clearable: false,
+      onChange: function (value) {
+        return _this.handleEditLabel(index, value);
+      }
+    }), render('dropdown', {
+      type: 'dropdown-button',
+      className: 'ae-OptionControlItem-dropdown',
+      btnClassName: 'px-2',
+      icon: 'fa fa-ellipsis-h',
+      hideCaret: true,
+      closeOnClick: true,
+      align: 'right',
+      menuClassName: 'ae-OptionControlItem-ulmenu',
+      buttons: operationBtn
+    }, {
+      popOverContainer: null // amis 渲染挂载节点会使用 this.target
+
+    })), editDom);
+  };
+
+  OptionControl.prototype.buildBatchAddSchema = function () {
+    return {
+      type: 'action',
+      actionType: 'dialog',
+      label: i18nRuntime.i18n("22de6ef85ed60ec54dbdc1d8583e5104"),
+      dialog: {
+        title: i18nRuntime.i18n("421252e16c6cb544fe9ce0be94a190e0"),
+        headerClassName: 'font-bold',
+        closeOnEsc: true,
+        closeOnOutside: false,
+        showCloseButton: true,
+        body: [{
+          type: 'alert',
+          level: 'warning',
+          body: [{
+            type: 'tpl',
+            tpl: i18nRuntime.i18n("c130bd5b55edefdaf8923269e9a52439")
+          }],
+          showIcon: true,
+          className: 'mb-2.5'
+        }, {
+          type: 'form',
+          wrapWithPanel: false,
+          mode: 'normal',
+          wrapperComponent: 'div',
+          resetAfterSubmit: true,
+          autoFocus: true,
+          preventEnterSubmit: true,
+          horizontal: {
+            left: 0,
+            right: 12
+          },
+          body: [{
+            name: 'batchOption',
+            type: 'textarea',
+            label: '',
+            placeholder: i18nRuntime.i18n("1e2f96a69fbef8caa8823a3067ebbdc7"),
+            trimContents: true,
+            minRows: 10,
+            maxRows: 50,
+            required: true
+          }]
+        }]
+      }
     };
-    tslib.__decorate([
-        AMisCodeEditor.autobind,
-        tslib.__metadata("design:type", Function),
-        tslib.__metadata("design:paramtypes", [Object]),
-        tslib.__metadata("design:returntype", void 0)
-    ], OptionControl.prototype, "targetRef", null);
-    tslib.__decorate([
-        AMisCodeEditor.autobind,
-        tslib.__metadata("design:type", Function),
-        tslib.__metadata("design:paramtypes", [Object]),
-        tslib.__metadata("design:returntype", void 0)
-    ], OptionControl.prototype, "dragRef", null);
-    tslib.__decorate([
-        AMisCodeEditor.autobind,
-        tslib.__metadata("design:type", Function),
-        tslib.__metadata("design:paramtypes", [String]),
-        tslib.__metadata("design:returntype", void 0)
-    ], OptionControl.prototype, "handleSourceChange", null);
-    tslib.__decorate([
-        AMisCodeEditor.autobind,
-        tslib.__metadata("design:type", Function),
-        tslib.__metadata("design:paramtypes", [Number, String]),
-        tslib.__metadata("design:returntype", void 0)
-    ], OptionControl.prototype, "handleEditLabel", null);
-    tslib.__decorate([
-        AMisCodeEditor.autobind,
-        tslib.__metadata("design:type", Function),
-        tslib.__metadata("design:paramtypes", []),
-        tslib.__metadata("design:returntype", void 0)
-    ], OptionControl.prototype, "handleAdd", null);
-    tslib.__decorate([
-        AMisCodeEditor.autobind,
-        tslib.__metadata("design:type", Function),
-        tslib.__metadata("design:paramtypes", [Object, Object]),
-        tslib.__metadata("design:returntype", void 0)
-    ], OptionControl.prototype, "handleBatchAdd", null);
-    tslib.__decorate([
-        AMisCodeEditor.autobind,
-        tslib.__metadata("design:type", Function),
-        tslib.__metadata("design:paramtypes", [Object]),
-        tslib.__metadata("design:returntype", void 0)
-    ], OptionControl.prototype, "handleAPIChange", null);
-    tslib.__decorate([
-        AMisCodeEditor.autobind,
-        tslib.__metadata("design:type", Function),
-        tslib.__metadata("design:paramtypes", [String]),
-        tslib.__metadata("design:returntype", void 0)
-    ], OptionControl.prototype, "handleLableFieldChange", null);
-    tslib.__decorate([
-        AMisCodeEditor.autobind,
-        tslib.__metadata("design:type", Function),
-        tslib.__metadata("design:paramtypes", [String]),
-        tslib.__metadata("design:returntype", void 0)
-    ], OptionControl.prototype, "handleValueFieldChange", null);
-    return OptionControl;
-}(React__default["default"].Component));
-/** @class */ ((function (_super) {
-    tslib.__extends(OptionControlRenderer, _super);
-    function OptionControlRenderer() {
-        return _super !== null && _super.apply(this, arguments) || this;
+  };
+
+  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);
+  };
+
+  OptionControl.prototype.renderApiPanel = function () {
+    var render = this.props.render;
+    var _a = this.state,
+        source = _a.source,
+        api = _a.api,
+        labelField = _a.labelField,
+        valueField = _a.valueField;
+
+    if (source === 'custom') {
+      return null;
     }
-    OptionControlRenderer = tslib.__decorate([
-        amis.FormItem({
-            type: 'ae-optionControl',
-            renderLabel: false
-        })
-    ], OptionControlRenderer);
-    return OptionControlRenderer;
-})(OptionControl));
+
+    return render('api', amisEditorCore.getSchemaTpl('apiControl', {
+      label: i18nRuntime.i18n("54ea89b497ec3bb319c68844dfa3687f"),
+      name: 'source',
+      mode: 'normal',
+      className: 'ae-ExtendMore',
+      visibleOn: 'data.autoComplete !== false',
+      value: api,
+      onChange: this.handleAPIChange,
+      sourceType: source,
+      footer: [{
+        label: amisEditorCore.tipedLabel(i18nRuntime.i18n("7e9c83e86beb612377a94e6e8d1fc644"), i18nRuntime.i18n("26ff46d82166741297ce666b2792af85")),
+        type: 'input-text',
+        name: 'labelField',
+        value: labelField,
+        placeholder: i18nRuntime.i18n("6d4ce0631f37676a887c9599691fabec"),
+        onChange: this.handleLableFieldChange
+      }, {
+        label: i18nRuntime.i18n("2e01f5f5889e33d003bec7857cd38445"),
+        type: 'input-text',
+        name: 'valueField',
+        value: valueField,
+        placeholder: i18nRuntime.i18n("959c27193eb0a41d01f4b53dcc4b9245"),
+        onChange: this.handleValueFieldChange
+      }]
+    }));
+  };
+
+  OptionControl.prototype.render = function () {
+    var _this = this;
+
+    var _a = this.state,
+        options = _a.options,
+        source = _a.source;
+    var _b = this.props,
+        render = _b.render,
+        className = _b.className,
+        multipleProps = _b.multiple;
+    return React__default["default"].createElement("div", {
+      className: cx__default["default"]('ae-OptionControl', className)
+    }, this.renderHeader(), source === 'custom' ? React__default["default"].createElement("div", {
+      className: "ae-OptionControl-wrapper"
+    }, Array.isArray(options) && options.length ? React__default["default"].createElement("ul", {
+      className: "ae-OptionControl-content",
+      ref: this.dragRef
+    }, options.map(function (option, index) {
+      return _this.renderOption(tslib.__assign(tslib.__assign({}, option), {
+        index: index,
+        multipleProps: multipleProps
+      }));
+    })) : React__default["default"].createElement("div", {
+      className: "ae-OptionControl-placeholder"
+    }, "\u65E0\u9009\u9879"), React__default["default"].createElement("div", {
+      className: "ae-OptionControl-footer"
+    }, React__default["default"].createElement(amis.Button, {
+      level: "enhance",
+      onClick: this.handleAdd,
+      ref: this.targetRef
+    }, "\u6DFB\u52A0\u9009\u9879"), render('inner', this.buildBatchAddSchema(), {
+      onSubmit: this.handleBatchAdd
+    }))) : null, this.renderApiPanel());
+  };
+
+  tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [Object]), tslib.__metadata("design:returntype", void 0)], OptionControl.prototype, "targetRef", null);
+
+  tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [Object]), tslib.__metadata("design:returntype", void 0)], OptionControl.prototype, "dragRef", null);
+
+  tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [String]), tslib.__metadata("design:returntype", void 0)], OptionControl.prototype, "handleSourceChange", null);
+
+  tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [Number, String]), tslib.__metadata("design:returntype", void 0)], OptionControl.prototype, "handleEditLabel", null);
+
+  tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", []), tslib.__metadata("design:returntype", void 0)], OptionControl.prototype, "handleAdd", null);
+
+  tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [Object, Object]), tslib.__metadata("design:returntype", void 0)], OptionControl.prototype, "handleBatchAdd", null);
+
+  tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [Object]), tslib.__metadata("design:returntype", void 0)], OptionControl.prototype, "handleAPIChange", null);
+
+  tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [String]), tslib.__metadata("design:returntype", void 0)], OptionControl.prototype, "handleLableFieldChange", null);
+
+  tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [String]), tslib.__metadata("design:returntype", void 0)], OptionControl.prototype, "handleValueFieldChange", null);
+
+  return OptionControl;
+}(React__default["default"].Component);
+
+/** @class */
+(function (_super) {
+  tslib.__extends(OptionControlRenderer, _super);
+
+  function OptionControlRenderer() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  OptionControlRenderer = tslib.__decorate([amis.FormItem({
+    type: 'ae-optionControl',
+    renderLabel: false
+  })], OptionControlRenderer);
+  return OptionControlRenderer;
+})(OptionControl);
 
 exports["default"] = OptionControl;