amis-editor 4.2.0-beta.2 → 5.1.9

package/src/plugin/Form/InputTree.tsx

@@ -1,6 +1,10 @@
+import React from 'react';
+import {RendererAction, RendererEvent} from '../../event-action';
 import {defaultValue, getSchemaTpl} from '../../component/schemaTpl';
+import {getComboWrapper} from '../../event-action/schema';
 import {registerEditorPlugin} from '../../manager';
-import {BasePlugin} from '../../plugin';
+import {BaseEventContext, BasePlugin} from '../../plugin';
+import {getEventControlConfig} from '../../util';
 
 export class TreeControlPlugin extends BasePlugin {
   // 关联渲染器名字
@@ -50,7 +54,158 @@ export class TreeControlPlugin extends BasePlugin {
     }
   };
 
+  notRenderFormZone = true;
+
   panelTitle = '树选择';
+
+  // 事件定义
+  events: RendererEvent[] = [
+    {
+      eventName: 'change',
+      eventLabel: '值变化',
+      description: '选中值变化时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'string',
+              title: '选中节点的值'
+            }
+          }
+        }
+      ]
+    },
+    {
+      eventName: 'add',
+      eventLabel: '新增选项',
+      description: '新增节点提交时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'object',
+              title: '新增的节点信息'
+            },
+            'event.data.options': {
+              type: 'array',
+              title: '选项集合'
+            }
+          }
+        }
+      ]
+    },
+    {
+      eventName: 'edit',
+      eventLabel: '编辑选项',
+      description: '编辑选项',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'object',
+              title: '编辑的节点信息'
+            },
+            'event.data.options': {
+              type: 'array',
+              title: '选项集合'
+            }
+          }
+        }
+      ]
+    },
+    {
+      eventName: 'delete',
+      eventLabel: '删除选项',
+      description: '删除选项',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'object',
+              title: '删除的节点信息'
+            },
+            'event.data.options': {
+              type: 'array',
+              title: '选项集合'
+            }
+          }
+        }
+      ]
+    },
+    {
+      eventName: 'loadFinished',
+      eventLabel: '懒加载完成',
+      description: '懒加载接口远程请求成功时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'object',
+              title: 'deferApi 懒加载远程请求成功后返回的数据'
+            }
+          }
+        }
+      ]
+    }
+  ];
+
+  // 动作定义
+  actions: RendererAction[] = [
+    {
+      actionType: 'expand',
+      actionLabel: '展开',
+      description: '展开指定层级',
+      config: ['openLevel'],
+      desc: (info: any) => {
+        return (
+          <div>
+            <span className="variable-right">{info?.__rendererLabel}</span>
+            展开到第
+            <span className="variable-left variable-right">
+              {info?.args?.openLevel}
+            </span>
+            层
+          </div>
+        );
+      },
+      schema: getComboWrapper({
+        type: 'input-formula',
+        variables: '${variables}',
+        evalMode: false,
+        variableMode: 'tabs',
+        label: '展开层级',
+        size: 'lg',
+        name: 'openLevel',
+        mode: 'horizontal'
+      })
+    },
+    {
+      actionType: 'collapse',
+      actionLabel: '收起',
+      description: '收起树节点'
+    },
+    {
+      actionType: 'clear',
+      actionLabel: '清空',
+      description: '清除数据'
+    },
+    {
+      actionType: 'reset',
+      actionLabel: '重置',
+      description: '重置数据'
+    },
+    {
+      actionType: 'setValue',
+      actionLabel: '赋值',
+      description: '触发组件数据更新'
+    }
+  ];
+
   panelDefinitions = {
     options: {
       label: '选项 Options',
@@ -92,7 +247,7 @@ export class TreeControlPlugin extends BasePlugin {
       ]
     }
   };
-  panelBody = [
+  panelBodyCreator = (context: BaseEventContext) =>
     getSchemaTpl('tabs', [
       {
         title: '常规',
@@ -141,49 +296,41 @@ export class TreeControlPlugin extends BasePlugin {
                     2
                   )
               }),
-              {
+
+              getSchemaTpl('switch', {
                 label: '隐藏顶级',
-                name: 'hideRoot',
-                type: 'switch',
-                mode: 'inline',
-                className: 'w-full'
-              },
-              {
+                name: 'hideRoot'
+              }),
+
+              getSchemaTpl('switch', {
                 name: 'showIcon',
                 label: '是否显示图标',
-                type: 'switch',
-                mode: 'inline',
-                className: 'w-full',
                 pipeIn: defaultValue(true)
-              },
+              }),
+
               getSchemaTpl('multiple'),
-              {
+
+              getSchemaTpl('switch', {
                 name: 'cascade',
+                label: '不自动选中子节点',
                 visibleOn: 'data.multiple',
-                label: '不自动选中子节点？',
-                type: 'switch',
-                description: '选中父级时，孩子节点是否自动选中',
-                mode: 'inline',
-                className: 'w-full'
-              },
-              {
+                description: '选中父级时，孩子节点是否自动选中'
+              }),
+
+              getSchemaTpl('switch', {
                 name: 'withChildren',
-                visibleOn: 'data.cascade !== true && data.multiple',
                 label: '数值是否携带子节点',
-                type: 'switch',
-                disabledOn: 'data.onlyChildren',
-                mode: 'inline',
-                className: 'w-full'
-              },
-              {
-                name: 'onlyChildren',
                 visibleOn: 'data.cascade !== true && data.multiple',
+                disabledOn: 'data.onlyChildren'
+              }),
+
+              getSchemaTpl('switch', {
+                name: 'onlyChildren',
                 label: '数值是否只包含子节点',
-                disabledOn: 'data.withChildren',
-                type: 'switch',
-                mode: 'inline',
-                className: 'w-full'
-              },
+                visibleOn: 'data.cascade !== true && data.multiple',
+                disabledOn: 'data.withChildren'
+              }),
+
               getSchemaTpl('joinValues'),
               getSchemaTpl('delimiter'),
               getSchemaTpl('extractValue'),
@@ -203,27 +350,30 @@ export class TreeControlPlugin extends BasePlugin {
             visibleOn: 'data.hideRoot !== true'
           },
 
-          {
+          getSchemaTpl('switch', {
             name: 'showIcon',
             label: '是否显示图标',
-            type: 'switch',
-            mode: 'inline',
-            className: 'w-full',
             pipeIn: defaultValue(true)
-          },
+          }),
 
-          {
+          getSchemaTpl('switch', {
             label: '是否显示单选按钮',
             name: 'showRadio',
-            type: 'switch',
-            mode: 'inline',
-            className: 'w-full',
             visibleOn: '!data.multiple'
-          }
+          })
+        ]
+      },
+      {
+        title: '事件',
+        className: 'p-none',
+        body: [
+          getSchemaTpl('eventControl', {
+            name: 'onEvent',
+            ...getEventControlConfig(this.manager, context)
+          })
         ]
       }
-    ])
-  ];
+    ]);
 }
 
 registerEditorPlugin(TreeControlPlugin);

package/src/plugin/Form/InputURL.tsx

@@ -18,6 +18,8 @@ export class URLControlPlugin extends TextControlPlugin {
     name: 'url'
   };
 
+  disabledRendererPlugin = true;
+
   previewSchema = {
     type: 'form',
     className: 'text-left',

package/src/plugin/Form/InputYear.tsx

@@ -19,6 +19,8 @@ export class YearControlPlugin extends DateControlPlugin {
     type: 'input-year',
     name: 'year'
   };
+
+  disabledRendererPlugin = true;
   previewSchema: any = {
     type: 'form',
     wrapWithPanel: false,

package/src/plugin/Form/InputYearRange.tsx

@@ -0,0 +1,41 @@
+import {registerEditorPlugin} from '../../manager';
+
+import {DateRangeControlPlugin} from './InputDateRange';
+
+export class YearRangeControlPlugin extends DateRangeControlPlugin {
+  // 关联渲染器名字
+  rendererName = 'input-year-range';
+  $schema = '/schemas/DateRangeControlSchema.json';
+
+  order = -440;
+
+  // 组件名称
+  icon = 'fa fa-calendar';
+  name = '日期范围';
+  isBaseComponent = true;
+  description =
+    '年份范围选择，可通过<code>minDate</code>、<code>maxDate</code>设定最小、最大日期';
+  docLink = '/amis/zh-CN/components/form/year-range';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'input-year-range',
+    label: '日期范围',
+    name: 'year-range'
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    mode: 'horizontal',
+    wrapWithPanel: false,
+    body: [
+      {
+        ...this.scaffold
+      }
+    ]
+  };
+
+  disabledRendererPlugin = true;
+  notRenderFormZone = true;
+}
+
+registerEditorPlugin(YearRangeControlPlugin);

package/src/plugin/Form/Item.tsx

@@ -24,25 +24,30 @@ export class ItemPlugin extends BasePlugin {
     panels: Array<BasicPanelItem>
   ) {
     const renderer = context.info.renderer;
+    const store = this.manager.store;
 
     if (context.selections.length) {
       return;
     }
-
+    const plugin = context.info.plugin;
     // 如果是表单项
-    if (!context.info.hostId && renderer?.isFormItem) {
+    if (
+      !context.info.hostId &&
+      renderer?.isFormItem &&
+      !plugin?.notRenderFormZone
+    ) {
       panels.push({
         key: 'form-item',
         icon: 'fa fa-desktop',
         title: this.panelTitle,
         render: this.manager.makeSchemaFormRender({
-          body: this.panelBodyCreator(context)
+          body: this.panelBodyCreator(context),
+          panelById: store.activeId
         }),
         order: -200
       });
     }
   }
-
   panelBodyCreator = (context: BaseEventContext) => {
     const ignoreName = ~['button', 'submit', 'reset'].indexOf(
       context.schema.type
@@ -87,21 +92,17 @@ export class ItemPlugin extends BasePlugin {
                 }),
             renderer.renderLabel !== false ? getSchemaTpl('label') : null,
             hasReadOnly
-              ? {
-                  type: 'switch',
+              ? getSchemaTpl('switch', {
                   name: 'readOnly',
-                  label: '只读模式',
-                  mode: 'inline',
-                  className: 'w-full'
-                }
+                  label: '只读模式'
+                })
               : null,
-            {
-              type: 'switch',
+            getSchemaTpl('switch', {
               name: 'disabled',
               label: '禁用',
               mode: 'inline',
               className: 'w-full'
-            },
+            }),
             ignoreValidator ? null : getSchemaTpl('required'),
             getSchemaTpl('description'),
             getSchemaTpl('placeholder'),
@@ -150,14 +151,12 @@ export class ItemPlugin extends BasePlugin {
             // TODO: 有些表单项没有 disabled
             getSchemaTpl('disabled'),
             getSchemaTpl('visible'),
-            {
-              type: 'switch',
+
+            getSchemaTpl('switch', {
               name: 'clearValueOnHidden',
               label: '隐藏时删除表单项值',
-              mode: 'inline',
-              className: 'w-full',
               disabledOn: 'typeof this.visible === "boolean"'
-            }
+            })
           ]
         },
         ignoreValidator

package/src/plugin/Form/ListSelect.tsx

@@ -1,6 +1,9 @@
 import {getSchemaTpl} from '../../component/schemaTpl';
 import {registerEditorPlugin} from '../../manager';
-import {BasePlugin} from '../../plugin';
+import {BasePlugin, BaseEventContext} from '../../plugin';
+
+import {formItemControl} from '../../component/control/BaseControl';
+import {RendererAction, RendererEvent} from '../../event-action';
 
 export class ListControlPlugin extends BasePlugin {
   // 关联渲染器名字
@@ -45,29 +48,81 @@ export class ListControlPlugin extends BasePlugin {
     ]
   };
 
+  notRenderFormZone = true;
+
   panelTitle = '列表选择';
-  panelBody = [
-    getSchemaTpl('switchDefaultValue'),
+
+  // 事件定义
+  events: RendererEvent[] = [
     {
-      type: 'list-select',
-      name: 'value',
-      label: '默认值',
-      description: '请填入选项 Options 中 value 值',
-      source: '${options}',
-      visibleOn: 'typeof this.value !== "undefined"'
-    },
-    getSchemaTpl('fieldSet', {
-      title: '选项',
-      body: [
-        getSchemaTpl('multiple'),
-        getSchemaTpl('joinValues'),
-        getSchemaTpl('delimiter'),
-        getSchemaTpl('extractValue'),
-        getSchemaTpl('options'),
-        getSchemaTpl('source')
+      eventName: 'change',
+      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: 'reload',
+      actionLabel: '重新加载',
+      description: '触发组件数据刷新并重新渲染'
+    },
+    {
+      actionType: 'setValue',
+      actionLabel: '赋值',
+      description: '触发组件数据更新'
+    }
+  ];
+
+  panelBodyCreator = (context: BaseEventContext) => {
+    return formItemControl(
+      {
+        common: {
+          replace: true,
+          body: [
+            getSchemaTpl('formItemName', {
+              required: true
+            }),
+            getSchemaTpl('label'),
+            getSchemaTpl('multiple'),
+            getSchemaTpl('extractValue')
+          ]
+        },
+        option: {
+          body: [
+            getSchemaTpl('optionControl', {
+              description: '设置选项后，输入时会下拉这些选项供用户参考。'
+            }),
+            getSchemaTpl('value')
+          ]
+        },
+        status: {}
+      },
+      context
+    );
+  };
 }
 
 registerEditorPlugin(ListControlPlugin);

package/src/plugin/Form/LocationPicker.tsx

@@ -1,3 +1,4 @@
+import {getSchemaTpl} from '../../component/schemaTpl';
 import {registerEditorPlugin} from '../../manager';
 import {BasePlugin} from '../../plugin';
 
@@ -32,13 +33,7 @@ export class LocationControlPlugin extends BasePlugin {
 
   panelTitle = '地理位置选择';
   panelBody = [
-    {
-      name: 'clearable',
-      label: '是否可清除',
-      type: 'switch',
-      mode: 'inline',
-      className: 'block'
-    },
+    getSchemaTpl('clearable'),
     {
       type: 'input-text',
       name: 'ak',

package/src/plugin/Form/MatrixCheckboxes.tsx

@@ -133,4 +133,4 @@ export class MatrixControlPlugin extends BasePlugin {
   ];
 }
 
-registerEditorPlugin(MatrixControlPlugin);
+registerEditorPlugin(MatrixControlPlugin);