amis-editor 4.1.0-beta.4 → 4.2.0-beta.0

package/src/plugin/Collapse.tsx

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

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

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

@@ -0,0 +1,128 @@
+/**
+ * @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

@@ -0,0 +1,156 @@
+/**
+ * @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

@@ -0,0 +1,74 @@
+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);