amis-editor 5.2.0-beta.1 → 5.2.0

package/src/plugin/Form/Item.tsx

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

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

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

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