feat(form): 新增错误展示时机showError替换validateTime (#259)

* feat: 新增showError替代validateTime,区分实时,提交时和不展示3种错误展示策略

* feat: 提交时展示错误信息

* chore: 更改函数式组件

* feat: 提交时展示错误信息

* docs: 更新校验展示时机字段validaTime为showError

---------

Co-authored-by: mengshang918 <[email protected]>

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

@@ -1,11 +1,19 @@
 export default {
   type: 'object',
-  validateTime: 'change',
+  showError: 'change',
   ui: {
     title: {
       width: 82,
       placement: 'left',
     },
+    footer: {
+      onOk: {
+        text: '保存',
+        type: 'primary',
+        size: 'middle',
+        shape: 'squash',
+      },
+    },
     flow: {
       version: '0.1.0',
       trigger: {
@@ -70,6 +78,7 @@ export default {
         },
         theme: 'antd',
       },
+      requiredMsg: '必填',
       fieldKey: 'text_lkXQ-Y',
     },
     {

packages/ajv/src/index.ts

@@ -49,6 +49,7 @@ function registerAjv(options?: Options): Ajv {
   // 添加drip-form官方忽略关键字(添加customFormat是为了node校验支持旧版的语法)
   ajv.addVocabulary([
     'validateTime',
+    'showError',
     'requiredMode',
     '$container',
     // 用于绑定generator 切换的fieldKey

packages/drip-form/src/DripForm/index.tsx

@@ -2,7 +2,7 @@
  * @Author: jiangxiaowei
  * @Date: 2020-05-14 16:54:32
  * @Last Modified by: jiangxiaowei
- * @Last Modified time: 2022-12-09 12:18:07
+ * @Last Modified time: 2023-02-10 16:39:57
  */
 import React, {
   forwardRef,
@@ -12,13 +12,14 @@ import React, {
   useImperativeHandle,
   useMemo,
   useRef,
+  useState,
 } from 'react'
 import produce from 'immer'
 import { useImmerReducer } from 'use-immer'
 import './index.styl'
 // 配置与工具
 import formDataReducer, { FormDataContext } from '../reducers'
-import renderCoreFn from '../render'
+import RenderCore from '../render'
 import Tooltip from 'react-tooltip'
 import {
   typeCheck,
@@ -38,6 +39,8 @@ import {
   globalOptionsContext,
   defaultGlobalOptions,
   validate,
+  globalStateContext,
+  defaultGlobalState,
 } from '@jdfed/hooks'
 import containerMap from '../container'
 import Footer from './Footer'
@@ -89,6 +92,8 @@ const DripForm = forwardRef<DripFormRefType, DripFormRenderProps>(
       }),
       [options, reload]
     )
+    // 全局配置
+    const [globalState, setGlobalState] = useState(defaultGlobalState)
     const prevUnitedSchema = usePrevious(unitedSchema)
     const prevFormData = usePrevious(initFormData)
     const parseFormData = useMemo(() => {
@@ -219,6 +224,10 @@ const DripForm = forwardRef<DripFormRefType, DripFormRenderProps>(
           (prevFormData && prevFormData !== initFormData)) &&
         globalOptions.reload
       ) {
+        setGlobalState((prev) => ({
+          ...prev,
+          stageErrors: {},
+        }))
         dispatch({
           type: 'reset',
           action: {
@@ -346,12 +355,20 @@ const DripForm = forwardRef<DripFormRefType, DripFormRenderProps>(
           })
         })
         .then(() => {
+          setGlobalState((prev) => ({
+            ...prev,
+            stageErrors: submitReturn.current.errors,
+          }))
           return submitReturn.current
         })
     }, [dispatch, get, onValidate])
 
     // 重置表单
     const reset = useCallback(() => {
+      setGlobalState((prev) => ({
+        ...prev,
+        stageErrors: {},
+      }))
       dispatch({
         type: 'reset',
         action: {
@@ -538,43 +555,45 @@ const DripForm = forwardRef<DripFormRefType, DripFormRenderProps>(
 
     return (
       <globalOptionsContext.Provider value={globalOptions}>
-        <RequiredModeContext.Provider
-          value={dataSchema?.requiredMode || 'default'}
-        >
-          <FormDataContext.Provider value={formDataContextState}>
-            <div className={'drip-form-root'}>
-              {renderCoreFn({
-                uiComponents,
-                dataSchema,
-                uiSchema,
-                errors,
-                formData,
-                onQuery,
-                onValidate,
-                dispatch,
-                customComponents,
-                containerMap,
-                getKey,
-                get,
-                containerHoc,
-                arrayKey,
-                isRoot: true,
-              })}
-              <Tooltip clickable={true} />
-              <Footer
-                uiSchema={uiSchema}
-                uiComponents={uiComponents}
-                onSubmit={onSubmit}
-                submit={submit}
-                submitReturn={submitReturn}
-                onCancel={onCancel}
-                globalTheme={globalTheme}
-                initFormData={initArgs.formData}
-                dispatch={dispatch}
-              />
-            </div>
-          </FormDataContext.Provider>
-        </RequiredModeContext.Provider>
+        <globalStateContext.Provider value={globalState}>
+          <RequiredModeContext.Provider
+            value={dataSchema?.requiredMode || 'default'}
+          >
+            <FormDataContext.Provider value={formDataContextState}>
+              <div className={'drip-form-root'}>
+                <RenderCore
+                  uiComponents={uiComponents}
+                  dataSchema={dataSchema}
+                  uiSchema={uiSchema}
+                  errors={errors}
+                  formData={formData}
+                  onQuery={onQuery}
+                  onValidate={onValidate}
+                  dispatch={dispatch}
+                  customComponents={customComponents}
+                  containerMap={containerMap}
+                  getKey={getKey}
+                  get={get}
+                  containerHoc={containerHoc}
+                  arrayKey={arrayKey}
+                  isRoot={true}
+                />
+                <Tooltip clickable={true} />
+                <Footer
+                  uiSchema={uiSchema}
+                  uiComponents={uiComponents}
+                  onSubmit={onSubmit}
+                  submit={submit}
+                  submitReturn={submitReturn}
+                  onCancel={onCancel}
+                  globalTheme={globalTheme}
+                  initFormData={initArgs.formData}
+                  dispatch={dispatch}
+                />
+              </div>
+            </FormDataContext.Provider>
+          </RequiredModeContext.Provider>
+        </globalStateContext.Provider>
       </globalOptionsContext.Provider>
     )
   }

packages/drip-form/src/container/ArrayContainer/SortableItem.tsx

@@ -4,7 +4,7 @@ import { CSS } from '@dnd-kit/utilities'
 import cx from 'classnames'
 import { number2Chinese } from '@jdfed/utils'
 import { useArray } from '@jdfed/hooks'
-import renderCoreFn from '../../render'
+import RenderCore from '../../render'
 import { Handle } from './Handle'
 import { Remove } from './Remove'
 import type { RenderFnProps } from '../../render/type'
@@ -149,26 +149,26 @@ const SortableItem: FC<
             'array-item--case': !(mode === 'fixed' && !showHeader),
           })}
         >
-          {renderCoreFn({
-            uiComponents,
-            dataSchema,
-            uiSchema,
-            errors,
-            formData,
-            onQuery,
-            onValidate,
-            dispatch,
-            containerHoc,
-            containerMap,
-            parentUiSchemaKey,
-            parentDataSchemaKey,
-            parentFormDataKey: fieldKey,
-            customComponents,
-            currentArrayKey: index,
-            get,
-            getKey,
-            arrayKey,
-          })}
+          <RenderCore
+            uiComponents={uiComponents}
+            dataSchema={dataSchema}
+            uiSchema={uiSchema}
+            errors={errors}
+            formData={formData}
+            onQuery={onQuery}
+            onValidate={onValidate}
+            dispatch={dispatch}
+            containerHoc={containerHoc}
+            containerMap={containerMap}
+            parentUiSchemaKey={parentUiSchemaKey}
+            parentDataSchemaKey={parentDataSchemaKey}
+            parentFormDataKey={fieldKey}
+            customComponents={customComponents}
+            currentArrayKey={index}
+            get={get}
+            getKey={getKey}
+            arrayKey={arrayKey}
+          />
         </div>
       </div>
     </div>

packages/drip-form/src/container/ObjectContainer/index.tsx

@@ -3,12 +3,12 @@
  * @Author: jiangxiaowei
  * @Date: 2021-08-11 15:26:55
  * @Last Modified by: jiangxiaowei
- * @Last Modified time: 2022-10-14 13:52:57
+ * @Last Modified time: 2023-02-10 16:38:58
  */
 import React, { useMemo, memo, useEffect } from 'react'
 import { useTitle } from '@jdfed/hooks'
 import ReactTooltip from 'react-tooltip'
-import renderCoreFn from '../../render'
+import RenderCore from '../../render'
 import { Title, CommonContainerHoc } from '@form/components/index'
 import cx from 'classnames'
 import type { RenderFnProps, ContainerType } from '../../render/type'
@@ -121,25 +121,25 @@ const objectContainer = memo<Props & RenderFnProps & ObjectContainerProps>(
             'drip-form_objectContainerFlex'
           )}
         >
-          {renderCoreFn({
-            uiComponents,
-            dataSchema,
-            uiSchema,
-            errors,
-            formData,
-            onQuery,
-            onValidate,
-            dispatch,
-            containerMap,
-            parentUiSchemaKey,
-            parentDataSchemaKey,
-            parentFormDataKey: fieldKey,
-            customComponents,
-            get,
-            getKey,
-            containerHoc,
-            arrayKey,
-          })}
+          <RenderCore
+            uiComponents={uiComponents}
+            dataSchema={dataSchema}
+            uiSchema={uiSchema}
+            errors={errors}
+            formData={formData}
+            onQuery={onQuery}
+            onValidate={onValidate}
+            dispatch={dispatch}
+            containerMap={containerMap}
+            parentUiSchemaKey={parentUiSchemaKey}
+            parentDataSchemaKey={parentDataSchemaKey}
+            parentFormDataKey={fieldKey}
+            customComponents={customComponents}
+            get={get}
+            getKey={getKey}
+            containerHoc={containerHoc}
+            arrayKey={arrayKey}
+          />
         </div>
       )
     }, [

packages/drip-form/src/render/index.tsx

@@ -3,12 +3,13 @@
  * @Author: jiangxiaowei
  * @Date: 2021-07-30 16:35:48
  * @Last Modified by: jiangxiaowei
- * @Last Modified time: 2022-10-14 13:45:37
+ * @Last Modified time: 2023-02-10 16:22:00
  */
-import React from 'react'
+import React, { ReactElement } from 'react'
 import { handleMargin } from '@jdfed/utils'
 import type { RenderFnProps } from './type'
 import type { Map, Theme } from '@jdfed/utils'
+import { useGlobalState } from '@jdfed/hooks'
 
 /*TODO 优化renderprops和container编写 区分component prop和container prop*/
 const Render = ({
@@ -31,7 +32,8 @@ const Render = ({
   getKey,
   isRoot,
   arrayKey,
-}: RenderFnProps): Array<JSX.Element | null> => {
+}: RenderFnProps): ReactElement => {
+  const { stageErrors = {} } = useGlobalState()
   const {
     theme = 'antd',
     title: globalTitleUi = {},
@@ -70,7 +72,9 @@ const Render = ({
     type: parentType = 'object',
   } = currentUiSchema
   // 表单是否在下方直接展示错误信息
-  const showError = dataSchema.validateTime === 'change'
+  const showError = dataSchema.showError
+    ? dataSchema.showError === 'change' || dataSchema.showError === 'submit'
+    : dataSchema.validateTime === 'change'
   return (order || []).map((item: string, i: number) => {
     // 当前Field ui类型
     const type = properties[item].type
@@ -131,7 +135,10 @@ const Render = ({
     const queryFunc = onQuery?.[item]
     const asyncValidate = onValidate?.[item]
     // 当前Field的错误信息
-    const error = errors[currentFieldKey] || ''
+    const error =
+      dataSchema.showError === 'submit'
+        ? stageErrors[currentFieldKey] || ''
+        : errors[currentFieldKey] || ''
     // 当前Field的数据
     const cKey = isArrayItem ? (currentArrayKey as number) : item
     const fieldData = currentFormData[cKey]