amis-editor 4.2.0-beta.0 → 5.2.0-beta.0

package/src/plugin/DropDownButton.tsx

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

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

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

@@ -1,151 +0,0 @@
-/**
- * @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

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