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

package/src/plugin/Link.tsx

@@ -1,93 +0,0 @@
-import {registerEditorPlugin} from '../manager';
-import {BasePlugin} from '../plugin';
-import {getSchemaTpl} from '../component/schemaTpl';
-
-export class LinkPlugin extends BasePlugin {
-  // 关联渲染器名字
-  rendererName = 'link';
-  $schema = '/schemas/LinkSchema.json';
-
-  // 组件名称
-  name = '链接';
-  isBaseComponent = true;
-  description = '用来展示文字链接';
-  tags = ['展示'];
-  icon = 'fa fa-link';
-  scaffold = {
-    type: 'link',
-    value: 'http://www.baidu.com/'
-  };
-  previewSchema = {
-    ...this.scaffold,
-    label: this.name
-  };
-
-  panelTitle = '链接';
-  panelBody = [
-    getSchemaTpl('tabs', [
-      {
-        title: '常规',
-        body: [
-          {
-            name: 'href',
-            type: 'input-text',
-            label: '目标地址, 支持取变量。',
-            description: '如果已绑定字段名，可以不用设置'
-          },
-
-          {
-            name: 'body',
-            type: 'input-text',
-            label: '内容',
-            description: '不填写时，自动使用目标地址值'
-          },
-
-          {
-            name: 'blank',
-            type: 'switch',
-            label: '是否新窗口打开',
-            mode: 'inline',
-            className: 'w-full'
-          },
-
-          {
-            name: 'disabled',
-            type: 'switch',
-            label: '是否禁用',
-            mode: 'inline',
-            className: 'w-full'
-          },
-
-          {
-            name: 'htmlTarget',
-            type: 'input-text',
-            label: 'HTML Target'
-          },
-
-          getSchemaTpl('icon', {
-            label: '左侧图标'
-          }),
-
-          getSchemaTpl('icon', {
-            label: '右侧图标',
-            name: 'rightIcon'
-          })
-        ]
-      },
-      {
-        title: '外观',
-        body: [
-          getSchemaTpl('className', {
-            autoComplete: false
-          })
-        ]
-      },
-      {
-        title: '显隐',
-        body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
-      }
-    ])
-  ];
-}
-
-registerEditorPlugin(LinkPlugin);

package/src/plugin/List.tsx

@@ -1,278 +0,0 @@
-import {Button, resolveVariable} from 'amis';
-import React from 'react';
-import {registerEditorPlugin} from '../manager';
-import {
-  BaseEventContext,
-  BasePlugin,
-  BasicRendererInfo,
-  BasicToolbarItem,
-  ContextMenuEventContext,
-  ContextMenuItem,
-  PluginInterface,
-  RendererInfoResolveEventContext
-} from '../plugin';
-import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
-import {diff, JSONPipeOut, repeatArray} from '../util';
-
-export class ListPlugin extends BasePlugin {
-  // 关联渲染器名字
-  rendererName = 'list';
-  $schema = '/schemas/ListSchema.json';
-
-  // 组件名称
-  name = '列表';
-  isBaseComponent = true;
-  description =
-    '展示一个列表，可以自定标题、副标题，内容及按钮组部分。当前组件需要配置数据源，不自带数据拉取，请优先使用 「CRUD」 组件。';
-  docLink = '/amis/zh-CN/components/list';
-  tags = ['展示'];
-  icon = 'fa fa-list';
-  scaffold = {
-    type: 'list',
-    listItem: {
-      body: [
-        {
-          type: 'tpl',
-          tpl: '简单的展示数据：$a $b'
-        }
-      ],
-      actions: [
-        {
-          icon: 'fa fa-eye',
-          type: 'button'
-        }
-      ]
-    }
-  };
-  previewSchema = {
-    ...this.scaffold,
-    items: [
-      {a: 1, b: 2},
-      {a: 3, b: 4},
-      {a: 5, b: 6}
-    ]
-  };
-
-  panelTitle = '列表';
-  panelBodyCreator = (context: BaseEventContext) => {
-    const isCRUDBody = context.schema.type === 'crud';
-
-    return getSchemaTpl('tabs', [
-      {
-        title: '常规',
-        body: [
-          {
-            children: (
-              <Button
-                level="danger"
-                size="sm"
-                block
-                onClick={this.editDetail.bind(this, context.id)}
-              >
-                配置成员详情
-              </Button>
-            )
-          },
-          {
-            type: 'divider'
-          },
-          {
-            name: 'title',
-            type: 'input-text',
-            label: '标题'
-          },
-          isCRUDBody
-            ? null
-            : {
-                name: 'source',
-                type: 'input-text',
-                label: '数据源',
-                pipeIn: defaultValue('${items}'),
-                description: '绑定当前环境变量'
-              },
-          {
-            name: 'placeholder',
-            pipeIn: defaultValue('没有数据'),
-            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: 'listClassName',
-            label: 'List div CSS 类名'
-          }),
-          getSchemaTpl('className', {
-            name: 'headerClassName',
-            label: '头部 CSS 类名'
-          }),
-          getSchemaTpl('className', {
-            name: 'footerClassName',
-            label: '底部 CSS 类名'
-          })
-        ]
-      },
-      {
-        title: '显隐',
-        body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
-      }
-    ]);
-  };
-
-  filterProps(props: any) {
-    if (props.isSlot) {
-      props.value = [props.data];
-      return props;
-    }
-
-    const data = {
-      ...props.defaultData,
-      ...props.data
-    };
-    let 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 = this.buildMockData();
-      props.value = repeatArray(mockedData, 1).map((item, index) => ({
-        ...item,
-        id: index + 1
-      }));
-    }
-
-    const {$schema, ...rest} = props;
-
-    return {
-      ...JSONPipeOut(rest),
-      $schema
-    };
-  }
-
-  buildMockData() {
-    return {
-      id: 666,
-      title: '假数据',
-      description: '假数据',
-      a: '假数据',
-      b: '假数据'
-    };
-  }
-
-  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: {
-          ...value.listItem
-        },
-        slot: {
-          type: 'list',
-          listItem: '$$'
-        },
-        onChange: newValue => {
-          newValue = {...value, listItem: newValue};
-          manager.panelChangeValue(newValue, diff(value, newValue));
-        },
-        data: {
-          // TODO  默认数据不对
-          items: [this.buildMockData()]
-        }
-      });
-  }
-
-  buildEditorToolbar(
-    {id, info, schema}: BaseEventContext,
-    toolbars: Array<BasicToolbarItem>
-  ) {
-    if (
-      info.renderer.name === 'list' ||
-      (info.renderer.name === 'crud' && schema.mode === 'list')
-    ) {
-      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 === 'list' ||
-      (info.renderer.name === 'crud' && schema.mode === 'list')
-    ) {
-      menus.push('|', {
-        label: '配置成员详情',
-        onSelect: this.editDetail.bind(this, id)
-      });
-    }
-  }
-
-  // 为了能够自动注入数据。
-  getRendererInfo(
-    context: RendererInfoResolveEventContext
-  ): BasicRendererInfo | void {
-    const plugin: PluginInterface = this;
-    const {renderer, schema} = context;
-    if (
-      !schema.$$id &&
-      schema.$$editor?.renderer.name === 'crud' &&
-      renderer.name === 'list'
-    ) {
-      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(ListPlugin);

package/src/plugin/ListItem.tsx

@@ -1,229 +0,0 @@
-import React from 'react';
-import {registerEditorPlugin} from '../manager';
-import {
-  BaseEventContext,
-  BasePlugin,
-  BasicRendererInfo,
-  InsertEventContext,
-  PluginEvent,
-  RegionConfig,
-  RendererInfo,
-  RendererInfoResolveEventContext,
-  VRendererConfig
-} from '../plugin';
-import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
-import {VRenderer} from '../component/VRenderer';
-
-export class ListItemPlugin extends BasePlugin {
-  // 关联渲染器名字
-  rendererName = 'list-item';
-  isBaseComponent = true;
-  $schema = '/schemas/ListItemSchema.json';
-
-  regions: Array<RegionConfig> = [
-    {
-      key: 'body',
-      label: '内容区',
-      renderMethod: 'renderBody',
-      preferTag: '展示'
-    },
-    {
-      key: 'actions',
-      label: '按钮集合',
-      preferTag: '按钮',
-      renderMethod: 'renderRight',
-      insertPosition: 'inner'
-    }
-  ];
-
-  panelTitle = '列表项';
-  panelBody = getSchemaTpl('tabs', [
-    {
-      title: '基本',
-      body: [
-        // {
-        //   children: (
-        //     <Button
-        //       size="sm"
-        //       className="m-b-sm"
-        //       level="info"
-        //       block
-        //       onClick={() => {
-        //         this.pickChild('actions', 'actions', undefined, ['button']);
-        //       }}
-        //     >
-        //       新增按钮
-        //     </Button>
-        //   )
-        // },
-        // {
-        //   children: (
-        //     <div>
-        //       <Button
-        //         level="primary"
-        //         size="sm"
-        //         block
-        //         onClick={this.handleAdd}
-        //       >
-        //         新增内容
-        //       </Button>
-        //     </div>
-        //   )
-        // },
-        // {
-        //   type: 'divider'
-        // },
-        {
-          name: 'title',
-          type: 'input-text',
-          label: '标题',
-          descrition: '支持模板语法如： ${xxx}'
-        },
-        {
-          name: 'subTitle',
-          type: 'input-text',
-          label: '副标题',
-          descrition: '支持模板语法如： ${xxx}'
-        },
-        {
-          name: 'avatar',
-          type: 'input-text',
-          label: '图片地址',
-          descrition: '支持模板语法如： ${xxx}'
-        },
-        {
-          name: 'desc',
-          type: 'textarea',
-          label: '描述',
-          descrition: '支持模板语法如： ${xxx}'
-        }
-      ]
-    },
-    {
-      title: '外观',
-      body: [
-        getSchemaTpl('className', {
-          name: 'avatarClassName',
-          label: '图片 CSS 类名',
-          pipeIn: defaultValue('thumb-sm avatar m-r')
-        }),
-        getSchemaTpl('className', {
-          name: 'titleClassName',
-          label: '标题 CSS 类名'
-        })
-      ]
-    }
-  ]);
-
-  getRendererInfo({
-    renderer,
-    schema
-  }: RendererInfoResolveEventContext): BasicRendererInfo | void {
-    if (schema.$$id && this.rendererName === renderer.name) {
-      // 复制部分信息出去
-      return {
-        name: this.panelTitle,
-        regions: this.regions,
-        // patchContainers: plugin.patchContainers,
-        // // wrapper: plugin.wrapper,
-        // vRendererConfig: plugin.vRendererConfig,
-        // wrapperProps: plugin.wrapperProps,
-        // wrapperResolve: plugin.wrapperResolve,
-        // filterProps: plugin.filterProps,
-        $schema: this.$schema
-        // renderRenderer: plugin.renderRenderer
-      };
-    }
-  }
-
-  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 ListItemPlugin;
-      const id = field.$$id;
-      return (
-        <VRenderer
-          plugin={info.plugin}
-          renderer={info.renderer}
-          multifactor
-          key={id}
-          $schema="/schemas/ListBodyField.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>
-          )
-        }*/
-      ];
-    }
-  };
-
-  /*exchangeRenderer(id: string) {
-    this.manager.showReplacePanel(id, '展示');
-  }*/
-
-  // 自动插入 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(ListItemPlugin);

package/src/plugin/Log.tsx

@@ -1,52 +0,0 @@
-/**
- * @file 日志组件
- */
-import {registerEditorPlugin} from '../manager';
-import {BaseEventContext, BasePlugin} from '../plugin';
-import {getSchemaTpl} from '../component/schemaTpl';
-
-export class LogPlugin extends BasePlugin {
-  // 关联渲染器名字
-  rendererName = 'log';
-  $schema = '/schemas/LogSchema.json';
-
-  // 组件名称
-  name = '日志';
-  isBaseComponent = true;
-  icon = 'fa fa-file-text-o';
-  description = '用来实时显示日志';
-  docLink = '/amis/zh-CN/components/log';
-  tags = ['展示'];
-  previewSchema = {
-    type: 'log',
-    height: 120
-  };
-  scaffold: any = {
-    type: 'log'
-  };
-
-  panelTitle = '日志';
-  panelBodyCreator = (context: BaseEventContext) => {
-    return getSchemaTpl('tabs', [
-      {
-        title: '常规',
-        body: [
-          getSchemaTpl('api', {
-            label: '日志数据源',
-            name: 'source'
-          })
-        ]
-      },
-      {
-        title: '外观',
-        body: [getSchemaTpl('className')]
-      },
-      {
-        title: '显隐',
-        body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
-      }
-    ]);
-  };
-}
-
-registerEditorPlugin(LogPlugin);