amis-editor 4.2.0-beta.0 → 5.1.8

package/src/plugin/Form/InputDateRange.tsx

@@ -1,17 +1,67 @@
-import {relativeValueRe} from 'amis';
-import {
-  defaultValue,
-  getSchemaTpl,
-  valuePipeOut
-} from '../../component/schemaTpl';
+import {defaultValue, getSchemaTpl} from '../../component/schemaTpl';
 import {registerEditorPlugin} from '../../manager';
-import {
-  BasePlugin,
-  BasicSubRenderInfo,
-  RendererEventContext,
-  SubRendererInfo
-} from '../../plugin';
-import moment from 'moment';
+import {BasePlugin, BaseEventContext} from '../../plugin';
+
+import {tipedLabel} from '../../component/control/BaseControl';
+import {ValidatorTag} from '../../component/validator';
+import {getEventControlConfig} from '../../util';
+import {RendererAction, RendererEvent} from '../../event-action';
+
+const DateType: {
+  [key: string]: {
+    format: string;
+    placeholder: string;
+    ranges: string[];
+  };
+} = {
+  date: {
+    format: 'YYYY-MM-DD',
+    placeholder: '请选择日期范围',
+    ranges: [
+      'yesterday',
+      '7daysago',
+      'prevweek',
+      'thismonth',
+      'prevmonth',
+      'prevquarter'
+    ]
+  },
+  datetime: {
+    format: 'YYYY-MM-DD HH:mm:ss',
+    placeholder: '请选择日期时间范围',
+    ranges: [
+      'yesterday',
+      '7daysago',
+      'prevweek',
+      'thismonth',
+      'prevmonth',
+      'prevquarter'
+    ]
+  },
+  time: {
+    format: 'HH:mm',
+    placeholder: '请选择时间范围',
+    ranges: []
+  },
+  month: {
+    format: 'YYYY-MM',
+    placeholder: '请选择月份范围',
+    ranges: []
+  },
+  quarter: {
+    format: 'YYYY [Q]Q',
+    placeholder: '请选择季度范围',
+    ranges: ['thisquarter', 'prevquarter']
+  },
+  year: {
+    format: 'YYYY',
+    placeholder: '请选择年范围',
+    ranges: ['thisyear', 'lastYear']
+  }
+};
+
+const tipedLabelText =
+  '支持 <code>now、+1day、-2weeks、+1hours、+2years</code>这种相对值用法，同时支持变量如<code>\\${start_date}</code>';
 
 export class DateRangeControlPlugin extends BasePlugin {
   // 关联渲染器名字
@@ -24,6 +74,9 @@ export class DateRangeControlPlugin extends BasePlugin {
   icon = 'fa fa-calendar';
   name = '日期范围';
   isBaseComponent = true;
+  // 添加源对应组件中文名称 & type字段
+  searchKeywords =
+    '日期范围框、input-datetime-range、日期时间范围、input-time-range、时间范围、input-month-range、月份范围、input-quarter-range、季度范围、input-year-range、年范围';
   description =
     '日期范围选择，可通过<code>minDate</code>、<code>maxDate</code>设定最小、最大日期';
   docLink = '/amis/zh-CN/components/form/input-date-range';
@@ -45,181 +98,270 @@ export class DateRangeControlPlugin 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'),
-      onChange: (value: any, oldValue: any, model: any, form: any) => {
-        form.setValueByName('value', '');
-        form.setValueByName('minDate', '');
-        form.setValueByName('maxDate', '');
-      }
-    },
-
-    getSchemaTpl('switchDefaultValue'),
+  notRenderFormZone = true;
 
-    {
-      type: 'input-text',
-      name: 'value',
-      label: '默认值',
-      visibleOn: 'typeof this.value !== "undefined"',
-      placeholder: '请输入相对值',
-      description:
-        '支持 <code>now、+1day、-2weeks</code>这种相对值用法，由于包含开始和结束时间，请用逗号隔开。'
-    },
+  panelTitle = '日期范围';
 
+  events: RendererEvent[] = [
     {
-      type: 'fieldSet',
-      title: '使用固定值',
-      visibleOn: 'typeof this.value !== "undefined"',
-      collapsed: true,
-      collapsable: true,
-      className: 'fieldset',
-      body: [
+      eventName: 'change',
+      eventLabel: '值变化',
+      description: '时间值变化时触发',
+      dataSchema: [
         {
-          type: 'input-date-range',
-          name: 'value',
-          pipeIn: (value: any) =>
-            value
-              ? value
-                  .split(',')
-                  .map((item: any) =>
-                    moment(
-                      relativeValueRe.test(item) ||
-                        ~['now', 'today'].indexOf(item)
-                        ? ''
-                        : item
-                    ).format('X')
-                  )
-              : '',
-          pipeOut: (value: any, old: any, data: any) => {
-            let {format} = data;
-            if (format) {
-              let val = value.split(',');
-              value = val
-                .map((item: string) =>
-                  moment(parseInt(item, 10), 'X').format(format)
-                )
-                .join(',');
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'string',
+              title: '时间值'
             }
-            return value;
           }
         }
       ]
     },
-    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: [
+      eventName: 'focus',
+      eventLabel: '获取焦点',
+      description: '输入框获取焦点(非内嵌模式)时触发',
+      dataSchema: [
         {
-          type: 'input-date',
-          name: 'minDate',
-          pipeIn: (value: any) =>
-            moment(
-              relativeValueRe.test(value) || ~['now', 'today'].indexOf(value)
-                ? ''
-                : value
-            ).format('X'),
-          pipeOut: (value: any, old: any, data: any) => {
-            return moment(parseInt(value, 10), 'X').format(data.format);
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'string',
+              title: '时间值'
+            }
           }
         }
       ]
     },
-
-    {
-      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: [
+      eventName: 'blur',
+      eventLabel: '失去焦点',
+      description: '输入框失去焦点(非内嵌模式)时触发',
+      dataSchema: [
         {
-          type: 'input-date',
-          name: 'maxDate',
-          pipeIn: (value: any) =>
-            moment(
-              relativeValueRe.test(value) || ~['now', 'today'].indexOf(value)
-                ? ''
-                : value
-            ).format('X'),
-          pipeOut: (value: any, old: any, data: any) => {
-            return moment(parseInt(value, 10), 'X').format(data.format);
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'string',
+              title: '时间值'
+            }
           }
         }
       ]
-    },
-    {
-      type: 'input-text',
-      name: 'minDuration',
-      label: '限制最小跨度',
-      description: '比如 2days'
-    },
-    {
-      type: 'input-text',
-      name: 'ranges',
-      label: '日期范围快捷键',
-      description:
-        '比如 today, yesterday, 1dayago, 7daysago, 90daysago, prevweek, thismonth, prevmonth, prevquarter, thisquarter'
-    },
+    }
+  ];
+
+  // 动作定义
+  actions: RendererAction[] = [
     {
-      type: 'input-text',
-      name: 'maxDuration',
-      label: '限制最大跨度',
-      description: '比如 1year'
+      actionType: 'clear',
+      actionLabel: '清空',
+      description: '清空输入框内容'
     },
     {
-      name: 'utc',
-      label: '是否使用 UTC 时间',
-      type: 'switch',
-      mode: 'inline',
-      className: 'block'
+      actionType: 'reset',
+      actionLabel: '重置',
+      description: '将值重置为resetValue，若没有配置resetValue，则清空'
     },
     {
-      name: 'embed',
-      label: '是否内嵌模式',
-      type: 'switch',
-      mode: 'inline',
-      className: 'block'
+      actionType: 'setValue',
+      actionLabel: '赋值',
+      description: '触发组件数据更新'
     }
   ];
+
+  panelJustify = true;
+
+  panelBodyCreator = (context: BaseEventContext) => {
+    const renderer: any = context.info.renderer;
+
+    return getSchemaTpl('tabs', [
+      {
+        title: '属性',
+        body: getSchemaTpl('collapseGroup', [
+          {
+            title: '基本',
+            body: [
+              getSchemaTpl('formItemName', {
+                required: true
+              }),
+              getSchemaTpl('label'),
+              getSchemaTpl('selectDateRangeType', {
+                value: this.scaffold.type,
+                onChange: (
+                  value: string,
+                  oldValue: any,
+                  model: any,
+                  form: any
+                ) => {
+                  const type: string = value.split('-')[1];
+                  form.setValues({
+                    inputFormat: DateType[type]?.format,
+                    placeholder: DateType[type]?.placeholder,
+                    format: type === 'time' ? 'HH:mm' : 'X',
+                    minDate: '',
+                    maxDate: '',
+                    value: '',
+                    ranges: DateType[type]?.ranges
+                  });
+                }
+              }),
+              {
+                type: 'input-text',
+                name: 'format',
+                label: tipedLabel(
+                  '值格式',
+                  '提交数据前将根据设定格式化数据，请参考 <a href="https://momentjs.com/" target="_blank">moment</a> 中的格式用法。'
+                ),
+                pipeIn: defaultValue('X')
+              },
+              {
+                type: 'input-text',
+                name: 'inputFormat',
+                label: tipedLabel(
+                  '显示格式',
+                  '请参考 <a href="https://momentjs.com/" target="_blank">moment</a> 中的格式用法。'
+                ),
+                pipeIn: defaultValue('YYYY-MM-DD'),
+                clearable: true
+                // onChange: (
+                //   value: string,
+                //   oldValue: any,
+                //   model: any,
+                //   form: any
+                // ) => {
+                //   model.setOptions(
+                //     DateType[form.data.type.split('-')[1]].formatOptions
+                //   );
+                // },
+                // options:
+                //   DateType[this.scaffold.type.split('-')[1]].formatOptions
+              },
+              getSchemaTpl('utc'),
+              getSchemaTpl('clearable', {
+                pipeIn: defaultValue(true)
+              }),
+              getSchemaTpl('formulaControl', {
+                name: 'value',
+                label: tipedLabel(
+                  '默认值',
+                  '支持 <code>now、+1day、-2weeks、+1hours、+2years</code>等这种相对值用法'
+                ),
+                placeholder: '请输入相对值',
+                inputClassName: 'is-inline'
+              }),
+              getSchemaTpl('formulaControl', {
+                name: 'minDate',
+                label: tipedLabel('最小值', tipedLabelText),
+                placeholder: '请输入相对值',
+                inputClassName: 'is-inline'
+              }),
+              getSchemaTpl('formulaControl', {
+                name: 'maxDate',
+                label: tipedLabel('最大值', tipedLabelText),
+                placeholder: '请输入相对值',
+                inputClassName: 'is-inline'
+              }),
+              getSchemaTpl('formulaControl', {
+                name: 'minDuration',
+                label: tipedLabel('最小跨度', '例如 2days'),
+                placeholder: '请输入最小跨度',
+                inputClassName: 'is-inline'
+              }),
+              getSchemaTpl('formulaControl', {
+                name: 'maxDuration',
+                label: tipedLabel('最大跨度', '例如 1year'),
+                placeholder: '请输入最大跨度',
+                inputClassName: 'is-inline'
+              }),
+              getSchemaTpl('dateShortCutControl', {
+                mode: 'normal',
+                dropDownOption: {
+                  'yesterday': '昨天',
+                  'thisweek': '本周',
+                  'prevweek': '这个周',
+                  '7daysago': '最近7天',
+                  'thismonth': '这个月',
+                  'prevmonth': '上个月',
+                  'thisquarter': '这个季度',
+                  'prevquarter': '上个季度',
+                  'thisyear': '今年'
+                }
+              }),
+              // getSchemaTpl('remark'),
+              // getSchemaTpl('labelRemark'),
+              {
+                type: 'input-text',
+                name: 'startPlaceholder',
+                label: '前占位提示',
+                pipeIn: defaultValue('开始时间')
+              },
+              {
+                type: 'input-text',
+                name: 'endPlaceholder',
+                label: '后占位提示',
+                pipeIn: defaultValue('结束时间')
+              }
+            ]
+          },
+          getSchemaTpl('status', {isFormItem: true}),
+          getSchemaTpl('validation', {
+            tag: ValidatorTag.Date
+          })
+        ])
+      },
+      {
+        title: '外观',
+        body: getSchemaTpl('collapseGroup', [
+          getSchemaTpl('style:formItem', renderer),
+          getSchemaTpl('style:classNames', [
+            getSchemaTpl('className', {
+              label: '描述',
+              name: 'descriptionClassName',
+              visibleOn: 'this.description'
+            }),
+            getSchemaTpl('className', {
+              name: 'addOn.className',
+              label: 'AddOn',
+              visibleOn: 'this.addOn && this.addOn.type === "text"'
+            })
+          ]),
+          getSchemaTpl('style:others', [
+            {
+              name: 'embed',
+              type: 'button-group-select',
+              size: 'md',
+              label: '模式',
+              mode: 'row',
+              value: false,
+              options: [
+                {
+                  label: '浮层',
+                  value: false
+                },
+                {
+                  label: '内嵌',
+                  value: true
+                }
+              ]
+            }
+          ])
+        ])
+      },
+      {
+        title: '事件',
+        className: 'p-none',
+        body: [
+          getSchemaTpl('eventControl', {
+            name: 'onEvent',
+            ...getEventControlConfig(this.manager, context)
+          })
+        ]
+      }
+    ]);
+  };
 }
 
 registerEditorPlugin(DateRangeControlPlugin);

package/src/plugin/Form/InputDateTime.tsx

@@ -1,27 +1,16 @@
-import {relativeValueRe} from 'amis';
-import {
-  defaultValue,
-  getSchemaTpl,
-  valuePipeOut
-} from '../../component/schemaTpl';
 import {registerEditorPlugin} from '../../manager';
-import {
-  BasePlugin,
-  BasicSubRenderInfo,
-  RendererEventContext,
-  SubRendererInfo
-} from '../../plugin';
-import moment from 'moment';
 
-export class DateTimeControlPlugin extends BasePlugin {
+import {DateControlPlugin} from './InputDate';
+
+export class DateTimeControlPlugin extends DateControlPlugin {
   // 关联渲染器名字
   rendererName = 'input-datetime';
   $schema = '/schemas/DateTimeControlSchema.json';
 
   // 组件名称
+  isBaseComponent = true;
   icon = 'fa fa-calendar';
   name = '日期时间';
-  isBaseComponent = true;
   description = '年月日时分选择';
   docLink = '/amis/zh-CN/components/form/input-datetime';
   tags = ['表单项'];
@@ -30,6 +19,8 @@ export class DateTimeControlPlugin extends BasePlugin {
     label: '日期时间',
     name: 'datetime'
   };
+
+  disabledRendererPlugin = true;
   previewSchema: any = {
     type: 'form',
     className: 'text-left',
@@ -43,141 +34,6 @@ export class DateTimeControlPlugin 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'),
-      onChange: (value: any, oldValue: any, model: any, form: any) => {
-        form.setValueByName('value', '');
-        form.setValueByName('minDate', '');
-        form.setValueByName('maxDate', '');
-      }
-    },
-
-    getSchemaTpl('switchDefaultValue'),
-
-    {
-      type: 'input-text',
-      name: 'value',
-      label: '默认值',
-      visibleOn: 'typeof this.value !== "undefined"',
-      placeholder: '请输入相对值',
-      description: '支持 <code>now、+1day、-2weeks</code>这种相对值用法'
-    },
-
-    {
-      type: 'fieldSet',
-      title: '使用固定值',
-      collapsed: true,
-      collapsable: true,
-      className: 'fieldset',
-      visibleOn: 'typeof this.value !== "undefined"',
-      body: [
-        {
-          type: 'input-datetime',
-          name: 'value',
-          pipeIn: (value: any) =>
-            moment(
-              relativeValueRe.test(value) || ~['now', 'today'].indexOf(value)
-                ? ''
-                : value
-            ).format('X'),
-          pipeOut: (value: any, old: any, data: any) => {
-            return moment(parseInt(value, 10), 'X').format(data.format);
-          }
-        }
-      ]
-    },
-
-    getSchemaTpl('clearable', {
-      pipeIn: defaultValue(true)
-    }),
-
-    {
-      type: 'input-text',
-      name: 'inputFormat',
-      label: '显示格式',
-      description:
-        '请参考 <a href="https://momentjs.com/" target="_blank">moment</a> 中的格式用法。',
-      pipeIn: defaultValue('YYYY-MM-DD HH:mm')
-    },
-
-    {
-      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) =>
-            moment(
-              relativeValueRe.test(value) || ~['now', 'today'].indexOf(value)
-                ? ''
-                : value
-            ).format('X'),
-          pipeOut: (value: any, old: any, data: any) => {
-            return moment(parseInt(value, 10), 'X').format(data.format);
-          }
-        }
-      ]
-    },
-
-    {
-      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) =>
-            moment(
-              relativeValueRe.test(value) || ~['now', 'today'].indexOf(value)
-                ? ''
-                : value
-            ).format('X'),
-          pipeOut: (value: any, old: any, data: any) => {
-            return moment(parseInt(value, 10), 'X').format(data.format);
-          }
-        }
-      ]
-    }
-  ];
 }
 
 registerEditorPlugin(DateTimeControlPlugin);