amis-editor 5.2.5 → 5.3.0

package/lib/renderer/APIAdaptorControl.js

@@ -0,0 +1,319 @@
+/**
+ * amis-editor v5.3.0
+ * Copyright 2018-2023 @fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var cx = require('classnames');
+var amisEditorCore = require('amis-editor-core');
+var amisCore = require('amis-core');
+var amis = require('amis');
+var i18nRuntime = require('i18n-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+/**
+ * @file API 适配器
+ */
+var APIAdaptorControl = /** @class */function (_super) {
+  tslib.__extends(APIAdaptorControl, _super);
+  function APIAdaptorControl(props) {
+    var _this = _super.call(this, props) || this;
+    _this.state = {
+      switch: !!_this.props.value
+    };
+    return _this;
+  }
+  APIAdaptorControl.prototype.componentDidUpdate = function (prevProps) {
+    if (this.props.value !== prevProps.value) {
+      this.setState({
+        switch: !!this.props.value
+      });
+    }
+  };
+  APIAdaptorControl.prototype.onChange = function (value) {
+    var _a, _b;
+    if (value === void 0) {
+      value = '';
+    }
+    (_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, value);
+  };
+  // 生成tooltip 的参数
+  APIAdaptorControl.prototype.genTooltipProps = function (content, othersProps) {
+    return tslib.__assign(tslib.__assign(tslib.__assign({
+      tooltipTheme: 'light',
+      trigger: 'hover',
+      rootClose: true,
+      placement: 'top',
+      tooltipClassName: 'ae-AdaptorControl-desc-tooltip'
+    }, typeof content === 'string' ? {
+      content: content
+    } : {
+      content: ' ',
+      children: function () {
+        return content;
+      }
+    }), this.props.tooltipProps || {}), othersProps || {});
+  };
+  APIAdaptorControl.prototype.renderEditor = function () {
+    var _this = this;
+    if (!this.state.switch) {
+      return null;
+    }
+    var _a = this.props,
+      render = _a.render,
+      _b = _a.params,
+      params = _b === void 0 ? [] : _b,
+      allowFullscreen = _a.allowFullscreen,
+      value = _a.value,
+      name = _a.name,
+      editorPlaceholder = _a.editorPlaceholder,
+      editorDesc = _a.editorDesc,
+      mergeParams = _a.mergeParams;
+    var lastParams = typeof mergeParams === 'function' ? mergeParams(params) : params;
+    return render('api-adaptor-control-editor', [{
+      type: 'container',
+      className: 'ae-AdaptorControl-func-header',
+      body: tslib.__spreadArray(tslib.__spreadArray(['<span class="mtk6">function&nbsp;</span>', '<span class="mtk1 bracket-highlighting-0">(</span>'], tslib.__read(lastParams.map(function (_a, index) {
+        var label = _a.label,
+          tip = _a.tip;
+        return tslib.__spreadArray([tslib.__assign({
+          type: 'button',
+          level: 'link',
+          label: label,
+          className: 'ae-AdaptorControl-func-arg'
+        }, tip ? {
+          tooltip: _this.genTooltipProps(tip)
+        } : {})], tslib.__read(index === lastParams.length - 1 ? [] : ['<span class="mtk1">,&nbsp;</span>']), false);
+      }).flat()), false), ['<span class="mtk1 bracket-highlighting-0">)&nbsp;{</span>'], false)
+    }, {
+      label: '',
+      mode: 'normal',
+      name: '__editor_' + name,
+      type: 'js-editor',
+      className: 'ae-AdaptorControl-func-editor',
+      allowFullscreen: allowFullscreen,
+      value: value,
+      placeholder: editorPlaceholder || '',
+      onChange: function (value) {
+        _this.onChange(value);
+      }
+    }, {
+      type: 'container',
+      body: '<span class="mtk1 bracket-highlighting-0">}</span>',
+      className: 'ae-AdaptorControl-func-footer'
+    }, {
+      type: 'container',
+      className: 'cxd-Form-description',
+      body: editorDesc
+    }]);
+  };
+  APIAdaptorControl.prototype.renderSwitch = function () {
+    var _this = this;
+    var _a = this.props,
+      render = _a.render,
+      _b = _a.defaultCode,
+      defaultCode = _b === void 0 ? '' : _b,
+      switchTip = _a.switchTip,
+      name = _a.name,
+      value = _a.value;
+    return render('api-adaptor-control-switch', {
+      type: 'flex',
+      className: 'mb-2',
+      alignItems: 'center',
+      direction: 'row',
+      justify: 'flex-start',
+      items: tslib.__spreadArray([{
+        type: 'switch',
+        label: '',
+        mode: 'inline',
+        name: '__editorSwitch_' + name,
+        key: 'switch',
+        className: 'mb-1',
+        value: this.state.switch,
+        onChange: function (checked) {
+          _this.setState({
+            switch: checked
+          }, function () {
+            _this.onChange(!checked ? '' : value || defaultCode);
+          });
+        }
+      }], tslib.__read(switchTip ? [React__default["default"].createElement(amis.TooltipWrapper, {
+        key: "TooltipWrapper",
+        tooltip: this.genTooltipProps(switchTip, {
+          placement: 'right'
+        })
+      }, React__default["default"].createElement(amis.Icon, {
+        icon: "editor-help",
+        className: "icon",
+        color: "#84868c"
+      }))] : []), false)
+    });
+  };
+  APIAdaptorControl.prototype.render = function () {
+    var className = this.props.className;
+    return React__default["default"].createElement("div", {
+      className: cx__default["default"]('ae-ApiAdaptorControl', className)
+    }, this.renderSwitch(), this.renderEditor());
+  };
+  APIAdaptorControl.defaultProps = {
+    params: []
+  };
+  tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [Object]), tslib.__metadata("design:returntype", void 0)], APIAdaptorControl.prototype, "onChange", null);
+  return APIAdaptorControl;
+}(React__default["default"].Component);
+/** @class */(function (_super) {
+  tslib.__extends(APIAdaptorControlRenderer, _super);
+  function APIAdaptorControlRenderer() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+  APIAdaptorControlRenderer = tslib.__decorate([amis.FormItem({
+    type: 'ae-apiAdaptorControl'
+  })], APIAdaptorControlRenderer);
+  return APIAdaptorControlRenderer;
+})(APIAdaptorControl);
+/**
+ * 渲染 代码高亮 节点
+ * @param code 代码字符串
+ * @param size 渲染区域的width, height, 代码区域是异步渲染，tooltip时计算会偏移
+ * @returns
+ */
+var genCodeSchema = function (code, size) {
+  return tslib.__assign(tslib.__assign({
+    type: 'container'
+  }, !size ? {} : {
+    style: {
+      width: size[0],
+      height: size[1]
+    }
+  }), {
+    body: {
+      type: 'code',
+      language: 'typescript',
+      className: 'bg-white text-xs m-0',
+      value: code
+    }
+  });
+};
+// 请求适配器 示例代码
+var requestAdaptorDefaultCode = "api.data.count = api.data.count + 1;\nreturn api;";
+// 适配器 适配器 api 参数说明
+var adaptorApiStruct = "{\n  url: string; // \u5F53\u524D\u63A5\u53E3\u5730\u5740\n  method: 'get' | 'post' | 'put' | 'delete';\n  data?: Object; // \u8BF7\u6C42\u4F53\n  headers?: Object; // \u8BF7\u6C42\u5934\n  ...\n}";
+var adaptorApiStructTooltip = amisCore.render(genCodeSchema(adaptorApiStruct, ['350px', '128px']));
+// 适配器 response 参数说明
+var adaptorResponseStruct = "{\n  data: Object; // \u63A5\u53E3\u8FD4\u56DE\u6570\u636E,\n  request: XMLHttpRequest;\n  headers?: Object; // \u8BF7\u6C42\u5934\n  status: number; // \u72B6\u6001\u7801 200, 404, 500..\n  statusText: string; // \u72B6\u6001\u4FE1\u606F\n  ...\n}";
+var adaptorResponseStructTooltip = amisCore.render(genCodeSchema(adaptorResponseStruct, ['345px', '144px']));
+// 接收适配器 示例代码
+var adaptorDefaultCode = "// API\u54CD\u5E94\u6216\u81EA\u5B9A\u4E49\u5904\u7406\u540E\u9700\u8981\u7B26\u5408\u4EE5\u4E0B\u683C\u5F0F\nreturn {\n    status: 0, // 0 \u8868\u793A\u8BF7\u6C42\u6210\u529F\uFF0C\u5426\u5219\u6309\u9519\u8BEF\u5904\u7406\n    msg: '\u8BF7\u6C42\u6210\u529F',\n    data: {\n        text: 'world',\n        items: [\n            {label: '\u5F20\u4E09', value: 1}\n        ]\n    }\n}";
+var validateApiAdaptorDefaultCode = "// \u6821\u9A8C\u6210\u529F\nreturn {\n    status: 0\n};\n\n// \u6821\u9A8C\u5931\u8D25\nreturn {\n  status: 422,\n  errors: '\u5F53\u524D\u7528\u6237\u5DF2\u5B58\u5728'\n}";
+// 接收适配器 正确返回格式 示例
+var adaptorReturnStruct = "{\n  \"status\": 0,\n  \"msg\": \"\",\n  \"data\": {\n    // ...\u5176\u4ED6\u5B57\u6BB5\n  }\n}";
+// 接收适配器 正确返回格式说明
+var adaptorEditorDescSchema = {
+  type: 'container',
+  className: 'text-xs',
+  style: {
+    width: '458px',
+    height: '315px'
+  },
+  body: [i18nRuntime.i18n("6d8e3115be41a8a5690d6fefa637dac7"), genCodeSchema(adaptorReturnStruct), {
+    type: 'table',
+    className: 'mt-1 mb-0',
+    data: {
+      items: [{
+        label: 'status',
+        desc: i18nRuntime.i18n("09212e946a4d9b0f775700c46ef0dcd5")
+      }, {
+        label: 'msg',
+        desc: i18nRuntime.i18n("7391774e57425e5d8e83de64100b5f2e")
+      }, {
+        label: 'data',
+        desc: i18nRuntime.i18n("fa385c23820ee9999c82035086baa772")
+      }]
+    },
+    columns: [{
+      name: 'label',
+      label: i18nRuntime.i18n("9caecd931b956381e0763d05aa42835c")
+    }, {
+      name: 'desc',
+      label: i18nRuntime.i18n("f411d0f1f925d9b48d8c1d451bd809b1")
+    }]
+  }]
+};
+// 表单项校验接收适配器 正确返回格式说明
+var validateApiAdaptorEditorDescSchema = {
+  type: 'container',
+  className: 'text-xs',
+  body: [i18nRuntime.i18n("6494bc042d99f2f5de34a858b8a699c6"), {
+    type: 'table',
+    className: 'mt-1 mb-0',
+    data: {
+      items: [{
+        label: 'status',
+        desc: i18nRuntime.i18n("e6246c03148f553e5d6a66adbdabb9f8")
+      }, {
+        label: 'errors',
+        desc: i18nRuntime.i18n("b8079b9d1e6d3e8a457787910a75cce4")
+      }]
+    },
+    columns: [{
+      name: 'label',
+      label: i18nRuntime.i18n("9caecd931b956381e0763d05aa42835c")
+    }, {
+      name: 'desc',
+      label: i18nRuntime.i18n("f411d0f1f925d9b48d8c1d451bd809b1")
+    }]
+  }]
+};
+amisEditorCore.setSchemaTpl('apiRequestAdaptor', {
+  label: amisEditorCore.tipedLabel(i18nRuntime.i18n("417125a06b1d2bfff025e83a4e067bf0"), "\u53EF\u57FA\u4E8E JavaScript \u8BED\u8A00\u76F4\u63A5\u5F55\u5165\u53D1\u9001\u9002\u914D\u5668\u7684\u51FD\u6570\u4F53\uFF0C\u5728\u8BE5\u51FD\u6570\u4F53\u5185\uFF0C\u60A8\u53EF\u4EE5\u5BF9 <span style=\"color: #108CEE\">api</span> \u8FDB\u884C\u5904\u7406\u6216\u8005\u8FD4\u56DE\u65B0\u7684\u5185\u5BB9\uFF0C\u6700\u540E\u9700\u8981 <span style=\"color: #108CEE\">return</span> <span style=\"color: #108CEE\">api</span>\u3002<br><br/>\n    \u51FD\u6570\u4F53\u5185\u53EF\u8BBF\u95EE\u7684\u53D8\u91CF\u5982\u4E0B\uFF1A<br/>\n    &nbsp;1. <span style=\"color: #108CEE\">api</span>\uFF1A\u63A5\u53E3\u7684schema\u914D\u7F6E\u5BF9\u8C61<br/>\n    &nbsp;2. <span style=\"color: #108CEE\">api.data</span>\uFF1A\u8BF7\u6C42\u6570\u636E<br/>\n    &nbsp;3. <span style=\"color: #108CEE\">api.query</span>\uFF1A\u8BF7\u6C42\u67E5\u8BE2\u53C2\u6570<br/>\n    &nbsp;4. <span style=\"color: #108CEE\">api.body</span>\uFF1A\u8BF7\u6C42\u4F53\uFF08\u9488\u5BF9POST/PUT/PATCH\uFF09<br/>\n    &nbsp;5. <span style=\"color: #108CEE\">api.headers</span>\uFF1A\u8BF7\u6C42\u5934<br/>\n    &nbsp;6. <span style=\"color: #108CEE\">api.url</span>\uFF1A\u8BF7\u6C42\u5730\u5740<br/>"),
+  name: 'requestAdaptor',
+  type: 'ae-apiAdaptorControl',
+  editorDesc: i18nRuntime.i18n("a59c65bea7d5065f19eb9c918a716c33"),
+  editorPlaceholder: requestAdaptorDefaultCode,
+  params: [{
+    label: 'api',
+    tip: adaptorApiStructTooltip
+  }]
+});
+amisEditorCore.setSchemaTpl('apiAdaptor', {
+  label: amisEditorCore.tipedLabel(i18nRuntime.i18n("05fb5edb84e41c19b0f5429fff20b834"), "\u53EF\u57FA\u4E8E JavaScript \u8BED\u8A00\u76F4\u63A5\u5F55\u5165\u8FD4\u56DE\u9002\u914D\u5668\u7684\u51FD\u6570\u4F53\uFF0C\u5728\u51FD\u6570\u4F53\u5185\uFF0C\u60A8\u53EF\u4EE5\u5BF9 <span style=\"color: #108CEE\">payload</span> \u8FDB\u884C\u5904\u7406\u6216\u8005\u8FD4\u56DE\u65B0\u7684\u5185\u5BB9\uFF0C\u6700\u540E\u9700\u8981 <span style=\"color: #108CEE\">return</span> \u63A5\u53E3\u6700\u7EC8\u7684\u8FD4\u56DE\u7ED3\u679C\u3002<br><br/>\n    \u51FD\u6570\u4F53\u5185\u53EF\u8BBF\u95EE\u7684\u53D8\u91CF\u5982\u4E0B\uFF1A<br/>\n    &nbsp;1. <span style=\"color: #108CEE\">payload</span>\uFF1A\u63A5\u53E3\u7684\u8FD4\u56DE\u7ED3\u679C<br/>\n    &nbsp;2. <span style=\"color: #108CEE\">response</span>\uFF1A\u63A5\u53E3\u7684response\u5BF9\u8C61<br/>\n    &nbsp;3. <span style=\"color: #108CEE\">api</span>\uFF1A\u63A5\u53E3\u7684schema\u914D\u7F6E\u5BF9\u8C61<br/>"),
+  type: 'ae-apiAdaptorControl',
+  name: 'adaptor',
+  params: [{
+    label: 'payload',
+    tip: i18nRuntime.i18n("98498eb59e87ec9a0eaf98ac55628da9")
+  }, {
+    label: 'response',
+    tip: adaptorResponseStructTooltip
+  }, {
+    label: 'api',
+    tip: adaptorApiStructTooltip
+  }],
+  editorPlaceholder: adaptorDefaultCode,
+  switchTip: amisCore.render(adaptorEditorDescSchema)
+});
+amisEditorCore.setSchemaTpl('validateApiAdaptor', tslib.__assign(tslib.__assign({}, amisEditorCore.getSchemaTpl('apiAdaptor')), {
+  editorPlaceholder: validateApiAdaptorDefaultCode,
+  switchTip: amisCore.render(validateApiAdaptorEditorDescSchema)
+}));
+
+exports.adaptorApiStruct = adaptorApiStruct;
+exports.adaptorApiStructTooltip = adaptorApiStructTooltip;
+exports.adaptorDefaultCode = adaptorDefaultCode;
+exports.adaptorEditorDescSchema = adaptorEditorDescSchema;
+exports.adaptorResponseStruct = adaptorResponseStruct;
+exports.adaptorResponseStructTooltip = adaptorResponseStructTooltip;
+exports.adaptorReturnStruct = adaptorReturnStruct;
+exports["default"] = APIAdaptorControl;
+exports.requestAdaptorDefaultCode = requestAdaptorDefaultCode;
+exports.validateApiAdaptorDefaultCode = validateApiAdaptorDefaultCode;
+exports.validateApiAdaptorEditorDescSchema = validateApiAdaptorEditorDescSchema;