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

package/src/plugin/Form/Formula.tsx

@@ -0,0 +1,79 @@
+import {defaultValue} from '../../component/schemaTpl';
+import {registerEditorPlugin} from '../../manager';
+import {BasePlugin} from '../../plugin';
+
+export class FormulaControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'formula';
+  $schema = '/schemas/FormulaControlSchema.json';
+
+  // 组件名称
+  name = '公式';
+  isBaseComponent = true;
+  icon = 'fa fa-calculator';
+  description = `通过公式计算指定的变量值，并将其结果作用到指定的变量中`;
+  docLink = '/amis/zh-CN/components/form/formula';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'formula',
+    name: 'formula'
+  };
+  previewSchema: any = {
+    type: 'tpl',
+    tpl: '计算公式'
+  };
+
+  panelTitle = '公式';
+  panelBody = [
+    {
+      label: '字段名',
+      name: 'name',
+      type: 'input-text',
+      description: '公式计算结果会作用到此字段名对应的变量中。'
+    },
+    {
+      type: 'input-text',
+      name: 'value',
+      label: '默认值'
+    },
+    {
+      type: 'input-text',
+      name: 'formula',
+      label: '公式',
+      description:
+        '支持 JS 表达式，如： <code>data.var_a + 2</code>，即当表单项 <code>var_a</code> 变化的时候，会自动给当前表单项设置为 <code>var_a + 2</code> 的值。若设置为字符串，则需要加引号'
+    },
+    {
+      type: 'input-text',
+      name: 'condition',
+      label: '作用条件',
+      description:
+        '支持如：<code>\\${xxx}</code>或者<code>data.xxx == "a"</code> 表达式来配置作用条件，当满足该作用条件时，会将计算结果设置到目标变量上。'
+    },
+    {
+      name: 'initSet',
+      type: 'switch',
+      label: '是否初始应用',
+      pipeIn: defaultValue(true),
+      description: '是否初始化的时候运行公式结果，并设置到目标变量上。',
+      mode: 'inline',
+      className: 'block'
+    },
+    {
+      name: 'autoSet',
+      type: 'switch',
+      label: '是否自动应用',
+      pipeIn: defaultValue(true),
+      mode: 'inline',
+      className: 'block',
+      description:
+        '是否自动计算公式结果，有变化时自动设置到目标变量上。<br />关闭后，通过按钮也能触发运算。'
+    }
+  ];
+
+  renderRenderer(props: any) {
+    return this.renderPlaceholder('功能组件（公式）', props.key);
+  }
+}
+
+registerEditorPlugin(FormulaControlPlugin);

package/src/plugin/Form/Group.tsx

@@ -0,0 +1,295 @@
+import {Button} from 'amis';
+import React from 'react';
+import {registerEditorPlugin} from '../../manager';
+import {
+  BasePlugin,
+  ContextMenuEventContext,
+  ContextMenuItem,
+  RegionConfig
+} from '../../plugin';
+import {defaultValue, getSchemaTpl} from '../../component/schemaTpl';
+import {JSONPipeIn, JSONUpdate, makeHorizontalDeeper} from '../../util';
+
+export class GroupControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'group';
+  $schema = '/schemas/GroupControlSchema.json';
+  disabledRendererPlugin = true; // 组件面板不显示
+
+  // 组件名称
+  name = '表单组';
+  isBaseComponent = true;
+  icon = 'fa fa-id-card-o';
+  description = '水平展示多个表单项';
+  docLink = '/amis/zh-CN/components/form/group';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'group',
+    body: [
+      {
+        type: 'input-text',
+        label: '文本',
+        name: 'var1'
+      },
+
+      {
+        type: 'input-text',
+        label: '文本',
+        name: 'var2'
+      }
+    ],
+    label: false
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    wrapWithPanel: false,
+    mode: 'horizontal',
+    body: [
+      {
+        ...this.scaffold,
+        mode: 'normal'
+      }
+    ]
+  };
+
+  // 容器配置
+  regions: Array<RegionConfig> = [
+    {
+      key: 'body',
+      label: '子表单',
+      renderMethod: 'renderInput',
+      preferTag: '表单项',
+      wrapperResolve: (dom: HTMLElement) => dom
+    }
+  ];
+
+  panelTitle = '表单组';
+  panelBody = [
+    getSchemaTpl('tabs', [
+      {
+        title: '常规',
+        body: [
+          getSchemaTpl('label'),
+
+          getSchemaTpl('description', {
+            visible: 'this.label'
+          }),
+
+          {
+            children: (
+              <Button
+                className="m-b"
+                onClick={() => {
+                  // this.manager.showInsertPanel('body')
+                  this.manager.showRendererPanel(
+                    '表单项',
+                    '请从左侧组件面板中点击添加表单项'
+                  );
+                }}
+                level="danger"
+                tooltip="插入一个新的元素"
+                size="sm"
+                block
+              >
+                新增元素
+              </Button>
+            )
+          },
+
+          getSchemaTpl('remark'),
+          getSchemaTpl('labelRemark')
+        ]
+      },
+
+      {
+        title: '外观',
+        body: [
+          getSchemaTpl('formItemMode'),
+          getSchemaTpl('horizontalMode'),
+          getSchemaTpl('horizontal', {
+            visibleOn:
+              '(data.$$formMode == "horizontal" || data.mode == "horizontal") && data.label !== false && data.horizontal',
+            pipeIn: (value: any, data: any) => {
+              value =
+                value ||
+                (data.formHorizontal &&
+                  makeHorizontalDeeper(data.formHorizontal, data.body.length));
+
+              return {
+                leftRate:
+                  value && typeof value.left === 'number'
+                    ? value.left
+                    : value &&
+                      /\bcol\-(?:xs|sm|md|lg)\-(\d+)\b/.test(value.left)
+                    ? parseInt(RegExp.$1, 10)
+                    : 2,
+                leftFixed: (value && value.leftFixed) || ''
+              };
+            }
+          }),
+
+          getSchemaTpl('subFormItemMode'),
+          getSchemaTpl('subFormHorizontalMode'),
+          getSchemaTpl('subFormHorizontal'),
+
+          {
+            name: 'body',
+            type: 'combo',
+            label: '列宽度配置',
+            multiple: true,
+            removable: false,
+            addable: false,
+            multiLine: true,
+            visibleOn: 'data.$$formMode != "inline"',
+            items: [
+              {
+                type: 'button-group-select',
+                name: 'columnRatio',
+                label: '宽度设置',
+                tiled: true,
+                pipeIn: (value: any, data: any) => {
+                  if (typeof value === 'number') {
+                    return 'custom';
+                  } else if (
+                    data.columnClassName &&
+                    /\bcol\-(?:xs|sm|md|lg)\-(\d+)\b/.test(
+                      data.columnClassName as string
+                    )
+                  ) {
+                    return 'custom';
+                  }
+                  return value || '';
+                },
+                pipeOut: (value: any) => (value === 'custom' ? 2 : value),
+                options: [
+                  {
+                    value: '',
+                    label: '适配宽度'
+                  },
+
+                  {
+                    value: 'auto',
+                    label: '适配内容'
+                  },
+
+                  {
+                    value: 'custom',
+                    label: '自定义'
+                  }
+                ]
+              },
+              {
+                label: '宽度占比',
+                type: 'input-range',
+                name: 'columnRatio',
+                visibleOn:
+                  'typeof this.columnRatio === "number" || this.columnClassName && /\\bcol\\-(?:xs|sm|md|lg)\\-(\\d+)\\b/.test(this.columnClassName)',
+                pipeIn: (value: any, data: any) => {
+                  if (typeof value === 'number') {
+                    return value;
+                  }
+
+                  if (
+                    !data.columnClassName ||
+                    !/\bcol\-(?:xs|sm|md|lg)\-(\d+)\b/.test(
+                      data.columnClassName as string
+                    )
+                  ) {
+                    return 2;
+                  }
+
+                  return parseInt(RegExp.$1, 10) || 2;
+                },
+                min: 1,
+                max: 12,
+                step: 1
+              }
+            ]
+          },
+
+          {
+            type: 'button-group-select',
+            name: 'gap',
+            label: '间隔大小',
+            pipeIn: defaultValue(''),
+            size: 'sm',
+            tiled: true,
+            clearable: true,
+            options: [
+              {
+                value: 'xs',
+                label: '极小'
+              },
+
+              {
+                value: 'sm',
+                label: '小'
+              },
+
+              {
+                value: 'md',
+                label: '中'
+              },
+
+              {
+                value: 'lg',
+                label: '大'
+              }
+            ]
+          },
+
+          getSchemaTpl('className'),
+
+          {
+            name: 'body',
+            type: 'combo',
+            label: '列 CSS 类名配置',
+            multiple: true,
+            removable: false,
+            addable: false,
+            items: [
+              {
+                type: 'input-text',
+                name: 'columnClassName'
+              }
+            ]
+          }
+        ]
+      },
+
+      {
+        title: '显隐',
+        body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
+      }
+    ])
+  ];
+
+  buildEditorContextMenu(
+    {id, schema, region, selections, info}: ContextMenuEventContext,
+    menus: Array<ContextMenuItem>
+  ) {
+    if (
+      selections.length ||
+      info.plugin !== this ||
+      !Array.isArray(schema.body) ||
+      schema.body.length < 2
+    ) {
+      return;
+    }
+
+    menus.push({
+      label: '变成多行',
+      onSelect: () => {
+        const store = this.manager.store;
+        let rootSchema = store.schema;
+
+        rootSchema = JSONUpdate(rootSchema, id, JSONPipeIn(schema.body), true);
+
+        store.traceableSetSchema(rootSchema);
+      }
+    });
+  }
+}
+
+registerEditorPlugin(GroupControlPlugin);

package/src/plugin/Form/Hidden.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import {registerEditorPlugin} from '../../manager';
+import {BasePlugin} from '../../plugin';
+
+export class HiddenControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'hidden';
+  $schema = '/schemas/HiddenControlSchema.json';
+
+  // 组件名称
+  name = '隐藏域';
+  isBaseComponent = true;
+  icon = 'fa fa-eye-slash';
+  description = `隐藏表单项`;
+  docLink = '/amis/zh-CN/components/form/hidden';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'hidden',
+    name: 'var1'
+  };
+  previewSchema: any = {
+    type: 'tpl',
+    tpl: '隐藏域'
+  };
+
+  panelTitle = '隐藏域';
+  panelBody = [
+    {
+      type: 'input-text',
+      name: 'value',
+      label: '默认值'
+    }
+  ];
+
+  renderRenderer(props: any) {
+    return (
+      <div key={props.key} className="wrapper-sm b-a b-light m-b-sm">
+        <span className="text-muted">功能组件（隐藏字段）</span>
+      </div>
+    );
+  }
+}
+
+registerEditorPlugin(HiddenControlPlugin);

package/src/plugin/Form/InputArray.tsx

@@ -0,0 +1,228 @@
+import {Button} from 'amis';
+import {registerEditorPlugin} from '../../manager';
+import {
+  BaseEventContext,
+  BasePlugin,
+  BasicSubRenderInfo,
+  BasicToolbarItem,
+  ContextMenuEventContext,
+  ContextMenuItem,
+  RendererEventContext,
+  SubRendererInfo
+} from '../../plugin';
+import {
+  defaultValue,
+  getSchemaTpl,
+  valuePipeOut
+} from '../../component/schemaTpl';
+import React from 'react';
+import {diff, JSONPipeOut} from '../../util';
+
+export class ArrayControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'input-array';
+  $schema = '/schemas/ArrayControlSchema.json';
+  disabledRendererPlugin = true;
+
+  // 组件名称
+  name = '数组输入框';
+  isBaseComponent = true;
+  icon = 'fa fa-bars';
+  description =
+    'Array 数组输入框，可自定义成员输入形式。其实是 Combo 的 flat 值打平的一种用法，可直接用 combo 代替。';
+  docLink = '/amis/zh-CN/components/form/input-array';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'input-array',
+    label: '数组输入框',
+    name: 'array',
+    items: {
+      type: 'input-text',
+      placeholder: '请输入'
+    }
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    wrapWithPanel: false,
+    mode: 'horizontal',
+    body: [
+      {
+        ...this.scaffold,
+        value: ['row1', ''],
+        draggable: true
+      }
+    ]
+  };
+
+  panelTitle = '数组框';
+  panelBodyCreator = (context: BaseEventContext) => {
+    return [
+      getSchemaTpl('switchDefaultValue'),
+
+      {
+        type: 'textarea',
+        name: 'value',
+        label: '默认值',
+        visibleOn: 'typeof this.value !== "undefined"',
+        pipeOut: valuePipeOut
+      },
+
+      {
+        children: (
+          <Button
+            size="sm"
+            level="danger"
+            className="m-b"
+            block
+            onClick={this.editDetail.bind(this, context.id)}
+          >
+            配置子表单项
+          </Button>
+        )
+      },
+
+      {
+        label: '是否可新增',
+        type: 'switch',
+        name: 'addable',
+        mode: 'inline',
+        className: 'w-full',
+        pipeIn: defaultValue(true)
+      },
+
+      {
+        label: '新增按钮文字',
+        name: 'addButtonText',
+        type: 'input-text',
+        visibleOn: 'data.addable',
+        pipeIn: defaultValue('新增')
+      },
+
+      {
+        type: 'textarea',
+        name: 'scaffold',
+        label: '新增初始值',
+        visibleOn: 'this.addable !== false',
+        pipeOut: valuePipeOut,
+        pipeIn: defaultValue('')
+      },
+
+      {
+        label: '是否可删除',
+        type: 'switch',
+        name: 'removable',
+        mode: 'inline',
+        className: 'w-full',
+        pipeIn: defaultValue(true)
+      },
+
+      getSchemaTpl('api', {
+        name: 'deleteApi',
+        label: '删除前的请求',
+        visibleOn: 'data.removable'
+      }),
+
+      {
+        label: '删除确认提示',
+        name: 'deleteConfirmText',
+        type: 'input-text',
+        visibleOn: 'data.deleteApi',
+        pipeIn: defaultValue('确认要删除')
+      },
+
+      {
+        name: 'draggable',
+        label: '启用拖拽排序',
+        type: 'switch',
+        mode: 'inline',
+        className: 'w-full'
+      },
+
+      {
+        name: 'draggableTip',
+        visibleOn: 'data.draggable',
+        type: 'input-text',
+        label: '可拖拽排序提示文字',
+        pipeIn: defaultValue('可通过拖动每行中的【交换】按钮进行顺序调整')
+      },
+
+      {
+        name: 'addButtonText',
+        type: 'input-text',
+        label: '新增按钮文字',
+        pipeIn: defaultValue('新增')
+      },
+
+      getSchemaTpl('minLength'),
+      getSchemaTpl('maxLength')
+    ];
+  };
+
+  filterProps(props: any) {
+    props = JSONPipeOut(props);
+
+    // 至少显示一个成员，否则啥都不显示。
+    if (!props.value) {
+      props.value = [''];
+    }
+
+    return props;
+  }
+
+  buildEditorToolbar(
+    {id, info}: BaseEventContext,
+    toolbars: Array<BasicToolbarItem>
+  ) {
+    if (info.renderer.name === 'input-array') {
+      toolbars.push({
+        icon: 'fa fa-expand',
+        order: 100,
+        tooltip: '配置子表单项',
+        onClick: this.editDetail.bind(this, id)
+      });
+    }
+  }
+
+  buildEditorContextMenu(
+    {id, schema, region, info}: ContextMenuEventContext,
+    menus: Array<ContextMenuItem>
+  ) {
+    if (info.renderer.name === 'input-array') {
+      menus.push('|', {
+        label: '配置成员渲染器',
+        onSelect: this.editDetail.bind(this, id)
+      });
+    }
+  }
+
+  editDetail(id: string) {
+    const manager = this.manager;
+    const store = manager.store;
+    const node = store.getNodeById(id);
+    const value = store.getValueOf(id);
+
+    node &&
+      value &&
+      this.manager.openSubEditor({
+        title: '配置子表单项',
+        value: value.items,
+        slot: {
+          type: 'form',
+          mode: 'normal',
+          body: '$$',
+          wrapWithPanel: false,
+          className: 'wrapper'
+        },
+        onChange: newValue => {
+          newValue = {
+            ...value,
+            items: newValue
+          };
+          manager.panelChangeValue(newValue, diff(value, newValue));
+        }
+      });
+  }
+}
+
+registerEditorPlugin(ArrayControlPlugin);