feat(generator): datepicker add default configuration

examples/form-generator/src/App/schema.js

@@ -83,7 +83,26 @@
 
 export default {
   validateTime: 'change',
+  requiredMode: 'default',
   type: 'object',
   ui: {},
   theme: 'antd',
+  schema: [
+    {
+      type: 'string',
+      title: '日期选择框',
+      ui: {
+        type: 'datePicker',
+      },
+      fieldKey: 'datePicker_rNWNDU',
+    },
+    {
+      type: 'string',
+      title: '时间选择框',
+      ui: {
+        type: 'timePicker',
+      },
+      fieldKey: 'timePicker_DhrlL-',
+    },
+  ],
 }

packages/generator/src/fields/formItem/datepicker.field.ts

@@ -1,4 +1,90 @@
 import { Field } from '../types'
+import type { OnChange } from '@jdfed/utils'
+
+const formatList = {
+  date: 'YYYY-MM-DD HH:mm:ss',
+  week: 'YYYY-wo',
+  month: 'YYYY-MM',
+  quarter: 'YYYY-quarter',
+  year: 'YYYY',
+}
+
+const changeShowTime: OnChange = ({ dispatch, getKey, val }) => {
+  dispatch({
+    type: 'setUi',
+    action: {
+      set: {
+        [getKey('ui.default', 'uiSchema') + '.showTime']: val,
+        [getKey('ui.default', 'uiSchema') + '.format']: val
+          ? 'YYYY-MM-DD HH:mm:ss'
+          : 'YYYY-MM-DD',
+        [getKey('ui.default__range.0', 'uiSchema') + '.showTime']: val,
+        [getKey('ui.default__range.1', 'uiSchema') + '.showTime']: val,
+        [getKey('ui.default__range.0', 'uiSchema') + '.format']: val
+          ? 'YYYY-MM-DD HH:mm:ss'
+          : 'YYYY-MM-DD',
+        [getKey('ui.default__range.1', 'uiSchema') + '.format']: val
+          ? 'YYYY-MM-DD HH:mm:ss'
+          : 'YYYY-MM-DD',
+      },
+    },
+  })
+  dispatch({
+    type: 'setValidate',
+    action: {
+      set: {
+        [getKey('ui.default', 'dataSchema') + '.default']: '',
+      },
+    },
+  })
+  dispatch({
+    type: 'setData',
+    action: {
+      set: {
+        'ui.default': '',
+        'ui.default__range': [],
+        'ui.format': val ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD',
+      },
+    },
+  })
+}
+
+const changePicker: OnChange = ({ dispatch, getKey, val }) => {
+  dispatch({
+    type: 'setUi',
+    action: {
+      set: {
+        [getKey('ui.default', 'uiSchema') + '.picker']: val,
+        [getKey('ui.default', 'uiSchema') + '.format']:
+          formatList[val as keyof typeof formatList],
+        [getKey('ui.default__range.0', 'uiSchema') + '.picker']: val,
+        [getKey('ui.default__range.1', 'uiSchema') + '.picker']: val,
+        [getKey('ui.default__range.0', 'uiSchema') + '.format']:
+          formatList[val as keyof typeof formatList],
+        [getKey('ui.default__range.1', 'uiSchema') + '.format']:
+          formatList[val as keyof typeof formatList],
+      },
+    },
+  })
+  dispatch({
+    type: 'setValidate',
+    action: {
+      set: {
+        [getKey('ui.default', 'dataSchema') + '.default']: '',
+      },
+    },
+  })
+  dispatch({
+    type: 'setData',
+    action: {
+      set: {
+        'ui.default': '',
+        'ui.default__range': [],
+        'ui.format': formatList[val as keyof typeof formatList],
+      },
+    },
+  })
+}
 
 /**
  * 日期选择器
@@ -9,9 +95,9 @@ const config: Field = {
   unitedSchema: {
     type: 'string',
     title: '日期选择框',
-    format: 'date-time',
     ui: {
       type: 'datePicker',
+      showTime: true,
     },
   },
   propertyConfig: {
@@ -42,7 +128,12 @@ const config: Field = {
         type: 'boolean',
         title: '是否开启时间选择功能',
         default: true,
-        ui: { type: 'switch' },
+        ui: {
+          type: 'switch',
+          onChange: changeShowTime,
+          // eslint-disable-next-line quotes
+          vcontrol: "return props.formData.ui.picker==='date'",
+        },
       },
       {
         fieldKey: 'picker',
@@ -52,6 +143,7 @@ const config: Field = {
         ui: {
           type: 'select',
           style: { width: '50%' },
+          onChange: changePicker,
           options: [
             { label: '日', value: 'date' },
             { label: '周', value: 'week' },
@@ -76,15 +168,16 @@ const config: Field = {
         type: 'string',
         title: '默认值',
         ui: {
-          type: 'text',
-          placeholder: '2021-11-11 11:11:11',
+          type: 'datePicker',
+          picker: 'date',
+          showTime: true,
           vcontrol: 'return !props.formData.ui.range',
         },
       },
       {
-        fieldKey: 'placeholder__range',
+        fieldKey: 'default__range',
         type: 'array',
-        title: '范围型时间选择器占位符',
+        title: '默认值',
         default: [],
         ui: {
           type: 'array',
@@ -98,24 +191,26 @@ const config: Field = {
             type: 'string',
             title: '起始时间',
             ui: {
-              type: 'text',
-              placeholder: '起始时间占位符',
+              type: 'datePicker',
+              picker: 'date',
+              showTime: true,
             },
           },
           {
             type: 'string',
             title: '终止时间',
             ui: {
-              type: 'text',
-              placeholder: '终止时间占位符',
+              type: 'datePicker',
+              picker: 'date',
+              showTime: true,
             },
           },
         ],
       },
       {
-        fieldKey: 'default__range',
+        fieldKey: 'placeholder__range',
         type: 'array',
-        title: '默认值',
+        title: '范围型时间选择器占位符',
         default: [],
         ui: {
           type: 'array',
@@ -130,15 +225,15 @@ const config: Field = {
             title: '起始时间',
             ui: {
               type: 'text',
-              placeholder: '2021-11-11 11:11:11',
+              placeholder: '起始时间占位符',
             },
           },
           {
             type: 'string',
             title: '终止时间',
             ui: {
               type: 'text',
-              placeholder: '2021-12-12 12:12:12',
+              placeholder: '终止时间占位符',
             },
           },
         ],

packages/hooks/src/useField.ts

@@ -12,7 +12,7 @@ import useEventCallback from './useEventCallback'
 import useRequiredModeContext from './useRequiredModeContext'
 import { useDebounceFn } from 'ahooks'
 import { isEmpty, typeCheck } from '@jdfed/utils'
-import type { GetKey, Action } from '@jdfed/utils'
+import type { GetKey, Action, OnChange } from '@jdfed/utils'
 import type { Dispatch } from 'react'
 type FormatMomentDataProps = {
   value: string | [Moment, Moment]
@@ -215,29 +215,6 @@ const myComponent = ({fieldKey,onChange})=>{
 }
 */
 
-/**
- * @param {string} fieldKey 必填 表单change触发，更改formData的key值
- * @param {function} onChange 可选 表单触发change事件后的回调
- * @param {object} options 可选 表单字段特殊处理配置。注意：options中只能有一个字段的值是true。否则不会对特殊数据进行格式化
- * @param {func} dispatch 操作context
- */
-type CustomFunc = ({
-  val,
-  dispatch,
-  fieldKey,
-  getKey,
-  prevFieldData,
-  // 注意目前只有select表单支持这个字段（看后续是否有场景其它表单也需要）
-  fieldData,
-}: {
-  val: any
-  dispatch: Dispatch<Action>
-  getKey: GetKey
-  fieldKey: string
-  prevFieldData: any
-  // 注意目前只有select表单支持这个字段（看后续是否有场景其它表单也需要）
-  fieldData: any
-}) => void
 type SpecialFormatKeys = keyof typeof formatMap | 'isDelete'
 type UseFieldR = (...args: any[]) => void
 type Options = Partial<
@@ -259,7 +236,7 @@ const useField = (
   }: {
     fieldKey: string
     getKey: GetKey
-    onChange?: string | CustomFunc
+    onChange?: OnChange
     options?: Options
     asyncValidate?: {
       type: 'change' | 'click'

packages/utils/src/schemaHandle/types.ts

@@ -1,5 +1,6 @@
 import type { Map } from '../common/type'
-
+import { GetKey, Action } from '../type'
+import type { Dispatch } from 'react'
 /**
  * 在联合Schema中，某个节点的类型
  */
@@ -67,6 +68,32 @@ type Properties = {
   }
 }
 
+/**
+ * @param {string} fieldKey 必填 表单change触发，更改formData的key值
+ * @param {function} onChange 可选 表单触发change事件后的回调
+ * @param {object} options 可选 表单字段特殊处理配置。注意：options中只能有一个字段的值是true。否则不会对特殊数据进行格式化
+ * @param {func} dispatch 操作context
+ */
+export type OnChange =
+  | (({
+      val,
+      dispatch,
+      fieldKey,
+      getKey,
+      prevFieldData,
+      // 注意目前只有select表单支持这个字段（看后续是否有场景其它表单也需要）
+      fieldData,
+    }: {
+      val: any
+      dispatch: Dispatch<Action>
+      getKey: GetKey
+      fieldKey: string
+      prevFieldData: any
+      // 注意目前只有select表单支持这个字段（看后续是否有场景其它表单也需要）
+      fieldData: any
+    }) => void)
+  | string
+
 /**
  * UiSchema的最小原子
  */
@@ -79,6 +106,7 @@ export type UiSchema = {
   properties: Properties
   order: Array<string | number>
   title?: TitleUi
+  onChange?: OnChange
   [propName: string]: unknown
 }