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

package/src/plugin/Form/InputTime.tsx

@@ -1,85 +0,0 @@
-import {relativeValueRe} from 'amis';
-import {defaultValue, getSchemaTpl} from '../../component/schemaTpl';
-import {registerEditorPlugin} from '../../manager';
-import {BasePlugin} from '../../plugin';
-
-export class TimeControlPlugin extends BasePlugin {
-  // 关联渲染器名字
-  rendererName = 'input-time';
-  $schema = '/schemas/TimeControlSchema.json';
-
-  // 组件名称
-  name = '时间框';
-  isBaseComponent = true;
-  icon = 'fa fa-clock-o';
-  description = `时分秒输入`;
-  docLink = '/amis/zh-CN/components/form/input-time';
-  tags = ['表单项'];
-  scaffold = {
-    type: 'input-time',
-    label: '时间',
-    name: 'time'
-  };
-  previewSchema: any = {
-    type: 'form',
-    className: 'text-left',
-    mode: 'horizontal',
-    wrapWithPanel: false,
-    body: {
-      ...this.scaffold
-    }
-  };
-
-  panelTitle = '时间框';
-  panelBody = [
-    getSchemaTpl('switchDefaultValue'),
-
-    {
-      type: 'input-text',
-      name: 'value',
-      label: '默认值',
-      visibleOn: 'typeof this.value !== "undefined"',
-      placeholder: '请输入相对值',
-      description: '支持 <code>now、+1day、-2weeks</code>这种相对值用法'
-    },
-    {
-      type: 'fieldSet',
-      title: '使用固定值',
-      collapsed: true,
-      collapsable: true,
-      className: 'fieldset',
-      visibleOn: 'typeof this.value !== "undefined"',
-      body: [
-        {
-          type: 'input-time',
-          name: 'value',
-          pipeIn: (value: any) =>
-            relativeValueRe.test(value) || ~['now', 'today'].indexOf(value)
-              ? ''
-              : value
-        }
-      ]
-    },
-    {
-      type: 'input-text',
-      name: 'timeFormat',
-      label: '值格式',
-      description:
-        '请参考 <a href="https://momentjs.com/" target="_blank">moment</a> 中的格式用法。',
-      pipeIn: defaultValue('HH:mm')
-    },
-    getSchemaTpl('clearable', {
-      pipeIn: defaultValue(true)
-    }),
-    {
-      type: 'input-text',
-      name: 'inputFormat',
-      label: '显示格式',
-      description:
-        '请参考 <a href="https://momentjs.com/" target="_blank">moment</a> 中的格式用法。',
-      pipeIn: defaultValue('HH:mm')
-    }
-  ];
-}
-
-registerEditorPlugin(TimeControlPlugin);

package/src/plugin/Form/InputTree.tsx

@@ -1,229 +0,0 @@
-import {defaultValue, getSchemaTpl} from '../../component/schemaTpl';
-import {registerEditorPlugin} from '../../manager';
-import {BasePlugin} from '../../plugin';
-
-export class TreeControlPlugin extends BasePlugin {
-  // 关联渲染器名字
-  rendererName = 'input-tree';
-  $schema = '/schemas/TreeControlSchema.json';
-
-  // 组件名称
-  name = '树选择框';
-  isBaseComponent = true;
-  icon = 'fa fa-list-alt';
-  description = `树型结构来选择，可通过<code>options</code>来配置选项，也可通过<code>source</code>拉取选项`;
-  docLink = '/amis/zh-CN/components/form/input-tree';
-  tags = ['表单项'];
-  scaffold = {
-    type: 'input-tree',
-    label: '树选择框',
-    name: 'tree',
-    options: [
-      {
-        label: '选项A',
-        value: 'A',
-        children: [
-          {
-            label: '选项C',
-            value: 'C'
-          },
-          {
-            label: '选项D',
-            value: 'D'
-          }
-        ]
-      },
-
-      {
-        label: '选项B',
-        value: 'B'
-      }
-    ]
-  };
-  previewSchema: any = {
-    type: 'form',
-    className: 'text-left',
-    mode: 'horizontal',
-    wrapWithPanel: false,
-    body: {
-      ...this.scaffold
-    }
-  };
-
-  panelTitle = '树选择';
-  panelDefinitions = {
-    options: {
-      label: '选项 Options',
-      name: 'options',
-      type: 'combo',
-      multiple: true,
-      multiLine: true,
-      draggable: true,
-      addButtonText: '新增选项',
-      scaffold: {
-        label: '',
-        value: ''
-      },
-      items: [
-        {
-          type: 'group',
-          body: [
-            {
-              type: 'input-text',
-              name: 'label',
-              placeholder: '名称',
-              required: true
-            },
-
-            {
-              type: 'input-text',
-              name: 'value',
-              placeholder: '值',
-              unique: true
-            }
-          ]
-        },
-        {
-          $ref: 'options',
-          label: '子选项',
-          name: 'children',
-          addButtonText: '新增子选项'
-        }
-      ]
-    }
-  };
-  panelBody = [
-    getSchemaTpl('tabs', [
-      {
-        title: '常规',
-        body: [
-          getSchemaTpl('switchDefaultValue'),
-          {
-            type: 'input-text',
-            name: 'value',
-            label: '默认值',
-            visibleOn: 'typeof this.value !== "undefined"'
-          },
-          getSchemaTpl('fieldSet', {
-            title: '选项',
-            body: [
-              {
-                $ref: 'options',
-                name: 'options'
-              },
-              getSchemaTpl('source', {
-                sampleBuilder: (schema: any) =>
-                  JSON.stringify(
-                    {
-                      status: 0,
-                      msg: '',
-                      data: {
-                        options: [
-                          {
-                            label: '选项A',
-                            value: 'a',
-                            children: [
-                              {
-                                label: '子选项',
-                                value: 'c'
-                              }
-                            ]
-                          },
-
-                          {
-                            label: '选项B',
-                            value: 'b'
-                          }
-                        ]
-                      }
-                    },
-                    null,
-                    2
-                  )
-              }),
-              {
-                label: '隐藏顶级',
-                name: 'hideRoot',
-                type: 'switch',
-                mode: 'inline',
-                className: 'w-full'
-              },
-              {
-                name: 'showIcon',
-                label: '是否显示图标',
-                type: 'switch',
-                mode: 'inline',
-                className: 'w-full',
-                pipeIn: defaultValue(true)
-              },
-              getSchemaTpl('multiple'),
-              {
-                name: 'cascade',
-                visibleOn: 'data.multiple',
-                label: '不自动选中子节点？',
-                type: 'switch',
-                description: '选中父级时，孩子节点是否自动选中',
-                mode: 'inline',
-                className: 'w-full'
-              },
-              {
-                name: 'withChildren',
-                visibleOn: 'data.cascade !== true && data.multiple',
-                label: '数值是否携带子节点',
-                type: 'switch',
-                disabledOn: 'data.onlyChildren',
-                mode: 'inline',
-                className: 'w-full'
-              },
-              {
-                name: 'onlyChildren',
-                visibleOn: 'data.cascade !== true && data.multiple',
-                label: '数值是否只包含子节点',
-                disabledOn: 'data.withChildren',
-                type: 'switch',
-                mode: 'inline',
-                className: 'w-full'
-              },
-              getSchemaTpl('joinValues'),
-              getSchemaTpl('delimiter'),
-              getSchemaTpl('extractValue'),
-              getSchemaTpl('autoFill')
-            ]
-          })
-        ]
-      },
-      {
-        title: '外观',
-        body: [
-          {
-            label: '顶级文字',
-            name: 'rootLabel',
-            type: 'input-text',
-            pipeIn: defaultValue('顶级'),
-            visibleOn: 'data.hideRoot !== true'
-          },
-
-          {
-            name: 'showIcon',
-            label: '是否显示图标',
-            type: 'switch',
-            mode: 'inline',
-            className: 'w-full',
-            pipeIn: defaultValue(true)
-          },
-
-          {
-            label: '是否显示单选按钮',
-            name: 'showRadio',
-            type: 'switch',
-            mode: 'inline',
-            className: 'w-full',
-            visibleOn: '!data.multiple'
-          }
-        ]
-      }
-    ])
-  ];
-}
-
-registerEditorPlugin(TreeControlPlugin);

package/src/plugin/Form/InputURL.tsx

@@ -1,34 +0,0 @@
-import {registerEditorPlugin} from '../../manager';
-import {TextControlPlugin} from './InputText';
-
-export class URLControlPlugin extends TextControlPlugin {
-  // 关联渲染器名字
-  rendererName = 'input-url';
-  $schema = '/schemas/TextControlSchema.json';
-  name = 'URL输入框';
-  isBaseComponent = true;
-  icon = 'fa fa-link';
-
-  description = '验证输入是否为合法的 URL';
-  docLink = '/amis/zh-CN/components/form/input-url';
-
-  scaffold = {
-    type: 'input-url',
-    label: '链接',
-    name: 'url'
-  };
-
-  previewSchema = {
-    type: 'form',
-    className: 'text-left',
-    mode: 'horizontal',
-    wrapWithPanel: false,
-    body: {
-      ...this.scaffold
-    }
-  };
-
-  panelTitle = 'URL';
-}
-
-registerEditorPlugin(URLControlPlugin);

package/src/plugin/Form/InputYear.tsx

@@ -1,35 +0,0 @@
-import {registerEditorPlugin} from '../../manager';
-
-import {DateControlPlugin} from './InputDate';
-
-export class YearControlPlugin extends DateControlPlugin {
-  // 关联渲染器名字
-  rendererName = 'input-year';
-  $schema = '/schemas/YearControlSchema.json';
-
-  // 组件名称
-  name = 'Year';
-  isBaseComponent = true;
-  icon = 'fa fa-calendar';
-  description = `年选择`;
-  docLink = '/amis/zh-CN/components/form/input-year';
-  tags = ['表单项'];
-  // @ts-ignore
-  scaffold = {
-    type: 'input-year',
-    name: 'year'
-  };
-  previewSchema: any = {
-    type: 'form',
-    wrapWithPanel: false,
-    body: [
-      {
-        ...this.scaffold
-      }
-    ]
-  };
-
-  panelTitle = 'Year';
-}
-
-registerEditorPlugin(YearControlPlugin);

package/src/plugin/Form/Item.tsx

@@ -1,327 +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;
-
-    if (context.selections.length) {
-      return;
-    }
-
-    // 如果是表单项
-    if (!context.info.hostId && renderer?.isFormItem) {
-      panels.push({
-        key: 'form-item',
-        icon: 'fa fa-desktop',
-        title: this.panelTitle,
-        render: this.manager.makeSchemaFormRender({
-          body: this.panelBodyCreator(context)
-        }),
-        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
-              ? {
-                  type: 'switch',
-                  name: 'readOnly',
-                  label: '只读模式',
-                  mode: 'inline',
-                  className: 'w-full'
-                }
-              : null,
-            {
-              type: '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'),
-            {
-              type: 'switch',
-              name: 'clearValueOnHidden',
-              label: '隐藏时删除表单项值',
-              mode: 'inline',
-              className: 'w-full',
-              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);