amis-editor 5.2.0-beta.1 → 5.2.0

package/src/plugin/Alert.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import {registerEditorPlugin} from '../manager';
+import {BaseEventContext, BasePlugin} from '../plugin';
+import {getSchemaTpl} from '../component/schemaTpl';
+import {SchemaObject} from 'amis/lib/Schema';
+
+export class AlertPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'alert';
+  $schema = '/schemas/AlertSchema.json';
+
+  // 组件名称
+  name = '提示';
+  isBaseComponent = true;
+  description =
+    '用来做文字特殊提示，分为四类：提示类、成功类、警告类和危险类。可结合 <code>visibleOn</code> 用来做错误信息提示。';
+  docLink = '/amis/zh-CN/components/alert';
+  icon = 'fa fa-exclamation-circle';
+  scaffold: SchemaObject = {
+    type: 'alert',
+    body: {
+      type: 'tpl',
+      tpl: '提示内容',
+      inline: false
+    },
+    level: 'info'
+  };
+  previewSchema: any = {
+    ...this.scaffold,
+    className: 'text-left',
+    showCloseButton: true
+  };
+
+  // 普通容器类渲染器配置
+  regions = [{key: 'body', label: '内容区', placeholder: '提示内容'}];
+
+  notRenderFormZone = true;
+  panelTitle = '提示';
+  panelJustify = true;
+  panelBodyCreator = (context: BaseEventContext) => {
+    return getSchemaTpl('tabs', [
+      {
+        title: '属性',
+        body: getSchemaTpl('collapseGroup', [
+          {
+            title: '基本',
+            body: [
+              {
+                label: '类型',
+                name: 'level',
+                type: 'select',
+                options: [
+                  {
+                    label: '提示',
+                    value: 'info'
+                  },
+                  {
+                    label: '成功',
+                    value: 'success'
+                  },
+                  {
+                    label: '警告',
+                    value: 'warning'
+                  },
+                  {
+                    label: '严重',
+                    value: 'danger'
+                  }
+                ]
+              },
+              getSchemaTpl('label', {
+                name: 'title'
+              }),
+              getSchemaTpl('switch', {
+                label: '可关闭',
+                name: 'showCloseButton'
+              }),
+              {
+                type: 'ae-Switch-More',
+                mode: 'normal',
+                name: 'showIcon',
+                label: '图标',
+                hiddenOnDefault: !context.schema.icon,
+                formType: 'extend',
+                form: {
+                  body: [
+                    getSchemaTpl('icon', {
+                      label: '自定义图标'
+                    })
+                  ]
+                }
+              }
+            ]
+          },
+          getSchemaTpl('status')
+        ])
+      },
+      {
+        title: '外观',
+        body: getSchemaTpl('collapseGroup', [
+          getSchemaTpl('style:classNames', {isFormItem: false})
+        ])
+      }
+    ]);
+  };
+}
+
+registerEditorPlugin(AlertPlugin);

package/src/plugin/AnchorNav.tsx

@@ -0,0 +1,234 @@
+import React from 'react';
+import {registerEditorPlugin} from '../manager';
+import {getSchemaTpl} from '../component/schemaTpl';
+import {BasePlugin, RendererInfo, VRendererConfig} from '../plugin';
+import {VRenderer} from '../component/VRenderer';
+import {mapReactElement} from '../component/factory';
+import findIndex from 'lodash/findIndex';
+import {RegionWrapper as Region} from '../component/RegionWrapper';
+import {AnchorNavSection} from 'amis-ui';
+
+export class AnchorNavPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'anchor-nav';
+  $schema = '/schemas/AnchorNavSchema.json';
+
+  // 组件名称
+  name = '锚点导航';
+  isBaseComponent = true;
+  description =
+    '锚点导航，在多行内容展示时，可以将内容用锚点导航分组的形式展示，点击导航菜单可以定位到对应内容区域。';
+  docLink = '/amis/zh-CN/components/anchor-nav';
+  tags = ['容器'];
+  icon = 'fa fa-link';
+  scaffold = {
+    type: 'anchor-nav',
+    links: [
+      {
+        title: '用户信息',
+        body: '用户信息'
+      },
+      {
+        title: '系统配置信息',
+        body: [
+          {
+            type: 'form',
+            body: [
+              {
+                type: 'fieldSet',
+                title: '系统配置信息',
+                body: [
+                  {
+                    type: 'input-email',
+                    name: 'email',
+                    placeholder: '请输入邮箱地址',
+                    label: '邮箱'
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        title: '权限管理',
+        body: [
+          {
+            type: 'form',
+            body: [
+              {
+                type: 'fieldSet',
+                title: '权限管理',
+                body: [
+                  {
+                    type: 'input-email',
+                    name: 'email',
+                    placeholder: '请输入邮箱地址',
+                    label: '邮箱'
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        title: '角色管理',
+        body: '角色管理'
+      },
+      {
+        title: '网络配置信息',
+        body: '网络配置信息'
+      }
+    ]
+  };
+  previewSchema = {
+    ...this.scaffold
+  };
+
+  panelTitle = '锚点导航';
+  panelBody = [
+    getSchemaTpl('tabs', [
+      {
+        title: '常规',
+        body: [
+          {
+            name: 'links',
+            type: 'combo',
+            label: '锚点管理',
+            multiple: true,
+            draggable: true,
+            minLength: 1,
+            items: [{type: 'input-text', name: 'title', required: true}],
+            scaffold: {
+              title: '锚点内容',
+              body: {
+                type: 'tpl',
+                tpl: '内容',
+                inline: false
+              }
+            },
+            addButtonText: '新增锚点',
+            draggableTip: ''
+          }
+        ]
+      },
+      {
+        title: '外观',
+        body: [
+          getSchemaTpl('className'),
+          getSchemaTpl('className', {
+            name: 'linkClassName',
+            label: '导航 CSS 类名'
+          }),
+          getSchemaTpl('className', {
+            name: 'sectionClassName',
+            label: '区域内容 CSS 类名'
+          })
+        ]
+      }
+    ])
+  ];
+
+  patchContainers = ['anchor-nav.body'];
+
+  vRendererConfig: VRendererConfig = {
+    regions: {
+      body: {
+        key: 'body',
+        label: '内容区'
+      }
+    },
+    panelTitle: '内容区域',
+    panelBody: [
+      getSchemaTpl('fieldSet', {
+        title: '常规',
+        body: [
+          {
+            name: 'title',
+            label: '标题',
+            type: 'input-text',
+            required: true
+          }
+        ]
+      }),
+      getSchemaTpl('fieldSet', {
+        title: '外观',
+        body: [getSchemaTpl('className')]
+      })
+    ]
+  };
+
+  wrapperProps = {
+    unmountOnExit: true,
+    mountOnEnter: true
+  };
+
+  sectionWrapperResolve = (dom: HTMLElement) => dom.parentElement!;
+  overrides = {
+    render(this: any) {
+      const dom = this.super();
+
+      if (!this.renderSection && this.props.$$editor && dom) {
+        const links = this.props.links;
+        return mapReactElement(dom, item => {
+          if (item.type === AnchorNavSection && item.props.$$id) {
+            const id = item.props.$$id;
+            const index = findIndex(links, (link: any) => link.$$id === id);
+            const info: RendererInfo = this.props.$$editor;
+            const plugin: AnchorNavPlugin = info.plugin as any;
+
+            if (~index) {
+              const region = plugin.vRendererConfig?.regions?.body;
+
+              if (!region) {
+                return item;
+              }
+
+              return React.cloneElement(item, {
+                children: (
+                  <VRenderer
+                    key={id}
+                    type={info.type}
+                    plugin={info.plugin}
+                    renderer={info.renderer}
+                    $schema="/schemas/SectionSchema.json"
+                    hostId={info.id}
+                    memberIndex={index}
+                    name={`${item.props.title || `锚点内容${index + 1}`}`}
+                    id={id}
+                    draggable={false}
+                    wrapperResolve={plugin.sectionWrapperResolve}
+                    schemaPath={`${info.schemaPath}/anchor-nav/${index}`}
+                    path={`${this.props.$path}/${index}`} // 好像没啥用
+                    data={this.props.data} // 好像没啥用
+                  >
+                    <Region
+                      key={region.key}
+                      preferTag={region.preferTag}
+                      name={region.key}
+                      label={region.label}
+                      regionConfig={region}
+                      placeholder={region.placeholder}
+                      editorStore={plugin.manager.store}
+                      manager={plugin.manager}
+                      children={item.props.children}
+                      wrapperResolve={region.wrapperResolve}
+                      rendererName={info.renderer.name}
+                    />
+                  </VRenderer>
+                )
+              });
+            }
+          }
+
+          return item;
+        });
+      }
+
+      return dom;
+    }
+  };
+}
+
+registerEditorPlugin(AnchorNavPlugin);

package/src/plugin/Audio.tsx

@@ -0,0 +1,148 @@
+import {registerEditorPlugin} from '../manager';
+import {BaseEventContext, BasePlugin} from '../plugin';
+import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
+
+export class AudioPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'audio';
+  $schema = '/schemas/AudioSchema.json';
+
+  // 组件名称
+  name = '音频';
+  isBaseComponent = true;
+  description = '音频控件，可以用来播放各种音频文件。';
+  tags = ['功能'];
+  icon = 'fa fa-music';
+  scaffold = {
+    type: 'audio',
+    autoPlay: false,
+    src: ''
+  };
+  previewSchema = {
+    ...this.scaffold
+  };
+
+  panelTitle = '音频';
+  panelBodyCreator = (context: BaseEventContext) => {
+    const isUnderField = /\/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: 'src',
+              type: 'input-text',
+              label: '音频地址',
+              description: '支持获取变量如：<code>\\${audioSrc}</code>'
+            },
+            {
+              type: 'select',
+              name: 'rates',
+              label: '音频倍速',
+              description: '加速范围在0.1到16之间',
+              multiple: true,
+              pipeIn: (value: any) =>
+                Array.isArray(value) ? value.join(',') : [],
+              pipeOut: (value: any) => {
+                if (value && value.length) {
+                  let rates = value.split(',');
+                  rates = rates
+                    .filter(
+                      (x: string | number) =>
+                        Number(x) && Number(x) > 0 && Number(x) <= 16
+                    )
+                    .map((x: string | number) => Number(Number(x).toFixed(1)));
+                  return Array.from(new Set(rates));
+                } else {
+                  return [];
+                }
+              },
+              options: ['0.5', '1', '1.5', '2', '2.5', '3', '3.5', '4']
+            },
+            {
+              name: 'controls',
+              type: 'select',
+              label: '内部控件',
+              multiple: true,
+              extractValue: true,
+              joinValues: false,
+              options: [
+                {
+                  label: '倍速',
+                  value: 'rates'
+                },
+                {
+                  label: '播放',
+                  value: 'play'
+                },
+                {
+                  label: '时间',
+                  value: 'time'
+                },
+                {
+                  label: '进度',
+                  value: 'process'
+                },
+                {
+                  label: '音量',
+                  value: 'volume'
+                }
+              ],
+              pipeIn: defaultValue([
+                'rates',
+                'play',
+                'time',
+                'process',
+                'volume'
+              ]),
+              labelRemark: {
+                trigger: 'click',
+                className: 'm-l-xs',
+                rootClose: true,
+                content: '选择倍速后，还需要在常规选择栏中配置倍速',
+                placement: 'left'
+              }
+            },
+
+            getSchemaTpl('switch', {
+              name: 'autoPlay',
+              label: '自动播放'
+            }),
+
+            getSchemaTpl('switch', {
+              name: 'loop',
+              label: '循环播放'
+            })
+          ]
+        },
+        {
+          title: '外观',
+          body: [
+            getSchemaTpl('className'),
+
+            getSchemaTpl('switch', {
+              name: 'inline',
+              label: '内联模式',
+              pipeIn: defaultValue(true)
+            })
+          ]
+        },
+        {
+          title: '显隐',
+          body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
+        }
+      ])
+    ];
+  };
+}
+
+registerEditorPlugin(AudioPlugin);

package/src/plugin/Avatar.tsx

@@ -0,0 +1,78 @@
+/**
+ * @file 头像
+ */
+import {registerEditorPlugin} from '../manager';
+import {BaseEventContext, BasePlugin} from '../plugin';
+import {getSchemaTpl} from '../component/schemaTpl';
+
+export class AvatarPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'avatar';
+  $schema = '/schemas/AvatarSchema.json';
+
+  // 组件名称
+  name = '头像';
+  isBaseComponent = true;
+  icon = 'fa fa-user';
+  description = '用户头像';
+  docLink = '/amis/zh-CN/components/avatar';
+  tags = ['其他'];
+  scaffold = {
+    type: 'avatar',
+    icon: 'fa fa-user'
+  };
+  previewSchema: any = {
+    ...this.scaffold
+  };
+
+  panelTitle = '面包屑';
+  panelBody = [
+    getSchemaTpl('tabs', [
+      {
+        title: '常规',
+        body: [
+          {
+            type: 'input-text',
+            label: '文字',
+            name: 'text'
+          },
+          {
+            type: 'select',
+            label: '图片拉伸方式',
+            options: ['cover', 'fill', 'contain', 'none', 'scale-down']
+          },
+          {
+            type: 'radios',
+            name: 'shape',
+            inline: true,
+            value: 'circle',
+            label: '形状',
+            options: ['circle', 'square']
+          },
+          {
+            name: 'icon',
+            label: '图标',
+            type: 'icon-picker',
+            className: 'fix-icon-picker-overflow'
+          },
+          {
+            name: 'size',
+            label: '大小',
+            value: 40,
+            type: 'input-number'
+          }
+        ]
+      },
+      {
+        title: '外观',
+        body: [getSchemaTpl('className'), getSchemaTpl('style')]
+      },
+      {
+        title: '显隐',
+        body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
+      }
+    ])
+  ];
+}
+
+registerEditorPlugin(AvatarPlugin);

package/src/plugin/Breadcrumb.tsx

@@ -0,0 +1,108 @@
+/**
+ * @file 面包屑
+ */
+import {registerEditorPlugin} from '../manager';
+import {BaseEventContext, BasePlugin} from '../plugin';
+import {getSchemaTpl} from '../component/schemaTpl';
+
+export class BreadcrumbPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'breadcrumb';
+  $schema = '/schemas/BreadcrumbSchema.json';
+  disabledRendererPlugin = true;
+
+  // 组件名称
+  name = '面包屑';
+  isBaseComponent = true;
+  icon = 'fa fa-list';
+  description = '面包屑导航';
+  docLink = '/amis/zh-CN/components/breadcrumb';
+  tags = ['其他'];
+  scaffold = {
+    type: 'breadcrumb',
+    items: [
+      {
+        label: '首页',
+        href: '/',
+        icon: 'fa fa-home'
+      },
+      {
+        label: '上级页面'
+      },
+      {
+        label: '<b>当前页面</b>'
+      }
+    ]
+  };
+  previewSchema: any = {
+    ...this.scaffold
+  };
+
+  panelTitle = '面包屑';
+  panelBody = [
+    getSchemaTpl('tabs', [
+      {
+        title: '常规',
+        body: [
+          {
+            label: '分隔符',
+            type: 'input-text',
+            name: 'separator'
+          },
+          getSchemaTpl('api', {
+            label: '动态数据',
+            name: 'source'
+          }),
+          {
+            label: '面包屑',
+            name: 'items',
+            type: 'combo',
+            multiple: true,
+            multiLine: true,
+            draggable: true,
+            addButtonText: '新增',
+            items: [
+              {
+                type: 'input-text',
+                placeholder: '文本',
+                name: 'label'
+              },
+              {
+                type: 'input-text',
+                name: 'href',
+                placeholder: '链接'
+              },
+              {
+                name: 'icon',
+                label: '图标',
+                type: 'icon-picker',
+                className: 'fix-icon-picker-overflow',
+              }
+            ]
+          }
+        ]
+      },
+      {
+        title: '外观',
+        body: [
+          getSchemaTpl('className'),
+          getSchemaTpl('className', {
+            name: 'itemClassName',
+            label: '面包屑的 CSS 类名'
+          }),
+          ,
+          getSchemaTpl('className', {
+            name: 'separatorClassName',
+            label: '分隔符的 CSS 类名'
+          })
+        ]
+      },
+      {
+        title: '显隐',
+        body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
+      }
+    ])
+  ];
+}
+
+registerEditorPlugin(BreadcrumbPlugin);