amis-editor 5.2.0-beta.1 → 5.2.0

package/src/plugin/Drawer.tsx

@@ -0,0 +1,244 @@
+import {registerEditorPlugin} from '../manager';
+import {BaseEventContext, BasePlugin, RegionConfig, RendererInfo} from '../plugin';
+import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
+import {getEventControlConfig, noop} from '../util';
+import {InlineModal} from './Dialog';
+
+export class DrawerPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'drawer';
+  $schema = '/schemas/DrawerSchema.json';
+
+  // 组件名称
+  name = '抽屉式弹框';
+  isBaseComponent = true;
+  wrapperProps = {
+    wrapperComponent: InlineModal,
+    onClose: noop,
+    resizable: false,
+    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'
+          },
+
+          // {
+          //   children: (
+          //     <Button
+          //       size="sm"
+          //       className="m-b-sm"
+          //       level="info"
+          //       block
+          //       onClick={() => this.manager.showInsertPanel('body')}
+          //     >
+          //       新增内容
+          //     </Button>
+          //   )
+          // },
+
+          {
+            type: 'divider'
+          },
+
+          {
+            label: '位置',
+            type: 'button-group-select',
+            name: 'position',
+            value: 'right',
+            size: 'sm',
+            mode: 'inline',
+            className: 'block',
+            options: [
+              {
+                label: '左',
+                value: 'left'
+              },
+              {
+                label: '上',
+                value: 'top'
+              },
+              {
+                label: '右',
+                value: 'right'
+              },
+              {
+                label: '下',
+                value: 'bottom'
+              }
+            ],
+            description: '定义弹框从什么位置呼出'
+          },
+
+          getSchemaTpl('switch', {
+            label: '数据映射',
+            name: 'data',
+            className: '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>'
+          },
+
+          getSchemaTpl('switch', {
+            name: 'closeOnOutside',
+            label: '点击外部关闭弹框'
+          }),
+
+          getSchemaTpl('switch', {
+            label: '按 Esc 可关闭',
+            name: 'closeOnEsc'
+          })
+        ]
+      },
+      {
+        title: '外观',
+        body: [
+          {
+            label: '尺寸',
+            type: 'button-group-select',
+            name: 'size',
+            size: 'sm',
+            mode: 'inline',
+            className: 'block',
+            options: [
+              {
+                label: '超小',
+                value: 'xs'
+              },
+              {
+                label: '小',
+                value: 'sm'
+              },
+              {
+                label: '中',
+                value: 'md'
+              },
+              {
+                label: '大',
+                value: 'lg'
+              },
+              {
+                label: '超大',
+                value: 'xl'
+              }
+            ]
+          },
+
+          getSchemaTpl('switch', {
+            name: 'overlay',
+            label: '是否显示蒙层',
+            pipeIn: defaultValue(true)
+          }),
+
+          getSchemaTpl('switch', {
+            name: 'resizable',
+            label: '可拉拽',
+            description: '定义弹框是否可拉拽调整大小',
+            pipeIn: defaultValue(false)
+          }),
+
+          getSchemaTpl('className'),
+          getSchemaTpl('className', {
+            label: 'bodyClassName 类名',
+            name: 'bodyClassName'
+          })
+        ]
+      },
+      {
+        title: '事件',
+        className: 'p-none',
+        body: [
+          getSchemaTpl('eventControl', {
+            name: 'onEvent',
+            ...getEventControlConfig(this.manager, context)
+          })
+        ]
+      }
+    ])
+  };
+
+  buildSubRenderers() {}
+}
+
+registerEditorPlugin(DrawerPlugin);

package/src/plugin/DropDownButton.tsx

@@ -0,0 +1,251 @@
+import {Button} from 'amis';
+import React from 'react';
+import {registerEditorPlugin} from '../manager';
+import {
+  BaseEventContext,
+  BasePlugin,
+  BasicToolbarItem,
+  ContextMenuEventContext,
+  ContextMenuItem
+} from '../plugin';
+import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
+import {diff} from '../util';
+import {BUTTON_DEFAULT_ACTION, formItemControl} from '../component/control/BaseControl';
+
+export class DropDownButtonPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'dropdown-button';
+  $schema = '/schemas/DropdownButtonSchema.json';
+
+  // 组件名称
+  name = '下拉按钮';
+  isBaseComponent = true;
+  description = '下拉按钮，更多的按钮通过点击后展示开来。';
+  tags = ['按钮'];
+  icon = 'fa fa-chevron-down';
+  docLink = '/amis/zh-CN/components/dropdown-button';
+  scaffold = {
+    type: 'dropdown-button',
+    label: '下拉按钮',
+    buttons: [
+      {
+        type: 'button',
+        label: '按钮1',
+        ...BUTTON_DEFAULT_ACTION
+      },
+
+      {
+        type: 'button',
+        label: '按钮2',
+        ...BUTTON_DEFAULT_ACTION
+      }
+    ]
+  };
+  previewSchema = {
+    ...this.scaffold
+  };
+
+  panelTitle = '下拉按钮';
+
+  panelBodyCreator = (context: BaseEventContext) => {
+    return formItemControl({
+      common: {
+        replace: true,
+        body: [
+          {
+            children: (
+              <Button
+                level="info"
+                size="sm"
+                className="m-b-sm"
+                block
+                onClick={this.editDetail.bind(this, context.id)}
+              >
+                配置下拉按钮集合
+              </Button>
+            )
+          },
+          {
+            label: '名称',
+            type: 'input-text',
+            name: 'label'
+          },
+          {
+            type: 'button-group-select',
+            name: 'trigger',
+            label: '触发方式',
+            size: 'sm',
+            options: [
+              {
+                label: '点击',
+                value: 'click'
+              },
+              {
+                label: '鼠标经过',
+                value: 'hover'
+              }
+            ],
+            pipeIn: defaultValue('click')
+          },
+
+          getSchemaTpl('switch', {
+            name: 'closeOnOutside',
+            label: '点击外部关闭',
+            pipeIn: defaultValue(true)
+          }),
+
+          getSchemaTpl('switch', {
+            name: 'closeOnClick',
+            label: '点击内容关闭'
+          })
+        ]
+      },
+      status: {
+        replace: true,
+        body: [
+          // getSchemaTpl('ref'),
+          getSchemaTpl('disabled'),
+          getSchemaTpl('visible')
+        ]
+      },
+      validation: {
+        hidden: true
+      },
+      style: {
+        replace: true,
+        body: [
+          getSchemaTpl('size', {
+            pipeIn: defaultValue('md')
+          }),
+
+          getSchemaTpl('switch', {
+            name: 'block',
+            label: '块状显示'
+          }),
+
+          getSchemaTpl('buttonLevel', {
+            label: '展示样式',
+            name: 'level'
+          }),
+
+          {
+            type: 'button-group-select',
+            name: 'align',
+            label: '菜单对齐方式',
+            size: 'sm',
+            options: [
+              {
+                label: '左对齐',
+                value: 'left'
+              },
+              {
+                label: '右对齐',
+                value: 'right'
+              }
+            ],
+            pipeIn: defaultValue('left')
+          },
+
+          getSchemaTpl('switch', {
+            label: '只显示 icon',
+            name: 'iconOnly'
+          }),
+
+          getSchemaTpl('switch', {
+            label: '默认是否打开',
+            name: 'defaultIsOpened'
+          }),
+
+          getSchemaTpl('switch', {
+            label: '隐藏下拉图标',
+            name: 'hideCaret'
+          }),
+
+          getSchemaTpl('icon'),
+          getSchemaTpl('icon', {
+            name: 'rightIcon',
+            label: '右侧图标'
+          }),
+
+          getSchemaTpl('className', {
+            name: 'className',
+            label: '外层 CSS 类名'
+          }),
+
+          getSchemaTpl('className', {
+            name: 'btnClassName',
+            label: '按钮 CSS 类名'
+          }),
+
+          getSchemaTpl('className', {
+            name: 'menuClassName',
+            label: '下拉菜单 CSS 类名'
+          })
+        ]
+      },
+      event: {
+        hidden: false
+      }
+    }, context);
+  }
+
+  buildEditorToolbar(
+    {id, info}: BaseEventContext,
+    toolbars: Array<BasicToolbarItem>
+  ) {
+    if (info.renderer.name === 'dropdown-button') {
+      toolbars.push({
+        icon: 'fa fa-expand',
+        order: 100,
+        tooltip: '配置下拉按钮集合',
+        onClick: this.editDetail.bind(this, id)
+      });
+    }
+  }
+
+  editDetail(id: string) {
+    const manager = this.manager;
+    const store = manager.store;
+    const node = store.getNodeById(id);
+    const value = store.getValueOf(id);
+
+    node &&
+      value &&
+      this.manager.openSubEditor({
+        title: '配置下拉按钮集合',
+        value: value.buttons,
+        slot: {
+          type: 'button-group',
+          buttons: '$$',
+          block: true
+        },
+        onChange: newValue => {
+          newValue = {...value, buttons: newValue};
+          manager.panelChangeValue(newValue, diff(value, newValue));
+        }
+      });
+  }
+
+  buildEditorContextMenu(
+    {id, schema, region, info, selections}: ContextMenuEventContext,
+    menus: Array<ContextMenuItem>
+  ) {
+    if (selections.length || info?.plugin !== this) {
+      return;
+    }
+    if (info.renderer.name === 'dropdown-button') {
+      menus.push('|', {
+        label: '配置下拉按钮集合',
+        onSelect: this.editDetail.bind(this, id)
+      });
+    }
+  }
+
+  filterProps(props: any) {
+    // trigger 为 hover 会影响编辑体验。
+    props.trigger = 'click';
+    return props;
+  }
+}
+
+registerEditorPlugin(DropDownButtonPlugin);

package/src/plugin/Each.tsx

@@ -0,0 +1,150 @@
+import {Button} from 'amis';
+import React from 'react';
+import {registerEditorPlugin} from '../manager';
+import {
+  BaseEventContext,
+  BasePlugin,
+  BasicToolbarItem,
+  ContextMenuEventContext,
+  ContextMenuItem
+} from '../plugin';
+import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
+import {diff, JSONPipeOut} from '../util';
+
+export class EachPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'each';
+  $schema = '/schemas/EachSchema.json';
+
+  // 组件名称
+  name = '循环 Each';
+  isBaseComponent = true;
+  description = '功能渲染器，可以基于现有变量循环输出渲染器。';
+  tags = ['功能'];
+  icon = 'fa fa-repeat';
+  scaffold = {
+    type: 'each',
+    name: 'arr',
+    items: {
+      type: 'tpl',
+      tpl: '<%= data.index + 1 %>. 内容：<%= data.item %>',
+      inline: false
+    }
+  };
+  previewSchema = {
+    ...this.scaffold,
+    value: ['a', 'b', 'c']
+  };
+
+  panelTitle = '循环';
+  panelBodyCreator = (context: BaseEventContext) => {
+    return [
+      {
+        type: 'input-text',
+        name: 'name',
+        label: '关联字段',
+        placeholder: 'varname',
+        description:
+          '如果所在容器有下发 value 则不需要配置，如果没有请配置变量名，支持多层级如：a.b，表示关联a对象下的b属性。目标变量可以是数组，也可以是对象。'
+      },
+
+      {
+        children: (
+          <Button
+            size="sm"
+            level="danger"
+            className="m-b"
+            block
+            onClick={this.editDetail.bind(this, context.id)}
+          >
+            配置成员渲染器
+          </Button>
+        )
+      },
+
+      {
+        name: 'placeholder',
+        type: 'input-text',
+        label: '占位符',
+        pipeIn: defaultValue('暂无内容'),
+        description:
+          '当没有关联变量，或者目标变量不是数组或者对象时显示此占位信息'
+      },
+
+      getSchemaTpl('className')
+    ];
+  };
+
+  filterProps(props: any) {
+    props = JSONPipeOut(props);
+
+    // 至少显示一个成员，否则啥都不显示。
+    if (!props.value) {
+      props.value = [
+        {
+          item: 'mocked data'
+        }
+      ];
+    }
+
+    return props;
+  }
+
+  buildEditorToolbar(
+    {id, info}: BaseEventContext,
+    toolbars: Array<BasicToolbarItem>
+  ) {
+    if (info.renderer.name === 'each') {
+      toolbars.push({
+        icon: 'fa fa-expand',
+        order: 100,
+        tooltip: '配置成员渲染器',
+        onClick: this.editDetail.bind(this, id)
+      });
+    }
+  }
+
+  buildEditorContextMenu(
+    {id, schema, region, info, selections}: ContextMenuEventContext,
+    menus: Array<ContextMenuItem>
+  ) {
+    if (selections.length || info?.plugin !== this) {
+      return;
+    }
+    if (info.renderer.name === 'each') {
+      menus.push('|', {
+        label: '配置成员渲染器',
+        onSelect: this.editDetail.bind(this, id)
+      });
+    }
+  }
+
+  editDetail(id: string) {
+    const manager = this.manager;
+    const store = manager.store;
+    const node = store.getNodeById(id);
+    const value = store.getValueOf(id);
+
+    node &&
+      value &&
+      this.manager.openSubEditor({
+        title: '配置成员渲染器',
+        value: value.items,
+        slot: {
+          type: 'container',
+          body: '$$'
+        },
+        typeMutable: true,
+        onChange: newValue => {
+          newValue = {...value, items: newValue};
+          manager.panelChangeValue(newValue, diff(value, newValue));
+        },
+        data: {
+          item: 'mocked data',
+          index: 0
+        }
+      });
+  }
+}
+
+registerEditorPlugin(EachPlugin);

package/src/plugin/ErrorRenderer.tsx

@@ -0,0 +1,15 @@
+import {registerEditorPlugin} from '../manager';
+import {BasePlugin} from '../plugin';
+
+export class ErrorRendererPlugin extends BasePlugin {
+  order = -9999;
+
+  // 关联渲染器名字
+  rendererName = 'error';
+
+  // 组件名称
+  name = 'Error';
+  isBaseComponent = true;
+}
+
+registerEditorPlugin(ErrorRendererPlugin);