amis-editor 4.1.0-beta.4 → 4.2.0-beta.0

package/src/plugin/Form/InputTime.tsx

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

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

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

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

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