From 13ff6126430858a3a363b8f9c91bbf755cdac7f3 Mon Sep 17 00:00:00 2001 From: mengshang918 Date: Thu, 20 Jul 2023 17:00:22 +0800 Subject: [PATCH] =?UTF-8?q?feat(form):=20get=E6=94=AF=E6=8C=81=E8=8E=B7?= =?UTF-8?q?=E5=8F=96=E4=B8=8A=E4=B8=80=E6=AC=A1=E7=9A=84=E5=80=BC=20(#269)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/drip-form/src/DripForm/index.tsx | 6 +- packages/hooks/src/useSchema.ts | 158 ++++++++++++++-------- packages/utils/src/type.ts | 15 +- website/docs/form/API/utils/get.md | 20 +++ 4 files changed, 139 insertions(+), 60 deletions(-) diff --git a/packages/drip-form/src/DripForm/index.tsx b/packages/drip-form/src/DripForm/index.tsx index 2fc51607..bcdce8c6 100644 --- a/packages/drip-form/src/DripForm/index.tsx +++ b/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: 2023-02-10 16:39:57 + * @Last Modified time: 2023-07-19 13:51:16 */ import React, { forwardRef, @@ -296,6 +296,10 @@ const DripForm = forwardRef( typeMap: typePath, dispatch, formData, + prevFormData: usePrevious(formData), + prevDataSchema: usePrevious(dataSchema), + prevUiSchema: usePrevious(uiSchema), + prevTypeMap: usePrevious(typePath), }) // 获取当前fieldKey相对uiSchema、dataSchema路径 diff --git a/packages/hooks/src/useSchema.ts b/packages/hooks/src/useSchema.ts index c847e7b7..d366d5b7 100644 --- a/packages/hooks/src/useSchema.ts +++ b/packages/hooks/src/useSchema.ts @@ -3,7 +3,7 @@ * @Author: jiangxiaowei * @Date: 2021-08-06 15:33:25 * @Last Modified by: jiangxiaowei - * @Last Modified time: 2022-04-22 11:31:56 + * @Last Modified time: 2023-07-20 16:45:31 */ import { typeCheck } from '@jdfed/utils' import { useCallback } from 'react' @@ -61,12 +61,20 @@ const useSchema = ({ typeMap, formData, dispatch, + prevFormData, + prevUiSchema, + prevDataSchema, + prevTypeMap, }: { dispatch: Dispatch uiSchema: UiSchema dataSchema: DataSchema typeMap: Map formData: Map + prevFormData: Map + prevUiSchema: UiSchema + prevDataSchema: DataSchema + prevTypeMap: Map }): { get: Get set: Set @@ -75,69 +83,109 @@ const useSchema = ({ merge: Merge } => { const { getTypeKey, getKey } = useGetKey(typeMap) - const get = useCallback( - (fieldKey) => { - // 找不到则获取根目录 - if (!fieldKey) { - return { - uiSchema, - dataSchema, - data: formData, - } - } else { - const fieldKeyMap = fieldKey.split('.') - const arr = getTypeKey(fieldKey).split('.') - return arr.reduce( - (prev, cur, index, arr) => { - if (cur === '') { - // 返回根目录的dataSchema、uiSchema、formData - return prev - } else if ( - index === 0 || - (typeMap[arr.slice(0, index).join('.')] as Map).type === 'object' - ) { - // 对象类型 - return { - uiSchema: (prev.uiSchema.properties as Map)[cur], - dataSchema: (prev.dataSchema.properties as Map)[cur], - data: prev.data ? prev.data[cur] : undefined, - } - } else if ( - (typeMap[arr.slice(0, index).join('.')] as Map).type === 'array' - ) { - // 数组类型 - if (cur === '$container') { - // 普通数组 + const get = useCallback< + ( + fieldKey?: string, + option?: { isPrev: boolean } + ) => { + data: Map | undefined + dataSchema: DataSchema | undefined + uiSchema: UiSchema | undefined + } + >( + (fieldKey, option = { isPrev: false }) => { + const isPrev = option?.isPrev + const newFormData = isPrev ? prevFormData : formData + const newTypeMap = isPrev ? prevTypeMap : typeMap + const newUiSchema = isPrev ? prevUiSchema : uiSchema + const newDataSchema = isPrev ? prevDataSchema : dataSchema + try { + // 找不到则获取根目录 + if (!fieldKey) { + return { + uiSchema: newUiSchema, + dataSchema: newDataSchema, + data: newFormData, + } + } else { + const fieldKeyMap = fieldKey.split('.') + const arr = getTypeKey(fieldKey).split('.') + return arr.reduce( + (prev, cur, index, arr) => { + if (cur === '') { + // 返回根目录的dataSchema、uiSchema、formData + return prev + } else if ( + index === 0 || + (newTypeMap[arr.slice(0, index).join('.')] as Map).type === + 'object' + ) { + // 对象类型 return { - uiSchema: prev.uiSchema.properties.$container, - dataSchema: - prev.dataSchema[index === 0 ? 'properties' : 'items'], - data: prev.data ? prev.data[fieldKeyMap[index]] : undefined, + uiSchema: (prev.uiSchema.properties as Map)[cur], + dataSchema: (prev.dataSchema.properties as Map)[cur], + data: prev.data ? prev.data[cur] : undefined, + } + } else if ( + (newTypeMap[arr.slice(0, index).join('.')] as Map).type === + 'array' + ) { + // 数组类型 + if (cur === '$container') { + // 普通数组 + return { + uiSchema: prev.uiSchema.properties.$container, + dataSchema: + prev.dataSchema[index === 0 ? 'properties' : 'items'], + data: prev.data ? prev.data[fieldKeyMap[index]] : undefined, + } + } else { + // 元祖 + return { + uiSchema: prev.uiSchema.properties[cur], + dataSchema: ( + prev.dataSchema[ + index === 0 ? 'properties' : 'items' + ] as Map + )[cur], + data: prev.data ? prev.data[cur] : undefined, + } } } else { - // 元祖 return { - uiSchema: prev.uiSchema.properties[cur], - dataSchema: ( - prev.dataSchema[index === 0 ? 'properties' : 'items'] as Map - )[cur], - data: prev.data ? prev.data[cur] : undefined, + uiSchema: prev.uiSchema, + dataSchema: prev.dataSchema, + data: prev.data, } } - } else { - return { - uiSchema: prev.uiSchema, - dataSchema: prev.dataSchema, - data: prev.data, - } + }, + { + data: newFormData, + uiSchema: newUiSchema, + dataSchema: newDataSchema, } - }, - { data: formData, uiSchema, dataSchema } - ) + ) + } + } catch (error) { + return { + data: undefined, + uiSchema: undefined, + dataSchema: undefined, + } } }, - [dataSchema, formData, getTypeKey, typeMap, uiSchema] - ) + [ + dataSchema, + formData, + getTypeKey, + prevDataSchema, + prevFormData, + prevTypeMap, + prevUiSchema, + typeMap, + uiSchema, + ] + ) as Get /** * 获取当前value值 diff --git a/packages/utils/src/type.ts b/packages/utils/src/type.ts index a0bf2f66..1c582e56 100644 --- a/packages/utils/src/type.ts +++ b/packages/utils/src/type.ts @@ -1,9 +1,16 @@ import { Map, ClosestEdge } from './common/type' import { UnitedSchema, UiSchema, DataSchema } from './schemaHandle/types' -export type Get = (fieldKey?: string) => { - data: Map | undefined - dataSchema: DataSchema - uiSchema: UiSchema +export type Get = { + (fieldKey?: string): { + data: Map | undefined + dataSchema: DataSchema + uiSchema: UiSchema + } + (fieldKey: string, option: { isPrev: boolean }): { + data: Map | undefined + dataSchema: DataSchema | undefined + uiSchema: UiSchema | undefined + } } export type GetKey = ( diff --git a/website/docs/form/API/utils/get.md b/website/docs/form/API/utils/get.md index 03642bb3..f3eff8a9 100644 --- a/website/docs/form/API/utils/get.md +++ b/website/docs/form/API/utils/get.md @@ -12,6 +12,14 @@ type Get = (fieldKey?: string) => { dataSchema: DataSchema uiSchema: UiSchema } +type Get = (fieldKey: string,option:{ + // 是否获取上一次的值 + isPrev:boolean +}) => { + data: unknown + dataSchema: DataSchema|undefined + uiSchema: UiSchema|undefined +} ``` 获取表单的数据、ui、校验信息。 @@ -22,6 +30,12 @@ type Get = (fieldKey?: string) => { 需要获取表单的key。如果是空字符，则获取所有表单数据 +1. option (object) + + **可选**，默认为{isPrev:false} + + `get`的配置对象，可配置`isPrev`获取上一次值 + ### 返回 返回一个包含表单数据、ui配置、校验配置的对象。 @@ -33,10 +47,16 @@ type Get = (fieldKey?: string) => { ```js //获取全局表单数据 get('').data +//获取上一次的 +get('',{isPrev:true}).data //获取表单a的校验配置 get('a').dataSchema +//获取上一次的 +get('',{isPrev:true}).dataSchema //获取表单 a.b.c 的ui配置 get('a.b.c').uiSchema +//获取上一次的 +get('',{isPrev:true}).uiSchema ``` ### 获取表单数据