amis-editor 5.2.0-beta.1 → 5.2.0

package/src/plugin/Mapping.tsx

@@ -0,0 +1,149 @@
+import {registerEditorPlugin} from '../manager';
+import {BaseEventContext, BasePlugin} from '../plugin';
+import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
+import {isObject} from '../util';
+
+export class MappingPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'mapping';
+  $schema = '/schemas/MappingSchema.json';
+
+  // 组件名称
+  name = '映射';
+  isBaseComponent = true;
+  description =
+    '对现有值做映射展示，比如原始值是：1、2、3...，需要展示成：下线、上线、过期等等。';
+  docLink = '/amis/zh-CN/components/mapping';
+  tags = ['展示'];
+  icon = 'fa fa-exchange';
+  scaffold = {
+    type: 'mapping',
+    value: 2,
+    map: {
+      0: '<span class="label label-info">一</span>',
+      1: '<span class="label label-success">二</span>',
+      2: '<span class="label label-danger">三</span>',
+      3: '<span class="label label-warning">四</span>',
+      4: '<span class="label label-primary">五</span>',
+      '*': '<span class="label label-default">-</span>'
+    }
+  };
+  previewSchema = {
+    ...this.scaffold
+  };
+
+  panelTitle = '映射';
+  panelBodyCreator = (context: BaseEventContext) => {
+    const isUnderField = /\/field\/\w+$/.test(context.path as string);
+    return [
+      getSchemaTpl('tabs', [
+        {
+          title: '常规',
+          body: [
+            isUnderField
+              ? {
+                  type: 'tpl',
+                  inline: false,
+                  className: 'text-info text-sm',
+                  tpl: '<p>当前为字段内容节点配置，选择上层还有更多的配置。</p>'
+                }
+              : null,
+
+            {
+              label: '映射表',
+              type: 'combo',
+              scaffold: {
+                key: 'key-{index}',
+                value: 'value-{index}'
+              },
+              required: true,
+              name: 'map',
+              descriptionClassName: 'help-block text-xs m-b-none',
+              description:
+                '<p>当值命中左侧 Key 时，展示右侧内容，当没有命中时，默认实现 Key 为 <code>*</code>的内容</div>(请确保key值唯一)',
+              multiple: true,
+              pipeIn: (value: any) => {
+                if (!isObject(value)) {
+                  return [
+                    {
+                      key: '*',
+                      value: '通配值'
+                    }
+                  ];
+                }
+
+                let arr: Array<any> = [];
+
+                Object.keys(value).forEach(key => {
+                  arr.push({
+                    key: key || '',
+                    value:
+                      typeof value[key] === 'string'
+                        ? value[key]
+                        : JSON.stringify(value[key])
+                  });
+                });
+                return arr;
+              },
+              pipeOut: (value: any) => {
+                if (!Array.isArray(value)) {
+                  return value;
+                }
+                let obj: any = {};
+
+                value.forEach((item: any, idx: number) => {
+                  let key: string = item.key || '';
+                  let value: any = item.value;
+                  if (key === 'key-{index}' && value === 'value-{index}') {
+                    key = key.replace('-{index}', `${idx}`);
+                    value = value.replace('-{index}', `${idx}`);
+                  }
+                  try {
+                    value = JSON.parse(value);
+                  } catch (e) {}
+
+                  obj[key] = value;
+                });
+
+                return obj;
+              },
+              items: [
+                {
+                  placeholder: 'Key',
+                  type: 'input-text',
+                  unique: true,
+                  name: 'key',
+                  required: true,
+                  columnClassName: 'w-xs'
+                },
+
+                {
+                  placeholder: '内容',
+                  type: 'input-text',
+                  name: 'value'
+                }
+              ]
+            },
+
+            {
+              name: 'placeholder',
+              type: 'input-text',
+              pipeIn: defaultValue('-'),
+              label: '占位符'
+            }
+          ]
+        },
+        {
+          title: '外观',
+          body: [getSchemaTpl('className')]
+        },
+        {
+          title: '显隐',
+          body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
+        }
+      ])
+    ];
+  };
+}
+
+registerEditorPlugin(MappingPlugin);

package/src/plugin/Markdown.tsx

@@ -0,0 +1,47 @@
+import {registerEditorPlugin} from '../manager';
+import {BaseEventContext, BasePlugin} from '../plugin';
+import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
+
+export class MarkdownPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'markdown';
+  $schema = '/schemas/MarkdownSchema.json';
+
+  // 组件名称
+  name = 'Markdown';
+  isBaseComponent = true;
+  description = '展示 markdown 内容';
+  docLink = '/amis/zh-CN/components/markdown';
+  tags = ['展示'];
+  icon = 'fa fa-file-text';
+  scaffold = {
+    type: 'markdown',
+    value: '## 这是标题'
+  };
+  previewSchema = {
+    ...this.scaffold
+  };
+
+  panelTitle = 'MD';
+  panelBodyCreator = (context: BaseEventContext) => {
+    const isUnderField = /\/field\/\w+$/.test(context.path as string);
+    return [
+      getSchemaTpl('tabs', [
+        {
+          title: '常规',
+          body: [getSchemaTpl('markdownBody')]
+        },
+        {
+          title: '外观',
+          body: [getSchemaTpl('className')]
+        },
+        {
+          title: '显隐',
+          body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
+        }
+      ])
+    ];
+  };
+}
+
+registerEditorPlugin(MarkdownPlugin);

package/src/plugin/Nav.tsx

@@ -0,0 +1,182 @@
+import {registerEditorPlugin} from '../manager';
+import {BasePlugin} from '../plugin';
+import {getSchemaTpl} from '../component/schemaTpl';
+
+export class NavPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'nav';
+  $schema = '/schemas/NavSchema.json';
+
+  // 组件名称
+  name = '导航';
+  isBaseComponent = true;
+  description = '用来渲染导航菜单，支持横排和竖排。';
+  docLink = '/amis/zh-CN/components/nav';
+  tags = ['功能'];
+  icon = 'fa fa-map-signs';
+  scaffold = {
+    type: 'nav',
+    stacked: true,
+    links: [
+      {
+        label: '页面1',
+        to: '?id=1'
+      },
+      {
+        label: '页面2',
+        to: '?id=2'
+      }
+    ]
+  };
+  previewSchema = {
+    ...this.scaffold
+  };
+
+  panelTitle = '导航';
+
+  panelDefinitions = {
+    links: {
+      label: '菜单管理',
+      name: 'links',
+      type: 'combo',
+      multiple: true,
+      draggable: true,
+      addButtonText: '新增菜单',
+      multiLine: true,
+      messages: {
+        validateFailed: '菜单中存在配置错误，请仔细检查'
+      },
+      scaffold: {
+        label: '',
+        to: ''
+      },
+      items: [
+        {
+          type: 'input-text',
+          name: 'label',
+          label: '名称',
+          required: true
+        },
+
+        {
+          type: 'input-text',
+          name: 'to',
+          label: '跳转地址',
+          required: true
+        },
+
+        {
+          type: 'icon-picker',
+          name: 'icon',
+          label: '图标',
+          className: 'fix-icon-picker-overflow'
+        },
+
+        {
+          type: 'group',
+          label: '是否高亮',
+          direction: 'vertical',
+          className: 'm-b-none',
+          labelRemark: {
+            trigger: 'click',
+            rootClose: true,
+            className: 'm-l-xs',
+            content: '可以配置该菜单是否要高亮',
+            placement: 'left'
+          },
+          body: [
+            {
+              name: 'active',
+              type: 'radios',
+              inline: true,
+              // pipeIn: (value:any) => typeof value === 'boolean' ? value : '1'
+              options: [
+                {
+                  label: '是',
+                  value: true
+                },
+
+                {
+                  label: '否',
+                  value: false
+                },
+
+                {
+                  label: '表达式',
+                  value: ''
+                }
+              ]
+            },
+
+            {
+              name: 'activeOn',
+              autoComplete: false,
+              visibleOn: 'typeof this.active !== "boolean"',
+              type: 'input-text',
+              placeholder: '留空将自动分析菜单地址',
+              className: 'm-t-n-sm'
+            }
+          ]
+        },
+
+        getSchemaTpl('switch', {
+          label: '包含子菜单',
+          name: 'children',
+          mode: 'inline',
+          className: 'block',
+          pipeIn: (value: any) => !!value,
+          pipeOut: (value: any) => (value ? [{label: '', to: ''}] : undefined),
+          messages: {
+            validateFailed: '子菜单中存在配置错误，请仔细检查'
+          }
+        }),
+
+        {
+          name: 'children',
+          $ref: 'links',
+          visibleOn: 'this.hasOwnProperty("children") && this.children',
+          label: '子菜单管理',
+          addButtonText: '新增子菜单'
+        }
+      ]
+    }
+  };
+  panelBody = [
+    getSchemaTpl('tabs', [
+      {
+        title: '常规',
+        body: [
+          {
+            $ref: 'links',
+            name: 'links'
+          },
+
+          {type: 'divider'},
+
+          getSchemaTpl('api', {
+            name: 'source',
+            label: '获取菜单接口',
+            description: '如果菜单地址希望可以动态设置，请在此填入接口地址'
+          })
+        ]
+      },
+      {
+        title: '外观',
+        body: [
+          getSchemaTpl('switch', {
+            name: 'stacked',
+            label: '是否竖着摆放'
+          }),
+
+          getSchemaTpl('className')
+        ]
+      },
+      {
+        title: '显隐',
+        body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
+      }
+    ])
+  ];
+}
+
+registerEditorPlugin(NavPlugin);

package/src/plugin/Operation.tsx

@@ -0,0 +1,95 @@
+import {Button} from 'amis';
+import React from 'react';
+import {registerEditorPlugin} from '../manager';
+import {
+  BaseEventContext,
+  BasePlugin,
+  BasicSubRenderInfo,
+  RegionConfig,
+  RendererEventContext,
+  SubRendererInfo
+} from '../plugin';
+import {getSchemaTpl} from '../component/schemaTpl';
+
+export class OperationPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'operation';
+  $schema = '/schemas/OperationSchema.json';
+
+  // 组件名称
+  name = '操作栏';
+  isBaseComponent = true;
+  description = '操作栏，用于表格。';
+  tags = ['展示'];
+  icon = '';
+  scaffold = {
+    type: 'operation',
+    label: '操作',
+    buttons: [
+      {
+        label: '按钮',
+        type: 'button'
+      }
+    ]
+  };
+  previewSchema = {
+    type: 'tpl',
+    tpl: '操作栏'
+  };
+
+  regions: Array<RegionConfig> = [
+    {
+      key: 'buttons',
+      label: '按钮集',
+      renderMethod: 'render',
+      insertPosition: 'inner',
+      preferTag: '按钮'
+    }
+  ];
+
+  panelTitle = '操作栏';
+  panelBodyCreator = (context: BaseEventContext) => {
+    return [
+      getSchemaTpl('className', {
+        name: 'innerClassName'
+      }),
+
+      {
+        children: (
+          <Button
+            level="info"
+            size="sm"
+            className="m-b-sm"
+            block
+            onClick={() => {
+              // this.manager.showInsertPanel('buttons', context.id, '按钮');
+              this.manager.showRendererPanel(
+                '按钮',
+                '请从左侧组件面板中点击添加新的按钮'
+              );
+            }}
+          >
+            添加按钮
+          </Button>
+        )
+      }
+    ];
+  };
+
+  buildSubRenderers(
+    context: RendererEventContext,
+    renderers: Array<SubRendererInfo>
+  ): BasicSubRenderInfo | Array<BasicSubRenderInfo> | void {
+    if (
+      context &&
+      context.info &&
+      context.info.renderer &&
+      (context.info.renderer.name === 'table' ||
+        context.info.renderer.name === 'crud')
+    ) {
+      return super.buildSubRenderers.apply(this, arguments);
+    }
+  }
+}
+
+registerEditorPlugin(OperationPlugin);