amis-editor 4.2.0-beta.2 → 5.1.9-beta.0

package/src/plugin/Form/Textarea.tsx

@@ -1,6 +1,12 @@
-import {getSchemaTpl} from '../../component/schemaTpl';
+import {defaultValue, getSchemaTpl} from '../../component/schemaTpl';
 import {registerEditorPlugin} from '../../manager';
 import {BasePlugin} from '../../plugin';
+import {tipedLabel} from '../../component/control/BaseControl';
+
+import type {BaseEventContext} from '../../plugin';
+import {ValidatorTag} from '../../component/validator';
+import {getEventControlConfig} from '../../util';
+import {RendererAction, RendererEvent} from '../../event-action';
 
 export class TextareaControlPlugin extends BasePlugin {
   // 关联渲染器名字
@@ -30,54 +36,158 @@ export class TextareaControlPlugin extends BasePlugin {
     }
   };
 
+  notRenderFormZone = true;
+
   panelTitle = '多行文本';
-  panelBody = [
-    getSchemaTpl('switchDefaultValue'),
-    {
-      type: 'textarea',
-      name: 'value',
-      label: '默认值',
-      visibleOn: 'typeof this.value !== "undefined"'
-    },
+
+  events: RendererEvent[] = [
     {
-      type: 'input-number',
-      name: 'minRows',
-      value: 3,
-      label: '最小行数'
+      eventName: 'change',
+      eventLabel: '值变化',
+      description: '输入框值变化时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'string',
+              title: '输入值'
+            }
+          }
+        }
+      ]
     },
     {
-      type: 'input-number',
-      name: 'maxRows',
-      value: 20,
-      label: '最大行数'
+      eventName: 'focus',
+      eventLabel: '获取焦点',
+      description: '输入框获取焦点时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'string',
+              title: '输入值'
+            }
+          }
+        }
+      ]
     },
     {
-      type: 'input-number',
-      name: 'minLength',
-      value: 5,
-      label: '最小字数限制'
-    },
+      eventName: 'blur',
+      eventLabel: '失去焦点',
+      description: '输入框失去焦点时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'string',
+              title: '输入值'
+            }
+          }
+        }
+      ]
+    }
+  ];
+
+  actions: RendererAction[] = [
     {
-      type: 'input-number',
-      name: 'maxLength',
-      value: 120,
-      label: '最大字数限制'
+      actionType: 'clear',
+      actionLabel: '清空',
+      description: '清空输入框内容'
     },
-    getSchemaTpl('showCounter'),
     {
-      type: 'switch',
-      name: 'readOnly',
-      label: '是否只读'
+      actionType: 'reset',
+      actionLabel: '重置',
+      description: '将值重置为resetValue，若没有配置resetValue，则清空'
     },
     {
-      type: 'switch',
-      name: 'trimContents',
-      label: '去除首尾空白',
-      mode: 'inline',
-      className: 'w-full',
-      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'),
+              {
+                type: 'textarea',
+                name: 'value',
+                label: '默认值'
+              },
+              getSchemaTpl('switch', {
+                name: 'trimContents',
+                pipeIn: defaultValue(true),
+                label: tipedLabel(
+                  '去除首尾空白',
+                  '开启后，将不允许用户输入前后空格'
+                )
+              }),
+              getSchemaTpl('showCounter'),
+              getSchemaTpl('labelRemark'),
+              getSchemaTpl('remark'),
+              getSchemaTpl('placeholder'),
+              getSchemaTpl('description')
+            ]
+          },
+          getSchemaTpl('status', {
+            isFormItem: true,
+            readonly: true
+          }),
+          getSchemaTpl('validation', {
+            tag: ValidatorTag.Text
+          })
+        ])
+      },
+      {
+        title: '外观',
+        body: [
+          getSchemaTpl('collapseGroup', [
+            getSchemaTpl('style:formItem', {
+              renderer: context.info.renderer,
+              schema: [
+                {
+                  type: 'input-number',
+                  name: 'minRows',
+                  value: 3,
+                  label: '最小展示行数'
+                },
+                {
+                  type: 'input-number',
+                  name: 'maxRows',
+                  value: 20,
+                  label: '最大展示行数'
+                }
+              ]
+            }),
+            getSchemaTpl('style:classNames')
+          ])
+        ]
+      },
+      {
+        title: '事件',
+        className: 'p-none',
+        body: [
+          getSchemaTpl('eventControl', {
+            name: 'onEvent',
+            ...getEventControlConfig(this.manager, context)
+          })
+        ]
+      }
+    ]);
+  };
 }
 
 registerEditorPlugin(TextareaControlPlugin);