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

package/src/plugin/Status.tsx

@@ -1,76 +0,0 @@
-import {registerEditorPlugin} from '../manager';
-import {BasePlugin, BaseEventContext} from '../plugin';
-import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
-
-export class StatusPlugin extends BasePlugin {
-  // 关联渲染器名字
-  rendererName = 'status';
-  $schema = '/schemas/StatusSchema.json';
-
-  // 组件名称
-  name = '状态显示';
-  isBaseComponent = true;
-  description =
-    '用图标更具关联字段来展示状态，比如 1 展示 √、0 展示 x。这块可以自定义配置';
-  docLink = '/amis/zh-CN/components/status';
-  tags = ['展示'];
-  icon = 'fa fa-check-square-o';
-  scaffold = {
-    type: 'status',
-    value: 1
-  };
-  previewSchema = {
-    ...this.scaffold
-  };
-
-  panelTitle = '状态';
-  panelBodyCreator = (context: BaseEventContext) => {
-    const isUnderField: boolean = /\/field\/\w+$/.test(context.path as string);
-    return [
-      getSchemaTpl('tabs', [
-        {
-          title: '常规',
-          body: [
-            isUnderField
-              ? {
-                  type: 'tpl',
-                  inline: false,
-                  className: 'text-info text-sm',
-                  tpl: '<p>当前为字段内容节点配置，选择上层还有更多的配置。</p>'
-                }
-              : null,
-            {
-              name: 'map',
-              label: '图标配置',
-              type: 'input-array',
-              items: {
-                type: 'input-text'
-              },
-              descrition: '配置不通的值段，用不通的样式提示用户',
-              pipeIn: defaultValue([
-                'fa fa-times text-danger',
-                'fa fa-check text-success'
-              ])
-            },
-            {
-              name: 'placeholder',
-              type: 'input-text',
-              pipeIn: defaultValue('-'),
-              label: '占位符'
-            }
-          ]
-        },
-        {
-          title: '外观',
-          body: [getSchemaTpl('className')]
-        },
-        {
-          title: '显隐',
-          body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
-        }
-      ])
-    ];
-  };
-}
-
-registerEditorPlugin(StatusPlugin);

package/src/plugin/Steps.tsx

@@ -1,128 +0,0 @@
-/**
- * @file Steps 步骤条
- */
-import {registerEditorPlugin} from '../manager';
-import {BasePlugin} from '../plugin';
-import {getSchemaTpl} from '../component/schemaTpl';
-
-export class StepsPlugin extends BasePlugin {
-  // 关联渲染器名字
-  rendererName = 'steps';
-  $schema = '/schemas/StepsSchema.json';
-
-  // 组件名称
-  name = 'Steps 步骤条';
-  isBaseComponent = true;
-  icon = 'fa fa-forward';
-  description = 'Steps 步骤条';
-  docLink = '/amis/zh-CN/components/steps';
-  tags = ['展示'];
-  scaffold = {
-    type: 'steps',
-    value: 1,
-    steps: [
-      {
-        title: '第一步',
-        subTitle: '副标题',
-        description: '描述'
-      },
-      {
-        title: '第二步'
-      },
-      {
-        title: '第三步'
-      }
-    ]
-  };
-  previewSchema = {
-    ...this.scaffold
-  };
-
-  panelTitle = 'Steps';
-  panelBody = [
-    getSchemaTpl('tabs', [
-      {
-        title: '常规',
-        body: [
-          {
-            name: 'steps',
-            label: '步骤列表',
-            type: 'combo',
-            scaffold: {
-              type: 'wrapper',
-              body: '子节点内容'
-            },
-            minLength: 2,
-            multiple: true,
-            draggable: true,
-            items: [
-              {
-                type: 'input-text',
-                name: 'title',
-                label: false,
-                placeholder: '标题'
-              },
-              {
-                type: 'input-text',
-                name: 'subTitle',
-                label: false,
-                placeholder: '副标题'
-              },
-              {
-                type: 'input-text',
-                name: 'description',
-                label: false,
-                placeholder: '描述'
-              }
-            ]
-          },
-          {
-            name: 'value',
-            type: 'input-text',
-            label: '当前步骤',
-            description: '以零为起点'
-          },
-          {
-            name: 'status',
-            type: 'select',
-            label: '当前状态',
-            creatable: true,
-            value: 'finish',
-            options: [
-              {
-                label: '进行中',
-                value: 'process'
-              },
-              {
-                label: '等待',
-                value: 'wait'
-              },
-              {
-                label: '完成',
-                value: 'finish'
-              },
-              {
-                label: '出错',
-                value: 'error'
-              }
-            ]
-          },
-          getSchemaTpl('api', {
-            name: 'source',
-            label: '获取步骤接口'
-          })
-        ]
-      },
-      {
-        title: '外观',
-        body: [getSchemaTpl('className')]
-      },
-      {
-        title: '显隐',
-        body: [getSchemaTpl('visible')]
-      }
-    ])
-  ];
-}
-
-registerEditorPlugin(StepsPlugin);

package/src/plugin/Submit.tsx

@@ -1,23 +0,0 @@
-import {registerEditorPlugin} from '../manager';
-import {ButtonPlugin} from './Button';
-
-export class SubmitPlugin extends ButtonPlugin {
-  // 关联渲染器名字
-  rendererName = 'submit';
-  disabledRendererPlugin = true; // 组件面板不显示
-  // 组件名称
-  name = '提交';
-  isBaseComponent = true;
-  description = '用来提交表单，要求表单验证，如果在弹窗中会自动关闭弹窗。';
-  panelTitle = '按钮';
-  scaffold: any = {
-    type: 'submit',
-    label: '提交',
-    level: 'primary'
-  };
-  previewSchema = {
-    ...this.scaffold
-  };
-}
-
-registerEditorPlugin(SubmitPlugin);

package/src/plugin/Table.tsx

@@ -1,428 +0,0 @@
-import {resolveVariable} from 'amis';
-import {registerEditorPlugin} from '../manager';
-import {
-  BasePlugin,
-  BaseEventContext,
-  PluginEvent,
-  RegionConfig,
-  RendererInfoResolveEventContext,
-  BasicRendererInfo,
-  PluginInterface,
-  InsertEventContext,
-  ScaffoldForm
-} from '../plugin';
-import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
-import {repeatArray} from '../util';
-import {setVariable} from 'amis-core';
-import {mockValue} from '../mocker';
-import {SchemaObject} from 'amis/lib/Schema';
-
-export class TablePlugin extends BasePlugin {
-  // 关联渲染器名字
-  rendererName = 'table';
-  $schema = '/schemas/TableSchema.json';
-
-  // 组件名称
-  name = '表格';
-  isBaseComponent = true;
-  description =
-    '用来展示表格数据，可以配置列信息，然后关联数据便能完成展示。支持嵌套、超级表头、列固定、表头固顶、合并单元格等等。当前组件需要配置数据源，不自带数据拉取，请优先使用 「CRUD」 组件。';
-  docLink = '/amis/zh-CN/components/table';
-  icon = 'fa fa-table';
-  scaffold: SchemaObject = {
-    type: 'table',
-    columns: [
-      {
-        label: '列信息',
-        name: 'a'
-      }
-    ]
-  };
-
-  regions: Array<RegionConfig> = [
-    {
-      key: 'columns',
-      label: '列集合',
-      renderMethod: 'renderTableContent',
-      preferTag: '展示',
-      dndMode: 'position-h'
-    }
-  ];
-
-  //renderTableContent
-
-  previewSchema: any = {
-    type: 'table',
-    className: 'text-left m-b-none',
-    affixHeader: false,
-    items: [
-      {a: 1, b: 2},
-      {a: 3, b: 4},
-      {a: 5, b: 6}
-    ],
-    columns: [
-      {
-        label: 'A',
-        name: 'a'
-      },
-      {
-        label: 'B',
-        name: 'b'
-      }
-    ]
-  };
-
-  scaffoldForm: ScaffoldForm = {
-    title: '快速构建表格',
-    body: [
-      {
-        name: 'columns',
-        type: 'combo',
-        multiple: true,
-        label: false,
-        addButtonText: '新增一列',
-        draggable: true,
-        items: [
-          {
-            type: 'input-text',
-            name: 'label',
-            placeholder: '标题'
-          },
-          {
-            type: 'input-text',
-            name: 'name',
-            placeholder: '绑定字段名'
-          },
-          {
-            type: 'select',
-            name: 'type',
-            placeholder: '类型',
-            value: 'text',
-            options: [
-              {
-                value: 'text',
-                label: '纯文本'
-              },
-              {
-                value: 'tpl',
-                label: '模板'
-              },
-              {
-                value: 'image',
-                label: '图片'
-              },
-              {
-                value: 'date',
-                label: '日期'
-              },
-              // {
-              //     value: 'datetime',
-              //     label: '日期时间'
-              // },
-              // {
-              //     value: 'time',
-              //     label: '时间'
-              // },
-              {
-                value: 'progress',
-                label: '进度'
-              },
-              {
-                value: 'status',
-                label: '状态'
-              },
-              {
-                value: 'mapping',
-                label: '映射'
-              },
-              {
-                value: 'operation',
-                label: '操作栏'
-              }
-            ]
-          }
-        ]
-      }
-    ],
-    canRebuild: true
-  };
-
-  panelTitle = '表格';
-  panelBodyCreator = (context: BaseEventContext) => {
-    const isCRUDBody = context.schema.type === 'crud';
-
-    return getSchemaTpl('tabs', [
-      {
-        title: '常规',
-        body: [
-          {
-            name: 'title',
-            type: 'input-text',
-            label: '标题'
-          },
-
-          isCRUDBody
-            ? null
-            : {
-                name: 'source',
-                type: 'input-text',
-                label: '数据源',
-                pipeIn: defaultValue('${items}'),
-                description: '绑定当前环境变量'
-              },
-
-          {
-            name: 'combineNum',
-            label: '自动合并单元格',
-            type: 'input-number',
-            placeholder: '设置列数',
-            description:
-              '设置从左到右多少列内启用自动合并单元格，根据字段值是否相同来决定是否合并。'
-          }
-
-          // {
-          //   children: (
-          //     <div>
-          //       <Button
-          //         level="info"
-          //         size="sm"
-          //         className="m-b-sm"
-          //         block
-          //         onClick={this.handleAdd}
-          //       >
-          //         新增一列
-          //       </Button>
-          //     </div>
-          //   )
-          // },
-
-          // {
-          //   children: (
-          //     <div>
-          //       <Button
-          //         level="success"
-          //         size="sm"
-          //         block
-          //         onClick={this.handleColumnsQuickEdit.bind(this)}
-          //       >
-          //         快速编辑列信息
-          //       </Button>
-          //     </div>
-          //   )
-          // }
-        ]
-      },
-      {
-        title: '外观',
-        body: [
-          {
-            name: 'columnsTogglable',
-            label: '展示列显示开关',
-            type: 'button-group-select',
-            pipeIn: defaultValue('auto'),
-            mode: 'inline',
-            className: 'w-full',
-            size: 'xs',
-            options: [
-              {
-                label: '自动',
-                value: 'auto'
-              },
-
-              {
-                label: '开启',
-                value: true
-              },
-
-              {
-                label: '关闭',
-                value: false
-              }
-            ],
-            description: '自动即列数量大于5个时自动开启'
-          },
-
-          {
-            name: 'affixHeader',
-            type: 'switch',
-            label: '是否固顶表头',
-            mode: 'inline',
-            className: 'w-full',
-            pipeIn: defaultValue(true)
-          },
-
-          {
-            name: 'showHeader',
-            type: 'switch',
-            mode: 'inline',
-            className: 'w-full',
-            label: '是否显示头部',
-            pipeIn: defaultValue(true)
-          },
-
-          {
-            name: 'showFooter',
-            type: 'switch',
-            mode: 'inline',
-            className: 'w-full',
-            label: '是否显示底部',
-            pipeIn: defaultValue(true)
-          },
-
-          {
-            name: 'footable',
-            type: 'switch',
-            mode: 'inline',
-            className: 'w-full',
-            label: '是否开启单条底部展示',
-            description:
-              '如果列太多显示会很臃肿，可以考虑把部分列放在当前行的底部展示',
-            pipeIn: (value: any) => !!value
-          },
-
-          {
-            name: 'footable.expand',
-            type: 'button-group-select',
-            size: 'xs',
-            visibleOn: 'data.footable',
-            label: '底部默认展开',
-            pipeIn: defaultValue('none'),
-            mode: 'inline',
-            className: 'w-full',
-            options: [
-              {
-                label: '第一条',
-                value: 'first'
-              },
-
-              {
-                label: '所有',
-                value: 'all'
-              },
-
-              {
-                label: '不展开',
-                value: 'none'
-              }
-            ]
-          },
-
-          {
-            name: 'placeholder',
-            pipeIn: defaultValue('暂无数据'),
-            type: 'input-text',
-            label: '无数据提示'
-          },
-          {
-            name: 'rowClassNameExpr',
-            type: 'input-text',
-            label: '行高亮规则',
-            placeholder: `支持模板语法，如 <%= data.id % 2 ? 'bg-success' : '' %>`
-          },
-          getSchemaTpl('className', {
-            label: '外层 CSS 类名'
-          }),
-
-          getSchemaTpl('className', {
-            name: 'tableClassName',
-            label: '表格 CSS 类名'
-          }),
-
-          getSchemaTpl('className', {
-            name: 'headerClassName',
-            label: '顶部外层 CSS 类名'
-          }),
-
-          getSchemaTpl('className', {
-            name: 'footerClassName',
-            label: '底部外层 CSS 类名'
-          }),
-
-          getSchemaTpl('className', {
-            name: 'toolbarClassName',
-            label: '工具栏 CSS 类名'
-          })
-        ]
-      },
-      {
-        title: '显隐',
-        body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
-      }
-    ]);
-  };
-
-  filterProps(props: any) {
-    const arr = Array.isArray(props.value)
-      ? props.value
-      : typeof props.source === 'string'
-      ? resolveVariable(props.source, props.data)
-      : resolveVariable('items', props.data);
-
-    if (!Array.isArray(arr) || !arr.length) {
-      const mockedData: any = {};
-
-      if (Array.isArray(props.columns)) {
-        props.columns.forEach((column: any) => {
-          if (column.name) {
-            setVariable(mockedData, column.name, mockValue(column));
-          }
-        });
-      }
-
-      props.value = repeatArray(mockedData, 1).map((item, index) => ({
-        ...item,
-        id: index + 1
-      }));
-    } else {
-      // 只取10条预览，否则太多卡顿
-      props.value = arr.slice(0, 10);
-    }
-
-    return props;
-  }
-
-  // 为了能够自动注入数据。
-  getRendererInfo(
-    context: RendererInfoResolveEventContext
-  ): BasicRendererInfo | void {
-    const plugin: PluginInterface = this;
-    const {schema, renderer} = context;
-    if (
-      !schema.$$id &&
-      schema.$$editor?.renderer.name === 'crud' &&
-      renderer.name === 'table'
-    ) {
-      return {
-        ...({id: schema.$$editor.id} as any),
-        name: plugin.name!,
-        regions: plugin.regions,
-        patchContainers: plugin.patchContainers,
-        vRendererConfig: plugin.vRendererConfig,
-        wrapperProps: plugin.wrapperProps,
-        wrapperResolve: plugin.wrapperResolve,
-        filterProps: plugin.filterProps,
-        $schema: plugin.$schema,
-        renderRenderer: plugin.renderRenderer
-      };
-    }
-    return super.getRendererInfo(context);
-  }
-
-  // 自动插入 label
-  beforeInsert(event: PluginEvent<InsertEventContext>) {
-    const context = event.context;
-
-    if (
-      (context.info.plugin === this ||
-        context.node.sameIdChild?.info.plugin === this) &&
-      context.region === 'columns'
-    ) {
-      context.data = {
-        ...context.data,
-        label: context.data.label ?? context.subRenderer?.name ?? '列名称'
-      };
-    }
-  }
-}
-
-registerEditorPlugin(TablePlugin);