amis-editor 5.2.0 → 5.2.1-beta.15

package/src/plugin/Form/Item.tsx

@@ -1,326 +0,0 @@
-import {registerEditorPlugin} from '../../manager';
-import {
-  BasePlugin,
-  BaseEventContext,
-  BasicPanelItem,
-  PluginEvent,
-  DragEventContext,
-  ChangeEventContext,
-  ReplaceEventContext,
-  BuildPanelEventContext,
-  ContextMenuEventContext,
-  ContextMenuItem
-} from '../../plugin';
-import {defaultValue, getSchemaTpl} from '../../component/schemaTpl';
-import find from 'lodash/find';
-import {JSONDelete, JSONPipeIn, JSONUpdate} from '../../util';
-
-export class ItemPlugin extends BasePlugin {
-  // panelTitle = '表单项通配';
-  panelTitle = '表单项';
-
-  buildEditorPanel(
-    context: BuildPanelEventContext,
-    panels: Array<BasicPanelItem>
-  ) {
-    const renderer = context.info.renderer;
-    const store = this.manager.store;
-
-    if (context.selections.length) {
-      return;
-    }
-    const plugin = context.info.plugin;
-    // 如果是表单项
-    if (
-      !context.info.hostId &&
-      renderer?.isFormItem &&
-      !plugin?.notRenderFormZone
-    ) {
-      panels.push({
-        key: 'form-item',
-        icon: 'fa fa-desktop',
-        title: this.panelTitle,
-        render: this.manager.makeSchemaFormRender({
-          body: this.panelBodyCreator(context),
-          panelById: store.activeId
-        }),
-        order: -200
-      });
-    }
-  }
-  panelBodyCreator = (context: BaseEventContext) => {
-    const ignoreName = ~['button', 'submit', 'reset'].indexOf(
-      context.schema.type
-    );
-    const notRequiredName = ~[
-      'button-toobar',
-      'container',
-      'fieldSet',
-      'group',
-      'grid',
-      'hbox',
-      'input-group',
-      'panel',
-      'service',
-      'tabs',
-      'table',
-      'elevator',
-      'static'
-    ].indexOf(context.schema.type);
-    const hasReadOnly = ~[
-      'switch',
-      'wizard',
-      'diff-editor',
-      'editor',
-      'input-rating',
-      'input-text',
-      'textarea'
-    ].indexOf(context.schema.type);
-    /** 不支持配置校验属性的组件 */
-    const ignoreValidator = !!~['input-group'].indexOf(context.schema.type);
-    const autoFillApi = context.schema.autoFillApi;
-    const renderer: any = context.info.renderer;
-    return [
-      getSchemaTpl('tabs', [
-        {
-          title: '常规',
-          body: [
-            ignoreName
-              ? null
-              : getSchemaTpl('formItemName', {
-                  required: notRequiredName ? false : true
-                }),
-            renderer.renderLabel !== false ? getSchemaTpl('label') : null,
-            hasReadOnly
-              ? getSchemaTpl('switch', {
-                  name: 'readOnly',
-                  label: '只读模式'
-                })
-              : null,
-            getSchemaTpl('switch', {
-              name: 'disabled',
-              label: '禁用',
-              mode: 'inline',
-              className: 'w-full'
-            }),
-            ignoreValidator ? null : getSchemaTpl('required'),
-            getSchemaTpl('description'),
-            getSchemaTpl('placeholder'),
-            getSchemaTpl('remark'),
-            renderer.renderLabel !== false ? getSchemaTpl('labelRemark') : null,
-            autoFillApi ? getSchemaTpl('autoFillApi') : null
-          ]
-        },
-
-        {
-          title: '外观',
-          body: [
-            getSchemaTpl('formItemMode'),
-            getSchemaTpl('horizontalMode'),
-            getSchemaTpl('horizontal', {
-              label: '',
-              visibleOn:
-                'data.mode == "horizontal" && data.label !== false && data.horizontal'
-            }),
-
-            renderer.sizeMutable !== false
-              ? getSchemaTpl('formItemSize')
-              : null,
-            getSchemaTpl('formItemInline'),
-
-            getSchemaTpl('className'),
-            getSchemaTpl('className', {
-              label: 'Label CSS 类名',
-              name: 'labelClassName'
-            }),
-            getSchemaTpl('className', {
-              label: '控件 CSS 类名',
-              name: 'inputClassName'
-            }),
-            getSchemaTpl('className', {
-              label: '描述 CSS 类名',
-              name: 'descriptionClassName',
-              visibleOn: 'this.description'
-            })
-          ]
-        },
-
-        {
-          title: '显隐',
-          body: [
-            // TODO: 有些表单项没有 disabled
-            getSchemaTpl('disabled'),
-            getSchemaTpl('visible'),
-
-            getSchemaTpl('switch', {
-              name: 'clearValueOnHidden',
-              label: '隐藏时删除表单项值',
-              disabledOn: 'typeof this.visible === "boolean"'
-            })
-          ]
-        },
-        ignoreValidator
-          ? null
-          : {
-              title: '验证',
-              body: [
-                // getSchemaTplByName('ref'),
-                getSchemaTpl('validations'),
-                getSchemaTpl('validationErrors'),
-                getSchemaTpl('validateOnChange'),
-                getSchemaTpl('submitOnChange'),
-                getSchemaTpl('api', {
-                  name: 'validateApi',
-                  label: '校验接口',
-                  description: '单独校验这个表单项的接口'
-                })
-              ]
-            }
-      ])
-    ];
-  };
-
-  onDndAccept(event: PluginEvent<DragEventContext>): false | void {
-    const context = event.context;
-    const store = this.manager.store;
-
-    if (context.sourceType === 'schema') {
-      const nodeInfo = store.getNodeById(context.sourceId);
-
-      if (
-        nodeInfo?.parentRegion === 'body' &&
-        context.targetRegion !== 'body' &&
-        !~['button', 'reset', 'submit'].indexOf(context.data.type)
-      ) {
-        event.preventDefault();
-      }
-    }
-  }
-
-  afterUpdate(event: PluginEvent<ChangeEventContext>) {
-    const context = event.context;
-
-    if (
-      /\$/.test(context.info.renderer.name!) &&
-      context.diff?.some(change => change.path?.join('.') === 'value')
-    ) {
-      const change: any = find(
-        context.diff,
-        change => change.path?.join('.') === 'value'
-      )!;
-      const component = this.manager.store
-        .getNodeById(context.id)
-        ?.getComponent();
-
-      component?.props.onChange(change?.rhs);
-    }
-  }
-
-  beforeReplace(event: PluginEvent<ReplaceEventContext>) {
-    const context = event.context;
-
-    if (
-      context.info.renderer.isFormItem &&
-      context.data &&
-      context.subRenderer &&
-      !~context.subRenderer.tags!.indexOf('表单项') &&
-      ~context.subRenderer.tags!.indexOf('展示')
-    ) {
-      context.data = {
-        ...context.data,
-        type: `static-${context.data.type}`,
-        label: context.data.label || context.schema.label,
-        name: context.data.name || context.schema.name
-      };
-    }
-
-    // 替换字段的时候保留 name
-    if (context.schema) {
-      context.data.name = context.schema.name || context.data.name;
-    }
-  }
-
-  buildEditorContextMenu(
-    {id, schema, region, selections}: ContextMenuEventContext,
-    menus: Array<ContextMenuItem>
-  ) {
-    if (!selections.length || selections.length > 3) {
-      // 单选或者超过3个选中态时直接返回
-      return;
-    }
-
-    const arr = selections.concat();
-    const first = arr.shift()!;
-    const parent = first.node.parent;
-
-    // 不在一个父节点，或者当前有非表单项，则直接跳过
-    if (
-      arr.some(
-        elem => elem.node.parent !== parent || !elem.info.renderer?.isFormItem
-      )
-    ) {
-      // 备注：isFormItem在amis注册渲染器时生成，所有表单类渲染器isFormItem为true
-      return;
-    }
-
-    menus.unshift(
-      {
-        label: '合成一行',
-        icon: 'merge-icon',
-        onSelect: () => {
-          const store = this.manager.store;
-          const arr = selections.concat();
-          const first = arr.shift()!;
-          let schema = store.schema;
-
-          const group = [
-            {
-              ...first.schema
-            }
-          ];
-
-          // 让后面的 JSONPipeIn 去变一个 id
-          // 因为 update 的时候，group 不会变 id
-          // 不能两个 id 一样，这样点选就乱了。
-          delete group[0].$$id;
-
-          arr.forEach(elem => {
-            group.push(elem.node.schema);
-            schema = JSONDelete(schema, elem.id);
-          });
-
-          const curNewGroup = JSONPipeIn({
-            type: 'group',
-            body: group
-          });
-          schema = JSONUpdate(schema, first.id, curNewGroup, true);
-          store.traceableSetSchema(schema);
-          setTimeout(() => {
-            // 合并成一行后自动选中父元素
-            store.setActiveId(first.id);
-          }, 40);
-        }
-      },
-      '|'
-    );
-  }
-
-  // beforeInsert(event: PluginEvent<InsertEventContext>) {
-  //   const context = event.context;
-  //   if (
-  //     context.region === 'controls' &&
-  //     Array.isArray(context.subRenderer?.tags) &&
-  //     !~context.subRenderer!.tags!.indexOf('表单项') &&
-  //     ~context.subRenderer!.tags!.indexOf('展示')
-  //   ) {
-  //     context.data = {
-  //       ...context.data,
-  //       type: `static-${context.data.type}`,
-  //       label: context.data.label || context.subRenderer!.name,
-  //       name: context.data.name || 'var1'
-  //     };
-  //   }
-  // }
-}
-
-registerEditorPlugin(ItemPlugin);

package/src/plugin/Form/ListSelect.tsx

@@ -1,128 +0,0 @@
-import {getSchemaTpl} from '../../component/schemaTpl';
-import {registerEditorPlugin} from '../../manager';
-import {BasePlugin, BaseEventContext} from '../../plugin';
-
-import {formItemControl} from '../../component/control/BaseControl';
-import {RendererAction, RendererEvent} from '../../event-action';
-
-export class ListControlPlugin extends BasePlugin {
-  // 关联渲染器名字
-  rendererName = 'list-select';
-  $schema = '/schemas/ListControlSchema.json';
-
-  order = -430;
-
-  // 组件名称
-  name = '列表选择';
-  isBaseComponent = true;
-  icon = 'fa fa-ellipsis-h';
-  description = `单选或者多选，支持<code>source</code>拉取选项，选项可配置图片，也可以自定义<code>HTML</code>配置`;
-  docLink = '/amis/zh-CN/components/form/list-select';
-  tags = ['表单项'];
-  scaffold = {
-    type: 'list-select',
-    label: '列表',
-    name: 'list',
-    options: [
-      {
-        label: '选项A',
-        value: 'A'
-      },
-
-      {
-        label: '选项B',
-        value: 'B'
-      }
-    ]
-  };
-  previewSchema: any = {
-    type: 'form',
-    className: 'text-left',
-    mode: 'horizontal',
-    wrapWithPanel: false,
-    body: [
-      {
-        ...this.scaffold,
-        value: 'A'
-      }
-    ]
-  };
-
-  notRenderFormZone = true;
-
-  panelTitle = '列表选择';
-
-  // 事件定义
-  events: RendererEvent[] = [
-    {
-      eventName: 'change',
-      eventLabel: '值变化',
-      description: '选中值变化时触发',
-      dataSchema: [
-        {
-          type: 'object',
-          properties: {
-            'event.data.value': {
-              type: 'string',
-              title: '选中值'
-            }
-          }
-        }
-      ]
-    }
-  ];
-
-  // 动作定义
-  actions: RendererAction[] = [
-    {
-      actionType: 'clear',
-      actionLabel: '清空',
-      description: '清除选中值'
-    },
-    {
-      actionType: 'reset',
-      actionLabel: '重置',
-      description: '将值重置为resetValue，若没有配置resetValue，则清空'
-    },
-    {
-      actionType: 'reload',
-      actionLabel: '重新加载',
-      description: '触发组件数据刷新并重新渲染'
-    },
-    {
-      actionType: 'setValue',
-      actionLabel: '赋值',
-      description: '触发组件数据更新'
-    }
-  ];
-
-  panelBodyCreator = (context: BaseEventContext) => {
-    return formItemControl(
-      {
-        common: {
-          replace: true,
-          body: [
-            getSchemaTpl('formItemName', {
-              required: true
-            }),
-            getSchemaTpl('label'),
-            getSchemaTpl('multiple'),
-            getSchemaTpl('extractValue')
-          ]
-        },
-        option: {
-          body: [
-            getSchemaTpl('optionControl', {
-              description: '设置选项后，输入时会下拉这些选项供用户参考。'
-            }),
-            getSchemaTpl('value')
-          ]
-        },
-        status: {}
-      },
-      context
-    );
-  };
-}
-
-registerEditorPlugin(ListControlPlugin);

package/src/plugin/Form/LocationPicker.tsx

@@ -1,57 +0,0 @@
-import {getSchemaTpl} from '../../component/schemaTpl';
-import {registerEditorPlugin} from '../../manager';
-import {BasePlugin} from '../../plugin';
-
-export class LocationControlPlugin extends BasePlugin {
-  // 关联渲染器名字
-  rendererName = 'location-picker';
-  $schema = '/schemas/LocationControlSchema.json';
-
-  // 组件名称
-  name = '地理位置选择';
-  isBaseComponent = true;
-  icon = 'fa fa-location-arrow';
-  description = `地理位置选择`;
-  docLink = '/amis/zh-CN/components/form/location-picker';
-  tags = ['表单项'];
-  scaffold = {
-    type: 'location-picker',
-    name: 'location'
-  };
-
-  previewSchema: any = {
-    type: 'form',
-    className: 'text-left',
-    mode: 'horizontal',
-    wrapWithPanel: false,
-    body: [
-      {
-        ...this.scaffold
-      }
-    ]
-  };
-
-  panelTitle = '地理位置选择';
-  panelBody = [
-    getSchemaTpl('clearable'),
-    {
-      type: 'input-text',
-      name: 'ak',
-      label: '百度地图的 AK',
-      description:
-        '请从<a href="http://lbsyun.baidu.com/" target="_blank">百度地图开放平台</a>获取'
-    },
-    {
-      type: 'select',
-      name: 'coordinatesType',
-      label: '坐标格式',
-      value: 'bd09',
-      options: [
-        {label: '百度坐标', value: 'bd09'},
-        {label: '国测局坐标', value: 'gcj02'}
-      ]
-    }
-  ];
-}
-
-registerEditorPlugin(LocationControlPlugin);

package/src/plugin/Form/MatrixCheckboxes.tsx

@@ -1,136 +0,0 @@
-import {defaultValue, getSchemaTpl} from '../../component/schemaTpl';
-import {registerEditorPlugin} from '../../manager';
-import {BasePlugin} from '../../plugin';
-
-export class MatrixControlPlugin extends BasePlugin {
-  // 关联渲染器名字
-  rendererName = 'matrix-checkboxes';
-  $schema = '/schemas/MatrixControlSchema.json';
-
-  // 组件名称
-  name = '矩阵开关';
-  isBaseComponent = true;
-  icon = 'fa fa-th-large';
-  description = `可配置行单选，列单选，以及全部选项只能单选或者全部选项多选`;
-  docLink = '/amis/zh-CN/components/form/matrix-checkboxes';
-  tags = ['表单项'];
-  scaffold = {
-    type: 'matrix-checkboxes',
-    name: 'matrix',
-    label: '矩阵开关',
-    rowLabel: '行标题说明',
-    columns: [
-      {
-        label: '列1'
-      },
-      {
-        label: '列2'
-      }
-    ],
-    rows: [
-      {
-        label: '行1'
-      },
-      {
-        label: '行2'
-      }
-    ]
-  };
-  previewSchema: any = {
-    type: 'form',
-    className: 'text-left',
-    mode: 'horizontal',
-    wrapWithPanel: false,
-    body: [
-      {
-        ...this.scaffold
-      }
-    ]
-  };
-
-  panelTitle = '矩阵开关';
-  panelBody = [
-    getSchemaTpl('api', {
-      name: 'source',
-      label: '获取矩阵数据接口'
-    }),
-    getSchemaTpl('multiple', {
-      value: true
-    }),
-    {
-      type: 'button-group-select',
-      name: 'singleSelectMode',
-      label: '单选模式',
-      description: '行级、列级或者单个单元单选',
-      size: 'xs',
-      mode: 'inline',
-      className: 'w-full',
-      visibleOn: '!this.multiple',
-      options: [
-        {
-          label: '行级',
-          value: 'row'
-        },
-
-        {
-          label: '列级',
-          value: 'column'
-        },
-
-        {
-          label: '单个单元',
-          value: 'cell'
-        }
-      ],
-      pipeIn: defaultValue('column')
-    },
-    getSchemaTpl('fieldSet', {
-      title: '矩阵配置',
-      body: [
-        {
-          label: '列配置',
-          name: 'columns',
-          type: 'combo',
-          multiple: true,
-          addButtonText: '添加一列',
-          scaffold: {
-            label: '列说明'
-          },
-          items: [
-            {
-              type: 'input-text',
-              name: 'label',
-              placeholder: '列说明'
-            }
-          ]
-        },
-
-        {
-          name: 'rowLabel',
-          label: '行标题文字',
-          type: 'input-text'
-        },
-
-        {
-          label: '行配置',
-          name: 'rows',
-          type: 'combo',
-          multiple: true,
-          scaffold: {
-            label: '行说明'
-          },
-          addButtonText: '添加一行',
-          items: [
-            {
-              type: 'input-text',
-              name: 'label',
-              placeholder: '行说明'
-            }
-          ]
-        }
-      ]
-    })
-  ];
-}
-
-registerEditorPlugin(MatrixControlPlugin);