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

package/src/plugin/Card.tsx

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

@@ -1,318 +0,0 @@
-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: [
-            {
-              name: 'showHeader',
-              type: 'switch',
-              mode: 'inline',
-              className: 'block',
-              label: '是否显示头部',
-              pipeIn: defaultValue(true)
-            },
-            {
-              name: 'showFooter',
-              type: 'switch',
-              mode: 'inline',
-              className: 'block',
-              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 类名决定'
-            },
-            {
-              name: 'masonryLayout',
-              type: 'switch',
-              mode: 'inline',
-              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);