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

package/lib/renderer/APIControl.js

@@ -1,5 +1,5 @@
 /**
- * amis-editor v5.2.0-beta.0
+ * amis-editor v5.2.0-beta.2
  * Copyright 2018-2022 @fex
  */
 
@@ -13,10 +13,11 @@ var merge = require('lodash/merge');
 var cloneDeep = require('lodash/cloneDeep');
 var cx = require('classnames');
 var amis = require('amis');
+var amisUi = require('amis-ui');
 var mobxStateTree = require('mobx-state-tree');
 var amisCore = require('amis-core');
-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 }; }
 
@@ -25,767 +26,942 @@ var merge__default = /*#__PURE__*/_interopDefaultLegacy(merge);
 var cloneDeep__default = /*#__PURE__*/_interopDefaultLegacy(cloneDeep);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var APIControl = /** @class */ (function (_super) {
-    tslib.__extends(APIControl, _super);
-    function APIControl(props) {
-        var _this = _super.call(this, props) || this;
-        _this.state = {
-            apiStr: _this.transformApi2Str(props.value),
-            selectedItem: [],
-            schema: props.pickerSchema
-        };
-        return _this;
+var APIControl =
+/** @class */
+function (_super) {
+  tslib.__extends(APIControl, _super);
+
+  function APIControl(props) {
+    var _this = _super.call(this, props) || this;
+
+    _this.state = {
+      apiStr: _this.transformApi2Str(props.value),
+      selectedItem: [],
+      schema: props.pickerSchema,
+      loading: false
+    };
+    return _this;
+  }
+
+  APIControl.prototype.componentDidMount = function () {
+    this.updatePickerOptions();
+  };
+
+  APIControl.prototype.componentDidUpdate = function (prevProps) {
+    var props = this.props;
+
+    if (prevProps.value !== props.value) {
+      this.setState({
+        apiStr: this.transformApi2Str(props.value)
+      });
+      this.updatePickerOptions();
     }
-    APIControl.prototype.componentDidUpdate = function (prevProps) {
-        var props = this.props;
-        if (prevProps.value !== props.value) {
-            this.setState({ apiStr: this.transformApi2Str(props.value) });
-        }
-        if (AMisCodeEditor.anyChanged(['enablePickerMode', 'pickerSchema'], prevProps, props)) {
-            this.setState({ schema: props.pickerSchema });
+
+    if (amisEditorCore.anyChanged(['enablePickerMode', 'pickerSchema'], prevProps, props)) {
+      this.setState({
+        schema: props.pickerSchema
+      });
+    }
+
+    if (amisCore.isApiOutdated(prevProps === null || prevProps === void 0 ? void 0 : prevProps.pickerSource, props === null || props === void 0 ? void 0 : props.pickerSource, prevProps.data, props.data)) {
+      this.fetchOptions();
+    }
+  };
+  /**
+   * 已选API详情，因为list接口是分页的，所以需要单独调用一次
+   */
+
+
+  APIControl.prototype.updatePickerOptions = function () {
+    var _a;
+
+    return tslib.__awaiter(this, void 0, void 0, function () {
+      var apiObj, keyword;
+      return tslib.__generator(this, function (_b) {
+        switch (_b.label) {
+          case 0:
+            apiObj = amisCore.normalizeApi(this.props.value);
+            if (!((_a = apiObj === null || apiObj === void 0 ? void 0 : apiObj.url) === null || _a === void 0 ? void 0 : _a.startsWith('api://'))) return [3
+            /*break*/
+            , 4];
+            this.setState({
+              loading: true
+            });
+            keyword = apiObj.url.replace('api://', '');
+            _b.label = 1;
+
+          case 1:
+            _b.trys.push([1, 3,, 4]);
+
+            return [4
+            /*yield*/
+            , this.fetchOptions(keyword)];
+
+          case 2:
+            _b.sent();
+
+            return [3
+            /*break*/
+            , 4];
+
+          case 3:
+            _b.sent();
+            return [3
+            /*break*/
+            , 4];
+
+          case 4:
+            this.setState({
+              loading: false
+            });
+            return [2
+            /*return*/
+            ];
         }
-        if (amisCore.isApiOutdated(prevProps === null || prevProps === void 0 ? void 0 : prevProps.pickerSource, props === null || props === void 0 ? void 0 : props.pickerSource, prevProps.data, props.data)) {
-            this.fetchOptions();
+      });
+    });
+  };
+
+  APIControl.prototype.transformApi2Str = function (value) {
+    var api = amisCore.normalizeApi(value);
+    return api.url ? "".concat(api.method && api.method.toLowerCase() !== 'get'
+    /** 默认为GET请求，直接隐藏掉前缀，为了呈现更多信息 */
+    ? "".concat(api.method, ":") : '').concat(api.url) : '';
+  };
+
+  APIControl.prototype.fetchOptions = function (keyword) {
+    var _a, _b, _c, _d;
+
+    return tslib.__awaiter(this, void 0, void 0, function () {
+      var _e, value, data, env, searchField, searchType, pickerSource, apiObj, apiKey, ctx, schemaFilter, res, items, selectedItem;
+
+      var _f;
+
+      return tslib.__generator(this, function (_g) {
+        switch (_g.label) {
+          case 0:
+            _e = this.props, value = _e.value, data = _e.data, env = _e.env, searchField = _e.searchField, searchType = _e.searchType;
+            pickerSource = this.props.pickerSource;
+            apiObj = amisCore.normalizeApi(value);
+
+            if (!pickerSource || !(apiObj === null || apiObj === void 0 ? void 0 : apiObj.url)) {
+              return [2
+              /*return*/
+              ];
+            }
+
+            apiKey = (_b = (_a = apiObj === null || apiObj === void 0 ? void 0 : apiObj.url) === null || _a === void 0 ? void 0 : _a.split('api://')) === null || _b === void 0 ? void 0 : _b[1];
+            ctx = amisEditorCore.createObject(data, tslib.__assign({
+              value: value,
+              op: 'loadOptions'
+            }, keyword && searchField ? (_f = {}, _f[searchField] = keyword, _f.searchType = searchType, _f) : {}));
+            schemaFilter = mobxStateTree.getEnv(window.editorStore).schemaFilter; // 基于爱速搭的规则转换一下
+
+            if (schemaFilter) {
+              pickerSource = schemaFilter({
+                api: pickerSource
+              }).api;
+            }
+
+            if (!amisCore.isEffectiveApi(pickerSource, ctx)) return [3
+            /*break*/
+            , 2];
+            return [4
+            /*yield*/
+            , env.fetcher(pickerSource, ctx)];
+
+          case 1:
+            res = _g.sent();
+            items = ((_c = res.data) === null || _c === void 0 ? void 0 : _c.items) || ((_d = res === null || res === void 0 ? void 0 : res.data) === null || _d === void 0 ? void 0 : _d.rows);
+
+            if (items.length) {
+              selectedItem = items.find(function (item) {
+                return item.key === apiKey;
+              });
+              this.setState({
+                selectedItem: selectedItem ? [selectedItem] : []
+              });
+            }
+
+            _g.label = 2;
+
+          case 2:
+            return [2
+            /*return*/
+            ];
         }
-    };
-    APIControl.prototype.transformApi2Str = function (value) {
-        var api = amisCore.normalizeApi(value);
-        return api.url ? "".concat(api.method ? "".concat(api.method, ":") : '').concat(api.url) : '';
-    };
-    APIControl.prototype.fetchOptions = function () {
-        var _a, _b, _c;
-        return tslib.__awaiter(this, void 0, void 0, function () {
-            var _d, value, data, env, pickerSource, apiObj, apiKey, ctx, schemaFilter, res, items, selectedItem;
-            return tslib.__generator(this, function (_e) {
-                switch (_e.label) {
-                    case 0:
-                        _d = this.props, value = _d.value, data = _d.data, env = _d.env;
-                        pickerSource = this.props.pickerSource;
-                        apiObj = amisCore.normalizeApi(value);
-                        apiKey = (_a = apiObj === null || apiObj === void 0 ? void 0 : apiObj.url.split('api://')) === null || _a === void 0 ? void 0 : _a[1];
-                        if (!pickerSource) {
-                            return [2 /*return*/];
-                        }
-                        ctx = AMisCodeEditor.createObject(data, { value: value, op: 'loadOptions' });
-                        schemaFilter = mobxStateTree.getEnv(window.editorStore).schemaFilter;
-                        // 基于爱速搭的规则转换一下
-                        if (schemaFilter) {
-                            pickerSource = schemaFilter({ api: pickerSource }).api;
-                        }
-                        if (!amisCore.isEffectiveApi(pickerSource, ctx)) return [3 /*break*/, 2];
-                        return [4 /*yield*/, env.fetcher(pickerSource, ctx)];
-                    case 1:
-                        res = _e.sent();
-                        items = ((_b = res.data) === null || _b === void 0 ? void 0 : _b.items) || ((_c = res === null || res === void 0 ? void 0 : res.data) === null || _c === void 0 ? void 0 : _c.rows);
-                        if (items.length) {
-                            selectedItem = items.find(function (item) { return item.key === apiKey; });
-                            this.setState({ selectedItem: selectedItem ? [selectedItem] : [] });
-                        }
-                        _e.label = 2;
-                    case 2: return [2 /*return*/];
-                }
+      });
+    });
+  };
+
+  APIControl.prototype.inputRef = function (ref) {
+    this.input = ref;
+  };
+
+  APIControl.prototype.focus = function () {
+    if (!this.input) {
+      return;
+    }
+
+    this.input.focus();
+  };
+
+  APIControl.prototype.clearPickerValue = function () {
+    var _this = this;
+
+    var onChange = this.props.onChange;
+    this.setState({
+      apiStr: this.transformApi2Str(undefined),
+      selectedItem: []
+    }, function () {
+      onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
+
+      _this.focus();
+    });
+  };
+
+  APIControl.prototype.handleSimpleInputChange = function (e) {
+    var value = e.currentTarget.value;
+    this.handleSubmit(value, 'input');
+  };
+
+  APIControl.prototype.handleSubmit = function (values, action) {
+    var _a = this.props,
+        onChange = _a.onChange,
+        value = _a.value;
+    var api = values; // Picker未做选择
+
+    if (!values && action === 'picker-submit') {
+      return;
+    }
+
+    if (typeof value !== 'string' || typeof values !== 'string') {
+      api = merge__default["default"]({}, amisCore.normalizeApi(values));
+    }
+
+    onChange === null || onChange === void 0 ? void 0 : onChange(api);
+  };
+
+  APIControl.prototype.handleAction = function (schema, e, action, data) {
+    var onAction = this.props.onAction;
+    onAction === null || onAction === void 0 ? void 0 : onAction(schema, e, action, data);
+  };
+
+  APIControl.prototype.normalizeValue = function (value, callback) {
+    var transformedValue = cloneDeep__default["default"](value);
+
+    if (typeof callback === 'function') {
+      transformedValue = callback(value);
+    }
+
+    return transformedValue;
+  };
+
+  APIControl.prototype.handlePickerConfirm = function (value) {
+    var onPickerConfirm = this.props.onPickerConfirm;
+    this.handleSubmit(this.normalizeValue(value, onPickerConfirm), 'picker-submit');
+  };
+
+  APIControl.prototype.handlePickerClose = function () {
+    var onPickerClose = this.props.onPickerClose;
+    onPickerClose === null || onPickerClose === void 0 ? void 0 : onPickerClose();
+  };
+
+  APIControl.prototype.renderHeader = function () {
+    var _a;
+
+    var _b = this.props,
+        render = _b.render,
+        labelRemark = _b.labelRemark,
+        useMobileUI = _b.useMobileUI,
+        popOverContainer = _b.popOverContainer,
+        env = _b.env;
+    var label = this.props.label;
+    var classPrefix = (_a = env === null || env === void 0 ? void 0 : env.theme) === null || _a === void 0 ? void 0 : _a.classPrefix; // const actionsDom =
+    //   Array.isArray(actions) && actions.length > 0
+    //     ? actions.map((action, index) => {
+    //         return render(`action/${index}`, action, {
+    //           key: index,
+    //           onAction: this.handleAction.bind(this, action)
+    //         });
+    //       })
+    //     : null;
+
+    return React__default["default"].createElement("header", {
+      className: "ApiControl-header",
+      key: "header"
+    }, React__default["default"].createElement("label", {
+      className: cx__default["default"]("".concat(classPrefix, "Form-label"))
+    }, (label === null || label === void 0 ? void 0 : label.type) ? render('label', 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));
+  };
+
+  APIControl.prototype.renderPickerSchema = function () {
+    var _this = this;
+
+    var _a = this.props,
+        render = _a.render,
+        pickerTitle = _a.pickerTitle;
+        _a.pickerName;
+        var pickerSize = _a.pickerSize,
+        pickerHeaderClassName = _a.pickerHeaderClassName,
+        pickerBtnSchema = _a.pickerBtnSchema,
+        enablePickerMode = _a.enablePickerMode,
+        onPickerSelect = _a.onPickerSelect;
+    var _c = this.state,
+        selectedItem = _c.selectedItem,
+        schema = _c.schema;
+
+    if (!schema) {
+      return null;
+    }
+
+    return React__default["default"].createElement(amisUi.PickerContainer, {
+      title: pickerTitle,
+      headerClassName: cx__default["default"](pickerHeaderClassName, 'font-bold'),
+      onConfirm: this.handlePickerConfirm,
+      onCancel: this.handlePickerClose,
+      size: pickerSize,
+      bodyRender: function (_a) {
+        var onChange = _a.onChange,
+            setState = _a.setState;
+        return render('api-control-picker', schema, {
+          value: selectedItem,
+          onSelect: function (items) {
+            setState({
+              selectedItem: items
             });
+            onChange(_this.normalizeValue(items, onPickerSelect));
+          }
         });
-    };
-    APIControl.prototype.handleSubmit = function (values, action) {
-        var _a = this.props, onChange = _a.onChange, value = _a.value;
-        var api = values;
-        // Picker未做选择
-        if (!values && action === 'picker-submit') {
-            return;
-        }
-        if (typeof value !== 'string' || typeof values !== 'string') {
-            api = merge__default["default"]({}, amisCore.normalizeApi(value), amisCore.normalizeApi(values));
-        }
-        onChange === null || onChange === void 0 ? void 0 : onChange(api);
-    };
-    APIControl.prototype.handleAction = function (schema, e, action, data) {
-        var onAction = this.props.onAction;
-        onAction === null || onAction === void 0 ? void 0 : onAction(schema, e, action, data);
-    };
-    APIControl.prototype.normalizeValue = function (value, callback) {
-        var transformedValue = cloneDeep__default["default"](value);
-        if (typeof callback === 'function') {
-            transformedValue = callback(value);
-        }
-        return transformedValue;
-    };
-    APIControl.prototype.handlePickerConfirm = function (value) {
-        var onPickerConfirm = this.props.onPickerConfirm;
-        this.handleSubmit(this.normalizeValue(value, onPickerConfirm), 'picker-submit');
-    };
-    APIControl.prototype.handlePickerClose = function () {
-        var onPickerClose = this.props.onPickerClose;
-        onPickerClose === null || onPickerClose === void 0 ? void 0 : onPickerClose();
-    };
-    APIControl.prototype.renderHeader = function () {
-        var _this = this;
-        var _a = this.props, render = _a.render, actions = _a.actions, enablePickerMode = _a.enablePickerMode;
-        var actionsDom = Array.isArray(actions) && actions.length > 0
-            ? actions.map(function (action, index) {
-                return render("action/".concat(index), action, {
-                    key: index,
-                    onAction: _this.handleAction.bind(_this, action)
-                });
-            })
-            : null;
-        return actionsDom || enablePickerMode ? (React__default["default"].createElement("header", { className: "ae-ApiControl-header", key: "header" }, enablePickerMode ? this.renderPickerSchema() : actionsDom)) : null;
-    };
-    APIControl.prototype.renderPickerSchema = function () {
-        var _this = this;
-        var _a = this.props, render = _a.render, pickerTitle = _a.pickerTitle, _b = _a.pickerName, pickerName = _b === void 0 ? 'apiPicker' : _b, pickerSize = _a.pickerSize, pickerHeaderClassName = _a.pickerHeaderClassName, pickerBtnSchema = _a.pickerBtnSchema, enablePickerMode = _a.enablePickerMode, onPickerSelect = _a.onPickerSelect;
-        var _c = this.state, selectedItem = _c.selectedItem, schema = _c.schema;
-        if (!schema) {
-            return null;
-        }
-        return (React__default["default"].createElement(amis.PickerContainer, { title: pickerTitle, value: selectedItem, headerClassName: cx__default["default"](pickerHeaderClassName, 'font-bold'), onConfirm: this.handlePickerConfirm, onCancel: this.handlePickerClose, size: pickerSize, bodyRender: function (_a) {
-                var _b;
-                _a.value; _a.onClose; var onChange = _a.onChange, setState = _a.setState; tslib.__rest(_a, ["value", "onClose", "onChange", "setState"]);
-                return render('api-control-picker', schema, {
-                    data: (_b = {}, _b[pickerName] = selectedItem, _b),
-                    onSelect: function (items) {
-                        setState({ selectedItem: items });
-                        onChange(_this.normalizeValue(items, onPickerSelect));
-                    }
-                });
-            } }, function (_a) {
-            var onClick = _a.onClick, isOpened = _a.isOpened;
-            return render('picker-action', pickerBtnSchema, {
-                onClick: function (e) { return tslib.__awaiter(_this, void 0, void 0, function () {
-                    return tslib.__generator(this, function (_b) {
-                        switch (_b.label) {
-                            case 0:
-                                if (!(!isOpened && enablePickerMode)) return [3 /*break*/, 4];
-                                _b.label = 1;
-                            case 1:
-                                _b.trys.push([1, 3, , 4]);
-                                return [4 /*yield*/, this.fetchOptions()];
-                            case 2:
-                                _b.sent();
-                                return [3 /*break*/, 4];
-                            case 3:
-                                _b.sent();
-                                return [3 /*break*/, 4];
-                            case 4:
-                                onClick(e);
-                                return [2 /*return*/];
-                        }
-                    });
-                }); }
+      }
+    }, function (_a) {
+      var onClick = _a.onClick,
+          isOpened = _a.isOpened;
+      return render('picker-action', tslib.__assign(tslib.__assign({
+        icon: React__default["default"].createElement(amis.Icon, {
+          icon: "picker-icon",
+          className: "icon ae-ApiControl-icon"
+        })
+      }, pickerBtnSchema), {
+        className: cx__default["default"]('ae-ApiControl-PickerBtn', pickerBtnSchema === null || pickerBtnSchema === void 0 ? void 0 : pickerBtnSchema.className)
+      }), {
+        onClick: function (e) {
+          return tslib.__awaiter(_this, void 0, void 0, function () {
+
+            return tslib.__generator(this, function (_b) {
+              switch (_b.label) {
+                case 0:
+                  if (!(!isOpened && enablePickerMode)) return [3
+                  /*break*/
+                  , 4];
+                  _b.label = 1;
+
+                case 1:
+                  _b.trys.push([1, 3,, 4]);
+
+                  return [4
+                  /*yield*/
+                  , this.fetchOptions()];
+
+                case 2:
+                  _b.sent();
+
+                  return [3
+                  /*break*/
+                  , 4];
+
+                case 3:
+                  _b.sent();
+                  return [3
+                  /*break*/
+                  , 4];
+
+                case 4:
+                  onClick(e);
+                  return [2
+                  /*return*/
+                  ];
+              }
             });
-        }));
+          });
+        }
+      });
+    });
+  };
+
+  APIControl.prototype.renderApiDialog = function () {
+    return {
+      label: '',
+      type: 'action',
+      acitonType: 'dialog',
+      size: 'sm',
+      icon: React__default["default"].createElement(amis.Icon, {
+        icon: "setting",
+        className: "icon ae-ApiControl-icon"
+      }),
+      className: 'ae-ApiControl-setting-button',
+      actionType: 'dialog',
+      dialog: {
+        title: i18nRuntime.i18n("e370757f933a8ecd87bf0255c3ce45d0"),
+        size: 'md',
+        className: 'ae-ApiControl-dialog',
+        headerClassName: 'font-bold',
+        bodyClassName: 'ae-ApiControl-dialog-body',
+        closeOnEsc: true,
+        closeOnOutside: false,
+        showCloseButton: true,
+        body: [this.renderApiConfigTabs()]
+      }
     };
-    APIControl.prototype.renderApiDialog = function () {
-        var messageDesc = this.props.messageDesc;
-        return {
-            label: '',
-            type: 'action',
-            acitonType: 'dialog',
+  };
+
+  APIControl.prototype.renderApiConfigTabs = function (submitOnChange) {
+    if (submitOnChange === void 0) {
+      submitOnChange = false;
+    }
+
+    var _a = this.props,
+        messageDesc = _a.messageDesc,
+        _b = _a.debug,
+        debug = _b === void 0 ? false : _b;
+    return {
+      type: 'form',
+      className: 'ae-ApiControl-form',
+      mode: 'horizontal',
+      submitOnChange: submitOnChange,
+      wrapWithPanel: false,
+      onSubmit: this.handleSubmit,
+      debug: debug,
+      body: [{
+        type: 'tabs',
+        className: 'ae-ApiControl-tabs',
+        contentClassName: 'ae-ApiControl-tabContent',
+        tabs: [{
+          title: i18nRuntime.i18n("7c57a563ab87bc6eb5edd8f5b953f499"),
+          tab: [{
+            label: i18nRuntime.i18n("6aa351f5dacd13d3d862d9c93e4a0241"),
+            name: 'method',
+            value: 'get',
+            type: 'button-group-select',
+            mode: 'horizontal',
+            options: [{
+              value: 'get',
+              label: 'GET'
+            }, {
+              value: 'post',
+              label: 'POST'
+            }, {
+              value: 'put',
+              label: 'PUT'
+            }, {
+              value: 'patch',
+              label: 'PATCH'
+            }, {
+              value: 'delete',
+              label: 'DELETE'
+            }]
+          }, {
+            label: i18nRuntime.i18n("85624c8e8b0fc98954eecbe508e8b59d"),
+            type: 'input-text',
+            name: 'url',
+            mode: 'horizontal',
+            size: 'lg',
+            placeholder: 'http://',
+            required: true
+          }, {
+            label: i18nRuntime.i18n("8dc91bca9bc83efea73150e3478657fc"),
+            type: 'input-text',
+            name: 'sendOn',
+            mode: 'horizontal',
+            size: 'lg',
+            placeholder: i18nRuntime.i18n("bf9e242338d2c26b182aa6b9c015d84c"),
+            description: i18nRuntime.i18n("91ee84292a5bf5e59d3b6309f948f2f1")
+          }, {
+            label: i18nRuntime.i18n("7c6722203327e8173be987f36fadf610"),
+            type: 'button-group-select',
+            name: 'dataType',
             size: 'sm',
-            icon: React__default["default"].createElement(amis.Icon, { icon: "api" }),
-            actionType: 'dialog',
-            dialog: {
-                title: '高级设置',
-                size: 'md',
-                className: 'ae-ApiControl-dialog',
-                headerClassName: 'font-bold',
-                bodyClassName: 'ae-ApiControl-dialog-body',
-                closeOnEsc: true,
-                closeOnOutside: false,
-                showCloseButton: true,
-                body: [this.renderApiConfigTabs(messageDesc)]
+            mode: 'horizontal',
+            description: "".concat(i18nRuntime.i18n("55409342e28d37db86fb23efbd84a025"), "\uFF1A<%= data.dataType === \"json\" ? \"application/json\" : (data.dataType === \"form-data\" ? \"multipart/form-data\" : (data.dataType === \"form\" ? \"application/x-www-form-urlencoded\" : \"\")) %>\uFF0C").concat(i18nRuntime.i18n("e06a14abe7ef66a8ead143db4ae9786e")),
+            options: [{
+              label: 'JSON',
+              value: 'json'
+            }, {
+              label: 'FormData',
+              value: 'form-data'
+            }, {
+              label: 'Form',
+              value: 'form'
+            }],
+            disabled: false
+          }, {
+            type: 'switch',
+            label: i18nRuntime.i18n("773a0e8384fd6f784088b829d7cc2f68"),
+            name: 'cache',
+            mode: 'horizontal',
+            pipeIn: function (value) {
+              return !!value;
+            },
+            pipeOut: function (value) {
+              return value ? 3000 : undefined;
             }
-        };
-    };
-    APIControl.prototype.renderApiConfigTabs = function (messageDesc, submitOnChange) {
-        if (submitOnChange === void 0) { submitOnChange = false; }
-        return {
-            type: 'form',
-            className: 'ae-ApiControl-form',
+          }, {
+            label: '',
+            type: 'input-number',
+            name: 'cache',
+            mode: 'horizontal',
+            size: 'md',
+            min: 0,
+            step: 500,
+            visibleOn: 'this.cache',
+            description: i18nRuntime.i18n("c1b110f13431df9662299f26def71df1"),
+            pipeIn: function (value) {
+              return typeof value === 'number' ? value : 0;
+            }
+          }, {
+            label: i18nRuntime.i18n("a18ea11244325dd3d20c5988bc7f6e39"),
+            name: 'responseType',
+            type: 'switch',
+            mode: 'horizontal',
+            description: i18nRuntime.i18n("68caa6082eda1745aa3f6b6d12efe423"),
+            pipeIn: function (value) {
+              return value === 'blob';
+            },
+            pipeOut: function (value) {
+              return value ? 'blob' : undefined;
+            }
+          }, {
+            label: i18nRuntime.i18n("91831507074270c0da8a31ad9ff87495"),
+            name: 'replaceData',
+            type: 'switch',
             mode: 'horizontal',
-            submitOnChange: submitOnChange,
-            wrapWithPanel: false,
-            onSubmit: this.handleSubmit,
-            body: [
-                {
-                    type: 'tabs',
-                    className: 'ae-ApiControl-tabs',
-                    contentClassName: 'ae-ApiControl-tabContent',
-                    tabs: [
-                        {
-                            title: '接口设置',
-                            tab: [
-                                {
-                                    label: '发送方式',
-                                    name: 'method',
-                                    value: 'get',
-                                    type: 'button-group-select',
-                                    mode: 'horizontal',
-                                    options: [
-                                        {
-                                            value: 'get',
-                                            label: 'GET'
-                                        },
-                                        {
-                                            value: 'post',
-                                            label: 'POST'
-                                        },
-                                        {
-                                            value: 'put',
-                                            label: 'PUT'
-                                        },
-                                        {
-                                            value: 'patch',
-                                            label: 'PATCH'
-                                        },
-                                        {
-                                            value: 'delete',
-                                            label: 'DELETE'
-                                        }
-                                    ]
-                                },
-                                {
-                                    label: '接口地址',
-                                    type: 'input-text',
-                                    name: 'url',
-                                    mode: 'horizontal',
-                                    size: 'lg',
-                                    placeholder: 'http://',
-                                    required: true
-                                },
-                                {
-                                    label: '发送条件',
-                                    type: 'input-text',
-                                    name: 'sendOn',
-                                    mode: 'horizontal',
-                                    size: 'lg',
-                                    placeholder: '如：this.type == "123"',
-                                    description: '用表达式来设置该请求的发送条件'
-                                },
-                                {
-                                    label: '数据格式',
-                                    type: 'button-group-select',
-                                    name: 'dataType',
-                                    size: 'sm',
-                                    mode: 'horizontal',
-                                    description: '发送体格式为：<%= data.dataType === "json" ? "application/json" : data.dataType === "form-data" ? "multipart/form-data" : data.dataType === "form" ? "application/x-www-form-urlencoded" : "" %>，当发送内容中存在文件时会自动使用 form-data 格式。',
-                                    options: [
-                                        {
-                                            label: 'JSON',
-                                            value: 'json'
-                                        },
-                                        {
-                                            label: 'FormData',
-                                            value: 'form-data'
-                                        },
-                                        {
-                                            label: 'Form',
-                                            value: 'form'
-                                        }
-                                    ],
-                                    disabled: false
-                                },
-                                {
-                                    type: 'switch',
-                                    label: '是否设置缓存',
-                                    name: 'cache',
-                                    mode: 'horizontal',
-                                    pipeIn: function (value) { return !!value; },
-                                    pipeOut: function (value) { return (value ? 3000 : undefined); }
-                                },
-                                {
-                                    label: '',
-                                    type: 'input-number',
-                                    name: 'cache',
-                                    mode: 'horizontal',
-                                    size: 'md',
-                                    min: 0,
-                                    step: 500,
-                                    visibleOn: 'this.cache',
-                                    description: '设置该请求缓存有效时间，单位 ms',
-                                    pipeIn: function (value) {
-                                        return typeof value === 'number' ? value : 0;
-                                    }
-                                },
-                                {
-                                    label: '文件下载',
-                                    name: 'responseType',
-                                    type: 'switch',
-                                    mode: 'horizontal',
-                                    description: '当接口为二进制文件下载时请勾选，否则会文件乱码。',
-                                    pipeIn: function (value) { return value === 'blob'; },
-                                    pipeOut: function (value) { return (value ? 'blob' : undefined); }
-                                },
-                                {
-                                    label: '数据替换',
-                                    name: 'replaceData',
-                                    type: 'switch',
-                                    mode: 'horizontal',
-                                    description: '默认数据为追加方式，开启后完全替换当前数据'
-                                },
-                                {
-                                    label: BaseControl.tipedLabel('初始加载', '当配置初始化接口后，组件初始就会拉取接口数据，可以通过以下配置修改'),
-                                    type: 'group',
-                                    visibleOn: 'this.initApi',
-                                    mode: 'horizontal',
-                                    direction: 'vertical',
-                                    // labelRemark: {
-                                    //   trigger: 'hover',
-                                    //   rootClose: true,
-                                    //   content:
-                                    //     '当配置初始化接口后，组件初始就会拉取接口数据，可以通过以下配置修改',
-                                    //   placement: 'top'
-                                    // },
-                                    body: [
-                                        {
-                                            name: 'initFetch',
-                                            type: 'radios',
-                                            inline: true,
-                                            mode: 'normal',
-                                            renderLabel: false,
-                                            onChange: function () {
-                                                document.getElementsByClassName('ae-Settings-content')[0].scrollTop = 0;
-                                            },
-                                            // pipeIn: (value:any) => typeof value === 'boolean' ? value : '1'
-                                            options: [
-                                                {
-                                                    label: '是',
-                                                    value: true
-                                                },
-                                                {
-                                                    label: '否',
-                                                    value: false
-                                                },
-                                                {
-                                                    label: '表达式',
-                                                    value: ''
-                                                }
-                                            ]
-                                        },
-                                        {
-                                            name: 'initFetchOn',
-                                            autoComplete: false,
-                                            visibleOn: 'typeof this.initFetch !== "boolean"',
-                                            type: 'input-text',
-                                            mode: 'normal',
-                                            size: 'lg',
-                                            renderLabel: false,
-                                            placeholder: '如：this.id 表示有 id 值时初始加载',
-                                            className: 'm-t-n-sm'
-                                        }
-                                    ]
-                                },
-                                {
-                                    label: '定时刷新',
-                                    name: 'interval',
-                                    type: 'switch',
-                                    mode: 'horizontal',
-                                    visibleOn: 'data.initApi',
-                                    pipeIn: function (value) { return !!value; },
-                                    pipeOut: function (value) { return (value ? 3000 : undefined); }
-                                },
-                                {
-                                    label: '',
-                                    name: 'interval',
-                                    type: 'input-number',
-                                    mode: 'horizontal',
-                                    size: 'md',
-                                    visibleOn: 'typeof this.interval === "number"',
-                                    step: 500,
-                                    description: '定时刷新间隔，单位 ms'
-                                },
-                                {
-                                    label: '静默刷新',
-                                    name: 'silentPolling',
-                                    type: 'switch',
-                                    mode: 'horizontal',
-                                    visibleOn: '!!data.interval',
-                                    description: '设置自动定时刷新时是否显示loading'
-                                },
-                                {
-                                    label: BaseControl.tipedLabel('定时刷新停止', '定时刷新一旦设置会一直刷新，除非给出表达式，条件满足后则停止刷新'),
-                                    name: 'stopAutoRefreshWhen',
-                                    type: 'input-text',
-                                    mode: 'horizontal',
-                                    horizontal: {
-                                        leftFixed: 'md'
-                                    },
-                                    size: 'lg',
-                                    visibleOn: '!!data.interval',
-                                    placeholder: '停止定时刷新检测表达式'
-                                    // labelRemark: {
-                                    //   trigger: 'hover',
-                                    //   rootClose: true,
-                                    //   content:
-                                    //     '定时刷新一旦设置会一直刷新，除非给出表达式，条件满足后则停止刷新',
-                                    //   placement: 'top'
-                                    // }
-                                }
-                            ]
-                        },
-                        {
-                            title: 'HTTP配置',
-                            tab: [
-                                {
-                                    type: 'fieldSet',
-                                    title: 'Body',
-                                    headingClassName: 'ae-ApiControl-title',
-                                    body: [
-                                        {
-                                            type: 'switch',
-                                            label: BaseControl.tipedLabel('发送数据映射', '当没开启数据映射时，发送 API 的时候会发送尽可能多的数据，如果你想自己控制发送的数据，或者需要额外的数据处理，请开启此选项'),
-                                            name: 'data',
-                                            mode: 'row',
-                                            // labelRemark: {
-                                            //   trigger: 'hover',
-                                            //   rootClose: true,
-                                            //   content:
-                                            //     '当没开启数据映射时，发送 API 的时候会发送尽可能多的数据，如果你想自己控制发送的数据，或者需要额外的数据处理，请开启此选项',
-                                            //   placement: 'top'
-                                            // },
-                                            pipeIn: function (value) { return !!value; },
-                                            pipeOut: function (value) { return (value ? { '&': '$$' } : null); }
-                                        },
-                                        {
-                                            type: 'combo',
-                                            syncDefaultValue: false,
-                                            name: 'data',
-                                            mode: 'normal',
-                                            renderLabel: false,
-                                            visibleOn: 'this.data',
-                                            descriptionClassName: 'help-block text-xs m-b-none',
-                                            description: '<p>当没开启数据映射时，发送数据自动切成白名单模式，配置啥发送啥，请绑定数据。如：<code>{"a": "\\${a}", "b": 2}</code></p><p>如果希望在默认的基础上定制，请先添加一个 Key 为 `&` Value 为 `\\$$` 作为第一行。</p><div>当值为 <code>__undefined</code>时，表示删除对应的字段，可以结合<code>{"&": "\\$$"}</code>来达到黑名单效果。</div>',
-                                            multiple: true,
-                                            pipeIn: function (value) {
-                                                if (!AMisCodeEditor.isObject(value)) {
-                                                    return value;
-                                                }
-                                                var arr = [];
-                                                Object.keys(value).forEach(function (key) {
-                                                    arr.push({
-                                                        key: key || '',
-                                                        value: typeof value[key] === 'string'
-                                                            ? value[key]
-                                                            : JSON.stringify(value[key])
-                                                    });
-                                                });
-                                                return arr;
-                                            },
-                                            pipeOut: function (value) {
-                                                if (!Array.isArray(value)) {
-                                                    return value;
-                                                }
-                                                var obj = {};
-                                                value.forEach(function (item) {
-                                                    var key = item.key || '';
-                                                    var value = item.value;
-                                                    try {
-                                                        value = JSON.parse(value);
-                                                    }
-                                                    catch (e) { }
-                                                    obj[key] = value;
-                                                });
-                                                return obj;
-                                            },
-                                            items: [
-                                                {
-                                                    placeholder: 'Key',
-                                                    type: 'input-text',
-                                                    unique: true,
-                                                    name: 'key',
-                                                    required: true
-                                                },
-                                                {
-                                                    placeholder: 'Value',
-                                                    type: 'input-text',
-                                                    name: 'value'
-                                                }
-                                            ]
-                                        },
-                                        {
-                                            type: 'switch',
-                                            label: BaseControl.tipedLabel('返回结果映射', '如果需要对返回结果做额外的数据处理，请开启此选项'),
-                                            name: 'responseData',
-                                            mode: 'row',
-                                            // labelRemark: {
-                                            //   trigger: 'hover',
-                                            //   rootClose: true,
-                                            //   content:
-                                            //     '如果需要对返回结果做额外的数据处理，请开启此选项',
-                                            //   placement: 'top'
-                                            // },
-                                            pipeIn: function (value) { return !!value; },
-                                            pipeOut: function (value) { return (value ? { '&': '$$' } : null); }
-                                        },
-                                        {
-                                            type: 'combo',
-                                            syncDefaultValue: false,
-                                            name: 'responseData',
-                                            mode: 'normal',
-                                            renderLabel: false,
-                                            visibleOn: 'this.responseData',
-                                            descriptionClassName: 'help-block text-xs m-b-none',
-                                            multiple: true,
-                                            pipeIn: function (value) {
-                                                if (!AMisCodeEditor.isObject(value)) {
-                                                    return value;
-                                                }
-                                                var arr = [];
-                                                Object.keys(value).forEach(function (key) {
-                                                    arr.push({
-                                                        key: key || '',
-                                                        value: typeof value[key] === 'string'
-                                                            ? value[key]
-                                                            : JSON.stringify(value[key])
-                                                    });
-                                                });
-                                                return arr;
-                                            },
-                                            pipeOut: function (value) {
-                                                if (!Array.isArray(value)) {
-                                                    return value;
-                                                }
-                                                var obj = {};
-                                                value.forEach(function (item) {
-                                                    var key = item.key || '';
-                                                    var value = item.value;
-                                                    try {
-                                                        value = JSON.parse(value);
-                                                    }
-                                                    catch (e) { }
-                                                    obj[key] = value;
-                                                });
-                                                return obj;
-                                            },
-                                            items: [
-                                                {
-                                                    placeholder: 'Key',
-                                                    type: 'input-text',
-                                                    unique: true,
-                                                    name: 'key',
-                                                    required: true
-                                                },
-                                                {
-                                                    placeholder: 'Value',
-                                                    type: 'input-text',
-                                                    name: 'value'
-                                                }
-                                            ]
-                                        },
-                                        {
-                                            label: '发送适配器',
-                                            name: 'requestAdaptor',
-                                            type: 'js-editor',
-                                            mode: 'horizontal',
-                                            horizontal: { justify: true },
-                                            clasName: 'm-t-sm',
-                                            allowFullscreen: true,
-                                            description: '函数签名：(api) => api， 数据在 api.data 中，修改后返回 api 对象。'
-                                        },
-                                        {
-                                            label: '接收适配器',
-                                            name: 'adaptor',
-                                            type: 'js-editor',
-                                            mode: 'horizontal',
-                                            horizontal: { justify: true },
-                                            clasName: 'm-t-sm',
-                                            allowFullscreen: true,
-                                            description: '函数签名: (payload, response, api) => payload'
-                                        }
-                                    ]
-                                },
-                                {
-                                    type: 'fieldSet',
-                                    title: 'Header',
-                                    headingClassName: 'ae-ApiControl-title',
-                                    body: [
-                                        {
-                                            type: 'switch',
-                                            label: BaseControl.tipedLabel('请求头', '可以配置headers对象，添加自定义请求头'),
-                                            name: 'headers',
-                                            mode: 'row',
-                                            className: 'm-b-xs',
-                                            // labelRemark: {
-                                            //   trigger: 'hover',
-                                            //   rootClose: true,
-                                            //   content:
-                                            //     '可以配置<code>headers</code>对象，添加自定义请求头',
-                                            //   placement: 'top'
-                                            // },
-                                            pipeIn: function (value) { return !!value; },
-                                            pipeOut: function (value) { return (value ? { '': '' } : null); }
-                                        },
-                                        {
-                                            type: 'combo',
-                                            name: 'headers',
-                                            mode: 'row',
-                                            syncDefaultValue: false,
-                                            multiple: true,
-                                            visibleOn: 'this.headers',
-                                            items: [
-                                                {
-                                                    type: 'input-text',
-                                                    name: 'key',
-                                                    placeholder: 'Key',
-                                                    unique: true,
-                                                    required: true,
-                                                    options: [
-                                                        {
-                                                            label: 'Content-Encoding',
-                                                            value: 'Content-Encoding'
-                                                        },
-                                                        {
-                                                            label: 'Content-Type',
-                                                            value: 'Content-Type'
-                                                        }
-                                                    ]
-                                                },
-                                                {
-                                                    type: 'input-text',
-                                                    name: 'value',
-                                                    placeholder: 'Value',
-                                                    disabled: false
-                                                }
-                                            ],
-                                            pipeIn: function (value) {
-                                                if (!AMisCodeEditor.isObject(value)) {
-                                                    return value;
-                                                }
-                                                var arr = [];
-                                                Object.keys(value).forEach(function (key) {
-                                                    arr.push({
-                                                        key: key || '',
-                                                        value: typeof value[key] === 'string'
-                                                            ? value[key]
-                                                            : JSON.stringify(value[key])
-                                                    });
-                                                });
-                                                return arr;
-                                            },
-                                            pipeOut: function (value) {
-                                                if (!Array.isArray(value)) {
-                                                    return value;
-                                                }
-                                                var obj = {};
-                                                value.forEach(function (item) {
-                                                    var key = item.key || '';
-                                                    var value = item.value;
-                                                    try {
-                                                        value = JSON.parse(value);
-                                                    }
-                                                    catch (e) { }
-                                                    obj[key] = value;
-                                                });
-                                                return obj;
-                                            }
-                                        }
-                                    ]
-                                }
-                            ]
-                        },
-                        {
-                            title: '其他',
-                            tab: [
-                                {
-                                    label: '默认消息提示',
-                                    type: 'combo',
-                                    name: 'messages',
-                                    mode: 'normal',
-                                    multiLine: true,
-                                    description: messageDesc ||
-                                        '设置 ajax 默认提示信息，当 ajax 没有返回 msg 信息时有用，如果 ajax 返回携带了 msg 值，则还是以 ajax 返回为主',
-                                    items: [
-                                        {
-                                            label: '获取成功提示',
-                                            type: 'input-text',
-                                            name: 'fetchSuccess'
-                                        },
-                                        {
-                                            label: '获取失败提示',
-                                            type: 'input-text',
-                                            name: 'fetchFailed'
-                                        },
-                                        {
-                                            label: '保存顺序成功提示',
-                                            type: 'input-text',
-                                            name: 'saveOrderSuccess'
-                                        },
-                                        {
-                                            label: '保存顺序失败提示',
-                                            type: 'input-text',
-                                            name: 'saveOrderFailed'
-                                        },
-                                        {
-                                            label: '快速保存成功提示',
-                                            type: 'input-text',
-                                            name: 'quickSaveSuccess'
-                                        },
-                                        {
-                                            label: '快速保存失败提示',
-                                            type: 'input-text',
-                                            name: 'quickSaveFailed'
-                                        }
-                                    ]
-                                }
-                            ]
-                        }
-                    ]
+            description: i18nRuntime.i18n("42be3061671b38468cc6ac84f6a0dd77")
+          }, {
+            label: '',
+            name: 'interval',
+            type: 'input-number',
+            mode: 'horizontal',
+            size: 'md',
+            visibleOn: 'typeof this.interval === "number"',
+            step: 500,
+            description: i18nRuntime.i18n("81fe75a5216d4f612f1809c122f5145a")
+          }, {
+            label: i18nRuntime.i18n("19c5410b23fba4bbfd1a58bbd5268c9b"),
+            name: 'silentPolling',
+            type: 'switch',
+            mode: 'horizontal',
+            visibleOn: '!!data.interval',
+            description: i18nRuntime.i18n("04f840b0772f4b5d59954a29a76f4e7b")
+          }, {
+            label: amisEditorCore.tipedLabel(i18nRuntime.i18n("83f16354dd1532422dc8b3581d096e7b"), i18nRuntime.i18n("620f826a77f079c5683a9d3c59461ea1")),
+            name: 'stopAutoRefreshWhen',
+            type: 'input-text',
+            mode: 'horizontal',
+            horizontal: {
+              leftFixed: 'md'
+            },
+            size: 'lg',
+            visibleOn: '!!data.interval',
+            placeholder: i18nRuntime.i18n("6037dae99e9446deaed45f7e408f47ab")
+          }]
+        }, {
+          title: i18nRuntime.i18n("90260d55567cfd97ec2f085963a60bcf"),
+          tab: [{
+            type: 'fieldSet',
+            title: 'Body',
+            headingClassName: 'ae-ApiControl-title',
+            body: [{
+              type: 'switch',
+              label: amisEditorCore.tipedLabel(i18nRuntime.i18n("9ae7a582479116d4cb41e828fbd59798"), i18nRuntime.i18n("0fcbf036057c6dd88b7b809daa0c5eb7")),
+              name: 'data',
+              mode: 'row',
+              pipeIn: function (value) {
+                return !!value;
+              },
+              pipeOut: function (value) {
+                return value ? {
+                  '&': '$$'
+                } : null;
+              }
+            }, {
+              type: 'combo',
+              syncDefaultValue: false,
+              name: 'data',
+              mode: 'normal',
+              renderLabel: false,
+              visibleOn: 'this.data',
+              descriptionClassName: 'help-block text-xs m-b-none',
+              description: i18nRuntime.i18n("5414824fb8efdb7d59beae4bf95fdefd"),
+              multiple: true,
+              pipeIn: function (value) {
+                if (!amisEditorCore.isObject(value)) {
+                  return value;
                 }
-            ]
-        };
-        // return
-    };
-    APIControl.prototype.render = function () {
-        var _this = this;
-        var _a = this.props, render = _a.render, className = _a.className, value = _a.value, footer = _a.footer, _b = _a.border, border = _b === void 0 ? false : _b; _a.messageDesc;
-        return (React__default["default"].createElement("div", { className: cx__default["default"]('ae-ApiControl', className, { border: border }) },
-            this.renderHeader(),
-            React__default["default"].createElement("div", { className: "ae-ApiControl-content", key: "content" },
-                React__default["default"].createElement(amis.InputBox, { className: "ae-ApiControl-input m-b-none", value: this.state.apiStr, clearable: false, placeholder: "http://", onChange: function (value) { return _this.handleSubmit(value, 'input'); } }),
-                render('api-control-dialog', this.renderApiDialog(), {
-                    data: amisCore.normalizeApi(value)
-                })),
-            Array.isArray(footer) && footer.length !== 0 ? (React__default["default"].createElement("footer", { className: "mt-3", key: "footer" }, render('api-control-footer', footer))) : null));
-    };
-    APIControl.defaultProps = {
-        pickerBtnSchema: {
-            type: 'button',
-            level: 'link',
-            size: 'sm',
-            label: '点击选择'
-        }
+
+                var arr = [];
+                Object.keys(value).forEach(function (key) {
+                  arr.push({
+                    key: key || '',
+                    value: typeof value[key] === 'string' ? value[key] : JSON.stringify(value[key])
+                  });
+                });
+                return arr;
+              },
+              pipeOut: function (value) {
+                if (!Array.isArray(value)) {
+                  return value;
+                }
+
+                var obj = {};
+                value.forEach(function (item) {
+                  var key = item.key || '';
+                  var value = item.value;
+
+                  try {
+                    value = JSON.parse(value);
+                  } catch (e) {}
+
+                  obj[key] = value;
+                });
+                return obj;
+              },
+              items: [{
+                placeholder: 'Key',
+                type: 'input-text',
+                unique: true,
+                name: 'key',
+                required: true
+              }, {
+                placeholder: 'Value',
+                type: 'ae-DataPickerControl',
+                name: 'value'
+              }]
+            }, {
+              type: 'switch',
+              label: amisEditorCore.tipedLabel(i18nRuntime.i18n("7dd590a9d9e783e980d318bd52891905"), i18nRuntime.i18n("7e295b6ff39ec7356e06c4534bfc4fb3")),
+              name: 'responseData',
+              mode: 'row',
+              pipeIn: function (value) {
+                return !!value;
+              },
+              pipeOut: function (value) {
+                return value ? {
+                  '&': '$$'
+                } : null;
+              }
+            }, {
+              type: 'combo',
+              syncDefaultValue: false,
+              name: 'responseData',
+              mode: 'normal',
+              renderLabel: false,
+              visibleOn: 'this.responseData',
+              descriptionClassName: 'help-block text-xs m-b-none',
+              multiple: true,
+              pipeIn: function (value) {
+                if (!amisEditorCore.isObject(value)) {
+                  return value;
+                }
+
+                var arr = [];
+                Object.keys(value).forEach(function (key) {
+                  arr.push({
+                    key: key || '',
+                    value: typeof value[key] === 'string' ? value[key] : JSON.stringify(value[key])
+                  });
+                });
+                return arr;
+              },
+              pipeOut: function (value) {
+                if (!Array.isArray(value)) {
+                  return value;
+                }
+
+                var obj = {};
+                value.forEach(function (item) {
+                  var key = item.key || '';
+                  var value = item.value;
+
+                  try {
+                    value = JSON.parse(value);
+                  } catch (e) {}
+
+                  obj[key] = value;
+                });
+                return obj;
+              },
+              items: [{
+                placeholder: 'Key',
+                type: 'input-text',
+                unique: true,
+                name: 'key',
+                required: true
+              }, {
+                placeholder: 'Value',
+                type: 'input-text',
+                name: 'value'
+              }]
+            }, {
+              label: i18nRuntime.i18n("417125a06b1d2bfff025e83a4e067bf0"),
+              name: 'requestAdaptor',
+              type: 'js-editor',
+              mode: 'horizontal',
+              horizontal: {
+                justify: true
+              },
+              clasName: 'm-t-sm',
+              allowFullscreen: true,
+              description: i18nRuntime.i18n("62efcb25e5b21da47c09780119da3458")
+            }, {
+              label: i18nRuntime.i18n("6eb8944029108ad3b6bb3572a648fafa"),
+              name: 'adaptor',
+              type: 'js-editor',
+              mode: 'horizontal',
+              horizontal: {
+                justify: true
+              },
+              clasName: 'm-t-sm',
+              allowFullscreen: true,
+              description: i18nRuntime.i18n("e83cbec70e17988749c4a02a3b73f55c")
+            }]
+          }, {
+            type: 'fieldSet',
+            title: 'Header',
+            headingClassName: 'ae-ApiControl-title',
+            body: [{
+              type: 'switch',
+              label: amisEditorCore.tipedLabel(i18nRuntime.i18n("be47bd270e7756d4233e59bbe4cd5b96"), i18nRuntime.i18n("f80cc88446cc10da4838556666f6b9f1")),
+              name: 'headers',
+              mode: 'row',
+              className: 'm-b-xs',
+              pipeIn: function (value) {
+                return !!value;
+              },
+              pipeOut: function (value) {
+                return value ? {
+                  '': ''
+                } : null;
+              }
+            }, {
+              type: 'combo',
+              name: 'headers',
+              mode: 'row',
+              syncDefaultValue: false,
+              multiple: true,
+              visibleOn: 'this.headers',
+              items: [{
+                type: 'input-text',
+                name: 'key',
+                placeholder: 'Key',
+                unique: true,
+                required: true,
+                options: [{
+                  label: 'Content-Encoding',
+                  value: 'Content-Encoding'
+                }, {
+                  label: 'Content-Type',
+                  value: 'Content-Type'
+                }]
+              }, {
+                type: 'input-text',
+                name: 'value',
+                placeholder: 'Value',
+                disabled: false
+              }],
+              pipeIn: function (value) {
+                if (!amisEditorCore.isObject(value)) {
+                  return value;
+                }
+
+                var arr = [];
+                Object.keys(value).forEach(function (key) {
+                  arr.push({
+                    key: key || '',
+                    value: typeof value[key] === 'string' ? value[key] : JSON.stringify(value[key])
+                  });
+                });
+                return arr;
+              },
+              pipeOut: function (value) {
+                if (!Array.isArray(value)) {
+                  return value;
+                }
+
+                var obj = {};
+                value.forEach(function (item) {
+                  var key = item.key || '';
+                  var value = item.value;
+
+                  try {
+                    value = JSON.parse(value);
+                  } catch (e) {}
+
+                  obj[key] = value;
+                });
+                return obj;
+              }
+            }]
+          }]
+        }, {
+          title: i18nRuntime.i18n("0d98c74797e49d00bcc4c17c9d557a2b"),
+          tab: [{
+            label: i18nRuntime.i18n("522110866c19dace2ce38336617405c2"),
+            type: 'combo',
+            name: 'messages',
+            mode: 'normal',
+            multiLine: true,
+            description: messageDesc || i18nRuntime.i18n("9d191f6126f21da8222755c14f49707b"),
+            items: [{
+              label: i18nRuntime.i18n("fb24383a41f23196349548b5d0cb98ce"),
+              type: 'input-text',
+              name: 'fetchSuccess'
+            }, {
+              label: i18nRuntime.i18n("62e3e15c8fb9038f2780329bc26e8bab"),
+              type: 'input-text',
+              name: 'fetchFailed'
+            }, {
+              label: i18nRuntime.i18n("c62a1b7f314be10aead10475e7543f6a"),
+              type: 'input-text',
+              name: 'saveOrderSuccess'
+            }, {
+              label: i18nRuntime.i18n("c8035507b7a576d43e9f227c91c7a7b5"),
+              type: 'input-text',
+              name: 'saveOrderFailed'
+            }, {
+              label: i18nRuntime.i18n("7cb0932b806559be232d2a69453224e7"),
+              type: 'input-text',
+              name: 'quickSaveSuccess'
+            }, {
+              label: i18nRuntime.i18n("fd79a193a487b8c9d5a302d0d88c1c2c"),
+              type: 'input-text',
+              name: 'quickSaveFailed'
+            }]
+          }]
+        }]
+      }]
     };
-    tslib.__decorate([
-        AMisCodeEditor.autobind,
-        tslib.__metadata("design:type", Function),
-        tslib.__metadata("design:paramtypes", [Object, Object]),
-        tslib.__metadata("design:returntype", void 0)
-    ], APIControl.prototype, "handleSubmit", null);
-    tslib.__decorate([
-        AMisCodeEditor.autobind,
-        tslib.__metadata("design:type", Function),
-        tslib.__metadata("design:paramtypes", [Object]),
-        tslib.__metadata("design:returntype", void 0)
-    ], APIControl.prototype, "handlePickerConfirm", null);
-    tslib.__decorate([
-        AMisCodeEditor.autobind,
-        tslib.__metadata("design:type", Function),
-        tslib.__metadata("design:paramtypes", []),
-        tslib.__metadata("design:returntype", void 0)
-    ], APIControl.prototype, "handlePickerClose", null);
-    return APIControl;
-}(React__default["default"].Component));
-/** @class */ ((function (_super) {
-    tslib.__extends(APIControlRenderer, _super);
-    function APIControlRenderer() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    APIControlRenderer = tslib.__decorate([
-        amis.FormItem({
-            type: 'ae-apiControl'
-        })
-    ], APIControlRenderer);
-    return APIControlRenderer;
-})(APIControl));
+  };
+
+  APIControl.prototype.render = function () {
+    var _a, _b;
+
+    var _c = this.props,
+        render = _c.render,
+        className = _c.className,
+        footerClassName = _c.footerClassName;
+        _c.classPrefix;
+        _c.label;
+        _c.labelRemark;
+        var value = _c.value,
+        footer = _c.footer,
+        _d = _c.border,
+        border = _d === void 0 ? false : _d,
+        _e = _c.onlyTabs,
+        onlyTabs = _e === void 0 ? false : _e;
+        _c.messageDesc;
+        var enablePickerMode = _c.enablePickerMode,
+        disabled = _c.disabled;
+        _c.mode;
+        var enableHighlight = _c.enableHighlight,
+        _f = _c.labelField,
+        labelField = _f === void 0 ? 'label' : _f;
+        _c.useMobileUI;
+        _c.popOverContainer;
+        _c.env;
+    var _g = this.state,
+        apiStr = _g.apiStr,
+        selectedItem = _g.selectedItem,
+        loading = _g.loading;
+    selectedItem = Array.isArray(selectedItem) && selectedItem.length !== 0 ? selectedItem : [];
+    var highlightLabel = (_b = (_a = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem[0]) === null || _a === void 0 ? void 0 : _a[labelField]) !== null && _b !== void 0 ? _b : '';
+    return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement("div", {
+      className: cx__default["default"]('ae-ApiControl', className, {
+        border: border
+      })
+    }, onlyTabs ? render('api-control-tabs', this.renderApiConfigTabs(true), {
+      data: amisCore.normalizeApi(value)
+    }) : React__default["default"].createElement(React__default["default"].Fragment, null, this.renderHeader(), React__default["default"].createElement("div", {
+      className: "ae-ApiControl-content",
+      key: "content"
+    }, React__default["default"].createElement("div", {
+      className: cx__default["default"]('ae-ApiControl-input')
+    }, enableHighlight && highlightLabel ? React__default["default"].createElement("div", {
+      className: cx__default["default"]('ae-ApiControl-highlight')
+    }, loading ? React__default["default"].createElement(amisUi.Spinner, {
+      show: true,
+      icon: "reload",
+      size: "sm",
+      spinnerClassName: cx__default["default"]('Select-spinner')
+    }) : React__default["default"].createElement("span", {
+      className: cx__default["default"]('ae-ApiControl-highlight-tag')
+    }, React__default["default"].createElement("span", null, highlightLabel), React__default["default"].createElement("a", {
+      onClick: this.clearPickerValue,
+      className: cx__default["default"]('Modal-close')
+    }, React__default["default"].createElement(amis.Icon, {
+      icon: "close",
+      className: cx__default["default"]('icon', 'ae-ApiControl-highlight-close')
+    })))) : React__default["default"].createElement(amisUi.Input, {
+      ref: this.inputRef,
+      value: apiStr,
+      type: "text",
+      disabled: disabled,
+      placeholder: "http://",
+      onChange: this.handleSimpleInputChange
+    }), enablePickerMode ? this.renderPickerSchema() : null), render('api-control-dialog', this.renderApiDialog(), {
+      data: amisCore.normalizeApi(value)
+    })))), Array.isArray(footer) && footer.length !== 0 ? React__default["default"].createElement("footer", {
+      className: cx__default["default"]('mt-3', footerClassName),
+      key: "footer"
+    }, render('api-control-footer', footer)) : null);
+  };
+
+  APIControl.defaultProps = {
+    pickerBtnSchema: {
+      type: 'button',
+      level: 'link',
+      size: 'sm'
+    },
+    labelField: 'label',
+    searchType: 'key'
+  };
+
+  tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [Object]), tslib.__metadata("design:returntype", void 0)], APIControl.prototype, "inputRef", null);
+
+  tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", []), tslib.__metadata("design:returntype", void 0)], APIControl.prototype, "clearPickerValue", null);
+
+  tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [Object]), tslib.__metadata("design:returntype", void 0)], APIControl.prototype, "handleSimpleInputChange", null);
+
+  tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [Object, String]), tslib.__metadata("design:returntype", void 0)], APIControl.prototype, "handleSubmit", null);
+
+  tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [Object]), tslib.__metadata("design:returntype", void 0)], APIControl.prototype, "handlePickerConfirm", null);
+
+  tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", []), tslib.__metadata("design:returntype", void 0)], APIControl.prototype, "handlePickerClose", null);
+
+  tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", []), tslib.__metadata("design:returntype", void 0)], APIControl.prototype, "renderHeader", null);
+
+  return APIControl;
+}(React__default["default"].Component);
+
+/** @class */
+(function (_super) {
+  tslib.__extends(APIControlRenderer, _super);
+
+  function APIControlRenderer() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  APIControlRenderer = tslib.__decorate([amis.FormItem({
+    type: 'ae-apiControl',
+    renderLabel: false
+  })], APIControlRenderer);
+  return APIControlRenderer;
+})(APIControl);
 
 exports["default"] = APIControl;