amis-editor 4.2.0-beta.3 → 5.1.8

package/src/plugin/Form/Select.tsx

@@ -1,15 +1,12 @@
-import React from 'react';
-import {Button} from 'amis';
-import {defaultValue, getSchemaTpl} from '../../component/schemaTpl';
+import {getSchemaTpl} from '../../component/schemaTpl';
 import {registerEditorPlugin} from '../../manager';
-import {
-  BasePlugin,
-  BasicSubRenderInfo,
-  RendererEventContext,
-  SubRendererInfo
-} from '../../plugin';
+import {BasePlugin, BaseEventContext} from '../../plugin';
 import isArray from 'lodash/isArray';
 
+import {ValidatorTag} from '../../component/validator';
+import {getEventControlConfig} from '../../util';
+import {RendererAction, RendererEvent} from '../../event-action';
+
 export class SelectControlPlugin extends BasePlugin {
   // 关联渲染器名字
   rendererName = 'select';
@@ -52,182 +49,256 @@ export class SelectControlPlugin extends BasePlugin {
     ]
   };
 
+  notRenderFormZone = true;
+
   panelTitle = '下拉框';
-  panelBody = [
-    getSchemaTpl('switchDefaultValue'),
 
+  // 事件定义
+  events: RendererEvent[] = [
     {
-      type: 'select',
-      name: 'value',
-      label: '默认值',
-      source: '${options}',
-      visibleOn: '!data.multiple && typeof this.value !== "undefined"'
+      eventName: 'change',
+      eventLabel: '值变化',
+      description: '选中值变化时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'string',
+              title: '选中值'
+            }
+          }
+        }
+      ]
     },
-
     {
-      type: 'select',
-      name: 'value',
-      label: '默认值',
-      source: '${options}',
-      multiple: true,
-      visibleOn: ' data.multiple && typeof this.value !== "undefined"'
+      eventName: 'focus',
+      eventLabel: '获取焦点',
+      description: '输入框获取焦点时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'string',
+              title: '选中值'
+            }
+          }
+        }
+      ]
     },
-
-    getSchemaTpl('clearable'),
     {
-      label: '可检索',
-      name: 'searchable',
-      type: 'switch',
-      mode: 'inline',
-      className: 'w-full'
+      eventName: 'blur',
+      eventLabel: '失去焦点',
+      description: '输入框失去焦点时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'string',
+              title: '选中值'
+            }
+          }
+        }
+      ]
     },
-
     {
-      label: '是否默认选择第一个',
-      name: 'selectFirst',
-      type: 'switch',
-      mode: 'inline',
-      className: 'w-full'
-    },
-
-    getSchemaTpl('fieldSet', {
-      title: '选项',
-      body: [
-        getSchemaTpl('multiple'),
+      eventName: 'add',
+      eventLabel: '新增选项',
+      description: '新增选项',
+      dataSchema: [
         {
-          label: '选中内容以单行模式显示',
-          name: 'valuesNoWrap',
-          type: 'switch',
-          mode: 'inline',
-          className: 'w-full',
-          visibleOn: 'this.multiple'
-        },
-        {
-          label: '可全选',
-          name: 'checkAll',
-          type: 'switch',
-          mode: 'inline',
-          value: false,
-          className: 'w-full',
-          onChange: (value: any, origin: any, item: any, form: any) => {
-            // 开启 “可全选” 时，需关联开启多选模式
-            value && form.setValueByName('multiple', true);
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'object',
+              title: '新增的选项'
+            },
+            'event.data.options': {
+              type: 'array',
+              title: '选项集合'
+            }
           }
-        },
-        {
-          label: '自定义菜单模板',
-          name: 'menuTpl',
-          type: 'input-text'
-        },
-        {
-          label: '默认全选',
-          name: 'defaultCheckAll',
-          type: 'switch',
-          value: false,
-          visibleOn: 'this.checkAll',
-          mode: 'inline',
-          className: 'w-full'
-        },
+        }
+      ]
+    },
+    {
+      eventName: 'edit',
+      eventLabel: '编辑选项',
+      description: '编辑选项',
+      dataSchema: [
         {
-          type: 'input-text',
-          name: 'checkAllLabel',
-          label: '默认为 "全选" 的文字',
-          visibleOn: 'this.checkAll',
-          value: '全选'
-        },
-        getSchemaTpl('options'),
-        getSchemaTpl('source'),
-        getSchemaTpl('api', {
-          name: 'autoComplete',
-          label: '自动完成接口',
-          description:
-            '每次输入新内容后，将调用接口，根据接口返回更新选项。当前用户输入值在 <code>\\${term}</code> 中。'
-        }),
-        getSchemaTpl('joinValues'),
-        getSchemaTpl('delimiter'),
-        getSchemaTpl('extractValue'),
-        getSchemaTpl('autoFill'),
-
-        getSchemaTpl('creatable'),
-        getSchemaTpl('createBtnLabel', {
-          visibleOn: 'data.creatable'
-        }),
-        getSchemaTpl('api', {
-          label: '新增选项接口',
-          name: 'addApi',
-          visibleOn: 'data.creatable'
-        }),
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'object',
+              title: '编辑的选项'
+            },
+            'event.data.options': {
+              type: 'array',
+              title: '选项集合'
+            }
+          }
+        }
+      ]
+    },
+    {
+      eventName: 'delete',
+      eventLabel: '删除选项',
+      description: '删除选项',
+      dataSchema: [
         {
-          name: 'addControls',
-          visibleOn: 'data.creatable',
-          pipeIn: defaultValue([
-            {
-              type: 'input-text',
-              name: 'label',
-              label: false,
-              placeholder: '请输入名称'
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'object',
+              title: '删除的选项'
+            },
+            'event.data.options': {
+              type: 'array',
+              title: '选项集合'
             }
-          ]),
-          asFormItem: true,
-          children: (params: any) => ( // params: {value, onChange, data}
-            <Button
-              size="sm"
-              level="danger"
-              className="m-b"
-              onClick={() => {
-                let defaultValue = {
-                  type: 'dialog',
+          }
+        }
+      ]
+    }
+  ];
+
+  // 动作定义
+  actions: RendererAction[] = [
+    {
+      actionType: 'clear',
+      actionLabel: '清空',
+      description: '清除选中值'
+    },
+    {
+      actionType: 'reset',
+      actionLabel: '重置',
+      description: '将值重置为resetValue，若没有配置resetValue，则清空'
+    },
+    {
+      actionType: 'reload',
+      actionLabel: '重新加载',
+      description: '触发组件数据刷新并重新渲染'
+    },
+    {
+      actionType: 'setValue',
+      actionLabel: '赋值',
+      description: '触发组件数据更新'
+    }
+  ];
+
+  panelJustify = true;
+  panelBodyCreator = (context: BaseEventContext) => {
+    return getSchemaTpl('tabs', [
+      {
+        title: '属性',
+        body: getSchemaTpl('collapseGroup', [
+          {
+            title: '基本',
+            body: [
+              getSchemaTpl('formItemName', {
+                required: true
+              }),
+              getSchemaTpl('label'),
+              getSchemaTpl('clearable'),
+              getSchemaTpl('searchable'),
+              getSchemaTpl('multiple', {
+                popMore: [
+                  getSchemaTpl('switch', {
+                    label: '单行显示选中值',
+                    name: 'valuesNoWrap'
+                  })
+                ]
+              }),
+              getSchemaTpl('checkAll'),
+              getSchemaTpl('labelRemark'),
+              getSchemaTpl('remark'),
+              getSchemaTpl('placeholder'),
+              getSchemaTpl('description')
+            ]
+          },
+          {
+            title: '选项',
+            body: [
+              getSchemaTpl('optionControl'),
+              getSchemaTpl('menuTpl'),
+              getSchemaTpl('value', {
+                visibleOn: 'this.options == null'
+              }),
+              getSchemaTpl('creatable', {
+                formType: 'extend',
+                hiddenOnDefault: true,
+                form: {
                   body: [
-                    {
-                      type: 'input-text',
-                      name: 'label',
-                      label: false,
-                      placeholder: '请输入名称'
-                    }
+                    getSchemaTpl('createBtnLabel'),
+                    getSchemaTpl('addApi')
+                    // {
+                    //   label: '按钮位置',
+                    //   name: 'valueType',
+                    //   type: 'button-group-select',
+                    //   size: 'sm',
+                    //   tiled: true,
+                    //   value: 'asUpload',
+                    //   mode: 'row',
+                    //   options: [
+                    //     {
+                    //       label: '顶部',
+                    //       value: ''
+                    //     },
+                    //     {
+                    //       label: '底部',
+                    //       value: ''
+                    //     },
+                    //   ],
+                    // },
                   ]
-                };
-                if (params.value && params.value.body && isArray(params.value.body)) {
-                  defaultValue.body = params.value.body;
-                } else if (params.value && isArray(params.value)) {
-                  defaultValue.body = params.value;
                 }
-                this.manager.openSubEditor({
-                  title: '配置新建选项表单项',
-                  value: defaultValue,
-                  onChange: (curValue: any) => {
-                    if (curValue && curValue.body && isArray(curValue.body)) {
-                      /**
-                       * 备注: 需要确保 addControls 为数组类型 才会生效。
-                       * 详细使用说明：https://aisuda.bce.baidu.com/amis/zh-CN/components/form/options#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%96%B0%E5%A2%9E%E8%A1%A8%E5%8D%95%E9%A1%B9-addcontrols
-                       */
-                      return params.onChange(curValue.body, 'addControls');
-                    } else {
-                      return params.onChange([], 'addControls');
-                    }
-                  }
-                });
-              }}
-              block
-            >
-              配置新建选项表单项
-            </Button>
-          )
-        },
-
-        getSchemaTpl('editable'),
-        getSchemaTpl('api', {
-          label: '编辑选项接口',
-          name: 'editApi'
-        }),
-
-        getSchemaTpl('removable'),
-        getSchemaTpl('api', {
-          label: '删除选项接口',
-          name: 'deleteApi'
-        })
-      ]
-    })
-  ];
+              }),
+              getSchemaTpl('editable', {
+                type: 'ae-Switch-More',
+                formType: 'extend',
+                hiddenOnDefault: true,
+                form: {
+                  body: [getSchemaTpl('editApi')]
+                }
+              }),
+              getSchemaTpl('removable', {
+                type: 'ae-Switch-More',
+                formType: 'extend',
+                hiddenOnDefault: true,
+                form: {
+                  body: [getSchemaTpl('deleteApi')]
+                }
+              })
+            ]
+          },
+          getSchemaTpl('status', {isFormItem: true}),
+          getSchemaTpl('validation', {tag: ValidatorTag.MultiSelect})
+        ])
+      },
+      {
+        title: '外观',
+        body: [
+          getSchemaTpl('collapseGroup', [
+            getSchemaTpl('style:formItem', {renderer: context.info.renderer}),
+            getSchemaTpl('style:classNames')
+          ])
+        ]
+      },
+      {
+        title: '事件',
+        className: 'p-none',
+        body: [
+          getSchemaTpl('eventControl', {
+            name: 'onEvent',
+            ...getEventControlConfig(this.manager, context)
+          })
+        ]
+      }
+    ]);
+  };
 }
 
 registerEditorPlugin(SelectControlPlugin);

package/src/plugin/Form/Static.tsx

@@ -319,4 +319,4 @@ export class StaticControlPlugin extends BasePlugin {
   }*/
 }
 
-registerEditorPlugin(StaticControlPlugin);
+registerEditorPlugin(StaticControlPlugin);