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

package/src/plugin/DropDownButton.tsx

@@ -0,0 +1,235 @@
+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';
+
+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',
+        actionType: 'dialog',
+        dialog: {
+          title: '系统提示',
+          body: '对你点击了'
+        }
+      },
+
+      {
+        type: 'button',
+        label: '按钮2',
+        actionType: 'dialog',
+        dialog: {
+          title: '系统提示',
+          body: '对你点击了'
+        }
+      }
+    ]
+  };
+  previewSchema = {
+    ...this.scaffold
+  };
+
+  panelTitle = '下拉按钮';
+  panelBodyCreator = (context: BaseEventContext) =>
+    getSchemaTpl('tabs', [
+      {
+        title: '常规',
+        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'
+          },
+          {
+            name: 'trigger',
+            label: '触发方式',
+            type: 'button-group-select',
+            pipeIn: defaultValue('click'),
+            options: [
+              {
+                label: '点击',
+                value: 'click'
+              },
+              {
+                label: '鼠标经过',
+                value: 'hover'
+              }
+            ]
+          },
+          {
+            name: 'closeOnOutside',
+            label: '点击外部关闭',
+            type: 'switch',
+            mode: 'inline',
+            className: 'block',
+            pipeIn: defaultValue(true)
+          },
+          {
+            name: 'closeOnClick',
+            label: '点击内容关闭',
+            type: 'switch',
+            mode: 'inline',
+            className: 'block'
+          },
+          getSchemaTpl('icon'),
+          getSchemaTpl('icon', {name: 'rightIcon', label: '右侧图标'})
+        ]
+      },
+      {
+        title: '外观',
+        body: [
+          getSchemaTpl('size'),
+          {
+            label: '展示样式',
+            type: 'button-group-select',
+            size: 'xs',
+            name: 'level',
+            btnActiveClassName: 'active',
+            clearable: false,
+            options: [
+              {
+                label: '默认',
+                value: 'default',
+                level: 'default'
+              },
+              {
+                label: '无',
+                value: 'link',
+                level: 'link'
+              },
+              {
+                label: '主色',
+                value: 'primary',
+                level: 'primary'
+              },
+              {
+                label: '提示',
+                value: 'info',
+                level: 'info'
+              },
+              {
+                label: '成功',
+                value: 'success',
+                level: 'success'
+              },
+              {
+                label: '警告',
+                value: 'warning',
+                level: 'warning'
+              },
+              {
+                label: '严重',
+                value: 'danger',
+                level: 'danger'
+              }
+            ]
+          },
+          getSchemaTpl('className')
+        ]
+      },
+      {
+        title: '显隐',
+        body: [
+          getSchemaTpl('ref'),
+          getSchemaTpl('disabled'),
+          getSchemaTpl('visible')
+        ]
+      }
+    ]);
+
+  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);

package/src/plugin/Flex.tsx

@@ -0,0 +1,151 @@
+/**
+ * @file Flex 布局
+ */
+import {registerEditorPlugin} from '../manager';
+import {
+  BasePlugin,
+  PluginEvent,
+  RegionConfig,
+  RendererJSONSchemaResolveEventContext
+} from '../plugin';
+import {getSchemaTpl} from '../component/schemaTpl';
+import {EditorNodeType} from '../store/node';
+
+export class FlexPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'flex';
+  $schema = '/schemas/FlexSchema.json';
+  disabledRendererPlugin = true;
+
+  // 组件名称
+  name = 'Flex 布局';
+  isBaseComponent = true;
+  icon = 'fa fa-columns';
+  description = 'flex 布局';
+  docLink = '/amis/zh-CN/components/flex';
+  tags = ['容器'];
+  scaffold = {
+    type: 'flex',
+    items: [
+      {
+        type: 'wrapper',
+        body: '第一列'
+      },
+      {
+        type: 'wrapper',
+        body: '第二列'
+      },
+      {
+        type: 'wrapper',
+        body: '第三列'
+      }
+    ]
+  };
+  previewSchema = {
+    ...this.scaffold
+  };
+
+  panelTitle = 'Flex';
+  panelBody = [
+    getSchemaTpl('tabs', [
+      {
+        title: '常规',
+        body: [
+          {
+            name: 'items',
+            label: '内容集合',
+            type: 'combo',
+            scaffold: {
+              type: 'wrapper',
+              body: '子节点内容'
+            },
+            minLength: 2,
+            multiple: true,
+            // draggable: true,
+            draggableTip: '',
+            items: [
+              {
+                type: 'tpl',
+                tpl:
+                  '<span class="label label-default">子节点${index | plus}</span>'
+              }
+            ]
+          },
+          {
+            name: 'justify',
+            type: 'select',
+            value: 'center',
+            label: '子节点水平分布方式',
+            options: [
+              'start',
+              'flex-start',
+              'center',
+              'end',
+              'flex-end',
+              'space-around',
+              'space-between',
+              'space-evenly'
+            ]
+          },
+          {
+            name: 'alignItems',
+            type: 'select',
+            value: 'center',
+            label: '子节点垂直方向位置',
+            options: [
+              'stretch',
+              'start',
+              'flex-start',
+              'flex-end',
+              'end',
+              'center',
+              'baseline'
+            ]
+          },
+          {
+            name: 'direction',
+            type: 'radios',
+            label: '布局方向',
+            value: 'column',
+            inline: true,
+            options: [
+              {label: '水平', value: 'row'},
+              {label: '垂直', value: 'column'}
+            ]
+          }
+        ]
+      },
+      {
+        title: '外观',
+        body: [getSchemaTpl('className'), getSchemaTpl('style')]
+      },
+      {
+        title: '显隐',
+        body: [getSchemaTpl('visible')]
+      }
+    ])
+  ];
+
+  regions: Array<RegionConfig> = [
+    {
+      key: 'items',
+      label: '子节点集合',
+      // 复写渲染器里面的 render 方法
+      renderMethod: 'render',
+      dndMode: 'position-h'
+    }
+  ];
+
+  afterResolveJsonSchema(
+    event: PluginEvent<RendererJSONSchemaResolveEventContext>
+  ) {
+    const context = event.context;
+    const parent = context.node.parent?.host as EditorNodeType;
+
+    if (parent?.info?.plugin === this) {
+      event.setData('/schemas/FlexColumn.json');
+    }
+  }
+}
+
+registerEditorPlugin(FlexPlugin);

package/src/plugin/Form/ButtonGroupSelect.tsx

@@ -0,0 +1,75 @@
+import {registerEditorPlugin} from '../../manager';
+import {BasePlugin} from '../../plugin';
+import {getSchemaTpl} from '../../component/schemaTpl';
+
+export class ButtonGroupControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'button-group-select';
+  $schema = '/schemas/ButtonGroupControlSchema.json';
+
+  // 组件名称
+  name = '按钮点选';
+  isBaseComponent = true;
+  icon = 'fa fa-object-group';
+  description =
+    '用来展示多个按钮，视觉上会作为一个整体呈现，同时可以作为表单项选项选择器来用。';
+  docLink = '/amis/zh-CN/components/button-group';
+  tags = ['按钮'];
+  scaffold = {
+    type: 'button-group-select',
+    name: 'a',
+    options: [
+      {
+        label: '选项1',
+        value: 'a'
+      },
+      {
+        label: '选项2',
+        value: 'b'
+      }
+    ]
+  };
+  previewSchema: any = {
+    type: 'form',
+    wrapWithPanel: false,
+    mode: 'horizontal',
+    body: {
+      ...this.scaffold,
+      value: 'a',
+      label: '按钮组',
+      description: '按钮组可以当选项用。'
+    }
+  };
+
+  panelTitle = '按钮组';
+  panelBody = [
+    getSchemaTpl('switchDefaultValue', {
+      visibleOn: '!this.defaultCheckAll'
+    }),
+
+    {
+      type: 'button-group-select',
+      name: 'value',
+      label: '默认值',
+      source: '${options}',
+      visibleOn: 'typeof this.value !== "undefined"',
+      multiple: true
+    },
+
+    getSchemaTpl('options'),
+    getSchemaTpl('source'),
+
+    getSchemaTpl('multiple'),
+
+    getSchemaTpl('joinValues', {
+      visibleOn: true
+    }),
+    getSchemaTpl('delimiter', {
+      hiddenOn: 'this.joinValues === false'
+    }),
+    getSchemaTpl('extractValue'),
+    getSchemaTpl('autoFill')
+  ];
+}
+
+registerEditorPlugin(ButtonGroupControlPlugin);