amis-editor 5.2.0-beta.1 → 5.2.0

package/src/plugin/Page.tsx

@@ -0,0 +1,392 @@
+import {ContainerWrapper} from '../component/ContainerWrapper';
+import {registerEditorPlugin} from '../manager';
+import {BaseEventContext, BasePlugin} from '../plugin';
+import {getSchemaTpl} from '../component/schemaTpl';
+import {getEventControlConfig} from '../util';
+import {RendererAction, RendererEvent} from '../event-action';
+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: '内容'
+  };
+
+  events: RendererEvent[] = [
+    {
+      eventName: 'inited',
+      eventLabel: '初始化完成',
+      description: '远程初始化接口请求成功时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data': {
+              type: 'object',
+              title: '远程请求返回的初始化数据'
+            }
+          }
+        }
+      ]
+    },
+    {
+      eventName: 'pullRefresh',
+      eventLabel: '下拉刷新',
+      description: '开启下拉刷新后，下拉释放后触发（仅用于移动端）'
+    }
+  ];
+
+  // 动作定义
+  actions: RendererAction[] = [
+    {
+      actionType: 'reload',
+      actionLabel: '重新加载',
+      description: '触发组件数据刷新并重新渲染'
+    },
+    {
+      actionType: 'setValue',
+      actionLabel: '更新数据',
+      description: '触发组件数据更新'
+    }
+  ];
+
+  // 普通容器类渲染器配置
+  regions = [
+    {key: 'toolbar', label: '工具栏', preferTag: '工具栏内容'},
+    {key: 'aside', label: '边栏', placeholder: '边栏内容'},
+    {key: 'body', label: '内容区', placeholder: '页面内容'}
+  ];
+  wrapper = ContainerWrapper;
+
+  panelTitle = '页面';
+  panelBodyCreator = (context: BaseEventContext) => {
+    return [
+      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'),
+
+            getSchemaTpl('switch', {
+              label: '开启定时刷新',
+              name: 'interval',
+              visibleOn: 'data.initApi',
+              pipeIn: (value: any) => !!value,
+              pipeOut: (value: any) => (value ? 3000 : undefined)
+            }),
+
+            {
+              name: 'interval',
+              type: 'input-number',
+              visibleOn: 'typeof this.interval === "number"',
+              step: 500
+            },
+
+            getSchemaTpl('switch', {
+              name: 'silentPolling',
+              label: '静默刷新',
+              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: '外观',
+          className: 'p-none',
+          body: [
+            getSchemaTpl('collapseGroup', [
+              ...getSchemaTpl('style:common'),
+              getSchemaTpl('style:className', {
+                isFormItem: false,
+                schema: [
+                  getSchemaTpl('className', {
+                    name: 'headerClassName',
+                    label: '头部CSS类名'
+                  }),
+                  getSchemaTpl('className', {
+                    name: 'bodyClassName',
+                    label: '内容CSS类名'
+                  }),
+
+                  getSchemaTpl('className', {
+                    name: 'asideClassName',
+                    label: '边栏CSS类名'
+                  }),
+
+                  getSchemaTpl('className', {
+                    name: 'toolbarClassName',
+                    label: '工具栏CSS类名'
+                  })
+                ]
+              })
+            ])
+          ]
+        },
+        {
+          title: '事件',
+          className: 'p-none',
+          body: [
+            getSchemaTpl('eventControl', {
+              name: 'onEvent',
+              ...getEventControlConfig(this.manager, context)
+            })
+          ]
+        },
+        {
+          title: '其他',
+          body: [
+            {
+              type: 'combo',
+              name: 'pullRefresh',
+              multiLine: true,
+              noBorder: true,
+              items: [
+                {
+                  type: 'switch',
+                  label: '移动端下拉刷新',
+                  name: 'disabled',
+                  mode: 'horizontal',
+                  horizontal: {
+                    justify: true,
+                    left: 8
+                  },
+                  inputClassName: 'is-inline ',
+                  trueValue: false,
+                  falseValue: true
+                },
+                {
+                  name: 'pullingText',
+                  label: '下拉过程提示文案',
+                  type: 'input-text',
+                  visibleOn: '!this.disabled'
+                },
+                {
+                  name: 'loosingText',
+                  label: '释放过程提示文案',
+                  type: 'input-text',
+                  visibleOn: '!this.disabled'
+                }
+              ]
+            }
+
+            // {
+            //   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);