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

package/src/plugin/Collapse.tsx

@@ -1,136 +0,0 @@
-import {registerEditorPlugin} from '../manager';
-import {BasePlugin, RegionConfig, BaseEventContext} from '../plugin';
-import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
-
-export class CollapsePlugin extends BasePlugin {
-  // 关联渲染器名字
-  rendererName = 'collapse';
-  $schema = '/schemas/CollapseSchema.json';
-
-  // 组件名称
-  name = '折叠器';
-  isBaseComponent = true;
-  description = '折叠器，可以将内容区展开或隐藏，保持页面的整洁';
-  docLink = '/amis/zh-CN/components/collapse';
-  tags = ['展示'];
-  icon = 'fa fa-window-minimize';
-  scaffold = {
-    type: 'collapse',
-    header: '标题',
-    body: [
-      {
-        type: 'tpl',
-        tpl: '内容',
-        inline: false
-      }
-    ]
-  };
-  previewSchema = {
-    ...this.scaffold
-  };
-
-  panelTitle = '折叠器';
-  panelBodyCreator = (context: BaseEventContext) => {
-    return getSchemaTpl('tabs', [
-      {
-        title: '属性',
-        body: [
-          {
-            name: 'header',
-            label: '标题',
-            type: 'input-text',
-            pipeIn: defaultValue(
-              context?.schema?.title || context?.schema?.header || ''
-            ),
-            onChange: (value: any, oldValue: any, model: any, form: any) => {
-              // 转换一下旧版本的title字段
-              form.setValueByName('header', value);
-              form.setValueByName('title', undefined);
-            }
-          },
-          {
-            name: 'collapseHeader',
-            label: '展开标题',
-            type: 'input-text',
-            description: '折叠器处于展开状态时的标题'
-          },
-          {
-            name: 'headerPosition',
-            label: '标题展示位置',
-            type: 'button-group-select',
-            size: 'sm',
-            pipeIn: defaultValue('top'),
-            options: [
-              {
-                label: '顶部',
-                value: 'top',
-                icon: 'fa fa-arrow-up'
-              },
-              {
-                label: '底部',
-                value: 'bottom',
-                icon: 'fa fa-arrow-down'
-              }
-            ]
-          },
-          {
-            name: 'key',
-            label: '标识符',
-            type: 'input-text',
-            description: '折叠器key，主要用于设置默认展开状态'
-          },
-          {
-            name: 'showArrow',
-            label: '显示箭头',
-            mode: 'row',
-            inputClassName: 'inline-flex justify-between flex-row-reverse',
-            type: 'switch',
-            pipeIn: defaultValue(true)
-          },
-          {
-            name: 'collapsable',
-            type: 'switch',
-            mode: 'row',
-            inputClassName: 'inline-flex justify-between flex-row-reverse',
-            label: '可折叠',
-            pipeIn: defaultValue(true)
-          },
-          {
-            name: 'collapsed',
-            type: 'switch',
-            mode: 'row',
-            inputClassName: 'inline-flex justify-between flex-row-reverse',
-            label: '默认折叠'
-          }
-        ]
-      },
-      {
-        title: '外观',
-        body: [
-          getSchemaTpl('className'),
-          getSchemaTpl('className', {
-            name: 'headingClassName',
-            label: '标题 CSS 类名'
-          }),
-          getSchemaTpl('className', {
-            name: 'bodyClassName',
-            label: '内容 CSS 类名'
-          })
-        ]
-      },
-      {
-        title: '状态',
-        body: [getSchemaTpl('disabled'), getSchemaTpl('visible')]
-      }
-    ]);
-  };
-
-  regions: Array<RegionConfig> = [
-    {
-      key: 'body',
-      label: '内容区'
-    }
-  ];
-}
-
-registerEditorPlugin(CollapsePlugin);

package/src/plugin/CollapseGroup.tsx

@@ -1,167 +0,0 @@
-import {registerEditorPlugin} from '../manager';
-import {
-  BasePlugin,
-  RegionConfig,
-  RendererInfo,
-  BaseEventContext
-} from '../plugin';
-import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
-
-import type {CollapseSchema} from 'amis/lib/renderers/Collapse';
-
-export class CollapseGroupPlugin extends BasePlugin {
-  // 关联渲染器名字
-  rendererName = 'collapse-group';
-  $schema = '/schemas/CollapseGroupSchema.json';
-
-  // 组件名称
-  name = '折叠面板';
-  isBaseComponent = true;
-  description =
-    '折叠面板，当信息量较大且分类较多时，可使用折叠面板进行分类收纳。';
-  tags = ['展示', '容器'];
-  icon = 'fa fa-align-justify';
-  scaffold = {
-    type: 'collapse-group',
-    activeKey: ['1'],
-    body: [
-      {
-        type: 'collapse',
-        key: '1',
-        header: '标题1',
-        body: [
-          {
-            type: 'tpl',
-            tpl: '这里是内容1',
-            inline: false
-          }
-        ]
-      },
-      {
-        type: 'collapse',
-        key: '2',
-        header: '标题2',
-        body: [
-          {
-            type: 'tpl',
-            tpl: '这里是内容1',
-            inline: false
-          }
-        ]
-      }
-    ]
-  };
-  previewSchema = {
-    ...this.scaffold
-  };
-
-  panelTitle = '折叠面板';
-  panelBodyCreator = (context: BaseEventContext) => {
-    const collapseChildren: CollapseSchema[] = Array.isArray(
-      context?.schema?.body
-    )
-      ? context?.schema?.body.filter(
-          (item: CollapseSchema) => item.type === 'collapse' && item.key != null
-        )
-      : [];
-
-    return [
-      getSchemaTpl('tabs', [
-        {
-          title: '属性',
-          body: [
-            {
-              name: 'activeKey',
-              label: '默认展开面板',
-              type: 'input-tag',
-              clearable: true,
-              joinValues: false,
-              extractValue: true,
-              options: collapseChildren.map((item: CollapseSchema) => item.key)
-            },
-            {
-              name: 'expandIconPosition',
-              label: '图标位置',
-              type: 'button-group-select',
-              pipeIn: defaultValue('left'),
-              options: [
-                {
-                  label: '左边',
-                  value: 'left',
-                  icon: 'fa fa-align-left'
-                },
-                {
-                  label: '右边',
-                  value: 'right',
-                  icon: 'fa fa-align-right'
-                }
-              ]
-            },
-            {
-              name: 'accordion',
-              label: '手风琴模式',
-              mode: 'row',
-              inputClassName: 'inline-flex justify-between flex-row-reverse',
-              type: 'switch',
-              description: '手风琴模式，只允许单个面板展开',
-              pipeIn: defaultValue(false)
-            },
-            {
-              name: 'body',
-              type: 'combo',
-              label: '面板管理',
-              multiple: true,
-              addable: true,
-              addButtonText: '新增折叠器',
-              minLength: 1,
-              draggable: true,
-              draggableTip: '',
-              placeholder: '请添加折叠器',
-              items: [
-                {
-                  name: 'header',
-                  placeholder: '标题',
-                  type: 'input-text'
-                },
-                {
-                  name: 'key',
-                  placeholder: '标识符',
-                  type: 'input-text',
-                  size: 'xs',
-                  unique: true
-                }
-              ],
-              scaffold: {
-                type: 'collapse',
-                header: '标题',
-                body: [
-                  {
-                    type: 'tpl',
-                    tpl: '内容',
-                    inline: false
-                  }
-                ],
-                key: ''
-              }
-            }
-          ]
-        },
-        {
-          title: '外观',
-          body: [getSchemaTpl('className')]
-        }
-      ])
-    ];
-  };
-
-  regions: Array<RegionConfig> = [
-    {
-      key: 'body',
-      label: '内容区',
-      renderMethod: 'render',
-      insertPosition: 'inner'
-    }
-  ];
-}
-
-registerEditorPlugin(CollapseGroupPlugin);

package/src/plugin/Container.tsx

@@ -1,40 +0,0 @@
-import {registerEditorPlugin} from '../manager';
-import {
-  BaseEventContext,
-  BasePlugin,
-  RegionConfig} from '../plugin';
-import {getSchemaTpl} from '../component/schemaTpl';
-
-export class ContainerPlugin extends BasePlugin {
-  // 关联渲染器名字
-  rendererName = 'container';
-  $schema = '/schemas/ContainerSchema.json';
-
-  // 组件名称
-  name = '容器';
-  isBaseComponent = true;
-  description = '一个简单的容器，可以将多个渲染器放置在一起。';
-  tags = ['容器'];
-  icon = 'fa fa-square-o';
-  scaffold = {
-    type: 'container',
-    body: '内容'
-  };
-  previewSchema = {
-    ...this.scaffold
-  };
-
-  regions: Array<RegionConfig> = [
-    {
-      key: 'body',
-      label: '内容区'
-    }
-  ];
-
-  panelTitle = '容器';
-  panelBodyCreator = (context: BaseEventContext) => {
-    return [getSchemaTpl('className'), getSchemaTpl('style')];
-  };
-}
-
-registerEditorPlugin(ContainerPlugin);

package/src/plugin/Custom.tsx

@@ -1,128 +0,0 @@
-/**
- * @file 自定义代码
- */
-
-import React from 'react';
-import {registerEditorPlugin} from '../manager';
-import {
-  BasePlugin,
-  BasicSubRenderInfo,
-  BaseEventContext,
-  RendererEventContext,
-  SubRendererInfo,
-  BasicRendererInfo,
-  RendererInfoResolveEventContext,
-  PluginInterface
-} from '../plugin';
-import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
-import {isArray} from 'lodash';
-
-export class CustomPlugin extends BasePlugin {
-  // 关联渲染器名字
-  rendererName = 'custom';
-  $schema = '/schemas/CustomSchema.json';
-
-  // 组件名称
-  name = '自定义代码';
-  isBaseComponent = true;
-  description = '通过内嵌代码来实现功能';
-  tags = ['功能'];
-  icon = 'fa fa-gears';
-  docLink = '/amis/zh-CN/components/custom';
-  scaffold = {
-    type: 'custom',
-    html: '<div><h2>hello, world!</h2></div>',
-    onMount: `
-      const button = document.createElement('button');
-      button.innerText = '点击修改姓名';
-      button.onclick = event => {
-        event.preventDefault();
-      };
-      dom.appendChild(button);`
-  };
-  previewSchema = {
-    ...this.scaffold
-  };
-
-  panelTitle = '自定义代码';
-  panelBody = [
-    getSchemaTpl('fieldSet', {
-      title: 'HTML 内容',
-      body: [
-        {
-          label: 'HTML 内容',
-          name: 'html',
-          type: 'editor',
-          allowFullscreen: true
-        }
-      ]
-    }),
-    getSchemaTpl('fieldSet', {
-      title: 'onMount',
-      body: [
-        {
-          name: 'onMount',
-          type: 'editor',
-          allowFullscreen: true,
-          size: 'xxl',
-          label: 'onMount 代码',
-          options: {
-            lineNumbers: 'off',
-            glyphMargin: false,
-            lineDecorationsWidth: 0,
-            lineNumbersMinChars: 0
-          }
-        }
-      ]
-    }),
-    getSchemaTpl('fieldSet', {
-      title: 'onUpdate',
-      body: [
-        {
-          name: 'onUpdate',
-          type: 'editor',
-          allowFullscreen: true,
-          size: 'xxl',
-          label: 'onUpdate 代码'
-        }
-      ]
-    }),
-    getSchemaTpl('fieldSet', {
-      title: 'onUnmount',
-      body: [
-        {
-          name: 'onUnmount',
-          type: 'editor',
-          allowFullscreen: true,
-          size: 'xxl',
-          label: 'onUnmount 代码'
-        }
-      ]
-    })
-  ];
-
-  buildSubRenderers(
-    context: RendererEventContext,
-    renderers: Array<SubRendererInfo>
-  ): BasicSubRenderInfo | Array<BasicSubRenderInfo> | void {
-    const info = super.buildSubRenderers.apply(this, arguments);
-    // 只有 form 下才调 onChange
-    // if (
-    //   context.info.renderer.name === 'form' ||
-    //   context.node.childRegions.some(i => i.region === 'body')
-    // ) {
-    (info as BasicSubRenderInfo).scaffold.onMount = `
-        const button = document.createElement('button');
-        button.innerText = '点击修改姓名ddd';
-        button.onclick = event => {
-          onChange('new name');
-          event.preventDefault();
-        };
-        dom.appendChild(button);`;
-    // }
-
-    return info;
-  }
-}
-
-registerEditorPlugin(CustomPlugin);

package/src/plugin/CustomRegion.tsx

@@ -1,156 +0,0 @@
-/**
- * @file 自定义代码
- */
-
-import React from 'react';
-import {registerEditorPlugin} from '../manager';
-import {
-  BasePlugin,
-  BasicRendererInfo,
-  RendererInfoResolveEventContext,
-  PluginInterface,
-  RegionConfig,
-} from '../plugin';
-import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
-import {isArray} from 'lodash';
-
-export class CustomPlugin extends BasePlugin {
-  // 关联渲染器名字
-  rendererName = 'custom';
-  $schema = '/schemas/CustomSchema.json';
-
-  // 组件名称
-  name = '自定义容器';
-  isBaseComponent = true;
-  disabledRendererPlugin = true; // 待完善，暂时隐藏
-
-  description = '通过自定义代码来实现容器组件';
-  docLink = '/amis/zh-CN/components/custom';
-  tags = ['功能', '容器'];
-  icon = 'fa fa-gears';
-  scaffold = {
-    type: 'custom',
-    html: '<div>\n<h2>hello, world!</h2>\n<div id="customBox">自定义容器区域</div>\n</div>',
-    onMount: `this.renderChild('body', props.body, document.getElementById('customBox'));`,
-    body: [
-      {
-        type: 'tpl',
-        tpl: '<p>自定义容器区域</p>'
-      }
-    ]
-  };
-
-  previewSchema = {
-    ...this.scaffold
-  };
-
-  regions: Array<RegionConfig> = [
-    {
-      key: 'body',
-      label: '内容区'
-    }
-  ];
-
-  panelTitle = '自定义代码';
-  panelBody = [
-    getSchemaTpl('fieldSet', {
-      title: 'HTML 内容',
-      body: [
-        {
-          label: 'HTML 内容',
-          name: 'html',
-          type: 'editor',
-          allowFullscreen: true
-        }
-      ]
-    }),
-    getSchemaTpl('fieldSet', {
-      title: 'onMount',
-      body: [
-        {
-          name: 'onMount',
-          type: 'editor',
-          allowFullscreen: true,
-          size: 'xxl',
-          label: 'onMount 代码',
-          options: {
-            lineNumbers: 'off',
-            glyphMargin: false,
-            lineDecorationsWidth: 0,
-            lineNumbersMinChars: 0
-          }
-        }
-      ]
-    }),
-    getSchemaTpl('fieldSet', {
-      title: 'onUpdate',
-      body: [
-        {
-          name: 'onUpdate',
-          type: 'editor',
-          allowFullscreen: true,
-          size: 'xxl',
-          label: 'onUpdate 代码'
-        }
-      ]
-    }),
-    getSchemaTpl('fieldSet', {
-      title: 'onUnmount',
-      body: [
-        {
-          name: 'onUnmount',
-          type: 'editor',
-          allowFullscreen: true,
-          size: 'xxl',
-          label: 'onUnmount 代码'
-        }
-      ]
-    })
-  ];
-
-  /**
-   * 备注: 根据当前custom组件的schema中是否有body元素来启动容器模式，用于实现custom组件实现自定义容器类型
-   */
-  getRendererInfo(
-    context: RendererInfoResolveEventContext
-  ): BasicRendererInfo | void {
-    const plugin: PluginInterface = this;
-    const {renderer, schema} = context;
-    if (
-      schema.$$id &&
-      plugin.name &&
-      plugin.rendererName &&
-      plugin.rendererName === renderer.name
-    ) {
-      let regions = plugin.regions;
-      if (!regions && schema && schema.body && isArray(schema.body)) {
-        regions = [
-          {
-            key: 'body',
-            label: '自定义容器区'
-          }
-        ];
-      }
-
-      return {
-        name: plugin.name,
-        regions: regions,
-        patchContainers: plugin.patchContainers,
-        // wrapper: plugin.wrapper,
-        vRendererConfig: plugin.vRendererConfig,
-        wrapperProps: plugin.wrapperProps,
-        wrapperResolve: plugin.wrapperResolve,
-        filterProps: plugin.filterProps,
-        $schema: plugin.$schema,
-        renderRenderer: plugin.renderRenderer,
-        multifactor: plugin.multifactor,
-        scaffoldForm: plugin.scaffoldForm,
-        disabledRendererPlugin: plugin.disabledRendererPlugin,
-        isBaseComponent: plugin.isBaseComponent,
-        rendererName: plugin.rendererName
-      };
-    }
-  }
-}
-
-registerEditorPlugin(CustomPlugin);

package/src/plugin/Date.tsx

@@ -1,74 +0,0 @@
-import {registerEditorPlugin} from '../manager';
-import {BaseEventContext, BasePlugin} from '../plugin';
-import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
-
-export class DatePlugin extends BasePlugin {
-  // 关联渲染器名字
-  rendererName = 'date';
-  $schema = '/schemas/DateSchema.json';
-
-  // 组件名称
-  name = '日期展示';
-  isBaseComponent = true;
-  description =
-    '主要用来关联字段名做日期展示，支持各种格式如：X（时间戳），YYYY-MM-DD HH:mm:ss。';
-  tags = ['展示'];
-  icon = 'fa fa-calendar';
-  scaffold = {
-    type: 'date',
-    value: Math.round(Date.now() / 1000)
-  };
-  previewSchema = {
-    ...this.scaffold,
-    format: 'YYYY-MM-DD',
-    value: Math.round(Date.now() / 1000)
-  };
-
-  panelTitle = '日期展示';
-  panelBodyCreator = (context: BaseEventContext) => {
-    return [
-      getSchemaTpl('tabs', [
-        {
-          title: '常规',
-          body: [
-            {
-              type: 'input-date',
-              name: 'value',
-              label: '日期数值'
-            },
-            {
-              type: 'input-text',
-              name: 'format',
-              label: '显示日期格式',
-              description: '请参考 moment 中的格式用法。',
-              pipeIn: defaultValue('YYYY-MM-DD')
-            },
-            {
-              type: 'input-text',
-              name: 'valueFormat',
-              label: '数据日期格式',
-              description: '请参考 moment 中的格式用法。',
-              pipeIn: defaultValue('X')
-            },
-            {
-              name: 'placeholder',
-              type: 'input-text',
-              pipeIn: defaultValue('-'),
-              label: '占位符'
-            }
-          ]
-        },
-        {
-          title: '外观',
-          body: [getSchemaTpl('className')]
-        },
-        {
-          title: '显隐',
-          body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
-        }
-      ])
-    ];
-  };
-}
-
-registerEditorPlugin(DatePlugin);