amis-editor 4.2.0-beta.3 → 5.1.8

package/src/plugin/Form/InputDate.tsx

@@ -1,17 +1,143 @@
-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';
+import {defaultValue, getSchemaTpl} from '../../component/schemaTpl';
+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 formatX = [
+  {
+    label: 'X(时间戳)',
+    value: 'X'
+  },
+  {
+    label: 'x(毫秒时间戳)',
+    value: 'x'
+  }
+];
+
+const DateType: {
+  [key: string]: {
+    format: string;
+    placeholder: string;
+    formatOptions: Array<{label: string; value: string; timeFormat?: string}>;
+  };
+} = {
+  date: {
+    format: 'YYYY-MM-DD',
+    placeholder: '请选择日期',
+    formatOptions: [
+      ...formatX,
+      {
+        label: 'YYYY-MM-DD',
+        value: 'YYYY-MM-DD'
+      },
+      {
+        label: 'YYYY/MM/DD',
+        value: 'YYYY/MM/DD'
+      },
+      {
+        label: 'YYYY年MM月DD日',
+        value: 'YYYY年MM月DD日'
+      }
+    ]
+  },
+  datetime: {
+    format: 'YYYY-MM-DD HH:mm:ss',
+    placeholder: '请选择日期以及时间',
+    formatOptions: [
+      ...formatX,
+      {
+        label: 'YYYY-MM-DD HH:mm:ss',
+        value: 'YYYY-MM-DD HH:mm:ss'
+      },
+      {
+        label: 'YYYY/MM/DD HH:mm:ss',
+        value: 'YYYY/MM/DD HH:mm:ss'
+      },
+      {
+        label: 'YYYY年MM月DD日 HH时mm分ss秒',
+        value: 'YYYY年MM月DD日 HH时mm分ss秒'
+      }
+    ]
+  },
+  time: {
+    format: 'HH:mm',
+    placeholder: '请选择时间',
+    formatOptions: [
+      {
+        label: 'HH:mm',
+        value: 'HH:mm',
+        timeFormat: 'HH:mm'
+      },
+      {
+        label: 'HH:mm:ss',
+        value: 'HH:mm:ss',
+        timeFormat: 'HH:mm'
+      },
+      {
+        label: 'HH时mm分',
+        value: 'HH时mm分',
+        timeFormat: 'HH:mm'
+      },
+      {
+        label: 'HH时mm分ss秒',
+        value: 'HH时mm分ss秒',
+        timeFormat: 'HH:mm:ss'
+      }
+    ]
+  },
+  month: {
+    format: 'YYYY-MM',
+    placeholder: '请选择月份',
+    formatOptions: [
+      ...formatX,
+      {
+        label: 'YYYY-MM',
+        value: 'YYYY-MM'
+      },
+      {
+        label: 'MM',
+        value: 'MM'
+      },
+      {
+        label: 'M',
+        value: 'M'
+      }
+    ]
+  },
+  quarter: {
+    format: 'YYYY [Q]Q',
+    placeholder: '请选择季度',
+    formatOptions: [
+      ...formatX,
+      {
+        label: 'YYYY-[Q]Q',
+        value: 'YYYY-[Q]Q'
+      },
+      {
+        label: 'Q',
+        value: 'Q'
+      }
+    ]
+  },
+  year: {
+    format: 'YYYY',
+    placeholder: '请选择年',
+    formatOptions: [
+      ...formatX,
+      {
+        label: 'YYYY',
+        value: 'YYYY'
+      }
+    ]
+  }
+};
+
+const tipedLabelText =
+  '支持 <code>now、+1day、-2weeks、+1hours、+2years</code>这种相对值用法，同时支持变量如<code>\\${start_date}</code>';
 
 export class DateControlPlugin extends BasePlugin {
   // 关联渲染器名字
@@ -22,8 +148,11 @@ export class DateControlPlugin extends BasePlugin {
 
   // 组件名称
   icon = 'fa fa-calendar';
-  name = '日期框';
+  name = '日期';
   isBaseComponent = true;
+  // 添加源对应组件中文名称 & type字段
+  searchKeywords =
+    '日期框、input-datetime、日期时间框、input-time、时间框、input-month、月份框、input-quarter、季度框、input-year、年框';
   description = '年月日选择，支持相对值设定，如<code>+2days</code>两天后';
   docLink = '/amis/zh-CN/components/form/input-date';
   tags = ['表单项'];
@@ -44,132 +173,226 @@ export class DateControlPlugin 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', '');
-      }
-    },
+  notRenderFormZone = true;
 
-    getSchemaTpl('switchDefaultValue'),
-
-    {
-      type: 'input-text',
-      name: 'value',
-      label: '默认值',
-      visibleOn: 'typeof this.value !== "undefined"',
-      placeholder: '请输入相对值',
-      description: '支持 <code>now、+1day、-2weeks</code>这种相对值用法'
-    },
+  panelTitle = '日期配置';
 
+  events: RendererEvent[] = [
     {
-      type: 'fieldSet',
-      title: '使用固定值',
-      collapsed: true,
-      collapsable: true,
-      className: 'fieldset',
-      visibleOn: 'typeof this.value !== "undefined"',
-      body: [
+      eventName: 'change',
+      eventLabel: '值变化',
+      description: '时间值变化时触发',
+      dataSchema: [
         {
-          type: 'input-date',
-          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);
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'string',
+              title: '时间值'
+            }
           }
         }
       ]
     },
-    getSchemaTpl('clearable', {
-      pipeIn: defaultValue(true)
-    }),
-
     {
-      type: 'input-text',
-      name: 'minDate',
-      label: '最小日期',
-      placeholder: '请输入相对值',
-      description:
-        '支持 <code>now、+1day、-2weeks</code>这种相对值用法，同时支持变量如<code>\\${start_date}</code>'
+      eventName: 'focus',
+      eventLabel: '获取焦点',
+      description: '输入框获取焦点(非内嵌模式)时触发'
     },
-
     {
-      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);
-          }
-        }
-      ]
-    },
+      eventName: 'blur',
+      eventLabel: '失去焦点',
+      description: '输入框失去焦点(非内嵌模式)时触发'
+    }
+  ];
 
+  // 动作定义
+  actions: RendererAction[] = [
     {
-      type: 'divider'
+      actionType: 'clear',
+      actionLabel: '清空',
+      description: '清空输入框内容'
     },
-
     {
-      type: 'input-text',
-      name: 'maxDate',
-      label: '最大日期',
-      placeholder: '请输入相对值',
-      description:
-        '支持 <code>now、+1day、-2weeks</code>这种相对值用法，同时支持变量如<code>\\${start_date}</code>'
+      actionType: 'reset',
+      actionLabel: '重置',
+      description: '将值重置为resetValue，若没有配置resetValue，则清空'
     },
-
     {
-      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);
-          }
-        }
-      ]
+      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('selectDateType', {
+                value: this.scaffold.type,
+                onChange: (
+                  value: string,
+                  oldValue: any,
+                  model: any,
+                  form: any
+                ) => {
+                  let type: string = value.split('-')[1];
+
+                  form.setValues({
+                    inputFormat: DateType[type]?.format,
+                    placeholder: DateType[type]?.placeholder,
+                    format: type === 'time' ? 'HH:mm' : 'X',
+                    minDate: '',
+                    maxDate: '',
+                    value: ''
+                  });
+                }
+              }),
+              {
+                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
+                ) => {
+                  const type = form.data.type.split('-')[1];
+                  model.setOptions(DateType[type].formatOptions);
+                  // 时间日期类组件 input-time 需要更加关注 timeFormat 和 inputFormat 属性区别
+                  // inputFormat 表示输入框内的显示格式； timeFormat表示选择下拉弹窗中展示"HH、mm、ss"的组合
+                  if (type === 'time') {
+                    const timeFormatObj = DateType[type].formatOptions.find(
+                      item => item.value === value
+                    );
+                    const timeFormat = timeFormatObj
+                      ? (timeFormatObj as any).timeFormat
+                      : 'HH:mm:ss';
+                    form.setValues({
+                      timeFormat: timeFormat
+                    });
+                  }
+                },
+                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('placeholder', {
+                pipeIn: defaultValue('请选择日期')
+              }),
+              // getSchemaTpl('remark'),
+              // getSchemaTpl('labelRemark'),
+              getSchemaTpl('description')
+            ]
+          },
+          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(DateControlPlugin);