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

package/src/plugin/Status.tsx

@@ -0,0 +1,78 @@
+import {Button, SchemaObject} from 'amis';
+import React from 'react';
+import {registerEditorPlugin} from '../manager';
+import {BasePlugin, BaseEventContext, RendererInfo} 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

@@ -0,0 +1,140 @@
+/**
+ * @file Steps 步骤条
+ */
+import {Button, SchemaObject} from 'amis';
+import React from 'react';
+import {registerEditorPlugin} from '../manager';
+import {
+  BaseEventContext,
+  BasePlugin,
+  BasicPanelItem,
+  PluginEvent,
+  RegionConfig,
+  RendererInfo,
+  RendererJSONSchemaResolveEventContext,
+  VRendererConfig
+} from '../plugin';
+import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
+import {EditorNodeType} from '../store/node';
+
+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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,440 @@
+import {
+  Button,
+  resolveVariable,
+  resolveVariableAndFilter,
+  SchemaObject
+} from 'amis';
+import {RendererConfig} from 'amis/lib/factory';
+import flatten from 'lodash/flatten';
+import React from 'react';
+import {ContainerWrapper} from '../component/ContainerWrapper';
+import {registerEditorPlugin} from '../manager';
+import {
+  BasePlugin,
+  ChangeEventContext,
+  BaseEventContext,
+  BasicPanelItem,
+  PluginEvent,
+  RegionConfig,
+  RendererJSONSchemaResolveEventContext,
+  RendererInfoResolveEventContext,
+  BasicRendererInfo,
+  PluginInterface,
+  InsertEventContext,
+  ScaffoldForm
+} from '../plugin';
+import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
+import {isObject, JSONPipeIn, repeatArray} from '../util';
+import {IColumn} from 'amis/lib/store/table';
+import {setVariable} from 'amis/lib/utils/helper';
+import {mockValue} from '../mocker';
+
+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);