amis-editor 5.2.0-beta.1 → 5.2.0

package/src/plugin/Card.tsx

@@ -0,0 +1,291 @@
+import {Button} from 'amis-ui';
+import React from 'react';
+import {registerEditorPlugin} from '../manager';
+import {
+  BaseEventContext,
+  BasePlugin,
+  InsertEventContext,
+  PluginEvent,
+  RegionConfig,
+  RendererInfo,
+  VRendererConfig
+} from '../plugin';
+import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
+import flatten from 'lodash/flatten';
+import {VRenderer} from '../component/VRenderer';
+
+export class CardPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'card';
+  $schema = '/schemas/CardSchema.json';
+
+  // 组件名称
+  name = '卡片';
+  isBaseComponent = true;
+  description = '展示单个卡片。';
+  docLink = '/amis/zh-CN/components/card';
+  tags = ['展示'];
+  icon = '';
+  scaffold = {
+    type: 'card',
+    header: {
+      title: '标题',
+      subTitle: '副标题'
+    },
+    body: '内容',
+    actions: [
+      {
+        type: 'button',
+        label: '按钮',
+        actionType: 'dialog',
+        dialog: {
+          title: '标题',
+          body: '内容'
+        }
+      }
+    ]
+  };
+  previewSchema = {
+    ...this.scaffold
+  };
+
+  regions: Array<RegionConfig> = [
+    {
+      key: 'body',
+      label: '内容区',
+      renderMethod: 'renderBody',
+      preferTag: '展示'
+    },
+
+    {
+      key: 'actions',
+      label: '按钮组',
+      renderMethod: 'renderActions',
+      wrapperResolve: (dom: HTMLElement) => dom,
+      preferTag: '按钮'
+    }
+  ];
+
+  panelTitle = '卡片';
+  panelBodyCreator = (context: BaseEventContext) => {
+    return [
+      getSchemaTpl('tabs', [
+        {
+          title: '常规',
+          body: flatten([
+            {
+              children: (
+                <Button
+                  size="sm"
+                  className="m-b-sm"
+                  level="info"
+                  block
+                  onClick={() =>
+                    // this.manager.showInsertPanel('actions', context.id)
+                    this.manager.showRendererPanel(
+                      '按钮',
+                      '请从左侧组件面板中点击添加按钮元素'
+                    )
+                  }
+                >
+                  新增按钮
+                </Button>
+              )
+            },
+            {
+              children: (
+                <div>
+                  <Button
+                    block
+                    level="primary"
+                    size="sm"
+                    onClick={() =>
+                      // this.manager.showInsertPanel('body', context.id)
+                      this.manager.showRendererPanel(
+                        '展示',
+                        '请从左侧组件面板中点击添加内容元素'
+                      )
+                    }
+                  >
+                    新增内容
+                  </Button>
+                </div>
+              )
+            },
+            {
+              type: 'divider'
+            },
+            {
+              name: 'header.title',
+              type: 'input-text',
+              label: '标题',
+              description: '支持模板语法如： <code>\\${xxx}</code>'
+            },
+            {
+              name: 'header.subTitle',
+              type: 'input-text',
+              label: '副标题',
+              description: '支持模板语法如： <code>\\${xxx}</code>'
+            },
+            {
+              name: 'header.avatar',
+              type: 'input-text',
+              label: '图片地址',
+              description: '支持模板语法如： <code>\\${xxx}</code>'
+            },
+            {
+              name: 'header.desc',
+              type: 'textarea',
+              label: '描述',
+              description: '支持模板语法如： <code>\\${xxx}</code>'
+            },
+            {
+              name: 'header.highlight',
+              type: 'input-text',
+              label: '是否高亮表达式',
+              description: '如： <code>this.isOwner</code>'
+            }
+          ])
+        },
+        {
+          title: '外观',
+          body: [
+            {
+              type: 'input-range',
+              name: 'actionsCount',
+              pipeIn: defaultValue(4),
+              min: 1,
+              max: 10,
+              step: 1,
+              label: '卡片一行最多能放按钮个数'
+            },
+            getSchemaTpl('className', {
+              name: 'titleClassName',
+              label: '标题 CSS 类名'
+            }),
+            getSchemaTpl('className', {
+              name: 'highlightClassName',
+              label: '高亮 CSS 类名'
+            }),
+            getSchemaTpl('className', {
+              name: 'subTitleClassName',
+              label: '副标题 CSS 类名'
+            }),
+            getSchemaTpl('className', {
+              name: 'descClassName',
+              label: '描述 CSS 类名'
+            }),
+            getSchemaTpl('className', {
+              name: 'avatarClassName',
+              label: '图片外层 CSS 类名'
+            }),
+            getSchemaTpl('className', {
+              name: 'imageClassName',
+              label: '图片 CSS 类名'
+            }),
+            getSchemaTpl('className', {
+              name: 'bodyClassName',
+              label: '内容区 CSS 类名'
+            }),
+            getSchemaTpl('className')
+          ]
+        },
+        {
+          title: '显隐',
+          body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
+        }
+      ])
+    ];
+  };
+
+  /*exchangeRenderer(id: string) {
+    this.manager.showReplacePanel(id, '展示');
+  }*/
+
+  fieldWrapperResolve = (dom: HTMLElement) => dom;
+  overrides = {
+    renderFeild: function (
+      this: any,
+      region: string,
+      field: any,
+      index: any,
+      props: any
+    ) {
+      const dom = this.super(region, field, index, props);
+      const info: RendererInfo = this.props.$$editor;
+
+      if (!info || !field.$$id) {
+        return dom;
+      }
+
+      const plugin = info.plugin as CardPlugin;
+      const id = field.$$id;
+      return (
+        <VRenderer
+          type={info.type}
+          plugin={info.plugin}
+          renderer={info.renderer}
+          multifactor
+          key={id}
+          $schema="/schemas/CardBodyField.json"
+          hostId={info.id}
+          memberIndex={index}
+          name={`${`字段${index + 1}`}`}
+          id={id}
+          draggable={false}
+          wrapperResolve={plugin.fieldWrapperResolve}
+          schemaPath={`${info.schemaPath}/body/${index}`}
+          path={`${this.props.$path}/${index}`} // 好像没啥用
+          data={this.props.data} // 好像没啥用
+        >
+          {dom}
+        </VRenderer>
+      );
+    }
+  };
+
+  vRendererConfig: VRendererConfig = {
+    panelTitle: '字段',
+    panelBodyCreator: (context: BaseEventContext) => {
+      return [
+        getSchemaTpl('label'),
+        getSchemaTpl('className', {
+          name: 'labelClassName',
+          label: 'Label CSS 类名',
+          visibleOn: 'this.label'
+        })
+        /*{
+          children: (
+            <Button
+              size="sm"
+              level="info"
+              className="m-b"
+              block
+              onClick={this.exchangeRenderer.bind(this, context.id)}
+            >
+              更改渲染器类型
+            </Button>
+          )
+        }*/
+      ];
+    }
+  };
+
+  // 自动插入 label
+  beforeInsert(event: PluginEvent<InsertEventContext>) {
+    const context = event.context;
+
+    if (
+      (context.info.plugin === this ||
+        context.node.sameIdChild?.info.plugin === this) &&
+      context.region === 'body'
+    ) {
+      context.data = {
+        ...context.data,
+        label: context.data.label ?? context.subRenderer?.name ?? '列名称'
+      };
+    }
+  }
+}
+
+registerEditorPlugin(CardPlugin);

package/src/plugin/Cards.tsx

@@ -0,0 +1,312 @@
+import {Button, resolveVariable} from 'amis';
+import React from 'react';
+import {registerEditorPlugin} from '../manager';
+import {
+  BaseEventContext,
+  BasePlugin,
+  BasicPanelItem,
+  BasicRendererInfo,
+  BasicToolbarItem,
+  ContextMenuEventContext,
+  ContextMenuItem,
+  PluginInterface,
+  RegionConfig,
+  RendererInfo,
+  RendererInfoResolveEventContext
+} from '../plugin';
+import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
+import {diff, JSONPipeOut, repeatArray} from '../util';
+
+export class CardsPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'cards';
+  $schema = '/schemas/CardsSchema.json';
+
+  // 组件名称
+  name = '卡片列表';
+  isBaseComponent = true;
+  description =
+    '功能类似于表格，但是用一个个小卡片来展示数据。当前组件需要配置数据源，不自带数据拉取，请优先使用 「CRUD」 组件。';
+  docLink = '/amis/zh-CN/components/cards';
+  tags = ['展示'];
+  icon = 'fa fa-window-maximize';
+  scaffold = {
+    type: 'cards',
+    data: {
+      items: [
+        {a: 1, b: 2},
+        {a: 3, b: 4}
+      ]
+    },
+    columnsCount: 2,
+    card: {
+      type: 'card',
+      className: 'm-b-none',
+      header: {
+        title: '标题',
+        subTitle: '副标题'
+      },
+      body: [
+        {
+          name: 'a',
+          label: 'A'
+        },
+        {
+          name: 'b',
+          label: 'B'
+        }
+      ],
+      actions: [
+        {
+          label: '详情',
+          type: 'button'
+        }
+      ]
+    }
+  };
+  previewSchema = {
+    ...this.scaffold,
+    className: 'text-left '
+  };
+
+  panelTitle = '卡片集';
+  panelBodyCreator = (context: BaseEventContext) => {
+    const isCRUDBody = context.schema.type === 'crud';
+    return [
+      getSchemaTpl('tabs', [
+        {
+          title: '常规',
+          body: [
+            {
+              children: (
+                <div className="m-b">
+                  <Button
+                    level="success"
+                    size="sm"
+                    block
+                    onClick={this.editDetail.bind(this, context.id)}
+                  >
+                    配置单项信息
+                  </Button>
+                </div>
+              )
+            },
+
+            {
+              type: 'divider'
+            },
+            {
+              name: 'title',
+              type: 'input-text',
+              label: '标题'
+            },
+            {
+              name: 'href',
+              type: 'input-text',
+              label: '打开外部链接'
+            },
+            isCRUDBody
+              ? null
+              : {
+                  name: 'source',
+                  type: 'input-text',
+                  label: '数据源',
+                  pipeIn: defaultValue('${items}'),
+                  description: '绑定当前环境变量',
+                  test: !isCRUDBody
+                },
+            {
+              name: 'placeholder',
+              value: '暂无数据',
+              type: 'input-text',
+              label: '无数据提示'
+            }
+          ]
+        },
+        {
+          title: '外观',
+          body: [
+            getSchemaTpl('switch', {
+              name: 'showHeader',
+              label: '是否显示头部',
+              pipeIn: defaultValue(true)
+            }),
+
+            getSchemaTpl('switch', {
+              name: 'showFooter',
+              label: '是否显示底部',
+              pipeIn: defaultValue(true)
+            }),
+
+            getSchemaTpl('className', {
+              label: 'CSS 类名'
+            }),
+            getSchemaTpl('className', {
+              name: 'headerClassName',
+              label: '头部 CSS 类名'
+            }),
+            getSchemaTpl('className', {
+              name: 'footerClassName',
+              label: '底部 CSS 类名'
+            }),
+            getSchemaTpl('className', {
+              name: 'itemsClassName',
+              label: '内容 CSS 类名'
+            }),
+            getSchemaTpl('className', {
+              pipeIn: defaultValue('Grid-col--sm6 Grid-col--md4 Grid-col--lg3'),
+              name: 'itemClassName',
+              label: '卡片 CSS 类名'
+            }),
+            {
+              name: 'columnsCount',
+              type: 'input-range',
+              visibleOn: '!this.leftFixed',
+              min: 0,
+              max: 12,
+              step: 1,
+              label: '每行显示个数',
+              description: '不设置时，由卡片 CSS 类名决定'
+            },
+            getSchemaTpl('switch', {
+              name: 'masonryLayout',
+              label: '启用瀑布流'
+            })
+          ]
+        },
+        {
+          title: '显隐',
+          body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
+        }
+      ])
+    ];
+  };
+
+  editDetail(id: string) {
+    const manager = this.manager;
+    const store = manager.store;
+    const node = store.getNodeById(id);
+    const value = store.getValueOf(id);
+
+    node &&
+      value &&
+      this.manager.openSubEditor({
+        title: '配置成员渲染器',
+        value: {
+          type: 'card',
+          ...value.card
+        },
+        slot: {
+          type: 'container',
+          body: '$$'
+        },
+        typeMutable: false,
+        onChange: newValue => {
+          newValue = {...value, card: newValue};
+          manager.panelChangeValue(newValue, diff(value, newValue));
+        },
+        data: {
+          item: 'mocked data',
+          index: 0
+        }
+      });
+  }
+
+  buildEditorToolbar(
+    {id, info, schema}: BaseEventContext,
+    toolbars: Array<BasicToolbarItem>
+  ) {
+    if (
+      info.renderer.name === 'cards' ||
+      (info.renderer.name === 'crud' && schema.mode === 'cards')
+    ) {
+      toolbars.push({
+        icon: 'fa fa-expand',
+        order: 100,
+        tooltip: '配置成员渲染器',
+        onClick: this.editDetail.bind(this, id)
+      });
+    }
+  }
+
+  buildEditorContextMenu(
+    {id, schema, region, info, selections}: ContextMenuEventContext,
+    menus: Array<ContextMenuItem>
+  ) {
+    if (selections.length || info?.plugin !== this) {
+      return;
+    }
+    if (
+      info.renderer.name === 'cards' ||
+      (info.renderer.name === 'crud' && schema.mode === 'cards')
+    ) {
+      menus.push('|', {
+        label: '配置成员渲染器',
+        onSelect: this.editDetail.bind(this, id)
+      });
+    }
+  }
+
+  filterProps(props: any) {
+    const data = {
+      ...props.defaultData,
+      ...props.data
+    };
+    const arr = Array.isArray(props.value)
+      ? props.value
+      : typeof props.source === 'string'
+      ? resolveVariable(props.source, data)
+      : resolveVariable('items', data);
+
+    if (!Array.isArray(arr) || !arr.length) {
+      const mockedData: any = {
+        id: 666,
+        title: '假数据',
+        description: '假数据',
+        a: '假数据',
+        b: '假数据'
+      };
+
+      props.value = repeatArray(mockedData, 1).map((item, index) => ({
+        ...item,
+        id: index + 1
+      }));
+    }
+
+    const {$schema, ...rest} = props;
+
+    return {
+      ...JSONPipeOut(rest),
+      $schema
+    };
+  }
+
+  getRendererInfo(
+    context: RendererInfoResolveEventContext
+  ): BasicRendererInfo | void {
+    const plugin: PluginInterface = this;
+    const {renderer, schema} = context;
+    if (
+      !schema.$$id &&
+      schema.$$editor?.renderer.name === 'crud' &&
+      renderer.name === 'cards'
+    ) {
+      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);
+  }
+}
+
+registerEditorPlugin(CardsPlugin);