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

package/src/plugin/Form/InputTable.tsx

@@ -0,0 +1,434 @@
+import React from 'react';
+import {resolveVariable, Button} from 'amis';
+import flatten from 'lodash/flatten';
+import {defaultValue, getSchemaTpl} from '../../component/schemaTpl';
+import {registerEditorPlugin} from '../../manager';
+import {
+  BaseEventContext,
+  BasePlugin,
+  BasicSubRenderInfo,
+  InsertEventContext,
+  PluginEvent,
+  RendererEventContext,
+  ScaffoldForm,
+  SubRendererInfo,
+  RegionConfig
+} from '../../plugin';
+import {setVariable} from 'amis-core';
+import {repeatArray} from '../../util';
+import {mockValue} from '../../mocker';
+
+export class TableControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'input-table';
+  $schema = '/schemas/TableControlSchema.json';
+
+  // 组件名称
+  name = '表格编辑框';
+  isBaseComponent = true;
+  icon = 'fa fa-table';
+  description = `可以用来展现数据的,可以用来展示数组类型的数据，比如 <code>multiple</code> 的子 <code>form</code>`;
+  docLink = '/amis/zh-CN/components/form/input-table';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'input-table',
+    name: 'table',
+    label: '表格表单',
+    columns: [
+      {
+        label: 'color',
+        name: 'color',
+        quickEdit: {
+          type: 'input-color'
+        }
+      },
+      {
+        label: '说明文字',
+        name: 'name',
+        quickEdit: {
+          type: 'input-text',
+          mode: 'inline'
+        }
+      }
+    ],
+    strictMode: true
+  };
+
+  regions: Array<RegionConfig> = [
+    {
+      key: 'columns',
+      label: '列集合',
+      renderMethod: 'renderTableContent',
+      preferTag: '展示',
+      dndMode: 'position-h'
+    }
+  ];
+
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    wrapWithPanel: false,
+    mode: 'horizontal',
+    body: {
+      ...this.scaffold,
+      value: [{color: 'green', name: '绿色'}]
+    }
+  };
+
+  scaffoldForm: ScaffoldForm = {
+    title: '快速构建表格',
+    body: [
+      {
+        name: 'columns',
+        type: 'combo',
+        multiple: true,
+        label: false,
+        addButtonText: '新增一列',
+        draggable: true,
+        items: [
+          {
+            type: 'input-text',
+            name: 'label',
+            placeholder: '标题'
+          },
+          {
+            type: 'input-text',
+            name: 'name',
+            placeholder: '绑定字段名'
+          },
+          {
+            type: 'select',
+            name: 'type',
+            placeholder: '类型',
+            value: 'input-text',
+            options: [
+              {
+                value: 'text',
+                label: '纯文本'
+              },
+              {
+                value: 'tpl',
+                label: '模板'
+              },
+              {
+                value: 'image',
+                label: '图片'
+              },
+              {
+                value: 'date',
+                label: '日期'
+              },
+              // {
+              //     value: 'datetime',
+              //     label: '日期时间'
+              // },
+              // {
+              //     value: 'time',
+              //     label: '时间'
+              // },
+              {
+                value: 'progress',
+                label: '进度'
+              },
+              {
+                value: 'status',
+                label: '状态'
+              },
+              {
+                value: 'mapping',
+                label: '映射'
+              },
+              {
+                value: 'operation',
+                label: '操作栏'
+              }
+            ]
+          }
+        ]
+      }
+    ],
+    canRebuild: true
+  };
+
+  panelTitle = '表格编辑';
+  panelBodyCreator = (context: BaseEventContext) => {
+    const isCRUDBody = context.schema.type === 'crud';
+
+    return getSchemaTpl('tabs', [
+      {
+        title: '常规',
+        body: flatten([
+          // {
+          //   children: (
+          //     <div className="m-b">
+          //       <Button
+          //         level="success"
+          //         size="sm"
+          //         block
+          //         onClick={() => this.handleEditFormItem()}
+          //       >
+          //         配置列信息
+          //       </Button>
+          //     </div>
+          //   )
+          // },
+          getSchemaTpl('formItemName', {
+            required: true
+          }),
+          getSchemaTpl('label'),
+          getSchemaTpl('description'),
+          {
+            label: '是否可新增',
+            type: 'switch',
+            name: 'addable',
+            mode: 'inline',
+            className: 'w-full'
+          },
+          {
+            type: 'input-text',
+            name: 'addBtnLabel',
+            label: '增加按钮名称',
+            visibleOn: 'data.addable',
+            pipeIn: defaultValue('')
+          },
+          {
+            name: 'addBtnIcon',
+            label: '增加按钮图标',
+            type: 'icon-picker',
+            visibleOn: 'data.addable'
+          },
+          getSchemaTpl('api', {
+            name: 'addApi',
+            label: '新增时提交的 API',
+            visibleOn: 'data.addable'
+          }),
+          {
+            label: '是否可删除',
+            type: 'switch',
+            name: 'removable',
+            mode: 'inline',
+            className: 'w-full'
+          },
+          {
+            type: 'input-text',
+            name: 'deleteBtnLabel',
+            label: '删除按钮名称',
+            visibleOn: 'data.removable',
+            pipeIn: defaultValue('')
+          },
+          {
+            name: 'deleteBtnIcon',
+            label: '删除按钮图标',
+            type: 'icon-picker',
+            visibleOn: 'data.removable'
+          },
+          getSchemaTpl('api', {
+            name: 'deleteApi',
+            label: '删除时提交的 API',
+            visibleOn: 'data.removable'
+          }),
+          {
+            label: '是否可编辑',
+            type: 'switch',
+            name: 'editable',
+            mode: 'inline',
+            className: 'w-full'
+          },
+          {
+            type: 'input-text',
+            name: 'editBtnLabel',
+            label: '编辑按钮名称',
+            visibleOn: 'data.editable',
+            pipeIn: defaultValue('')
+          },
+          {
+            name: 'editBtnIcon',
+            label: '编辑按钮图标',
+            type: 'icon-picker',
+            visibleOn: 'data.editable'
+          },
+          {
+            label: '是否可复制',
+            type: 'switch',
+            name: 'copyable',
+            mode: 'inline',
+            className: 'w-full'
+          },
+          {
+            type: 'input-text',
+            name: 'copyBtnLabel',
+            label: '复制按钮名称',
+            visibleOn: 'data.copyable',
+            pipeIn: defaultValue('')
+          },
+          {
+            name: 'copyBtnIcon',
+            label: '复制按钮图标',
+            type: 'icon-picker',
+            visibleOn: 'data.copyable'
+          },
+          getSchemaTpl('api', {
+            name: 'updateApi',
+            label: '修改时提交的 API',
+            visibleOn: 'data.editable'
+          }),
+          {
+            type: 'input-text',
+            name: 'confirmBtnLabel',
+            label: '确认编辑按钮名称',
+            visibleOn: 'data.editable',
+            pipeIn: defaultValue('')
+          },
+          {
+            name: 'confirmBtnIcon',
+            label: '确认编辑按钮图标',
+            type: 'icon-picker',
+            visibleOn: 'data.editable'
+          },
+          {
+            type: 'input-text',
+            name: 'cancelBtnLabel',
+            label: '取消编辑按钮名称',
+            visibleOn: 'data.editable',
+            pipeIn: defaultValue('')
+          },
+          {
+            name: 'cancelBtnIcon',
+            label: '取消编辑按钮图标',
+            type: 'icon-picker',
+            visibleOn: 'data.editable'
+          },
+          {
+            label: '是否可拖拽排序',
+            type: 'switch',
+            name: 'draggable',
+            mode: 'inline',
+            className: 'w-full'
+          },
+          {
+            label: '确认模式',
+            type: 'switch',
+            name: 'needConfirm',
+            mode: 'inline',
+            className: 'w-full'
+          },
+          {
+            label: '严格模式',
+            type: 'switch',
+            name: 'strictMode', // 同时需要配置strictMode
+            value: true,
+            mode: 'inline',
+            className: 'w-full'
+          },
+          {
+            label: '获取父级数据',
+            labelRemark: {
+              trigger: 'click',
+              className: 'm-l-xs',
+              rootClose: true,
+              content:
+                '配置"canAccessSuperData": true 同时配置 "strictMode": false 开启此特性，初始会自动映射父级数据域的同名变量。需要注意的是，这里只会初始会映射，一旦修改过就是当前行数据为主了。也就是说，表单项类型的，只会起到初始值的作用',
+              placement: 'left'
+            },
+            type: 'switch',
+            onChange: (value: any, oldValue: any, model: any, form: any) => {
+              if (value && !oldValue) {
+                form.setValues({strictMode: false});
+              } else {
+                form.setValues({strictMode: true});
+              }
+            },
+            name: 'canAccessSuperData', // 同时需要配置strictMode
+            mode: 'inline',
+            className: 'w-full'
+          }
+        ])
+      },
+      {
+        title: '外观',
+        body: [
+          getSchemaTpl('formItemMode'),
+          getSchemaTpl('horizontalMode'),
+          getSchemaTpl('horizontal', {
+            label: '',
+            visibleOn:
+              '(data.$$formMode == "horizontal" || data.mode == "horizontal") && data.label !== false && data.horizontal'
+          }),
+          getSchemaTpl('className'),
+          getSchemaTpl('className', {
+            label: 'Label CSS 类名',
+            name: 'labelClassName'
+          }),
+          getSchemaTpl('className', {
+            label: 'Input CSS 类名',
+            name: 'inputClassName'
+          }),
+          getSchemaTpl('className', {
+            label: '描述 CSS 类名',
+            name: 'descriptionClassName',
+            visibleOn: 'data.description'
+          })
+        ]
+      },
+      {
+        title: '显隐',
+        body: [getSchemaTpl('disabled'), getSchemaTpl('visible')]
+      },
+      {
+        title: '其他',
+        body: [
+          getSchemaTpl('required'),
+          getSchemaTpl('validateOnChange'),
+          getSchemaTpl('submitOnChange')
+        ]
+      }
+    ]);
+  };
+
+  filterProps(props: any) {
+    const arr = Array.isArray(props.value)
+      ? props.value
+      : typeof props.source === 'string'
+      ? resolveVariable(props.source, props.data)
+      : resolveVariable('items', props.data);
+
+    if (!Array.isArray(arr) || !arr.length) {
+      const mockedData: any = {};
+
+      if (Array.isArray(props.columns)) {
+        props.columns.forEach((column: any) => {
+          if (column.name) {
+            setVariable(mockedData, column.name, mockValue(column));
+          }
+        });
+      }
+
+      props.value = repeatArray(mockedData, 1).map((item, index) => ({
+        ...item,
+        id: index + 1
+      }));
+    } else {
+      // 只取10条预览，否则太多卡顿
+      props.value = arr.slice(0, 10);
+    }
+
+    return props;
+  }
+
+  // 自动插入 label
+  beforeInsert(event: PluginEvent<InsertEventContext>) {
+    const context = event.context;
+    if (
+      (context.info.plugin === this ||
+        context.node.sameIdChild?.info.plugin === this) &&
+      context.region === 'columns'
+    ) {
+      context.data = {
+        ...context.data,
+        label: context.data.label ?? context.subRenderer?.name ?? '列名称'
+      };
+    }
+  }
+}
+
+registerEditorPlugin(TableControlPlugin);

package/src/plugin/Form/InputTag.tsx

@@ -0,0 +1,70 @@
+import {getSchemaTpl} from '../../component/schemaTpl';
+import {registerEditorPlugin} from '../../manager';
+import {BasePlugin} from '../../plugin';
+
+export class TagControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'input-tag';
+  $schema = '/schemas/TagControlSchema.json';
+
+  order = -420;
+
+  // 组件名称
+  name = '标签';
+  isBaseComponent = true;
+  icon = 'fa fa-tag';
+  description = `配置<code>options</code>可以实现选择选项`;
+  docLink = '/amis/zh-CN/components/form/input-tag';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'input-tag',
+    label: '标签',
+    name: 'tag',
+    options: ['红色', '绿色', '蓝色']
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    mode: 'horizontal',
+    wrapWithPanel: false,
+    body: {
+      ...this.scaffold,
+      value: '红色'
+    }
+  };
+
+  panelTitle = '标签';
+  panelBody = [
+    {
+      type: 'input-text',
+      name: 'value',
+      label: '默认值',
+      visibleOn: 'typeof this.value !== "undefined"'
+    },
+    getSchemaTpl('clearable'),
+    getSchemaTpl('fieldSet', {
+      title: '选项',
+      body: [
+        getSchemaTpl('options', {
+          visibleOn: 'data.autoComplete !== false',
+          description: '设置选项后，输入时会下拉这些选项供用户参考。'
+        }),
+        getSchemaTpl('source', {
+          visibleOn: 'data.autoComplete !== false'
+        }),
+        {
+          type: 'input-text',
+          name: 'optionsTip',
+          label: '选项提示',
+          value: '最近您使用的标签'
+        },
+        getSchemaTpl('joinValues'),
+        getSchemaTpl('delimiter'),
+        getSchemaTpl('extractValue'),
+        getSchemaTpl('autoFill')
+      ]
+    })
+  ];
+}
+
+registerEditorPlugin(TagControlPlugin);

package/src/plugin/Form/InputText.tsx

@@ -0,0 +1,186 @@
+import {registerEditorPlugin} from '../../manager';
+import {
+  BasePlugin,
+  BasicSubRenderInfo,
+  RendererEventContext,
+  SubRendererInfo
+} from '../../plugin';
+import {defaultValue, getSchemaTpl} from '../../component/schemaTpl';
+
+export class TextControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'input-text';
+  $schema = '/schemas/TextControlSchema.json';
+
+  order = -500;
+
+  // 组件名称
+  name = '文本框';
+  isBaseComponent = true;
+  icon = 'fa fa-terminal';
+  description =
+    '配置<code>options</code>可以实现选择选项，效果同<code>select</code>';
+  docLink = '/amis/zh-CN/components/form/input-text';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'input-text',
+    label: '文本',
+    name: 'text'
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    wrapWithPanel: false,
+    mode: 'horizontal',
+    body: [
+      {
+        ...this.scaffold
+      }
+    ]
+  };
+
+  panelTitle = '文本框';
+  panelBody = [
+    getSchemaTpl('switchDefaultValue'),
+    {
+      type: 'input-text',
+      name: 'value',
+      label: '默认值',
+      visibleOn: 'typeof this.value !== "undefined"'
+    },
+    getSchemaTpl('hint'),
+    getSchemaTpl('showCounter'),
+
+    {
+      name: 'addOn',
+      label: '启用 addOn',
+      type: 'switch',
+      mode: 'inline',
+      className: 'w-full',
+      pipeIn: (value: any) => !!value,
+      pipeOut: (value: any) =>
+        value
+          ? {
+              label: '按钮',
+              type: 'button'
+            }
+          : null
+    },
+
+    {
+      type: 'combo',
+      multiLine: true,
+      name: 'addOn',
+      visibleOn: 'data.addOn',
+      items: [
+        {
+          name: 'type',
+          label: '类型',
+          type: 'button-group-select',
+          size: 'xs',
+          options: [
+            {
+              label: '文本',
+              value: 'text'
+            },
+
+            {
+              label: '按钮',
+              value: 'button'
+            },
+
+            {
+              label: '提交',
+              value: 'submit'
+            }
+          ]
+        },
+
+        {
+          name: 'label',
+          label: '文字',
+          type: 'input-text',
+          visibleOn: 'this.type === "text"'
+        },
+
+        {
+          name: 'icon',
+          label: 'Icon',
+          type: 'icon-picker',
+          visibleOn: 'this.type === "text"'
+        },
+
+        getSchemaTpl('className', {
+          visibleOn: 'this.type === "text"'
+        }),
+
+        {
+          name: 'position',
+          label: '位置',
+          type: 'button-group-select',
+          size: 'xs',
+          pipeIn: defaultValue('right'),
+          options: [
+            {
+              label: '左边',
+              value: 'left'
+            },
+
+            {
+              label: '右边',
+              value: 'right'
+            }
+          ]
+        }
+      ]
+    },
+
+    {
+      name: 'autoComplete',
+      label: '自动补全',
+      mode: 'inline',
+      className: 'w-full',
+      type: 'switch',
+      pipeIn: (value: any) => value !== false,
+      pipeOut: (value: any) => (value ? '' : false),
+      onChange: (value: any, oldValue: any, model: any, form: any) => {
+        if (oldValue === '' || oldValue) {
+          form.setValues({
+            __options: form.data.options,
+            options: []
+          });
+        } else {
+          form.setValues({
+            options: form.data.__options
+          });
+        }
+      }
+    },
+
+    getSchemaTpl('options', {
+      visibleOn: 'data.autoComplete !== false',
+      description: '设置选项后，输入时会下拉这些选项供用户参考。'
+    }),
+
+    getSchemaTpl('source', {
+      visibleOn: 'data.autoComplete !== false'
+    }),
+
+    getSchemaTpl('api', {
+      name: 'autoComplete',
+      label: '自动补全接口',
+      description:
+        '每次输入新内容后，将调用接口，根据接口返回更新选项。当前用户输入值在 `\\${term}` 中。',
+      visibleOn: 'data.autoComplete !== false'
+    }),
+    getSchemaTpl('multiple', {
+      visibleOn: 'data.options || data.source || data.autoComplete'
+    }),
+    getSchemaTpl('joinValues'),
+    getSchemaTpl('delimiter'),
+    getSchemaTpl('extractValue'),
+    getSchemaTpl('autoFill')
+  ];
+}
+
+registerEditorPlugin(TextControlPlugin);