amis-editor 5.2.0-beta.1 → 5.2.0

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,85 @@
+import React from 'react';
+import {Button} from 'amis';
+import {getSchemaTpl} from '../../component/schemaTpl';
+import {registerEditorPlugin} from '../../manager';
+import {BasePlugin, RegionConfig, BaseEventContext} from '../../plugin';
+import {formItemControl} from '../../component/control/BaseControl';
+
+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 = ['容器'];
+  /**
+   * 组件选择面板中隐藏，和Container合并
+   */
+  disabledRendererPlugin = true;
+  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 = '表单项容器';
+  panelBodyCreator = (context: BaseEventContext) => {
+    return formItemControl({
+      common: {
+        replace: true,
+        body: [
+          {
+            children: (
+              <Button
+                className="m-b"
+                onClick={() => this.manager.showRendererPanel('表单项')}
+                level="danger"
+                tooltip="插入一个新的元素"
+                size="sm"
+                block
+              >
+                新增元素
+              </Button>
+            )
+          },
+          getSchemaTpl('labelRemark'),
+          getSchemaTpl('remark'),
+          getSchemaTpl('placeholder'),
+          getSchemaTpl('description')
+        ]
+      }
+    });
+  };
+}
+
+registerEditorPlugin(ControlPlugin);

package/src/plugin/Form/DiffEditor.tsx

@@ -0,0 +1,215 @@
+import {availableLanguages} from 'amis/lib/renderers/Form/Editor';
+import {
+  defaultValue,
+  getSchemaTpl,
+  undefinedPipeOut,
+  valuePipeOut
+} from '../../component/schemaTpl';
+import {registerEditorPlugin} from '../../manager';
+import {BasePlugin} from '../../plugin';
+
+import type {BaseEventContext} from '../../plugin';
+import {ValidatorTag} from '../../component/validator';
+import {getEventControlConfig} from '../../util';
+import {RendererAction, RendererEvent} from '../../event-action';
+
+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'
+      }
+    ]
+  };
+
+  events: RendererEvent[] = [
+    {
+      eventName: 'focus',
+      eventLabel: '获取焦点',
+      description: '右侧输入框获取焦点时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'string',
+              title: '当前代码'
+            }
+          }
+        }
+      ]
+    },
+    {
+      eventName: 'blur',
+      eventLabel: '失去焦点',
+      description: '右侧输入框失去焦点时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'string',
+              title: '当前代码'
+            }
+          }
+        }
+      ]
+    }
+  ];
+
+  actions: RendererAction[] = [
+    {
+      actionType: 'clear',
+      actionLabel: '清空',
+      description: '清除选中值'
+    },
+    {
+      actionType: 'reset',
+      actionLabel: '重置',
+      description: '将值重置为resetValue，若没有配置resetValue，则清空'
+    },
+    {
+      actionType: 'focus',
+      actionLabel: '获取焦点',
+      description: '获取焦点，焦点落在右侧编辑面板'
+    },
+    {
+      actionType: 'setValue',
+      actionLabel: '赋值',
+      description: '触发组件数据更新'
+    }
+  ];
+
+  notRenderFormZone = true;
+
+  panelTitle = 'Diff编辑器';
+
+  panelJustify = true;
+
+  panelBodyCreator = (context: BaseEventContext) => {
+    return getSchemaTpl('tabs', [
+      {
+        title: '属性',
+        body: getSchemaTpl('collapseGroup', [
+          {
+            title: '基本',
+            body: [
+              getSchemaTpl('formItemName', {
+                required: true
+              }),
+              getSchemaTpl('label'),
+              {
+                label: '语言',
+                name: 'language',
+                type: 'select',
+                value: 'javascript',
+                searchable: true,
+                options: availableLanguages.concat()
+              },
+              {
+                type: 'textarea',
+                name: 'diffValue',
+                label: '左侧默认值',
+                pipeOut: valuePipeOut,
+                placeholder: '支持使用 ${xxx} 来获取变量'
+              },
+              {
+                type: 'textarea',
+                name: 'value',
+                label: '右侧默认值',
+                placeholder: '支持使用 ${xxx} 来获取变量'
+              },
+              getSchemaTpl('labelRemark'),
+              getSchemaTpl('remark'),
+              getSchemaTpl('description')
+            ]
+          },
+          getSchemaTpl('status', {isFormItem: true}),
+          getSchemaTpl('validation', {
+            tag: ValidatorTag.All
+          })
+        ])
+      },
+      {
+        title: '外观',
+        body: getSchemaTpl('collapseGroup', [
+          getSchemaTpl('style:formItem', {
+            renderer: context.info.renderer,
+            schema: [
+              {
+                name: 'size',
+                type: 'select',
+                pipeIn: defaultValue(''),
+                pipeOut: undefinedPipeOut,
+                label: '控件尺寸',
+                options: [
+                  {
+                    label: '默认',
+                    value: ''
+                  },
+
+                  {
+                    label: '中',
+                    value: 'md'
+                  },
+
+                  {
+                    label: '大',
+                    value: 'lg'
+                  },
+
+                  {
+                    label: '特大',
+                    value: 'xl'
+                  },
+
+                  {
+                    label: '超大',
+                    value: 'xxl'
+                  }
+                ]
+              }
+            ]
+          }),
+          getSchemaTpl('style:classNames')
+        ])
+      },
+      {
+        title: '事件',
+        className: 'p-none',
+        body: [
+          getSchemaTpl('eventControl', {
+            name: 'onEvent',
+            ...getEventControlConfig(this.manager, context)
+          })
+        ]
+      }
+    ]);
+  };
+}
+
+registerEditorPlugin(DiffEditorControlPlugin);