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

package/src/plugin/Grid.tsx

@@ -1,798 +0,0 @@
-import {Button} from 'amis';
-import React from 'react';
-import {registerEditorPlugin} from '../manager';
-import {
-  BaseEventContext,
-  BasePlugin,
-  ContextMenuEventContext,
-  ContextMenuItem,
-  PluginEvent,
-  ResizeMoveEventContext,
-  RendererJSONSchemaResolveEventContext,
-  VRendererConfig
-} from '../plugin';
-import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
-import {EditorNodeType} from '../store/node';
-import {Schema} from 'amis/lib/types';
-import {VRenderer} from '../component/VRenderer';
-import {RegionWrapper as Region} from '../component/RegionWrapper';
-import {Icon} from '../icons/index';
-import {JSONChangeInArray, JSONPipeIn, repeatArray} from '../util';
-
-export class GridPlugin extends BasePlugin {
-  // 关联渲染器名字
-  rendererName = 'grid';
-  $schema = '/schemas/GridSchema.json';
-
-  // 组件名称
-  name = '分栏';
-  isBaseComponent = true;
-  description = '分栏布局';
-  docLink = '/amis/zh-CN/components/grid';
-  tags = ['容器'];
-  icon = 'fa fa-th';
-
-  /*
-  scaffolds = [
-    {
-      name: '两栏',
-      description: '两栏布局',
-      scaffold: {
-        type: 'grid',
-        columns: [
-          {
-            body: []
-          },
-          {
-            body: []
-          }
-        ]
-      },
-
-      previewSchema: {
-        type: 'grid',
-        columns: [
-          {
-            body: [
-              {
-                type: 'tpl',
-                tpl: '栏',
-                inline: false,
-                className: 'bg-light wrapper'
-              }
-            ]
-          },
-          {
-            body: [
-              {
-                type: 'tpl',
-                tpl: '栏',
-                className: 'bg-light wrapper',
-                inline: false
-              }
-            ]
-          }
-        ]
-      }
-    },
-
-    {
-      name: '三栏',
-      description: '三栏布局',
-      scaffold: {
-        type: 'grid',
-        columns: [
-          {
-            body: []
-          },
-          {
-            body: []
-          },
-          {
-            body: []
-          }
-        ]
-      },
-
-      previewSchema: {
-        type: 'grid',
-        columns: [
-          {
-            body: [
-              {
-                type: 'tpl',
-                tpl: '栏',
-                inline: false,
-                className: 'bg-light wrapper'
-              }
-            ]
-          },
-          {
-            body: [
-              {
-                type: 'tpl',
-                tpl: '栏',
-                className: 'bg-light wrapper',
-                inline: false
-              }
-            ]
-          },
-          {
-            body: [
-              {
-                type: 'tpl',
-                tpl: '栏',
-                className: 'bg-light wrapper',
-                inline: false
-              }
-            ]
-          }
-        ]
-      }
-    }
-  ];
-  */
-
-  // 仅保留一个分栏布局
-  scaffold = {
-    type: 'grid',
-    columns: [
-      {
-        body: []
-      },
-      {
-        body: []
-      }
-    ]
-  };
-
-  previewSchema = {
-    type: 'grid',
-    columns: [
-      {
-        body: [
-          {
-            type: 'tpl',
-            tpl: '栏',
-            inline: false,
-            className: 'bg-light wrapper'
-          }
-        ]
-      },
-      {
-        body: [
-          {
-            type: 'tpl',
-            tpl: '栏',
-            className: 'bg-light wrapper',
-            inline: false
-          }
-        ]
-      }
-    ]
-  };
-
-  panelTitle = '分栏布局';
-  panelWithOutOthers = false;
-  panelBodyCreator(context: BaseEventContext) {
-    const asSecondFactor = context.secondFactor;
-    return [
-      getSchemaTpl('fieldSet', {
-        title: '插入',
-        collapsable: false,
-        body: [
-          asSecondFactor
-            ? null
-            : {
-                type: 'wrapper',
-                size: 'none',
-                className: 'grid grid-cols-2 gap-4 mb-4',
-                body: [
-                  {
-                    children: (
-                      <Button
-                        size="sm"
-                        onClick={() => this.insertRowAfter(context.node)}
-                      >
-                        <Icon className="icon" icon="arrow-to-bottom" />
-                        <span>下方插入新行</span>
-                      </Button>
-                    )
-                  },
-                  {
-                    children: (
-                      <Button
-                        size="sm"
-                        onClick={() => this.insertRowBefore(context.node)}
-                      >
-                        <Icon className="icon" icon="top-arrow-to-top" />
-                        <span>上方插入新行</span>
-                      </Button>
-                    )
-                  }
-                ]
-              },
-
-          {
-            label: '列数',
-            name: 'columns',
-            type: 'select',
-            pipeIn: (value: any) =>
-              Array.isArray(value) ? value.length : undefined,
-            pipeOut: (value: any, origin: any) => {
-              if (Array.isArray(origin)) {
-                if (origin.length > value) {
-                  origin = origin.concat();
-                  origin.splice(value - 1, origin.length - value);
-                } else {
-                  origin = origin.concat(
-                    repeatArray(
-                      {
-                        body: []
-                      },
-                      value - origin.length
-                    )
-                  );
-                }
-              }
-
-              return origin;
-            },
-            options: repeatArray(null, 12).map((_, index) => ({
-              label: `${index + 1}`,
-              value: index + 1
-            }))
-          },
-
-          {
-            type: 'button-group-select',
-            name: 'gap',
-            label: '列间距',
-            size: 'sm',
-            clearable: true,
-            tiled: true,
-            options: [
-              {
-                label: '无',
-                value: 'none'
-              },
-              {
-                label: '极小',
-                value: 'xs'
-              },
-              {
-                label: '小',
-                value: 'sm'
-              },
-              {
-                label: '正常',
-                value: 'base'
-              },
-              {
-                label: '中',
-                value: 'md'
-              },
-              {
-                label: '大',
-                value: 'lg'
-              }
-            ]
-          }
-        ].filter(item => item)
-      }),
-
-      getSchemaTpl('fieldSet', {
-        title: '对齐',
-        collapsable: false,
-        body: [
-          {
-            type: 'button-group-select',
-            name: 'align',
-            size: 'sm',
-            label: '水平对齐',
-            tiled: true,
-            pipeIn: defaultValue('left'),
-            options: [
-              {
-                value: 'left',
-                label: '左对齐'
-              },
-              {
-                value: 'center',
-                label: '中间对齐'
-              },
-              {
-                value: 'right',
-                label: '右对齐'
-              },
-              {
-                value: 'between',
-                label: '两端对齐'
-              }
-            ]
-          },
-          {
-            type: 'button-group-select',
-            name: 'valign',
-            size: 'sm',
-            label: '垂直对齐',
-            tiled: true,
-            pipeIn: defaultValue('top'),
-            options: [
-              {
-                value: 'top',
-                label: '顶部对齐'
-              },
-              {
-                value: 'middle',
-                label: '中间对齐'
-              },
-              {
-                value: 'bottom',
-                label: '底部对齐'
-              },
-              {
-                value: 'between',
-                label: '两端对齐'
-              }
-            ]
-          }
-        ]
-      }),
-
-      this.panelWithOutOthers
-        ? null
-        : getSchemaTpl('fieldSet', {
-            title: '其他',
-            collapsable: true,
-            body: [
-              getSchemaTpl('className'),
-              getSchemaTpl('subFormItemMode'),
-              getSchemaTpl('subFormHorizontalMode'),
-              getSchemaTpl('subFormHorizontal')
-            ]
-          })
-    ].filter(item => item);
-  }
-
-  vRendererConfig: VRendererConfig = {
-    regions: {
-      body: {
-        key: 'body',
-        label: '内容区',
-        placeholder: '栏',
-        wrapperResolve: (dom: HTMLElement) => dom
-      }
-    },
-    panelTitle: '栏',
-    panelBodyCreator: (context: BaseEventContext) => {
-      const host = context.node.host;
-
-      return [
-        getSchemaTpl('fieldSet', {
-          title: '插入',
-          collapsable: false,
-          body: [
-            {
-              type: 'wrapper',
-              size: 'none',
-              className: 'grid grid-cols-2 gap-4',
-              body: [
-                host.isSecondFactor
-                  ? null
-                  : {
-                      children: (
-                        <Button
-                          size="sm"
-                          onClick={() => this.insertRowAfter(context.node.host)}
-                        >
-                          <Icon className="icon" icon="arrow-to-bottom" />
-                          <span>下方插入新行</span>
-                        </Button>
-                      )
-                    },
-                host.isSecondFactor
-                  ? null
-                  : {
-                      children: (
-                        <Button
-                          size="sm"
-                          onClick={() =>
-                            this.insertRowBefore(context.node.host)
-                          }
-                        >
-                          <Icon className="icon" icon="top-arrow-to-top" />
-                          <span>上方插入新行</span>
-                        </Button>
-                      )
-                    },
-                {
-                  children: (
-                    <Button
-                      size="sm"
-                      onClick={() => this.insertColumnBefore(context)}
-                    >
-                      <Icon className="icon" icon="left-arrow-to-left" />
-                      <span>左侧插入新列</span>
-                    </Button>
-                  )
-                },
-                {
-                  children: (
-                    <Button
-                      size="sm"
-                      onClick={() => this.insertColumnAfter(context)}
-                    >
-                      <Icon className="icon" icon="arrow-to-right" />
-                      <span>右侧插入新列</span>
-                    </Button>
-                  )
-                }
-              ].filter(item => item)
-            }
-          ]
-        }),
-        getSchemaTpl('fieldSet', {
-          title: '宽度设置',
-          collapsable: false,
-          body: [
-            {
-              type: 'button-group-select',
-              name: 'md',
-              size: 'sm',
-              label: false,
-              pipeIn: (value: any) =>
-                typeof value === 'number' ? 'manual' : value || '',
-              pipeOut: (value: any) => (value === 'manual' ? 1 : value),
-              tiled: true,
-              options: [
-                {
-                  value: '',
-                  label: '适配宽度'
-                },
-                {
-                  value: 'auto',
-                  label: '适配内容'
-                },
-                {
-                  value: 'manual',
-                  label: '手动'
-                }
-              ]
-            },
-
-            {
-              visibleOn: 'typeof this.md === "number"',
-              label: '宽度占比',
-              type: 'input-range',
-              name: 'md',
-              min: 1,
-              max: 12,
-              step: 1
-            }
-          ]
-        }),
-
-        getSchemaTpl('fieldSet', {
-          title: '垂直对齐',
-          collapsable: false,
-          body: [
-            {
-              type: 'button-group-select',
-              name: 'valign',
-              size: 'sm',
-              label: false,
-              tiled: true,
-              clearable: true,
-              options: [
-                {
-                  value: 'top',
-                  label: '顶部对齐'
-                },
-                {
-                  value: 'middle',
-                  label: '中间对齐'
-                },
-                {
-                  value: 'bottom',
-                  label: '底部对齐'
-                },
-                {
-                  value: 'between',
-                  label: '两端对齐'
-                }
-              ]
-            }
-          ]
-        }),
-
-        this.panelWithOutOthers
-          ? null
-          : getSchemaTpl('fieldSet', {
-              title: 'CSS 设置',
-              body: [
-                getSchemaTpl('className', {
-                  label: '栏 CSS 类名',
-                  name: 'columnClassName'
-                })
-              ]
-            })
-      ].filter(item => item);
-    }
-  };
-
-  vWrapperResolve = (dom: HTMLElement) => dom;
-  overrides = {
-    renderColumn: function (
-      this: any,
-      node: Schema,
-      index: number,
-      length: number
-    ) {
-      let dom = this.super(node, index, length);
-      const info = this.props.$$editor;
-
-      if (info && node.$$id) {
-        const plugin: GridPlugin = info.plugin as any;
-        const region = plugin.vRendererConfig?.regions?.body;
-        if (!region) {
-          return dom;
-        }
-
-        return (
-          <VRenderer
-            key={`${node.$$id}-${index}`}
-            plugin={info.plugin}
-            renderer={info.renderer}
-            $schema="/schemas/GridColumn.json"
-            hostId={info.id}
-            memberIndex={index}
-            name={`第${index + 1}栏`}
-            id={node.$$id}
-            draggable={false}
-            schemaPath={`${info.schemaPath}/grid/${index}`}
-            wrapperResolve={plugin.vWrapperResolve}
-            path={`${this.props.$path}/${index}`} // 好像没啥用
-            data={this.props.data} // 好像没啥用
-            widthMutable
-          >
-            {region ? (
-              <Region
-                key={region.key}
-                preferTag={region.preferTag}
-                name={region.key}
-                label={region.label}
-                regionConfig={region}
-                placeholder={region.placeholder}
-                editorStore={plugin.manager.store}
-                manager={plugin.manager}
-                children={dom}
-                wrapperResolve={region.wrapperResolve}
-                rendererName={info.renderer.name}
-              />
-            ) : (
-              dom
-            )}
-          </VRenderer>
-        );
-      }
-      return dom;
-    }
-  };
-
-  afterResolveJsonSchema(
-    event: PluginEvent<RendererJSONSchemaResolveEventContext>
-  ) {
-    const context = event.context;
-    const parent = context.node.parent?.host as EditorNodeType;
-
-    if (parent?.info?.plugin === this) {
-      event.setData('/schemas/GridColumn.json');
-    }
-  }
-
-  buildEditorContextMenu(
-    context: ContextMenuEventContext,
-    menus: Array<ContextMenuItem>
-  ) {
-    if (context.selections.length || context.info?.plugin !== this) {
-      return;
-    }
-
-    if (context.node.isVitualRenderer) {
-      menus.push('|');
-
-      menus.push({
-        label: '左侧插入一栏',
-        onSelect: () => this.insertColumnBefore(context)
-      });
-
-      menus.push({
-        label: '右侧插入一栏',
-        onSelect: () => this.insertColumnAfter(context)
-      });
-
-      menus.push('|');
-
-      menus.push({
-        label: '上方插入一行',
-        onSelect: () => this.insertRowBefore(context.node.host)
-      });
-
-      menus.push({
-        label: '下方插入一行',
-        onSelect: () => this.insertRowAfter(context.node.host)
-      });
-    } else {
-      menus.push('|');
-
-      menus.push({
-        label: '上方插入一行',
-        onSelect: () => this.insertRowBefore(context.node)
-      });
-
-      menus.push({
-        label: '下方插入一行',
-        onSelect: () => this.insertRowAfter(context.node)
-      });
-    }
-  }
-
-  onWidthChangeStart(
-    event: PluginEvent<
-      ResizeMoveEventContext,
-      {
-        onMove(e: MouseEvent): void;
-        onEnd(e: MouseEvent): void;
-      }
-    >
-  ) {
-    const context = event.context;
-    const node = context.node;
-    if (node.info?.plugin !== this) {
-      return;
-    }
-    const host = node.host;
-    if (!host || host.info?.plugin !== this) {
-      return;
-    }
-
-    const dom = context.dom;
-    const parent = dom.parentElement as HTMLElement;
-    if (!parent) {
-      return;
-    }
-    const resizer = context.resizer;
-    const frameRect = parent.getBoundingClientRect();
-    let columns = host.schema.columns;
-    const index = node.index;
-    let finalMd = columns[index].md;
-    const rect = dom.getBoundingClientRect();
-
-    event.setData({
-      onMove: (e: MouseEvent) => {
-        const width = e.pageX - rect.left;
-        const md = (finalMd = Math.max(
-          1,
-          Math.min(12, Math.round((12 * width) / frameRect.width))
-        ));
-        columns = columns.concat();
-        columns[index] = {
-          ...columns[index],
-          md
-        };
-        resizer.setAttribute('data-value', `${md}`);
-
-        host.updateState({
-          columns
-        });
-        requestAnimationFrame(() => {
-          node.calculateHighlightBox();
-        });
-      },
-      onEnd: () => {
-        host.updateState({}, true);
-        resizer.removeAttribute('data-value');
-        node.updateSchema({
-          md: finalMd
-        });
-        requestAnimationFrame(() => {
-          node.calculateHighlightBox();
-        });
-      }
-    });
-  }
-
-  insertRowAfter(node: EditorNodeType) {
-    if (node.info?.plugin !== this) {
-      return;
-    }
-    const store = this.manager.store;
-    const schema = store.schema;
-    const id = node.id;
-    store.traceableSetSchema(
-      JSONChangeInArray(schema, id, (arr: any[], node: any, index: number) => {
-        arr.splice(
-          index + 1,
-          0,
-          JSONPipeIn({
-            type: this.rendererName || 'grid',
-            align: node.align,
-            valign: node.valign,
-            columns: node.columns.map((column: any) => ({
-              body: [],
-              md: column?.md
-            }))
-          })
-        );
-      })
-    );
-  }
-  insertRowBefore(node: EditorNodeType) {
-    if (node.info?.plugin !== this) {
-      return;
-    }
-    const store = this.manager.store;
-    const schema = store.schema;
-    const id = node.id;
-    store.traceableSetSchema(
-      JSONChangeInArray(schema, id, (arr: any[], node: any, index: number) => {
-        arr.splice(
-          index,
-          0,
-          JSONPipeIn({
-            type: this.rendererName || 'grid',
-            align: node.align,
-            valign: node.valign,
-            columns: node.columns.map((column: any) => ({
-              body: [],
-              md: column?.md
-            }))
-          })
-        );
-      })
-    );
-  }
-  insertColumnBefore(context: BaseEventContext) {
-    const node = context.node;
-    if (node.info?.plugin !== this) {
-      return;
-    }
-    const store = this.manager.store;
-    const id = context.id;
-    const schema = store.schema;
-    store.traceableSetSchema(
-      JSONChangeInArray(schema, id, (arr: any[], node: any, index: number) => {
-        arr.splice(
-          index,
-          0,
-          JSONPipeIn({
-            body: []
-          })
-        );
-      })
-    );
-  }
-  insertColumnAfter(context: BaseEventContext) {
-    const node = context.node;
-    if (node.info?.plugin !== this) {
-      return;
-    }
-    const store = this.manager.store;
-    const schema = store.schema;
-    const id = context.id;
-    store.traceableSetSchema(
-      JSONChangeInArray(schema, id, (arr: any[], node: any, index: number) => {
-        arr.splice(
-          index + 1,
-          0,
-          JSONPipeIn({
-            body: []
-          })
-        );
-      })
-    );
-  }
-}
-
-registerEditorPlugin(GridPlugin);