amis-editor 5.2.0 → 5.2.1-beta.19

package/src/plugin/CustomRegion.tsx

@@ -1,157 +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/isArray';
-
-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);

package/src/plugin/Datetime.tsx

@@ -1,68 +0,0 @@
-import {registerEditorPlugin} from '../manager';
-import {BaseEventContext} from '../plugin';
-import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
-import {DatePlugin} from './Date';
-
-export class DatetimePlugin extends DatePlugin {
-  // 关联渲染器名字
-  rendererName = 'datetime';
-
-  scaffold = {
-    type: 'datetime',
-    value: Math.round(Date.now() / 1000)
-  };
-
-  name = '日期时间展示';
-  isBaseComponent = true;
-  previewSchema = {
-    ...this.scaffold,
-    format: 'YYYY-MM-DD HH:mm:ss',
-    value: Math.round(Date.now() / 1000)
-  };
-  panelBodyCreator = (context: BaseEventContext) => {
-    return [
-      getSchemaTpl('tabs', [
-        {
-          title: '常规',
-          body: [
-            {
-              type: 'input-datetime',
-              name: 'value',
-              label: '日期时间数值'
-            },
-            {
-              type: 'input-text',
-              name: 'format',
-              label: '显示日期时间格式',
-              description: '请参考 moment 中的格式用法。',
-              pipeIn: defaultValue('YYYY-MM-DD HH:mm:ss')
-            },
-            {
-              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(DatetimePlugin);

package/src/plugin/Dialog.tsx

@@ -1,207 +0,0 @@
-import React from 'react';
-import {registerEditorPlugin} from '../manager';
-import {BaseEventContext, BasePlugin, RegionConfig, RendererInfo} from '../plugin';
-import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
-import {getEventControlConfig, isObject, noop} from '../util';
-
-export class DialogPlugin extends BasePlugin {
-  // 关联渲染器名字
-  rendererName = 'dialog';
-  $schema = '/schemas/DialogSchema.json';
-
-  // 组件名称
-  name = '弹框';
-  isBaseComponent = true;
-  wrapperProps = {
-    wrapperComponent: InlineModal,
-    onClose: noop,
-    show: true
-  };
-
-  regions: Array<RegionConfig> = [
-    {
-      key: 'body',
-      label: '内容区',
-      renderMethod: 'renderBody',
-      renderMethodOverride: (regions, insertRegion) =>
-        function (this: any, ...args: any[]) {
-          const info: RendererInfo = this.props.$$editor;
-          const dom = this.super(...args);
-
-          if (info && args[1] === 'body') {
-            return insertRegion(this, dom, regions, info, info.plugin.manager);
-          }
-
-          return dom;
-        }
-    },
-    {
-      key: 'actions',
-      label: '按钮组',
-      renderMethod: 'renderFooter',
-      wrapperResolve: dom => dom
-    }
-  ];
-
-  // 现在没用，后面弹窗优化后有用
-  events = [
-    {
-      eventName: 'confirm',
-      eventLabel: '确认',
-      description: '确认'
-    },
-    {
-      eventName: 'cancel',
-      eventLabel: '取消',
-      description: '取消'
-    }
-  ];
-
-  actions = [
-    {
-      actionType: 'confirm',
-      actionLabel: '确认',
-      description: '确认操作'
-    },
-    {
-      actionType: 'cancel',
-      actionLabel: '取消',
-      description: '取消操作'
-    },
-    {
-      actionType: 'setValue',
-      actionLabel: '更新数据',
-      description: '触发组件数据更新'
-    }
-  ];
-
-  panelTitle = '弹框';
-  panelBodyCreator = (context: BaseEventContext) => {
-    return getSchemaTpl('tabs', [
-      {
-        title: '常规',
-        body: [
-          {
-            label: '标题',
-            type: 'input-text',
-            name: 'title'
-          },
-
-          getSchemaTpl('switch', {
-            label: '数据映射',
-            name: 'data',
-            className: 'block m-b-xs',
-            pipeIn: (value: any) => !!value,
-            pipeOut: (value: any) => (value ? {'&': '$$'} : null)
-          }),
-
-          {
-            type: 'tpl',
-            visibleOn: '!this.data',
-            tpl:
-              '<p class="text-sm text-muted">当没开启数据映射时，弹框中默认会拥有触发打开弹框按钮所在环境的所有数据。</p>'
-          },
-
-          {
-            type: 'input-kv',
-            syncDefaultValue: false,
-            name: 'data',
-            visibleOn: 'this.data',
-            descriptionClassName: 'help-block text-xs m-b-none',
-            description:
-              '<p>当开启数据映射时，弹框中的数据只会包含设置的部分，请绑定数据。如：<code>{"a": "\\${a}", "b": 2}</code></p><p>如果希望在默认的基础上定制，请先添加一个 Key 为 `&` Value 为 `\\$$` 作为第一行。</p><div>当值为 <code>__undefined</code>时，表示删除对应的字段，可以结合<code>{"&": "\\$$"}</code>来达到黑名单效果。</div>',
-            messages: {
-              validateFailed: '数据映射中存在错误，请仔细检查'
-            }
-          },
-
-          getSchemaTpl('switch', {
-            label: '按 Esc 关闭弹框',
-            name: 'closeOnEsc',
-            value: false
-          }),
-
-          getSchemaTpl('switch', {
-            label: '点击弹框外区域关闭弹框',
-            name: 'closeOnOutside',
-            value: false
-          })
-        ]
-      },
-      {
-        title: '外观',
-        body: [
-          {
-            label: '尺寸',
-            type: 'button-group-select',
-            name: 'size',
-            size: 'sm',
-            className: 'block',
-            pipeIn: defaultValue(''),
-            options: [
-              {
-                label: '小',
-                value: 'sm'
-              },
-              {
-                label: '默认',
-                value: ''
-              },
-              {
-                label: '中',
-                value: 'md'
-              },
-              {
-                label: '大',
-                value: 'lg'
-              },
-              {
-                label: '超大',
-                value: 'xl'
-              }
-            ]
-          },
-
-          getSchemaTpl('switch', {
-            label: '是否显示关闭按钮',
-            name: 'showCloseButton',
-            value: true
-          }),
-
-          getSchemaTpl('className', {
-            name: 'headerClassName',
-            label: '顶部 CSS 类名'
-          }),
-
-          getSchemaTpl('className', {
-            name: 'bodyClassName',
-            label: '内容 CSS 类名'
-          })
-        ]
-      },
-      {
-        title: '事件',
-        className: 'p-none',
-        body: [
-          getSchemaTpl('eventControl', {
-            name: 'onEvent',
-            ...getEventControlConfig(this.manager, context)
-          })
-        ]
-      }
-    ])
-  };
-
-  buildSubRenderers() {}
-}
-
-registerEditorPlugin(DialogPlugin);
-
-export class InlineModal extends React.Component<any, any> {
-  componentDidMount() {}
-
-  render() {
-    const {children} = this.props;
-    return <div className="ae-InlineModel">{children}</div>;
-  }
-}

package/src/plugin/Divider.tsx

@@ -1,36 +0,0 @@
-import {registerEditorPlugin} from '../manager';
-import {BasePlugin} from '../plugin';
-import {getSchemaTpl} from '../component/schemaTpl';
-
-export class DividerPlugin extends BasePlugin {
-  // 关联渲染器名字
-  rendererName = 'divider';
-  $schema = '/schemas/DividerSchema.json';
-
-  // 组件名称
-  name = '分隔线';
-  isBaseComponent = true;
-  icon = 'fa fa-minus';
-  description = '用来展示一个分割线，可用来做视觉上的隔离。';
-  scaffold = {
-    type: 'divider'
-  };
-  previewSchema: any = {
-    type: 'divider',
-    className: 'm-t-none m-b-none'
-  };
-
-  panelTitle = '分隔线';
-  panelBody = getSchemaTpl('tabs', [
-    {
-      title: '外观',
-      body: [getSchemaTpl('className')]
-    },
-    {
-      title: '显隐',
-      body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
-    }
-  ]);
-}
-
-registerEditorPlugin(DividerPlugin);