amis-editor 5.2.0-beta.1 → 5.2.0

package/src/plugin/Link.tsx

@@ -0,0 +1,87 @@
+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: '不填写时，自动使用目标地址值'
+          },
+
+          getSchemaTpl('switch', {
+            name: 'blank',
+            label: '是否新窗口打开'
+          }),
+
+          getSchemaTpl('switch', {
+            name: 'disabled',
+            label: '是否禁用'
+          }),
+
+          {
+            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

@@ -0,0 +1,274 @@
+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: [
+          getSchemaTpl('switch', {
+            name: 'showHeader',
+            label: '是否显示头部',
+            pipeIn: defaultValue(true)
+          }),
+
+          getSchemaTpl('switch', {
+            name: 'showFooter',
+            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

@@ -0,0 +1,230 @@
+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
+          type={info.type}
+          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

@@ -0,0 +1,52 @@
+/**
+ * @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);