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

package/src/plugin/Form/ConditionBuilder.tsx

@@ -0,0 +1,315 @@
+import {registerEditorPlugin} from '../../manager';
+import {
+  BaseEventContext,
+  BasePlugin,
+  BasicSubRenderInfo,
+  PluginInterface,
+  RendererEventContext,
+  ScaffoldForm,
+  SubRendererInfo
+} from '../../plugin';
+import {getSchemaTpl} from '../../component/schemaTpl';
+
+import {isObject, isString} from 'lodash';
+import defaultConfig, {
+  OperationMap
+} from 'amis-ui/lib/components/condition-builder/config';
+
+export class ConditionBilderPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'condition-builder';
+  $schema = '/schemas/ConditionBuilderControlSchema.json';
+
+  // 组件名称
+  name = '条件组件';
+  isBaseComponent = true;
+  icon = 'fa fa-group';
+  description =
+    '用于设置复杂组合条件，支持添加条件，添加分组，设置组合方式，拖拽排序等功能。';
+  docLink = '/amis/zh-CN/components/form/condition-builder';
+  tags = ['表单项'];
+
+  scaffold = {
+    type: 'condition-builder',
+    label: '条件组件',
+    name: 'conditions',
+    description: '适合让用户自己拼查询条件，然后后端根据数据生成 query where',
+    fields: [
+      {
+        label: '文本',
+        type: 'text',
+        name: 'text'
+      },
+      {
+        label: '数字',
+        type: 'number',
+        name: 'number'
+      },
+      {
+        label: '布尔',
+        type: 'boolean',
+        name: 'boolean'
+      },
+      {
+        label: '选项',
+        type: 'select',
+        name: 'select',
+        options: [
+          {
+            label: 'A',
+            value: 'a'
+          },
+          {
+            label: 'B',
+            value: 'b'
+          },
+          {
+            label: 'C',
+            value: 'c'
+          },
+          {
+            label: 'D',
+            value: 'd'
+          },
+          {
+            label: 'E',
+            value: 'e'
+          }
+        ]
+      },
+      {
+        label: '日期',
+        type: 'date',
+        name: 'date'
+      },
+      {
+        label: '时间',
+        type: 'time',
+        name: 'time'
+      },
+      {
+        label: '日期时间',
+        type: 'datetime',
+        name: 'datetime'
+      }
+    ]
+  };
+
+  scaffoldForm: ScaffoldForm = {
+    title: '快速开始-条件组合',
+    body: [
+      {
+        type: 'combo',
+        name: 'fields',
+        multiple: true,
+        draggable: true,
+        multiLine: true,
+        items: [
+          {
+            type: 'group',
+            body: [
+              {
+                type: 'select',
+                name: 'type',
+                placeholder: '条件类型',
+                options: [
+                  {
+                    label: '文本',
+                    value: 'text'
+                  },
+                  {
+                    label: '数字',
+                    value: 'number'
+                  },
+                  {
+                    label: '布尔',
+                    value: 'boolean'
+                  },
+                  {
+                    label: '日期',
+                    value: 'date'
+                  },
+                  {
+                    label: '日期时间',
+                    value: 'datetime'
+                  },
+                  {
+                    label: '时间',
+                    value: 'time'
+                  },
+                  {
+                    label: '选项',
+                    value: 'select'
+                  }
+                ]
+              },
+              {
+                type: 'input-text',
+                name: 'name',
+                placeholder: '字段名'
+              },
+              {
+                type: 'input-text',
+                placeholder: '字段名称',
+                name: 'label'
+              }
+            ]
+          },
+
+          {
+            type: 'group',
+            visibleOn: 'data.type === "number"',
+            body: [
+              {
+                type: 'input-number',
+                name: 'minimum',
+                placeholder: '最小值'
+              },
+              {
+                type: 'input-number',
+                name: 'maximum',
+                placeholder: '最大值'
+              },
+              {
+                type: 'input-number',
+                name: 'step',
+                min: 0,
+                placeholder: '步长'
+              }
+            ]
+          },
+
+          {
+            type: 'group',
+            visibleOn: '!!~["date", "datetime", "time"].indexOf(data.type)',
+            body: [
+              {
+                type: 'input-text',
+                name: 'format',
+                placeholder: '值格式'
+              },
+              {
+                type: 'input-text',
+                name: 'inputFormat',
+                placeholder: '日期显示格式'
+              },
+              {
+                type: 'input-text',
+                name: 'timeFormat',
+                placeholder: '时间显示格式',
+                visibleOn: 'data.type === "datetime"'
+              }
+            ]
+          },
+
+          {
+            type: 'group',
+            visibleOn: 'data.type === "select"',
+            body: [
+              {
+                type: 'input-text',
+                name: 'source',
+                placeholder: '字段选项远程拉取，支持接口或数据映射'
+              }
+            ]
+          },
+
+          {
+            type: 'group',
+            body: [
+              {
+                type: 'input-text',
+                placeholder: '占位符',
+                name: 'placeholder'
+              },
+
+              {
+                name: 'operators',
+                placeholder: '操作符',
+                asFormItem: true,
+                children: ({data, render, onChange}: any) =>
+                  render(
+                    'operations',
+                    {
+                      type: 'select',
+                      name: 'operators',
+                      multiple: true,
+                      value:
+                        data.value ||
+                        defaultConfig.types[data.type]?.operators ||
+                        [],
+                      joinValues: false,
+                      extractValue: true,
+                      options: defaultConfig.types[data.type]?.operators.map(
+                        item => {
+                          if (isObject(item) && item.label && item.value) {
+                            return (
+                              {
+                                label: item.label,
+                                value: item.value
+                              } || []
+                            );
+                          } else if (isString(item)) {
+                            return (
+                              {
+                                label: OperationMap[item],
+                                value: item
+                              } || []
+                            );
+                          } else {
+                            return [];
+                          }
+                        }
+                      )
+                    },
+                    {
+                      onChange: (value: any) => onChange(value)
+                    }
+                  )
+              }
+            ]
+          }
+        ]
+      }
+    ],
+    canRebuild: true
+  };
+
+  previewSchema: any = {
+    type: 'form',
+    mode: 'horizontal',
+    wrapWithPanel: false,
+    body: [this.scaffold]
+  };
+
+  panelTitle = '条件组件';
+  panelBodyCreator = (context: BaseEventContext) => {
+    return [getSchemaTpl('source')];
+  };
+
+  buildSubRenderers(
+    context: RendererEventContext,
+    renderers: Array<SubRendererInfo>
+  ): BasicSubRenderInfo | Array<BasicSubRenderInfo> | void {
+    const plugin: PluginInterface = this;
+    // return super.buildSubRenderers.apply(this, arguments);
+    if (plugin.name && plugin.description) {
+      return {
+        name: plugin.name,
+        icon: plugin.icon,
+        description: plugin.description,
+        previewSchema: plugin.previewSchema,
+        tags: plugin.tags,
+        docLink: plugin.docLink,
+        type: plugin.type,
+        scaffold: plugin.scaffold,
+        scaffoldForm: this.scaffoldForm,
+        disabledRendererPlugin: plugin.disabledRendererPlugin,
+        isBaseComponent: plugin.isBaseComponent,
+        rendererName: plugin.rendererName
+      };
+    }
+  }
+}
+
+registerEditorPlugin(ConditionBilderPlugin);

package/src/plugin/Form/Control.tsx

@@ -0,0 +1,139 @@
+import React from 'react';
+import {Button} from 'amis';
+import {getSchemaTpl} from '../../component/schemaTpl';
+import {registerEditorPlugin} from '../../manager';
+import {BasePlugin, RegionConfig} from '../../plugin';
+
+export class ControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'control';
+  $schema = '/schemas/FormControlSchema.json';
+
+  // 组件名称
+  name = '表单项容器';
+  isBaseComponent = true;
+  icon = 'fa fa-object-group';
+  description = `表单项容器`;
+  docLink = '/amis/zh-CN/components/form/group';
+  tags = ['容器'];
+  scaffold = {
+    type: 'control',
+    label: '表单项容器',
+    body: [
+      {
+        type: 'tpl',
+        tpl: 'a'
+      }
+    ]
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    mode: 'horizontal',
+    wrapWithPanel: false,
+    body: [
+      {
+        ...this.scaffold
+      }
+    ]
+  };
+
+  // 容器配置
+  regions: Array<RegionConfig> = [
+    {
+      key: 'body',
+      label: '元素集合',
+      preferTag: '展示'
+    }
+  ];
+
+  panelTitle = '表单项容器';
+  panelBody = [
+    getSchemaTpl('tabs', [
+      {
+        title: '常规',
+        body: [
+          {
+            children: (
+              <Button
+                className="m-b"
+                onClick={() => this.manager.showRendererPanel('表单项')}
+                level="danger"
+                tooltip="插入一个新的元素"
+                size="sm"
+                block
+              >
+                新增元素
+              </Button>
+            )
+          },
+          getSchemaTpl('description'),
+          getSchemaTpl('placeholder'),
+          getSchemaTpl('remark'),
+          getSchemaTpl('labelRemark')
+        ]
+      },
+
+      {
+        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'
+          }
+        ]
+      },
+      {
+        title: '验证',
+        body: [
+          // getSchemaTplByName('ref'),
+          getSchemaTpl('validations'),
+          getSchemaTpl('validationErrors'),
+          getSchemaTpl('validateOnChange'),
+          getSchemaTpl('submitOnChange')
+        ]
+      }
+    ])
+  ];
+}
+
+registerEditorPlugin(ControlPlugin);

package/src/plugin/Form/DiffEditor.tsx

@@ -0,0 +1,111 @@
+import {availableLanguages} from 'amis/lib/renderers/Form/Editor';
+import {
+  defaultValue,
+  getSchemaTpl,
+  valuePipeOut
+} from '../../component/schemaTpl';
+import {registerEditorPlugin} from '../../manager';
+import {BasePlugin} from '../../plugin';
+
+export class DiffEditorControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'diff-editor';
+  $schema = '/schemas/DiffEditorControlSchema.json';
+
+  // 组件名称
+  name = 'Diff编辑器';
+  isBaseComponent = true;
+  icon = 'fa fa-columns';
+  description = `左右两边的代码做对比，支持的语言包括：${availableLanguages
+    .slice(0, 10)
+    .join('，')}等等`;
+  docLink = '/amis/zh-CN/components/form/diff-editor';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'diff-editor',
+    label: 'diff编辑器',
+    name: 'diff'
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    mode: 'horizontal',
+    wrapWithPanel: false,
+    body: [
+      {
+        ...this.scaffold,
+        value: 'Hello World\nLine 1\nNew line\nBla Bla',
+        diffValue: 'Hello World\nLine 2'
+      }
+    ]
+  };
+
+  panelTitle = 'Diff编辑器';
+  panelBody = [
+    {
+      type: 'textarea',
+      name: 'diffValue',
+      label: '左侧值',
+      pipeOut: valuePipeOut,
+      description: '支持使用 <code>\\${xxx}</code> 来获取变量'
+    },
+
+    getSchemaTpl('switchDefaultValue', {
+      label: '设置右侧默认值'
+    }),
+
+    {
+      type: 'textarea',
+      name: 'value',
+      label: '右侧默认值',
+      pipeOut: valuePipeOut,
+      visibleOn: 'typeof this.value !== "undefined"'
+    },
+
+    {
+      label: '语言',
+      name: 'language',
+      type: 'select',
+      value: 'javascript',
+      searchable: true,
+      options: availableLanguages.concat()
+    },
+
+    {
+      name: 'size',
+      type: 'button-group-select',
+      size: 'sm',
+      pipeIn: defaultValue(''),
+      className: 'w-full',
+      label: '控件尺寸',
+      options: [
+        {
+          label: '默认',
+          value: ''
+        },
+
+        {
+          label: '中',
+          value: 'md'
+        },
+
+        {
+          label: '大',
+          value: 'lg'
+        },
+
+        {
+          label: '加大',
+          value: 'xl'
+        },
+
+        {
+          label: '再加大',
+          value: 'xxl'
+        }
+      ]
+    }
+  ];
+}
+
+registerEditorPlugin(DiffEditorControlPlugin);