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

package/src/plugin/Form/Transfer.tsx

@@ -0,0 +1,379 @@
+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 TransferPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'transfer';
+  $schema = '/schemas/TransferControlSchema.json';
+
+  // 组件名称
+  name = '穿梭器';
+  isBaseComponent = true;
+  icon = 'fa fa-th-list';
+  description = `穿梭器组件`;
+  docLink = '/amis/zh-CN/components/form/transfer';
+  tags = ['表单项'];
+  scaffold = {
+    label: '分组',
+    type: 'transfer',
+    name: 'transfer',
+    options: [
+      {
+        label: '法师',
+        children: [
+          {
+            label: '诸葛亮',
+            value: 'zhugeliang'
+          }
+        ]
+      },
+      {
+        label: '战士',
+        children: [
+          {
+            label: '曹操',
+            value: 'caocao'
+          },
+          {
+            label: '钟无艳',
+            value: 'zhongwuyan'
+          }
+        ]
+      },
+      {
+        label: '打野',
+        children: [
+          {
+            label: '李白',
+            value: 'libai'
+          },
+          {
+            label: '韩信',
+            value: 'hanxin'
+          },
+          {
+            label: '云中君',
+            value: 'yunzhongjun'
+          }
+        ]
+      }
+    ]
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    mode: 'horizontal',
+    wrapWithPanel: false,
+    body: [
+      {
+        ...this.scaffold
+      }
+    ]
+  };
+
+  panelTitle = '穿梭器';
+  panelDefinitions = {
+    options: {
+      label: '选项 Options',
+      name: 'options',
+      type: 'combo',
+      multiple: true,
+      multiLine: true,
+      draggable: true,
+      addButtonText: '新增选项',
+      scaffold: {
+        label: '',
+        value: ''
+      },
+      items: [
+        {
+          type: 'group',
+          body: [
+            {
+              type: 'input-text',
+              name: 'label',
+              placeholder: '名称',
+              required: true
+            },
+
+            {
+              type: 'input-text',
+              name: 'value',
+              placeholder: '值',
+              unique: true
+            }
+          ]
+        },
+        {
+          $ref: 'options',
+          label: '子选项',
+          name: 'children',
+          addButtonText: '新增子选项'
+        }
+      ]
+    }
+  };
+
+  panelBody = [
+    getSchemaTpl('switchDefaultValue'),
+
+    {
+      type: 'select',
+      name: 'value',
+      label: '默认值',
+      source: '${options}',
+      visibleOn: '!data.multiple && typeof this.value !== "undefined"'
+    },
+
+    {
+      type: 'select',
+      name: 'value',
+      label: '默认值',
+      source: '${options}',
+      multiple: true,
+      visibleOn: ' data.multiple && typeof this.value !== "undefined"'
+    },
+
+    {
+      label: '勾选展示模式',
+      name: 'selectMode',
+      type: 'select',
+      mode: 'inline',
+      className: 'w-full',
+      options: [
+        {
+          label: '列表形式',
+          value: 'list'
+        },
+        {
+          label: '表格形式',
+          value: 'table'
+        },
+        {
+          label: '树形选择形式',
+          value: 'tree'
+        },
+        {
+          label: '级联选择形式',
+          value: 'chained'
+        },
+        {
+          label: '关联选择形式',
+          value: 'associated'
+        }
+      ]
+    },
+
+    {
+      name: 'columns',
+      type: 'combo',
+      multiple: true,
+      label: false,
+      strictMode: false,
+      addButtonText: '新增一列',
+      draggable: false,
+      visibleOn: 'data.selectMode === "table"',
+      items: [
+        {
+          type: 'input-text',
+          name: 'label',
+          placeholder: '标题'
+        },
+        {
+          type: 'input-text',
+          name: 'name',
+          placeholder: '绑定字段名'
+        },
+        {
+          type: 'select',
+          name: 'type',
+          placeholder: '类型',
+          value: 'input-text',
+          options: [
+            {
+              value: 'text',
+              label: '纯文本'
+            },
+            {
+              value: 'tpl',
+              label: '模板'
+            },
+            {
+              value: 'image',
+              label: '图片'
+            },
+            {
+              value: 'date',
+              label: '日期'
+            },
+            {
+              value: 'progress',
+              label: '进度'
+            },
+            {
+              value: 'status',
+              label: '状态'
+            },
+            {
+              value: 'mapping',
+              label: '映射'
+            },
+            {
+              value: 'operation',
+              label: '操作栏'
+            }
+          ]
+        }
+      ]
+    },
+
+    {
+      $ref: 'options',
+      label: '左边的选项集',
+      name: 'leftOptions',
+      visibleOn: 'data.selectMode === "associated"'
+    },
+
+    {
+      label: '左侧选择形式',
+      name: 'leftMode',
+      type: 'select',
+      mode: 'inline',
+      className: 'w-full',
+      visibleOn: 'data.selectMode === "associated"',
+      options: [
+        {
+          label: '列表形式',
+          value: 'list'
+        },
+        {
+          label: '树形选择形式',
+          value: 'tree'
+        }
+      ]
+    },
+
+    {
+      label: '右侧选择形式',
+      name: 'rightMode',
+      type: 'select',
+      mode: 'inline',
+      className: 'w-full',
+      visibleOn: 'data.selectMode === "associated"',
+      options: [
+        {
+          label: '列表形式',
+          value: 'list'
+        },
+        {
+          label: '树形选择形式',
+          value: 'tree'
+        }
+      ]
+    },
+
+    {
+      label: '可检索',
+      name: 'searchable',
+      type: 'switch',
+      mode: 'inline',
+      className: 'w-full'
+    },
+
+    getSchemaTpl('api', {
+      label: '检索接口',
+      name: 'searchApi'
+    }),
+
+    {
+      label: '查询时勾选展示模式',
+      name: 'searchResultMode',
+      type: 'select',
+      mode: 'inline',
+      className: 'w-full',
+      options: [
+        {
+          label: '列表形式',
+          value: 'list'
+        },
+        {
+          label: '表格形式',
+          value: 'table'
+        },
+        {
+          label: '树形选择形式',
+          value: 'tree'
+        },
+        {
+          label: '级联选择形式',
+          value: 'chained'
+        }
+      ]
+    },
+
+    {
+      label: '可排序',
+      name: 'sortable',
+      type: 'switch',
+      mode: 'inline',
+      className: 'w-full'
+    },
+
+    {
+      label: '是否默认选择第一个',
+      name: 'selectFirst',
+      type: 'switch',
+      mode: 'inline',
+      className: 'w-full'
+    },
+
+    {
+      label: '是否显示统计数据',
+      name: 'statistics',
+      type: 'switch',
+      mode: 'inline',
+      className: 'w-full'
+    },
+
+    {
+      label: '左侧的标题文字',
+      name: 'selectTitle',
+      type: 'input-text'
+    },
+
+    {
+      label: '右侧结果的标题文字',
+      name: 'resultTitle',
+      type: 'input-text'
+    },
+
+    getSchemaTpl('fieldSet', {
+      title: '选项',
+      body: [
+        {
+          $ref: 'options',
+          name: 'options'
+        },
+        getSchemaTpl('source'),
+        getSchemaTpl('joinValues'),
+        getSchemaTpl('delimiter'),
+        getSchemaTpl('extractValue'),
+        getSchemaTpl('autoFill')
+      ]
+    })
+  ];
+}
+
+registerEditorPlugin(TransferPlugin);

package/src/plugin/Form/TreeSelect.tsx

@@ -0,0 +1,263 @@
+import {defaultValue, getSchemaTpl} from '../../component/schemaTpl';
+import {registerEditorPlugin} from '../../manager';
+import {BasePlugin} from '../../plugin';
+
+export class TreeSelectControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'tree-select';
+  $schema = '/schemas/TreeSelectControlSchema.json';
+
+  // 组件名称
+  name = '树下拉框';
+  isBaseComponent = true;
+  icon = 'fa fa-chevron-down';
+  description = `点击输入框，弹出树型选择框进行选择`;
+  docLink = '/amis/zh-CN/components/form/treeselect';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'tree-select',
+    label: '树下拉框',
+    name: 'tree-select',
+    options: [
+      {
+        label: '选项A',
+        value: 'A',
+        children: [
+          {
+            label: '选项C',
+            value: 'C'
+          },
+          {
+            label: '选项D',
+            value: 'D'
+          }
+        ]
+      },
+
+      {
+        label: '选项B',
+        value: 'B'
+      }
+    ]
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    mode: 'horizontal',
+    wrapWithPanel: false,
+    body: {
+      ...this.scaffold
+    }
+  };
+
+  panelTitle = '树下拉';
+
+  panelDefinitions = {
+    options: {
+      label: '选项 Options',
+      name: 'options',
+      type: 'combo',
+      multiple: true,
+      multiLine: true,
+      draggable: true,
+      addButtonText: '新增选项',
+      scaffold: {
+        label: '',
+        value: ''
+      },
+      items: [
+        {
+          type: 'group',
+          body: [
+            {
+              type: 'input-text',
+              name: 'label',
+              placeholder: '名称',
+              required: true
+            },
+
+            {
+              type: 'input-text',
+              name: 'value',
+              placeholder: '值',
+              unique: true
+            }
+          ]
+        },
+        {
+          $ref: 'options',
+          label: '子选项',
+          name: 'children',
+          addButtonText: '新增子选项'
+        }
+      ]
+    }
+  };
+
+  panelBody = [
+    getSchemaTpl('switchDefaultValue'),
+
+    {
+      type: 'input-text',
+      name: 'value',
+      label: '默认值',
+      visibleOn: 'typeof this.value !== "undefined"'
+    },
+    getSchemaTpl('clearable'),
+
+    {
+      type: 'switch',
+      name: 'hideNodePathLabel',
+      label: '隐藏选中节点的祖先节点文本信息',
+      mode: 'inline',
+      className: 'w-full'
+    },
+
+    getSchemaTpl('fieldSet', {
+      title: '选项',
+      body: [
+        {
+          $ref: 'options',
+          name: 'options'
+        },
+
+        getSchemaTpl('source', {
+          sampleBuilder: (schema: any) =>
+            JSON.stringify(
+              {
+                status: 0,
+                msg: '',
+                data: {
+                  options: [
+                    {
+                      label: '选项A',
+                      value: 'a',
+                      children: [
+                        {
+                          label: '子选项',
+                          value: 'c'
+                        }
+                      ]
+                    },
+
+                    {
+                      label: '选项B',
+                      value: 'b'
+                    }
+                  ]
+                }
+              },
+              null,
+              2
+            )
+        }),
+
+        getSchemaTpl('api', {
+          name: 'autoComplete',
+          label: '自动完成接口',
+          description:
+            '每次输入新内容后，将调用接口，根据接口返回更新选项。当前用户输入值在 `\\${term}` 中。<code>请不要与获取选项接口同时设置。</code>'
+        }),
+
+        {
+          name: 'initiallyOpen',
+          label: '是否默认展开子选项',
+          type: 'switch',
+          mode: 'inline',
+          className: 'w-full',
+          pipeIn: defaultValue(true)
+        },
+
+        {
+          type: 'input-text',
+          name: 'unfoldedLevel',
+          label: '选项默认展开级数',
+          visibleOn:
+            'typeof this.initiallyOpen !== "undefined" || !this.initiallyOpen'
+        },
+
+        {
+          name: 'showIcon',
+          label: '是否显示图标',
+          type: 'switch',
+          mode: 'inline',
+          className: 'w-full',
+          pipeIn: defaultValue(true)
+        },
+
+        {
+          label: '可搜索？',
+          name: 'searchable',
+          type: 'switch',
+          mode: 'inline',
+          className: 'w-full'
+        },
+
+        {
+          label: '是否显示单选按钮',
+          name: 'showRadio',
+          type: 'switch',
+          mode: 'inline',
+          className: 'w-full',
+          visibleOn: '!data.multiple'
+        },
+
+        getSchemaTpl('multiple'),
+
+        {
+          name: 'cascade',
+          visibleOn: 'data.multiple',
+          label: '不自动选中子节点？',
+          description: '选中父级时，孩子节点是否自动选中',
+          type: 'switch',
+          mode: 'inline',
+          className: 'w-full'
+        },
+
+        {
+          name: 'withChildren',
+          visibleOn: 'data.cascade !== true && data.multiple',
+          label: '数值是否携带子节点',
+          type: 'switch',
+          mode: 'inline',
+          className: 'w-full'
+        },
+
+        {
+          name: 'onlyChildren',
+          visibleOn: 'data.cascade !== true && data.multiple',
+          label: '数值是否只包含子节点',
+          disabledOn: 'data.withChildren',
+          type: 'switch',
+          mode: 'inline',
+          className: 'w-full'
+        },
+
+        getSchemaTpl('joinValues'),
+        getSchemaTpl('delimiter'),
+        getSchemaTpl('extractValue'),
+        getSchemaTpl('autoFill'),
+
+        getSchemaTpl('creatable'),
+        getSchemaTpl('api', {
+          label: '新增选项接口',
+          name: 'addApi'
+        }),
+
+        getSchemaTpl('editable'),
+        getSchemaTpl('api', {
+          label: '编辑选项接口',
+          name: 'editApi'
+        }),
+
+        getSchemaTpl('removable'),
+        getSchemaTpl('api', {
+          label: '删除选项接口',
+          name: 'deleteApi'
+        })
+      ]
+    })
+  ];
+}
+
+registerEditorPlugin(TreeSelectControlPlugin);

package/src/plugin/Form/UUID.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import {registerEditorPlugin} from '../../manager';
+import {
+  BasePlugin,
+  BasicSubRenderInfo,
+  RendererEventContext,
+  SubRendererInfo
+} from '../../plugin';
+
+export class UUIDControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'uuid';
+  $schema = '/schemas/UUIDControlSchema.json';
+
+  // 组件名称
+  name = 'UUID';
+  isBaseComponent = true;
+  icon = 'fa fa-eye-slash';
+  description = `自动生成的 UUID`;
+  docLink = '/amis/zh-CN/components/form/uuid';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'uuid',
+    name: 'uuid'
+  };
+  previewSchema: any = {
+    type: 'form',
+    wrapWithPanel: false,
+    body: [
+      {
+        ...this.scaffold
+      }
+    ]
+  };
+
+  panelTitle = 'UUID';
+  panelBody = [{type: 'static', value: '自动按 UUID v4 格式生成，无需配置'}];
+
+  renderRenderer(props: any) {
+    return (
+      <div key={props.key} className="wrapper-sm b-a b-light m-b-sm">
+        <span className="text-muted">UUID（展现将隐藏）</span>
+      </div>
+    );
+  }
+}
+
+registerEditorPlugin(UUIDControlPlugin);