amis-editor 4.2.0-beta.0 → 5.1.8

package/src/plugin/Form/InputMonthRange.tsx

@@ -1,18 +1,8 @@
-import {relativeValueRe} from 'amis';
-import {
-  defaultValue,
-  getSchemaTpl,
-  valuePipeOut
-} from '../../component/schemaTpl';
 import {registerEditorPlugin} from '../../manager';
-import {
-  BasePlugin,
-  BasicSubRenderInfo,
-  RendererEventContext,
-  SubRendererInfo
-} from '../../plugin';
 
-export class MonthRangeControlPlugin extends BasePlugin {
+import {DateRangeControlPlugin} from './InputDateRange';
+
+export class MonthRangeControlPlugin extends DateRangeControlPlugin {
   // 关联渲染器名字
   rendererName = 'input-month-range';
   $schema = '/schemas/MonthRangeControlSchema.json';
@@ -29,7 +19,7 @@ export class MonthRangeControlPlugin extends BasePlugin {
   tags = ['表单项'];
   scaffold = {
     type: 'input-month-range',
-    label: '月份范围',
+    label: '日期范围',
     name: 'month-range'
   };
   previewSchema: any = {
@@ -44,152 +34,8 @@ export class MonthRangeControlPlugin extends BasePlugin {
     ]
   };
 
-  panelTitle = '月份范围';
-  panelBody = [
-    getSchemaTpl('placeholder', {
-      pipeIn: defaultValue('请选择月份范围')
-    }),
-
-    {
-      type: 'input-text',
-      name: 'format',
-      label: '值格式',
-      description:
-        '请参考 <a href="https://momentjs.com/" target="_blank">moment</a> 中的格式用法。',
-      pipeIn: defaultValue('X')
-    },
-
-    getSchemaTpl('switchDefaultValue'),
-
-    {
-      type: 'input-text',
-      name: 'value',
-      label: '默认值',
-      visibleOn: 'typeof this.value !== "undefined"',
-      placeholder: '请输入相对值',
-      description:
-        '支持 <code>now、+1day、-2weeks</code>这种相对值用法，由于包含开始和结束时间，请用逗号隔开。'
-    },
-
-    {
-      type: 'fieldSet',
-      title: '使用固定值',
-      visibleOn: 'typeof this.value !== "undefined"',
-      collapsed: true,
-      collapsable: true,
-      className: 'fieldset',
-      body: [
-        {
-          type: 'input-month-range',
-          name: 'value',
-          pipeIn: (value: any) =>
-            value
-              ? value
-                  .split(',')
-                  .map((item: any) =>
-                    relativeValueRe.test(item) ||
-                    ~['now', 'today'].indexOf(item)
-                      ? ''
-                      : item
-                  )
-              : ''
-        }
-      ]
-    },
-    getSchemaTpl('clearable', {
-      pipeIn: defaultValue(true)
-    }),
-    {
-      type: 'input-text',
-      name: 'minDate',
-      label: '最小日期',
-      placeholder: '请输入相对值',
-      description:
-        '支持 <code>now、+1day、-2weeks</code>这种相对值用法，同时支持变量如<code>\\${start_date}</code>'
-    },
-
-    {
-      type: 'fieldSet',
-      title: '使用固定值',
-      collapsed: true,
-      collapsable: true,
-      className: 'fieldset',
-      body: [
-        {
-          type: 'input-date',
-          name: 'minDate',
-          pipeIn: (value: any) =>
-            relativeValueRe.test(value) || ~['now', 'today'].indexOf(value)
-              ? ''
-              : value
-        }
-      ]
-    },
-
-    {
-      type: 'divider'
-    },
-
-    {
-      type: 'input-text',
-      name: 'maxDate',
-      label: '最大日期',
-      placeholder: '请输入相对值',
-      description:
-        '支持 <code>now、+1day、-2weeks</code>这种相对值用法，同时支持变量如<code>\\${start_date}</code>'
-    },
-
-    {
-      type: 'fieldSet',
-      title: '使用固定值',
-      collapsed: true,
-      collapsable: true,
-      className: 'fieldset',
-      body: [
-        {
-          type: 'input-date',
-          name: 'maxDate',
-          pipeIn: (value: any) =>
-            relativeValueRe.test(value) || ~['now', 'today'].indexOf(value)
-              ? ''
-              : value
-        }
-      ]
-    },
-    {
-      type: 'input-text',
-      name: 'minDuration',
-      label: '限制最小跨度',
-      description: '比如 2days'
-    },
-    {
-      type: 'input-text',
-      name: 'maxDuration',
-      label: '限制最大跨度',
-      description: '比如 1year'
-    },
-    {
-      name: 'utc',
-      label: '是否使用 UTC 时间',
-      type: 'switch',
-      mode: 'inline',
-      className: 'block'
-    },
-    {
-      name: 'clearable',
-      label: '是否可清除',
-      type: 'switch',
-      mode: 'inline',
-      className: 'block'
-    },
-    {
-      name: 'embed',
-      label: '是否内嵌模式',
-      type: 'switch',
-      mode: 'inline',
-      className: 'block'
-    }
-  ];
+  disabledRendererPlugin = true;
+  notRenderFormZone = true;
 }
 
 registerEditorPlugin(MonthRangeControlPlugin);

package/src/plugin/Form/InputNumber.tsx

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

package/src/plugin/Form/InputPassword.tsx

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

package/src/plugin/Form/InputQuarter.tsx

@@ -8,7 +8,7 @@ export class InputQuarterPlugin extends DateControlPlugin {
   $schema = '/schemas/QuarterControlSchema.json';
 
   // 组件名称
-  name = 'Quarter';
+  name = '季度';
   isBaseComponent = true;
   icon = 'fa fa-calendar';
   description = `季度选择`;
@@ -19,6 +19,8 @@ export class InputQuarterPlugin extends DateControlPlugin {
     type: 'input-quarter',
     name: 'month'
   };
+
+  disabledRendererPlugin = true;
   previewSchema: any = {
     type: 'form',
     wrapWithPanel: false,

package/src/plugin/Form/InputQuarterRange.tsx

@@ -1,18 +1,8 @@
-import {relativeValueRe} from 'amis';
-import {
-  defaultValue,
-  getSchemaTpl,
-  valuePipeOut
-} from '../../component/schemaTpl';
 import {registerEditorPlugin} from '../../manager';
-import {
-  BasePlugin,
-  BasicSubRenderInfo,
-  RendererEventContext,
-  SubRendererInfo
-} from '../../plugin';
 
-export class QuarterRangePlugin extends BasePlugin {
+import {DateRangeControlPlugin} from './InputDateRange';
+
+export class QuarterRangePlugin extends DateRangeControlPlugin {
   // 关联渲染器名字
   rendererName = 'input-quarter-range';
   $schema = '/schemas/MonthRangeControlSchema.json';
@@ -29,7 +19,7 @@ export class QuarterRangePlugin extends BasePlugin {
   tags = ['表单项'];
   scaffold = {
     type: 'input-quarter-range',
-    label: '季度范围',
+    label: '日期范围',
     name: 'quarter-range'
   };
   previewSchema: any = {
@@ -44,152 +34,8 @@ export class QuarterRangePlugin extends BasePlugin {
     ]
   };
 
-  panelTitle = '季度范围';
-  panelBody = [
-    getSchemaTpl('placeholder', {
-      pipeIn: defaultValue('请选择月份范围')
-    }),
-
-    {
-      type: 'input-text',
-      name: 'format',
-      label: '值格式',
-      description:
-        '请参考 <a href="https://momentjs.com/" target="_blank">moment</a> 中的格式用法。',
-      pipeIn: defaultValue('X')
-    },
-
-    getSchemaTpl('switchDefaultValue'),
-
-    {
-      type: 'input-text',
-      name: 'value',
-      label: '默认值',
-      visibleOn: 'typeof this.value !== "undefined"',
-      placeholder: '请输入相对值',
-      description:
-        '支持 <code>now、+1day、-2weeks</code>这种相对值用法，由于包含开始和结束时间，请用逗号隔开。'
-    },
-
-    {
-      type: 'fieldSet',
-      title: '使用固定值',
-      visibleOn: 'typeof this.value !== "undefined"',
-      collapsed: true,
-      collapsable: true,
-      className: 'fieldset',
-      body: [
-        {
-          type: 'input-quarter-range',
-          name: 'value',
-          pipeIn: (value: any) =>
-            value
-              ? value
-                  .split(',')
-                  .map((item: any) =>
-                    relativeValueRe.test(item) ||
-                    ~['now', 'today'].indexOf(item)
-                      ? ''
-                      : item
-                  )
-              : ''
-        }
-      ]
-    },
-    getSchemaTpl('clearable', {
-      pipeIn: defaultValue(true)
-    }),
-    {
-      type: 'input-text',
-      name: 'minDate',
-      label: '最小日期',
-      placeholder: '请输入相对值',
-      description:
-        '支持 <code>now、+1day、-2weeks</code>这种相对值用法，同时支持变量如<code>\\${start_date}</code>'
-    },
-
-    {
-      type: 'fieldSet',
-      title: '使用固定值',
-      collapsed: true,
-      collapsable: true,
-      className: 'fieldset',
-      body: [
-        {
-          type: 'input-date',
-          name: 'minDate',
-          pipeIn: (value: any) =>
-            relativeValueRe.test(value) || ~['now', 'today'].indexOf(value)
-              ? ''
-              : value
-        }
-      ]
-    },
-
-    {
-      type: 'divider'
-    },
-
-    {
-      type: 'input-text',
-      name: 'maxDate',
-      label: '最大日期',
-      placeholder: '请输入相对值',
-      description:
-        '支持 <code>now、+1day、-2weeks</code>这种相对值用法，同时支持变量如<code>\\${start_date}</code>'
-    },
-
-    {
-      type: 'fieldSet',
-      title: '使用固定值',
-      collapsed: true,
-      collapsable: true,
-      className: 'fieldset',
-      body: [
-        {
-          type: 'input-date',
-          name: 'maxDate',
-          pipeIn: (value: any) =>
-            relativeValueRe.test(value) || ~['now', 'today'].indexOf(value)
-              ? ''
-              : value
-        }
-      ]
-    },
-    {
-      type: 'input-text',
-      name: 'minDuration',
-      label: '限制最小跨度',
-      description: '比如 2days'
-    },
-    {
-      type: 'input-text',
-      name: 'maxDuration',
-      label: '限制最大跨度',
-      description: '比如 1year'
-    },
-    {
-      name: 'utc',
-      label: '是否使用 UTC 时间',
-      type: 'switch',
-      mode: 'inline',
-      className: 'block'
-    },
-    {
-      name: 'clearable',
-      label: '是否可清除',
-      type: 'switch',
-      mode: 'inline',
-      className: 'block'
-    },
-    {
-      name: 'embed',
-      label: '是否内嵌模式',
-      type: 'switch',
-      mode: 'inline',
-      className: 'block'
-    }
-  ];
+  disabledRendererPlugin = true;
+  notRenderFormZone = true;
 }
 
 registerEditorPlugin(QuarterRangePlugin);

package/src/plugin/Form/InputRange.tsx

@@ -1,3 +1,4 @@
+import {RendererAction, RendererEvent} from '../../event-action';
 import {defaultValue, getSchemaTpl} from '../../component/schemaTpl';
 import {registerEditorPlugin} from '../../manager';
 import {BasePlugin} from '../../plugin';
@@ -31,6 +32,77 @@ export class RangeControlPlugin extends BasePlugin {
     ]
   };
 
+  // 事件定义
+  events: RendererEvent[] = [
+    {
+      eventName: 'change',
+      eventLabel: '值变化',
+      description: '滑块值变化时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'string',
+              title: '当前值'
+            }
+          }
+        }
+      ]
+    },
+    {
+      eventName: 'focus',
+      eventLabel: '获取焦点',
+      description: '当设置 showInput 为 true 时，输入框获取焦点时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'string',
+              title: '滑块当前值'
+            }
+          }
+        }
+      ]
+    },
+    {
+      eventName: 'blur',
+      eventLabel: '失去焦点',
+      description: '当设置 showInput 为 true 时，输入框失去焦点时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'string',
+              title: '滑块当前值'
+            }
+          }
+        }
+      ]
+    }
+  ];
+
+  // 动作定义
+  actions: RendererAction[] = [
+    {
+      actionType: 'clear',
+      actionLabel: '清空',
+      description: '清除输入框'
+    },
+    {
+      actionType: 'reset',
+      actionLabel: '重置',
+      description: '将值重置为resetValue，若没有配置resetValue，则清空'
+    },
+    {
+      actionType: 'setValue',
+      actionLabel: '赋值',
+      description: '触发组件数据更新'
+    }
+  ];
+
   panelTitle = '滑块';
   panelBody = [
     getSchemaTpl('switchDefaultValue'),
@@ -101,13 +173,11 @@ export class RangeControlPlugin extends BasePlugin {
       value: ''
     },
 
-    {
-      type: 'switch',
+    getSchemaTpl('switch', {
       name: 'showInput',
-      mode: 'inline',
       label: '是否显示输入框',
       value: false
-    },
+    }),
 
     getSchemaTpl('clearable'),
     getSchemaTpl('multiple', {