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

package/src/plugin/Form/InputTable.tsx

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

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

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