amis-editor 5.2.0-beta.1 → 5.2.0

package/src/plugin/CustomRegion.tsx

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

@@ -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);

package/src/plugin/Datetime.tsx

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

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

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