amis-editor 4.1.0-beta.2 → 4.1.0-beta.20

package/src/plugin/Form/InputFile.tsx

@@ -0,0 +1,228 @@
+import {relativeValueRe} from 'amis';
+import {availableLanguages} from 'amis/lib/renderers/Form/Editor';
+import {
+  defaultValue,
+  getSchemaTpl,
+  valuePipeOut
+} from '../../component/schemaTpl';
+import {registerEditorPlugin} from '../../manager';
+import {
+  BasePlugin,
+  BasicSubRenderInfo,
+  RendererEventContext,
+  SubRendererInfo
+} from '../../plugin';
+
+export class FileControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'input-file';
+  $schema = '/schemas/FileControlSchema.json';
+
+  // 组件名称
+  name = '文件上传';
+  isBaseComponent = true;
+  icon = 'fa fa-upload';
+  description = `可上传多个文件，可配置是否自动上传以及大文件分片上传`;
+  docLink = '/amis/zh-CN/components/form/input-file';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'input-file',
+    label: '文件上传',
+    name: 'file'
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    wrapWithPanel: false,
+    mode: 'horizontal',
+    body: [
+      {
+        ...this.scaffold
+      }
+    ]
+  };
+
+  panelTitle = '文件域';
+  panelBody = [
+    getSchemaTpl('tabs', [
+      {
+        title: '常规',
+        body: [
+          {
+            type: 'input-text',
+            name: 'btnLabel',
+            label: '上传按钮名称',
+            value: '请选择文件'
+          },
+
+          getSchemaTpl('api', {
+            label: '文件接收器',
+            name: 'receiver',
+            description:
+              '默认不填写将上传到 bos，可以在系统配置中设置为自己的 bos 地址。',
+            value: '/api/upload/file',
+            __isUpload: true
+          }),
+
+          getSchemaTpl('autoFill'),
+
+          {
+            type: 'fieldSet',
+            title: '分块上传相关',
+            collapsed: true,
+            collapsable: true,
+            className: 'fieldset',
+            body: [
+              {
+                type: 'button-group-select',
+                name: 'useChunk',
+                label: '启用分块',
+                size: 'xs',
+                pipeOut: valuePipeOut,
+                value: 'auto',
+                options: [
+                  {
+                    label: '自动',
+                    value: 'auto'
+                  },
+                  {
+                    label: '启用',
+                    value: true
+                  },
+                  {
+                    label: '关闭',
+                    value: false
+                  }
+                ]
+              },
+              {
+                name: 'chunkSize',
+                type: 'input-number',
+                label: '分块大小',
+                visibleOn: 'data.useChunk != false',
+                value: 5 * 1024 * 1024
+              },
+              getSchemaTpl('api', {
+                name: 'startChunkApi',
+                label: 'startChunkApi',
+                value: '/api/upload/startChunk'
+              }),
+              getSchemaTpl('api', {
+                name: 'chunkApi',
+                label: 'chunkApi',
+                value: '/api/upload/chunk'
+              }),
+              getSchemaTpl('api', {
+                name: 'finishChunkApi',
+                label: 'finishChunkApi',
+                value: '/api/upload/finishChunk'
+              })
+            ]
+          },
+          {
+            type: 'input-text',
+            name: 'accept',
+            label: '文件类型',
+            value: '',
+            description:
+              '请填写文件的 <code>mime-types</code>，参考 <code>input[type=file]</code> 的 <code>accept</code> 说明'
+          },
+          getSchemaTpl('switchDefaultValue'),
+          {
+            type: 'input-text',
+            name: 'value',
+            label: '默认值',
+            visibleOn: 'typeof this.value !== "undefined"'
+          },
+          getSchemaTpl('multiple', {
+            pipeIn: defaultValue(false)
+          }),
+          getSchemaTpl('joinValues'),
+          getSchemaTpl('delimiter'),
+          getSchemaTpl('extractValue')
+        ]
+      },
+      {
+        title: '外观',
+        body: [
+          getSchemaTpl('className', {
+            name: 'btnClassName',
+            label: '按钮 CSS 类名',
+            pipeIn: defaultValue('btn-sm btn-info')
+          }),
+          getSchemaTpl('className', {
+            name: 'btnUploadClassName',
+            label: '上传按钮 CSS 类名',
+            pipeIn: defaultValue('btn-sm btn-success')
+          })
+        ]
+      },
+      {
+        title: '其他',
+        body: [
+          {
+            name: 'maxSize',
+            type: 'input-number',
+            label: '文件最大体积',
+            description: '超出大小不允许上传，单位字节'
+          },
+          {
+            name: 'maxLength',
+            type: 'input-number',
+            label: '文件最大数量',
+            description: '超出数量不允许上传',
+            visibleOn: 'data.multiple != false'
+          },
+          {
+            name: 'fileField',
+            type: 'input-text',
+            label: '文件域名称',
+            value: 'file'
+          },
+          {
+            name: 'asBase64',
+            type: 'switch',
+            mode: 'inline',
+            className: 'block',
+            label: '作为 Base64 提交',
+            hiddenOn: 'data.asBlob',
+            description:
+              '小文件时可以使用，默认给 Form 提交的是文件下载地址，设置后给 Form 提交文件内容的 base64 格式字符串。'
+          },
+          {
+            name: 'asBlob',
+            type: 'switch',
+            mode: 'inline',
+            className: 'block',
+            label: '作为二进制提交',
+            hiddenOn: 'data.asBase64',
+            description:
+              'File 控件不接管文件上传，直接由表单的保存接口完成。和 Base64 选项二选一。'
+          },
+          {
+            name: 'autoUpload',
+            type: 'switch',
+            mode: 'inline',
+            className: 'block',
+            label: '是否自动上传',
+            value: true
+          },
+          {
+            name: 'hideUploadButton',
+            type: 'switch',
+            mode: 'inline',
+            className: 'block',
+            label: '是否隐藏上传按钮',
+            value: false
+          },
+          getSchemaTpl('fileUrl', {
+            name: 'templateUrl',
+            label: '模板地址'
+          })
+        ]
+      }
+    ])
+  ];
+}
+
+registerEditorPlugin(FileControlPlugin);

package/src/plugin/Form/InputGroup.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import {Button} from 'amis';
+import {availableLanguages} from 'amis/lib/renderers/Form/Editor';
+import {
+  defaultValue,
+  getSchemaTpl,
+  valuePipeOut
+} from '../../component/schemaTpl';
+import {registerEditorPlugin} from '../../manager';
+import {
+  BasePlugin,
+  BasicSubRenderInfo,
+  RendererEventContext,
+  SubRendererInfo
+} from '../../plugin';
+
+export class InputGroupControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'input-group';
+  $schema = '/schemas/InputGroupControlSchema.json';
+
+  // 组件名称
+  name = '输入组合';
+  isBaseComponent = true;
+  icon = 'fa fa-object-group';
+  description = `输入组合，支持多种类型的控件组合`;
+  docLink = '/amis/zh-CN/components/form/input-group';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'input-group',
+    name: 'input-group',
+    label: 'input 组合',
+    body: [
+      {
+        type: 'input-text',
+        inputClassName: 'b-r-none p-r-none',
+        name: 'input-group'
+      },
+      {
+        type: 'submit',
+        label: '提交',
+        level: 'primary'
+      }
+    ]
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    mode: 'horizontal',
+    wrapWithPanel: false,
+    body: [
+      {
+        ...this.scaffold
+      }
+    ]
+  };
+
+  panelTitle = 'Input 组合';
+  panelBody = [
+    [
+      {
+        name: 'body',
+        type: 'combo',
+        // label: '子按钮',
+        multiple: true,
+        addable: false,
+        draggable: true,
+        draggableTip: '可排序、可移除、如要编辑请在预览区选中编辑',
+        editable: false,
+        visibleOn: 'this.body && this.body.length',
+        items: [
+          {
+            type: 'tpl',
+            inline: false,
+            className: 'p-t-xs',
+            tpl: '<%= data.label %><% if (data.icon) { %><i class="<%= data.icon %>"/><% }%>'
+          }
+        ]
+      },
+      {
+        children: (
+          <Button
+            className="m-b"
+            // TODO：需要限制一下 body 的类型，之前是这些 'text', 'url', 'email', 'password', 'select', 'date', 'time', 'date-time', 'date-range', 'formula', 'color', 'city', 'icon', 'plain', 'tpl', 'button', 'submit', 'reset'
+            onClick={() => {
+              // this.manager.showInsertPanel('body')
+              this.manager.showRendererPanel('表单项'); // '请从左侧组件面板中点击添加表单项'
+            }}
+            level="danger"
+            tooltip="插入一个新的元素"
+            size="sm"
+            block
+          >
+            新增元素
+          </Button>
+        )
+      },
+      getSchemaTpl('formItemName', {
+        required: true
+      })
+    ]
+  ];
+}
+
+registerEditorPlugin(InputGroupControlPlugin);

package/src/plugin/Form/InputImage.tsx

@@ -0,0 +1,277 @@
+import {relativeValueRe} from 'amis';
+import {availableLanguages} from 'amis/lib/renderers/Form/Editor';
+import {
+  defaultValue,
+  getSchemaTpl,
+  valuePipeOut
+} from '../../component/schemaTpl';
+import {registerEditorPlugin} from '../../manager';
+import {
+  BasePlugin,
+  BasicSubRenderInfo,
+  RendererEventContext,
+  SubRendererInfo
+} from '../../plugin';
+
+export class ImageControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'input-image';
+  $schema = '/schemas/ImageControlSchema.json';
+
+  // 组件名称
+  name = '图片上传';
+  isBaseComponent = true;
+  description = `可以对图片实现裁剪，限制图片的宽高以及大小，支持自动上传及上传多张图片`;
+  docLink = '/amis/zh-CN/components/form/input-image';
+  tags = ['表单项'];
+  icon = 'fa fa-crop';
+  scaffold = {
+    type: 'input-image',
+    label: '图片上传',
+    name: 'image',
+    imageClassName: 'r w-full'
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    mode: 'horizontal',
+    wrapWithPanel: false,
+    body: [
+      {
+        ...this.scaffold
+      }
+    ]
+  };
+
+  panelTitle = '图片上传';
+  panelBody = [
+    getSchemaTpl('switchDefaultValue'),
+
+    {
+      type: 'input-text',
+      name: 'value',
+      label: '默认值',
+      visibleOn: 'typeof this.value !== "undefined"'
+    },
+
+    getSchemaTpl('multiple', {
+      value: false,
+      visibleOn: '!data.crop',
+      description: '开启后，不能同时开启裁剪功能'
+    }),
+    getSchemaTpl('joinValues'),
+    getSchemaTpl('delimiter'),
+    getSchemaTpl('extractValue'),
+    {
+      name: 'maxSize',
+      type: 'input-number',
+      label: '图片最大体积',
+      description: '超出大小不允许上传，单位字节'
+    },
+    {
+      name: 'maxLength',
+      type: 'input-number',
+      label: '图片最大数量',
+      visibleOn: 'data.multiple',
+      description: '超出数量不允许上传'
+    },
+    getSchemaTpl('api', {
+      label: '文件接收接口',
+      name: 'receiver',
+      description: '文件接收接口，默认不填则上传到 hiphoto',
+      value: '/api/upload',
+      __isUpload: true
+    }),
+
+    getSchemaTpl('autoFill'),
+
+    {
+      type: 'input-text',
+      value: '.jpeg, .jpg, .png, .gif',
+      name: 'accept',
+      label: '图片类型',
+      description:
+        '请填入图片的后缀或 <code>MimeType</code>，多个类型用<code>,</code>隔开'
+    },
+
+    {
+      type: 'input-text',
+      name: 'defaultImage',
+      label: '占位图片地址'
+    },
+
+    {
+      type: 'switch',
+      name: 'fixedSize',
+      value: false,
+      label: '是否开启固定尺寸',
+      mode: 'inline',
+      className: 'w-full'
+    },
+
+    {
+      type: 'switch',
+      name: 'hideUploadButton',
+      value: false,
+      label: '隐藏上传按钮',
+      mode: 'inline',
+      className: 'w-full'
+    },
+
+    {
+      type: 'switch',
+      name: 'autoUpload',
+      value: false,
+      label: '自动上传',
+      mode: 'inline',
+      className: 'w-full'
+    },
+
+    {
+      name: 'compress',
+      type: 'switch',
+      label: '开启压缩',
+      value: true,
+      mode: 'inline',
+      className: 'w-full',
+      description: '由 hiphoto 实现，自定义接口将无效'
+    },
+
+    {
+      type: 'combo',
+      name: 'compressOptions',
+      multiLine: true,
+      label: '压缩配置',
+      visibleOn: 'data.compress',
+      items: [
+        {
+          type: 'input-number',
+          label: '最大宽度',
+          name: 'maxWidth'
+        },
+
+        {
+          type: 'input-number',
+          label: '最大高度',
+          name: 'maxHeight'
+        }
+      ]
+    },
+
+    {
+      name: 'showCompressOptions',
+      type: 'switch',
+      label: '是否显示压缩选项',
+      mode: 'inline',
+      className: 'w-full'
+    },
+
+    {
+      name: 'crop',
+      type: 'switch',
+      label: '是否开启裁剪',
+      mode: 'inline',
+      visibleOn: '!data.multiple',
+      className: 'w-full',
+      description: '开启后，不能同时开启多选模式',
+      pipeIn: (value: any) => !!value
+    },
+
+    {
+      name: 'crop.aspectRatio',
+      type: 'input-text',
+      label: '裁剪比率',
+      visibleOn: 'data.crop',
+      pipeOut: valuePipeOut
+    },
+
+    {
+      name: 'crop.rotatable',
+      type: 'switch',
+      label: '裁剪时是否可旋转',
+      visibleOn: 'data.crop',
+      pipeOut: valuePipeOut
+    },
+
+    {
+      name: 'crop.scalable',
+      type: 'switch',
+      label: '裁剪时否可缩放',
+      visibleOn: 'data.crop',
+      pipeOut: valuePipeOut
+    },
+
+    {
+      name: 'crop.viewMode',
+      type: 'select',
+      label: '裁剪区域限制',
+      value: 1,
+      options: [
+        {label: '无限制', value: 0},
+        {label: '绘图区域', value: 1}
+      ],
+      visibleOn: 'data.crop',
+      pipeOut: valuePipeOut
+    },
+
+    {
+      type: 'fieldSet',
+      title: '图片限制',
+      collapsed: true,
+      collapsable: true,
+      className: 'fieldset',
+      body: [
+        {
+          type: 'input-number',
+          name: 'limit.width',
+          label: '限制宽度'
+        },
+
+        {
+          type: 'input-number',
+          name: 'limit.height',
+          label: '限制高度'
+        },
+
+        {
+          type: 'input-number',
+          name: 'limit.maxWidth',
+          label: '限制最大宽度'
+        },
+
+        {
+          type: 'input-number',
+          name: 'limit.maxHeight',
+          label: '限制最大高度'
+        },
+
+        {
+          type: 'input-number',
+          name: 'limit.minWidth',
+          label: '限制最小宽度'
+        },
+
+        {
+          type: 'input-number',
+          name: 'limit.minHeight',
+          label: '限制最小高度'
+        },
+
+        {
+          type: 'input-number',
+          name: 'limit.aspectRatio',
+          label: '限制宽高比率'
+        },
+
+        {
+          type: 'input-text',
+          name: 'limit.限制最小高度',
+          label: '宽高比描述',
+          description: '当宽高比没有满足条件时，此描述将作为提示信息显示'
+        }
+      ]
+    }
+  ];
+}
+
+registerEditorPlugin(ImageControlPlugin);

package/src/plugin/Form/InputKV.tsx

@@ -0,0 +1,72 @@
+/**
+ * @file input-kv 组件的素项目部
+ */
+import {
+  defaultValue,
+  getSchemaTpl,
+  valuePipeOut
+} from '../../component/schemaTpl';
+import {registerEditorPlugin} from '../../manager';
+import {
+  BasePlugin,
+  BasicSubRenderInfo,
+  RendererEventContext,
+  SubRendererInfo
+} from '../../plugin';
+
+export class KVControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'input-kv';
+  $schema = '/schemas/KVControlSchema.json';
+
+  // 组件名称
+  name = 'KV 键值对';
+  isBaseComponent = true;
+  icon = 'fa fa-eyedropper';
+  description = '用于编辑键值对类型的数据';
+  docLink = '/amis/zh-CN/components/form/input-kv';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'input-kv',
+    label: 'KV',
+    name: 'kv'
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    mode: 'horizontal',
+    wrapWithPanel: false,
+    body: [
+      {
+        ...this.scaffold
+      }
+    ]
+  };
+  panelTitle = 'KV 键值对';
+  panelBody = [
+    {
+      type: 'input-text',
+      name: 'valueType',
+      label: '值类型',
+      pipeIn: defaultValue('input-text')
+    },
+    {
+      type: 'input-text',
+      name: 'keyPlaceholder',
+      label: 'key 的提示信息'
+    },
+    {
+      type: 'input-text',
+      name: 'valuePlaceholder',
+      label: 'value 的提示信息'
+    },
+    {
+      type: 'switch',
+      name: 'draggable',
+      label: '是否可排序',
+      pipeIn: defaultValue(true)
+    }
+  ];
+}
+
+registerEditorPlugin(KVControlPlugin);