amis-editor 5.2.0-beta.1 → 5.2.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';
+import {tipedLabel} from '../component/control/BaseControl';
+
+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 = '折叠器';
+
+  panelJustify = true;
+
+  panelBodyCreator = (context: BaseEventContext) => {
+    return getSchemaTpl('tabs', [
+      {
+        title: '属性',
+        body: getSchemaTpl('collapseGroup', [
+          {
+            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: tipedLabel('展开标题', '折叠器处于展开状态时的标题'),
+                type: 'input-text'
+              },
+              {
+                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: 'showArrow',
+                label: '显示图标',
+                mode: 'row',
+                inputClassName: 'inline-flex justify-between flex-row-reverse',
+                type: 'switch',
+                pipeIn: defaultValue(true)
+              },
+
+              getSchemaTpl('switch', {
+                name: 'collapsable',
+                label: '可折叠',
+                pipeIn: defaultValue(true)
+              })
+            ]
+          },
+          getSchemaTpl('status', {
+            disabled: true
+          })
+        ])
+      },
+      {
+        title: '外观',
+        body: getSchemaTpl('collapseGroup', [
+          getSchemaTpl('style:classNames', {
+            isFormItem: false,
+            schema: [
+              getSchemaTpl('className', {
+                name: 'headingClassName',
+                label: '标题类名'
+              }),
+              getSchemaTpl('className', {
+                name: 'bodyClassName',
+                label: '内容类名'
+              })
+            ]
+          })
+        ])
+      }
+    ]);
+  };
+
+  regions: Array<RegionConfig> = [
+    {
+      key: 'body',
+      label: '内容区'
+    }
+  ];
+}
+
+registerEditorPlugin(CollapsePlugin);

package/src/plugin/CollapseGroup.tsx

@@ -0,0 +1,249 @@
+import {registerEditorPlugin} from '../manager';
+import {BasePlugin, RegionConfig, BaseEventContext} from '../plugin';
+import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
+
+import type {CollapseSchema} from 'amis/lib/renderers/Collapse';
+import {tipedLabel} from '../component/control/BaseControl';
+import {isObject} from '../util';
+
+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',
+        active: true,
+        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
+  };
+
+  activeKeyData: any = [];
+  panelTitle = '折叠面板';
+
+  panelJustify = true;
+
+  panelBodyCreator = (context: BaseEventContext) => {
+    return [
+      getSchemaTpl('tabs', [
+        {
+          title: '属性',
+          body: getSchemaTpl('collapseGroup', [
+            {
+              title: '基本',
+              body: [
+                {
+                  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'
+                    }
+                  ]
+                },
+                {
+                  type: 'ae-switch-more',
+                  label: '自定义图标',
+                  bulk: true,
+                  mode: 'normal',
+                  value: false,
+                  formType: 'extend',
+                  autoFocus: false,
+                  form: {
+                    body: [
+                      {
+                        label: '图标',
+                        name: 'expandIcon',
+                        type: 'icon-picker',
+                        className: 'fix-icon-picker-overflow',
+                        pipeIn: (value: any) => value?.icon,
+                        pipeOut: (value: any) => ({
+                          type: 'icon',
+                          vendor: '',
+                          icon: value
+                        })
+                      }
+                    ]
+                  },
+                  pipeIn: (value: string) => {
+                    if (typeof value === 'string' && value.length) {
+                      return {
+                        character: value
+                      };
+                    }
+                    return undefined;
+                  },
+                  pipeOut: (value: any) => {
+                    if (!isObject(value)) {
+                      return undefined;
+                    }
+                    return typeof value.character === 'string'
+                      ? value.character
+                      : undefined;
+                  }
+                },
+                {
+                  name: 'accordion',
+                  label: tipedLabel(
+                    '手风琴模式',
+                    '手风琴模式，只允许单个面板展开'
+                  ),
+                  mode: 'row',
+                  inputClassName:
+                    'inline-flex justify-between flex-row-reverse',
+                  type: 'switch',
+                  pipeIn: defaultValue(false)
+                },
+                getSchemaTpl('combo-container', {
+                  name: 'body',
+                  type: 'combo',
+                  label: '面板管理',
+                  mode: 'normal',
+                  multiple: true,
+                  addable: true,
+                  columnClassName: 'w-20',
+                  addButtonText: '新增折叠器',
+                  minLength: 1,
+                  draggable: true,
+                  draggableTip: '',
+                  placeholder: '请添加折叠器',
+                  items: [
+                    {
+                      type: 'container',
+                      columnClassName: 'flex-none',
+                      body: tipedLabel(
+                        [
+                          {
+                            name: 'active',
+                            type: 'checkbox'
+                          }
+                        ],
+                        '默认展开此面板'
+                      )
+                    },
+                    {
+                      name: 'header',
+                      placeholder: '标题',
+                      type: 'input-text'
+                    }
+                  ],
+                  onChange: (
+                    value: Array<any>,
+                    oldValue: Array<any>,
+                    model: any,
+                    form: any
+                  ) => {
+                    const activeKey = value.reduce((arr: any, item: any) => {
+                      item.active === true && arr.push(item.key);
+                      return arr;
+                    }, []);
+                    form.setValues({
+                      activeKey
+                    });
+                  },
+                  pipeOut: (value: any[], oldValue: any, data: any) => {
+                    const keys = value.map(item => item.key);
+                    const findMinCanUsedKey = (
+                      keys: string[],
+                      max: number
+                    ): void | string => {
+                      for (let i = 1; i <= max; i++) {
+                        if (!keys.includes(String(i))) {
+                          return String(i);
+                        }
+                      }
+                    };
+                    value.forEach(item => {
+                      if (!item.key) {
+                        const key = findMinCanUsedKey(keys, value.length);
+                        item.key = key;
+                        item.header = `标题${key}`;
+                      }
+                    });
+                    return value;
+                  },
+                  scaffold: {
+                    type: 'collapse',
+                    header: '标题',
+                    body: [
+                      {
+                        type: 'tpl',
+                        tpl: '内容',
+                        inline: false
+                      }
+                    ],
+                    key: ''
+                  }
+                })
+              ]
+            }
+          ])
+        },
+        {
+          title: '外观',
+          body: getSchemaTpl('collapseGroup', [
+            getSchemaTpl('style:classNames', {
+              isFormItem: false
+            })
+          ])
+        }
+      ])
+    ];
+  };
+
+  regions: Array<RegionConfig> = [
+    {
+      key: 'body',
+      label: '内容区',
+      renderMethod: 'render',
+      insertPosition: 'inner'
+    }
+  ];
+}
+
+registerEditorPlugin(CollapseGroupPlugin);

package/src/plugin/Container.tsx

@@ -0,0 +1,93 @@
+import {registerEditorPlugin} from '../manager';
+import {BaseEventContext, BasePlugin, RegionConfig} from '../plugin';
+import {defaultValue, 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 = '容器';
+
+  panelJustify = true;
+
+  panelBodyCreator = (context: BaseEventContext) => {
+    return getSchemaTpl('tabs', [
+      {
+        title: '属性',
+        body: getSchemaTpl('collapseGroup', [
+          {
+            title: '常用',
+            body: [
+              {
+                name: 'wrapperComponent',
+                label: '容器标签',
+                type: 'input-text',
+                options: [
+                  'article',
+                  'aside',
+                  'code',
+                  'div',
+                  'footer',
+                  'header',
+                  'p',
+                  'section'
+                ],
+                pipeIn: defaultValue('div'),
+                validations: {
+                  isAlphanumeric: true,
+                  matchRegexp: '/^(?!.*script).*$/' // 禁用一下script标签
+                },
+                validationErrors: {
+                  isAlpha: 'HTML标签不合法，请重新输入',
+                  matchRegexp: 'HTML标签不合法，请重新输入'
+                },
+                validateOnChange: false
+              }
+            ]
+          }
+        ])
+      },
+      {
+        title: '外观',
+        className: 'p-none',
+        body: getSchemaTpl('collapseGroup', [
+          ...getSchemaTpl('style:common'),
+          {
+            title: 'CSS 类名',
+            body: [
+              getSchemaTpl('className', {label: '外层CSS类名'}),
+              getSchemaTpl('className', {
+                name: 'bodyClassName',
+                label: '内容区CSS类名'
+              })
+            ]
+          }
+        ])
+      }
+    ]);
+  };
+}
+
+registerEditorPlugin(ContainerPlugin);

package/src/plugin/Custom.tsx

@@ -0,0 +1,122 @@
+/**
+ * @file 自定义代码
+ */
+
+import {registerEditorPlugin} from '../manager';
+import {
+  BasePlugin,
+  BasicSubRenderInfo,
+  RendererEventContext,
+  SubRendererInfo
+} from '../plugin';
+import {getSchemaTpl} from '../component/schemaTpl';
+
+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);