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

package/src/plugin/Page.tsx

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

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

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

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

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

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