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

package/src/plugin/Page.tsx

@@ -1,306 +0,0 @@
-import {ContainerWrapper} from '../component/ContainerWrapper';
-import {registerEditorPlugin} from '../manager';
-import {BasePlugin} from '../plugin';
-import {getSchemaTpl} from '../component/schemaTpl';
-import type {SchemaObject} from 'amis/lib/Schema';
-
-export class PagePlugin extends BasePlugin {
-  // 关联渲染器名字
-  rendererName = 'page';
-  $schema = '/schemas/PageSchema.json';
-
-  // 组件名称
-  name = '页面';
-  isBaseComponent = true;
-  // 注释掉是为了不让它在出现在组件列表中，因为只有顶级才会用到这个。
-  // description =
-  //   '页面渲染器，页面的顶级入口。包含多个区域，您可以选择在不同的区域里面放置不同的渲染器。';
-  docLink = '/amis/zh-CN/components/page';
-  tags = '容器';
-  icon = 'fa fa-desktop';
-  scaffold: SchemaObject = {
-    type: 'page',
-    body: [
-      {
-        type: 'tpl',
-        tpl: '内容'
-      }
-    ]
-  };
-  previewSchema: SchemaObject = {
-    type: 'page',
-    className: 'text-left b-a',
-    asideClassName: 'w-xs',
-    title: '标题',
-    subTitle: '副标题',
-    aside: '边栏',
-    body: '内容'
-  };
-
-  // 普通容器类渲染器配置
-  regions = [
-    {key: 'toolbar', label: '工具栏', preferTag: '工具栏内容'},
-    {key: 'aside', label: '边栏', placeholder: '边栏内容'},
-    {key: 'body', label: '内容区', placeholder: '页面内容'}
-  ];
-  wrapper = ContainerWrapper;
-
-  panelTitle = '页面';
-  panelBody = [
-    getSchemaTpl('tabs', [
-      {
-        title: '常规',
-        body: [
-          {
-            type: 'checkboxes',
-            name: 'regions',
-            label: '区域展示',
-            pipeIn: (value: any) =>
-              Array.isArray(value)
-                ? value
-                : ['auto', 'body', 'toolbar', 'aside', 'header'],
-            pipeOut: (value: any) => {
-              return Array.isArray(value) && ~value.indexOf('auto')
-                ? undefined
-                : value.length
-                ? value
-                : ['auto', 'body', 'toolbar', 'aside', 'header'];
-            },
-            joinValues: false,
-            extractValue: true,
-            inline: false,
-            options: [
-              {
-                label: '自动',
-                value: 'auto'
-              },
-              {
-                label: '内容区',
-                value: 'body',
-                disabledOn:
-                  '!Array.isArray(this.regions) || ~this.regions.indexOf("auto")'
-              },
-              {
-                label: '边栏',
-                value: 'aside',
-                disabledOn:
-                  '!Array.isArray(this.regions) ||~this.regions.indexOf("auto")'
-              },
-              {
-                label: '工具栏',
-                value: 'toolbar',
-                disabledOn:
-                  '!Array.isArray(this.regions) ||~this.regions.indexOf("auto")'
-              },
-              {
-                label: '顶部',
-                value: 'header',
-                disabledOn:
-                  '!Array.isArray(this.regions) ||~this.regions.indexOf("auto")'
-              }
-            ]
-          },
-
-          {
-            label: '标题',
-            name: 'title',
-            type: 'input-text'
-          },
-
-          {
-            label: '副标题',
-            name: 'subTitle',
-            type: 'input-text'
-          },
-
-          {
-            label: '提示',
-            name: 'remark',
-            type: 'textarea',
-            visibleOn: 'this.title',
-            description: '标题附近会出现一个提示图标，鼠标放上去会提示该内容。'
-          },
-          getSchemaTpl('data')
-        ]
-      },
-
-      {
-        title: '接口',
-        body: [
-          getSchemaTpl('api', {
-            label: '数据初始化接口',
-            name: 'initApi',
-            sampleBuilder: (schema: any) => `{
-  "status": 0,
-  "msg": "",
-
-  data: {
-    // 示例数据
-    "id": 1,
-    "a": "sample"
-  }
-}`
-          }),
-
-          getSchemaTpl('initFetch'),
-
-          {
-            label: '开启定时刷新',
-            type: 'switch',
-            name: 'interval',
-            visibleOn: 'data.initApi',
-            pipeIn: (value: any) => !!value,
-            pipeOut: (value: any) => (value ? 3000 : undefined),
-            mode: 'inline'
-          },
-
-          {
-            name: 'interval',
-            type: 'input-number',
-            visibleOn: 'typeof this.interval === "number"',
-            step: 500
-          },
-
-          {
-            name: 'silentPolling',
-            label: '静默刷新',
-            type: 'switch',
-            mode: 'inline',
-            visibleOn: '!!data.interval',
-            description: '设置自动定时刷新时是否显示loading'
-          },
-
-          {
-            name: 'stopAutoRefreshWhen',
-            label: '停止定时刷新检测表达式',
-            type: 'input-text',
-            visibleOn: '!!data.interval',
-            description:
-              '定时刷新一旦设置会一直刷新，除非给出表达式，条件满足后则不刷新了。'
-          },
-
-          {
-            label: '默认消息提示',
-            type: 'combo',
-            name: 'messages',
-            multiLine: true,
-            description:
-              '设置 ajax 默认提示信息，当 ajax 没有返回 msg 信息时有用，如果 ajax 返回携带了 msg 值，则还是以 ajax 返回为主',
-            items: [
-              {
-                label: '获取成功提示',
-                type: 'input-text',
-                name: 'fetchSuccess'
-              },
-
-              {
-                label: '获取失败提示',
-                type: 'input-text',
-                name: 'fetchFailed'
-              },
-
-              {
-                label: '保存成功提示',
-                type: 'input-text',
-                name: 'saveSuccess'
-              },
-
-              {
-                label: '保存失败提示',
-                type: 'input-text',
-                name: 'saveFailed'
-              }
-            ]
-          }
-        ]
-      },
-
-      {
-        title: '外观',
-        body: [
-          getSchemaTpl('className'),
-          getSchemaTpl('className', {
-            name: 'headerClassName',
-            label: '头部CSS类名'
-          }),
-          getSchemaTpl('className', {
-            name: 'bodyClassName',
-            label: '内容CSS类名'
-          }),
-
-          getSchemaTpl('className', {
-            name: 'asideClassName',
-            label: '边栏CSS类名'
-          }),
-
-          getSchemaTpl('className', {
-            name: 'toolbarClassName',
-            label: '工具栏CSS类名'
-          }),
-          getSchemaTpl('style')
-        ]
-      },
-
-      {
-        title: '其他',
-        body: [
-          getSchemaTpl('name')
-
-          // {
-          //   type: 'combo',
-          //   name: 'definitions',
-          //   multiple: true,
-          //   multiLine: true,
-          //   label: '定义',
-          //   description: '定义类型，定义完成后可被子节点引用。',
-          //   pipeIn: (value: any) =>
-          //     value
-          //       ? Object.keys(value).map(key => ({
-          //           key,
-          //           value: value[key]
-          //         }))
-          //       : [],
-          //   pipeOut: (value: any) =>
-          //     Array.isArray(value)
-          //       ? value.reduce(
-          //           (obj, current) => ({
-          //             ...obj,
-          //             [current.key || '']: current.value
-          //               ? current.value
-          //               : {type: 'tpl', tpl: '内容'}
-          //           }),
-          //           {}
-          //         )
-          //       : undefined,
-          //   items: [
-          //     {
-          //       type: 'input-text',
-          //       name: 'key',
-          //       label: 'Key',
-          //       required: true
-          //     },
-
-          //     {
-          //       children: ({index}: any) => (
-          //         <Button
-          //           size="sm"
-          //           level="danger"
-          //           // onClick={this.handleEditDefinitionDetail.bind(
-          //           //   this,
-          //           //   index
-          //           // )}
-          //           block
-          //         >
-          //           配置详情
-          //         </Button>
-          //       )
-          //     }
-          //   ]
-          // }
-        ]
-      }
-    ])
-  ];
-}
-
-registerEditorPlugin(PagePlugin);

package/src/plugin/Panel/AvailableRenderers.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import {Icon} from 'amis';
-import {AvailableRenderersPanel} from '../../component/Panel/AvailableRenderersPanel';
-import {registerEditorPlugin} from '../../manager';
-import {BasePlugin, BasicPanelItem, BuildPanelEventContext} from '../../plugin';
-
-/**
- * 添加源码编辑功能
- */
-export class AvailableRenderersPlugin extends BasePlugin {
-  order = -9999;
-
-  buildEditorPanel(
-    context: BuildPanelEventContext,
-    panels: Array<BasicPanelItem>
-  ) {
-    const store = this.manager.store;
-
-    // 多选时不显示
-    if (context.selections.length) {
-      return;
-    }
-
-    if (store.subRenderers.length) {
-      panels.push({
-        key: 'renderers',
-        icon: 'png-icon renderers-png', // 'fa fa-cube',
-        title: (
-          <span className="editor-tab-icon" editor-tooltip="组件">
-            <Icon icon="editor-renderer" />
-          </span>
-        ),
-        component: AvailableRenderersPanel,
-        position: 'left',
-        order: -9999
-      });
-    }
-  }
-}
-
-registerEditorPlugin(AvailableRenderersPlugin);

package/src/plugin/Panel/Code.tsx

@@ -1,44 +0,0 @@
-import React from 'react';
-import {Icon} from 'amis';
-import CodeEditorPanel from '../../component/Panel/CodeEditorPanel';
-import {registerEditorPlugin} from '../../manager';
-import {
-  BasePlugin,
-  BasicPanelItem,
-  RendererJSONSchemaResolveEventContext,
-  BuildPanelEventContext
-} from '../../plugin';
-import WidthDraggableContainer from '../../component/base/WidthDraggableContainer';
-
-/**
- * 添加源码编辑功能
- */
-export class CodePlugin extends BasePlugin {
-  order = -9999;
-
-  buildJSONSchema({info}: RendererJSONSchemaResolveEventContext) {
-    return info.$schema;
-  }
-
-  buildEditorPanel(
-    {info, selections}: BuildPanelEventContext,
-    panels: Array<BasicPanelItem>
-  ) {
-    if (this.manager.store.jsonSchemaUri && !selections.length) {
-      panels.push({
-        key: 'code',
-        icon: 'png-icon code-png', // 'fa fa-code',
-        title: (
-          <span className="editor-tab-icon" editor-tooltip="代码">
-            <Icon icon="editor-code" />
-          </span>
-        ),
-        position: 'left',
-        component: WidthDraggableContainer(CodeEditorPanel),
-        order: 5000
-      });
-    }
-  }
-}
-
-registerEditorPlugin(CodePlugin);

package/src/plugin/Panel/Name.tsx

@@ -1,26 +0,0 @@
-import {TargetNamePanel} from '../../component/Panel/TargetNamePanel';
-import {registerEditorPlugin} from '../../manager';
-import {BasePlugin, BasicPanelItem, BuildPanelEventContext} from '../../plugin';
-
-/**
- * 添加名字面板，方便根据组件名字定位节点
- */
-export class NamePlugin extends BasePlugin {
-  order = -9999;
-
-  buildEditorPanel(
-    {info, selections}: BuildPanelEventContext,
-    panels: Array<BasicPanelItem>
-  ) {
-    // panels.push({
-    //   position: 'left',
-    //   key: 'name-list',
-    //   icon: 'fa fa-list',
-    //   title: '名字',
-    //   component: TargetNamePanel,
-    //   order: 4000
-    // });
-  }
-}
-// PM端：名字tab 使用有点奇怪，暂时去掉
-// registerEditorPlugin(NamePlugin);

package/src/plugin/Panel/Outline.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import {Icon} from 'amis';
-import {OutlinePanel} from '../../component/Panel/Outline';
-import {registerEditorPlugin} from '../../manager';
-import {BasePlugin, BasicPanelItem, BuildPanelEventContext} from '../../plugin';
-import WidthDraggableContainer from '../../component/base/WidthDraggableContainer';
-/**
- * 大纲面板
- */
-export class OutlinePlugin extends BasePlugin {
-  order = -9999;
-
-  buildEditorPanel(
-    context: BuildPanelEventContext,
-    panels: Array<BasicPanelItem>
-  ) {
-    const store = this.manager.store;
-
-    // 多选时显示大纲面板
-    if (store && context.selections.length) {
-      const {changeLeftPanelOpenStatus, changeLeftPanelKey} = store;
-      changeLeftPanelOpenStatus(true);
-      changeLeftPanelKey('outline');
-    }
-    panels.push({
-      key: 'outline',
-      icon: 'png-icon outline-png', // 'fa fa-navicon',
-      title: (
-        <span className="editor-tab-icon" editor-tooltip="大纲">
-          <Icon icon="editor-outline" />
-        </span>
-      ),
-      component: WidthDraggableContainer(OutlinePanel),
-      position: 'left',
-      order: 4000
-    });
-  }
-}
-
-registerEditorPlugin(OutlinePlugin);

package/src/plugin/Panel.tsx

@@ -1,243 +0,0 @@
-import {Button} from 'amis';
-import React from 'react';
-import {registerEditorPlugin} from '../manager';
-import {
-  BasePlugin,
-  BaseEventContext,
-  BasicPanelItem,
-  RegionConfig,
-  RendererInfo,
-  BuildPanelEventContext
-} from '../plugin';
-import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
-
-export class PanelPlugin extends BasePlugin {
-  // 关联渲染器名字
-  rendererName = 'panel';
-  $schema = '/schemas/panelSchema.json';
-
-  name = '面板';
-  isBaseComponent = true;
-  icon = 'fa fa-window-maximize';
-  description = '展示一个面板，可以配置标题，内容区。';
-  docLink = '/amis/zh-CN/components/panel';
-  tags = '容器';
-  scaffold = {
-    type: 'panel',
-    title: '标题',
-    body: '内容'
-  };
-  previewSchema = {
-    type: 'panel',
-    title: '这是一个面板',
-    body: '这是内容区',
-    className: 'Panel--default text-left m-b-none',
-    actions: [
-      {
-        label: '按钮1',
-        type: 'button'
-      },
-      {
-        label: '按钮2',
-        type: 'button'
-      }
-    ]
-  };
-
-  regions: Array<RegionConfig> = [
-    {
-      key: 'body',
-      label: '内容区',
-
-      // 复写渲染器里面的 renderBody 方法
-      renderMethod: 'renderBody',
-
-      // 这个 case 很另类，要自己写。form 里面直接复用了 Panel 来输出内容。
-      // 这种 case 应该跳过包裹 Region
-      // 只有他自己输出时才包裹，form 调用进来是下发了 children 来完成渲染
-      // 自己的话是其他方式。
-      renderMethodOverride: (regions, insertRegion) =>
-        function (this: any, ...args: any[]) {
-          const info: RendererInfo = this.props.$$editor;
-          const dom = this.super(...args);
-
-          if (info && !this.props.children) {
-            return insertRegion(this, dom, regions, info, info.plugin.manager);
-          }
-
-          return dom;
-        }
-    },
-
-    {
-      key: 'actions',
-      label: '按钮组',
-      renderMethod: 'renderActions',
-      preferTag: '按钮'
-    }
-  ];
-
-  panelTitle = '面板';
-  panelBodyCreator = (context: BaseEventContext) => {
-    const isForm = /(?:^|\/)form$/.test(context.path);
-
-    return [
-      getSchemaTpl('tabs', [
-        {
-          title: '常规',
-          body: [
-            {
-              label: '标题',
-              name: 'title',
-              type: 'input-text'
-            },
-
-            isForm
-              ? null
-              : {
-                  children: (
-                    <Button
-                      size="sm"
-                      level="info"
-                      className="m-b"
-                      onClick={() => {
-                        // this.manager.showInsertPanel('body')
-                        this.manager.showRendererPanel('');
-                      }}
-                      block
-                    >
-                      内容区新增内容
-                    </Button>
-                  )
-                }
-          ]
-        },
-        {
-          title: '外观',
-          body: [
-            {
-              name: 'affixFooter',
-              label: '固定底部',
-              type: 'switch',
-              value: false,
-              mode: 'inline',
-              className: 'block'
-            },
-
-            getSchemaTpl('horizontal', {
-              visibleOn:
-                '(data.mode || data.$$formMode) == "horizontal" && data.$$mode == "form"'
-            }),
-
-            {
-              name: isForm ? 'panelClassName' : 'className',
-              label: '样式',
-              type: 'button-group-select',
-              size: 'sm',
-              pipeIn: (value: any) =>
-                typeof value === 'string' &&
-                /(?:^|\s)(Panel\-\-(\w+))(?:$|\s)/.test(value)
-                  ? RegExp.$1
-                  : '',
-              pipeOut: (value: string, origin: string) =>
-                origin
-                  ? `${origin.replace(
-                      /(?:^|\s)(Panel\-\-(\w+))(?=($|\s))/g,
-                      ''
-                    )} ${value}`
-                      .replace(/\s+/g, ' ')
-                      .trim()
-                  : value,
-              options: [
-                {
-                  label: '默认',
-                  value: 'Panel--default'
-                },
-                {
-                  label: '主色',
-                  value: 'Panel--primary'
-                },
-                {
-                  label: '提示',
-                  value: 'Panel--info'
-                },
-                {
-                  label: '成功',
-                  value: 'Panel--success'
-                },
-                {
-                  label: '警告',
-                  value: 'Panel--warning'
-                },
-                {
-                  label: '危险',
-                  value: 'Panel--danger'
-                }
-              ]
-            },
-
-            getSchemaTpl('className', {
-              name: isForm ? 'panelClassName' : 'className',
-              pipeIn: defaultValue('Panel--default')
-            }),
-
-            getSchemaTpl('className', {
-              name: 'headerClassName',
-              label: '头部区域 CSS 类名'
-            }),
-
-            getSchemaTpl('className', {
-              name: 'bodyClassName',
-              label: '内容区域 CSS 类名'
-            }),
-
-            getSchemaTpl('className', {
-              name: 'footerClassName',
-              label: '底部区域 CSS 类名'
-            }),
-
-            getSchemaTpl('className', {
-              name: 'actionsClassName',
-              label: '按钮外层 CSS 类名'
-            }),
-
-            getSchemaTpl('subFormItemMode'),
-            getSchemaTpl('subFormHorizontalMode'),
-            getSchemaTpl('subFormHorizontal')
-          ]
-        },
-        {
-          title: '显隐',
-          body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
-        }
-      ])
-    ];
-  };
-
-  buildEditorPanel(
-    context: BuildPanelEventContext,
-    panels: Array<BasicPanelItem>
-  ) {
-    const path = context.path;
-    const schema = context.schema;
-
-    if (
-      context.info.renderer.name === 'form' &&
-      schema.wrapWithPanel !== false &&
-      !context.selections.length
-    ) {
-      panels.push({
-        key: 'panel',
-        icon: 'fa fa-list-alt',
-        title: this.panelTitle,
-        render: this.manager.makeSchemaFormRender({
-          body: this.panelBodyCreator(context)
-        })
-      });
-    } else {
-      super.buildEditorPanel(context, panels);
-    }
-  }
-}
-
-registerEditorPlugin(PanelPlugin);