@refinedev/react-hook-form 4.2.0 → 4.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/iife/index.js +12 -6
- package/dist/iife/index.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/useForm/index.d.ts.map +1 -1
- package/dist/useStepsForm/index.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/useForm/index.ts +13 -14
- package/src/useStepsForm/index.spec.ts +63 -11
- package/src/useStepsForm/index.ts +15 -20
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var ne=Object.create;var
|
|
1
|
+
var ne=Object.create;var g=Object.defineProperty;var ie=Object.getOwnPropertyDescriptor;var le=Object.getOwnPropertyNames;var de=Object.getPrototypeOf,Te=Object.prototype.hasOwnProperty;var ce=(t,a)=>{for(var o in a)g(t,o,{get:a[o],enumerable:!0})},I=(t,a,o,b)=>{if(a&&typeof a=="object"||typeof a=="function")for(let s of le(a))!Te.call(t,s)&&s!==o&&g(t,s,{get:()=>a[s],enumerable:!(b=ie(a,s))||b.enumerable});return t};var ue=(t,a,o)=>(o=t!=null?ne(de(t)):{},I(a||!t||!t.__esModule?g(o,"default",{value:t,enumerable:!0}):o,t)),me=t=>I(g({},"__esModule",{value:!0}),t);var pe={};ce(pe,{useForm:()=>y,useModalForm:()=>ee,useStepsForm:()=>q});module.exports=me(pe);var W=require("react"),L=require("react-hook-form"),v=require("@refinedev/core"),y=({refineCoreProps:t,warnWhenUnsavedChanges:a,...o}={})=>{let{warnWhenUnsavedChanges:b,setWarnWhen:s}=(0,v.useWarnAboutChange)(),S=a!=null?a:b,V=(0,v.useForm)({...t}),{queryResult:l,onFinish:e,formLoading:E}=V,n=(0,L.useForm)({...o}),{watch:c,setValue:p,getValues:f,handleSubmit:r}=n;(0,W.useEffect)(()=>{var x;let i=(x=l==null?void 0:l.data)==null?void 0:x.data;if(!i)return;let m=Object.keys(f());Object.entries(i).forEach(([D,u])=>{let B=D;m.includes(B)&&p(B,u)})},[l==null?void 0:l.data,p,f]),(0,W.useEffect)(()=>{let i=c((m,{type:x})=>{x==="change"&&F(m)});return()=>i.unsubscribe()},[c]);let F=i=>(S&&s(!0),i),R=(i,m)=>async x=>(s(!1),await r(i,m)(x));return{...n,handleSubmit:R,refineCore:V,saveButtonProps:{disabled:E,onClick:i=>{R(e,()=>!1)(i)}}}};var k=require("react");var q=({stepsProps:t,...a}={})=>{let{defaultStep:o=0,isBackValidate:b=!1}=t!=null?t:{},[s,S]=(0,k.useState)(o),V=y({...a}),{trigger:l,getValues:e,setValue:E,formState:{dirtyFields:n},refineCore:{queryResult:c}}=V;(0,k.useEffect)(()=>{var R;let r=(R=c==null?void 0:c.data)==null?void 0:R.data;if(!r)return;let F=Object.keys(e());Object.entries(r).forEach(([C,i])=>{let m=C;F.includes(m)&&(n[m]||E(m,i))})},[c==null?void 0:c.data,s,E,e]);let p=r=>{let F=r;r<0&&(F=0),S(F)};return{...V,steps:{currentStep:s,gotoStep:async r=>{if(r===s)return;if(r<s&&!b){p(r);return}await l()&&p(r)}}}};var $=require("react"),T=require("@refinedev/core");var P=ue(require("react")),ee=({modalProps:t,refineCoreProps:a,syncWithLocation:o,...b}={})=>{var Q,G,N,Y,z,J,X;let s=P.default.useRef(!1),S=(0,T.useTranslate)(),{resource:V,action:l}=a!=null?a:{},{resource:e,action:E}=(0,T.useResource)(V),n=(0,T.useParsed)(),c=(0,T.useGo)(),p=(Q=l!=null?l:E)!=null?Q:"",f=typeof o=="object"&&o.syncId,r=typeof o=="object"&&"key"in o?o.key:e&&p&&o?`modal-${(G=e==null?void 0:e.identifier)!=null?G:e==null?void 0:e.name}-${p}`:void 0,{defaultVisible:F=!1,autoSubmitClose:R=!0,autoResetForm:C=!0}=t!=null?t:{},i=y({refineCoreProps:a,...b}),{reset:m,refineCore:{onFinish:x,id:D,setId:u},saveButtonProps:B,handleSubmit:te}=i,{visible:U,show:h,close:O}=(0,T.useModal)({defaultVisible:F});P.default.useEffect(()=>{var d,j,w,Z;if(s.current===!1&&r){let H=(j=(d=n==null?void 0:n.params)==null?void 0:d[r])==null?void 0:j.open;if(typeof H=="boolean"?H&&h():typeof H=="string"&&H==="true"&&h(),f){let _=(Z=(w=n==null?void 0:n.params)==null?void 0:w[r])==null?void 0:Z.id;_&&(u==null||u(_))}s.current=!0}},[r,n,f,u]),P.default.useEffect(()=>{var d;s.current===!0&&(U&&r?c({query:{[r]:{...(d=n==null?void 0:n.params)==null?void 0:d[r],open:!0,...f&&D&&{id:D}}},options:{keepQuery:!0},type:"replace"}):r&&!U&&c({query:{[r]:void 0},options:{keepQuery:!0},type:"replace"}))},[D,U,h,r,f]);let K=async d=>{await x(d),R&&O(),C&&m()},{warnWhen:A,setWarnWhen:re}=(0,T.useWarnAboutChange)(),ae=(0,$.useCallback)(()=>{if(A)if(window.confirm(S("warnWhenUnsavedChanges","Are you sure you want to leave? You have unsaved changes.")))re(!1);else return;u==null||u(void 0),O()},[A]),oe=(0,$.useCallback)(d=>{typeof d<"u"&&(u==null||u(d)),(!(p==="edit"||p==="clone")||(typeof d<"u"||typeof D<"u"))&&h()},[D]),se=S(`${e==null?void 0:e.name}.titles.${l}`,void 0,`${(0,T.userFriendlyResourceName)(`${l} ${(X=(J=(z=(N=e==null?void 0:e.meta)==null?void 0:N.label)!=null?z:(Y=e==null?void 0:e.options)==null?void 0:Y.label)!=null?J:e==null?void 0:e.label)!=null?X:e==null?void 0:e.name}`,"singular")}`);return{modal:{submit:K,close:ae,show:oe,visible:U,title:se},...i,saveButtonProps:{...B,onClick:d=>te(K)(d)}}};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/useForm/index.ts","../src/useStepsForm/index.ts","../src/useModalForm/index.ts"],"sourcesContent":["export { useForm, UseFormProps, UseFormReturnType } from \"./useForm\";\nexport {\n useStepsForm,\n UseStepsFormProps,\n UseStepsFormReturnType,\n} from \"./useStepsForm\";\nexport {\n useModalForm,\n UseModalFormProps,\n UseModalFormReturnType,\n} from \"./useModalForm\";\n","import React, { useEffect } from \"react\";\nimport {\n useForm as useHookForm,\n UseFormProps as UseHookFormProps,\n UseFormReturn,\n FieldValues,\n UseFormHandleSubmit,\n} from \"react-hook-form\";\nimport {\n BaseRecord,\n HttpError,\n useForm as useFormCore,\n useWarnAboutChange,\n UseFormProps as UseFormCoreProps,\n UseFormReturnType as UseFormReturnTypeCore,\n} from \"@refinedev/core\";\n\nexport type UseFormReturnType<\n TData extends BaseRecord = BaseRecord,\n TError extends HttpError = HttpError,\n TVariables extends FieldValues = FieldValues,\n TContext extends object = {},\n TSelectData extends BaseRecord = TData,\n> = UseFormReturn<TVariables, TContext> & {\n refineCore: UseFormReturnTypeCore<TData, TError, TVariables, TSelectData>;\n saveButtonProps: {\n disabled: boolean;\n onClick: (e: React.BaseSyntheticEvent) => void;\n };\n};\n\nexport type UseFormProps<\n TData extends BaseRecord = BaseRecord,\n TError extends HttpError = HttpError,\n TVariables extends FieldValues = FieldValues,\n TContext extends object = {},\n TSelectData extends BaseRecord = TData,\n> = {\n /**\n * Configuration object for the core of the [useForm](/docs/api-reference/core/hooks/useForm/)\n * @type [`UseFormCoreProps<TData, TError, TVariables>`](/docs/api-reference/core/hooks/useForm/#properties)\n */\n refineCoreProps?: UseFormCoreProps<TData, TError, TVariables, TSelectData>;\n /**\n * When you have unsaved changes and try to leave the current page, **refine** shows a confirmation modal box.\n * @default `false*`\n */\n warnWhenUnsavedChanges?: boolean;\n} & UseHookFormProps<TVariables, TContext>;\n\nexport const useForm = <\n TData extends BaseRecord = BaseRecord,\n TError extends HttpError = HttpError,\n TVariables extends FieldValues = FieldValues,\n TContext extends object = {},\n TSelectData extends BaseRecord = TData,\n>({\n refineCoreProps,\n warnWhenUnsavedChanges: warnWhenUnsavedChangesProp,\n ...rest\n}: UseFormProps<\n TData,\n TError,\n TVariables,\n TContext,\n TSelectData\n> = {}): UseFormReturnType<\n TData,\n TError,\n TVariables,\n TContext,\n TSelectData\n> => {\n const {\n warnWhenUnsavedChanges: warnWhenUnsavedChangesRefine,\n setWarnWhen,\n } = useWarnAboutChange();\n const warnWhenUnsavedChanges =\n warnWhenUnsavedChangesProp ?? warnWhenUnsavedChangesRefine;\n\n const useFormCoreResult = useFormCore<\n TData,\n TError,\n TVariables,\n TSelectData\n >({\n ...refineCoreProps,\n });\n\n const { queryResult, onFinish, formLoading } = useFormCoreResult;\n\n const useHookFormResult = useHookForm<TVariables, TContext>({\n ...rest,\n });\n\n const {\n watch,\n reset,\n getValues,\n handleSubmit: handleSubmitReactHookForm,\n } = useHookFormResult;\n\n useEffect(() => {\n if (typeof queryResult?.data !== \"undefined\") {\n const fields: any = {};\n const registeredFields = Object.keys(getValues());\n Object.entries(queryResult?.data?.data || {}).forEach(\n ([key, value]) => {\n if (registeredFields.includes(key)) {\n fields[key] = value;\n }\n },\n );\n\n reset(fields as any);\n }\n }, [queryResult?.data]);\n\n useEffect(() => {\n const subscription = watch((values: any, { type }: { type?: any }) => {\n if (type === \"change\") {\n onValuesChange(values);\n }\n });\n return () => subscription.unsubscribe();\n }, [watch]);\n\n const onValuesChange = (changeValues: Record<string, any>) => {\n if (warnWhenUnsavedChanges) {\n setWarnWhen(true);\n }\n return changeValues;\n };\n\n const handleSubmit: UseFormHandleSubmit<TVariables> =\n (onValid, onInvalid) => async (e) => {\n setWarnWhen(false);\n return await handleSubmitReactHookForm(onValid, onInvalid)(e);\n };\n\n const saveButtonProps = {\n disabled: formLoading,\n onClick: (e: React.BaseSyntheticEvent) => {\n handleSubmit(onFinish, () => false)(e);\n },\n };\n\n return {\n ...useHookFormResult,\n handleSubmit,\n refineCore: useFormCoreResult,\n saveButtonProps,\n };\n};\n","import { useEffect, useState } from \"react\";\nimport { FieldValues } from \"react-hook-form\";\nimport { BaseRecord, HttpError } from \"@refinedev/core\";\n\nimport { useForm, UseFormProps, UseFormReturnType } from \"../useForm\";\n\nexport type UseStepsFormReturnType<\n TData extends BaseRecord = BaseRecord,\n TError extends HttpError = HttpError,\n TVariables extends FieldValues = FieldValues,\n TContext extends object = {},\n TSelectData extends BaseRecord = TData,\n> = UseFormReturnType<TData, TError, TVariables, TContext, TSelectData> & {\n steps: {\n currentStep: number;\n gotoStep: (step: number) => void;\n };\n};\n\nexport type UseStepsFormProps<\n TData extends BaseRecord = BaseRecord,\n TError extends HttpError = HttpError,\n TVariables extends FieldValues = FieldValues,\n TContext extends object = {},\n TSelectData extends BaseRecord = TData,\n> = UseFormProps<TData, TError, TVariables, TContext, TSelectData> & {\n /**\n * @description Configuration object for the steps.\n * `defaultStep`: Allows you to set the initial step.\n * \n * `isBackValidate`: Whether to validation the current step when going back.\n * @type `{\n defaultStep?: number;\n isBackValidate?: boolean;\n }`\n * @default `defaultStep = 0` `isBackValidate = false`\n */\n stepsProps?: {\n defaultStep?: number;\n isBackValidate?: boolean;\n };\n};\n\nexport const useStepsForm = <\n TData extends BaseRecord = BaseRecord,\n TError extends HttpError = HttpError,\n TVariables extends FieldValues = FieldValues,\n TContext extends object = {},\n TSelectData extends BaseRecord = TData,\n>({\n stepsProps,\n ...rest\n}: UseStepsFormProps<\n TData,\n TError,\n TVariables,\n TContext,\n TSelectData\n> = {}): UseStepsFormReturnType<\n TData,\n TError,\n TVariables,\n TContext,\n TSelectData\n> => {\n const { defaultStep = 0, isBackValidate = false } = stepsProps ?? {};\n const [current, setCurrent] = useState(defaultStep);\n\n const useHookFormResult = useForm<\n TData,\n TError,\n TVariables,\n TContext,\n TSelectData\n >({\n ...rest,\n });\n\n const {\n trigger,\n getValues,\n reset,\n formState: { dirtyFields },\n refineCore: { queryResult },\n } = useHookFormResult;\n\n useEffect(() => {\n if (queryResult?.data) {\n const fields: any = {};\n const registeredFields = Object.keys(getValues());\n Object.entries(queryResult?.data?.data).forEach(([key, value]) => {\n if (registeredFields.includes(key)) {\n if (dirtyFields[key]) {\n fields[key] = getValues(key as any);\n } else {\n fields[key] = value;\n }\n }\n });\n\n reset(fields as any, {\n keepDirty: true,\n keepDirtyValues: true,\n });\n }\n }, [queryResult?.data, current]);\n\n const go = (step: number) => {\n let targetStep = step;\n\n if (step < 0) {\n targetStep = 0;\n }\n\n setCurrent(targetStep);\n };\n\n const gotoStep = async (step: number) => {\n if (step === current) {\n return;\n }\n\n if (step < current && !isBackValidate) {\n go(step);\n return;\n }\n\n const isValid = await trigger();\n if (isValid) {\n go(step);\n }\n };\n\n return {\n ...useHookFormResult,\n steps: {\n currentStep: current,\n gotoStep,\n },\n };\n};\n","import { useCallback } from \"react\";\nimport {\n BaseKey,\n BaseRecord,\n FormWithSyncWithLocationParams,\n HttpError,\n useGo,\n useModal,\n useParsed,\n useResource,\n userFriendlyResourceName,\n useTranslate,\n useWarnAboutChange,\n} from \"@refinedev/core\";\nimport { FieldValues } from \"react-hook-form\";\n\nimport { useForm, UseFormProps, UseFormReturnType } from \"../useForm\";\nimport React from \"react\";\n\nexport type UseModalFormReturnType<\n TData extends BaseRecord = BaseRecord,\n TError extends HttpError = HttpError,\n TVariables extends FieldValues = FieldValues,\n TContext extends object = {},\n TSelectData extends BaseRecord = TData,\n> = UseFormReturnType<TData, TError, TVariables, TContext, TSelectData> & {\n modal: {\n submit: (values: TVariables) => void;\n close: () => void;\n show: (id?: BaseKey) => void;\n visible: boolean;\n title: string;\n };\n};\n\nexport type UseModalFormProps<\n TData extends BaseRecord = BaseRecord,\n TError extends HttpError = HttpError,\n TVariables extends FieldValues = FieldValues,\n TContext extends object = {},\n TSelectData extends BaseRecord = TData,\n> = UseFormProps<TData, TError, TVariables, TContext, TSelectData> & {\n /**\n * @description Configuration object for the modal.\n * `defaultVisible`: Initial visibility state of the modal.\n * \n * `autoSubmitClose`: Whether the form should be submitted when the modal is closed.\n * \n * `autoResetForm`: Whether the form should be reset when the form is submitted.\n * @type `{\n defaultVisible?: boolean;\n autoSubmitClose?: boolean;\n autoResetForm?: boolean;\n }`\n * @default `defaultVisible = false` `autoSubmitClose = true` `autoResetForm = true`\n */\n modalProps?: {\n defaultVisible?: boolean;\n autoSubmitClose?: boolean;\n autoResetForm?: boolean;\n };\n} & FormWithSyncWithLocationParams;\n\nexport const useModalForm = <\n TData extends BaseRecord = BaseRecord,\n TError extends HttpError = HttpError,\n TVariables extends FieldValues = FieldValues,\n TContext extends object = {},\n TSelectData extends BaseRecord = TData,\n>({\n modalProps,\n refineCoreProps,\n syncWithLocation,\n ...rest\n}: UseModalFormProps<\n TData,\n TError,\n TVariables,\n TContext,\n TSelectData\n> = {}): UseModalFormReturnType<\n TData,\n TError,\n TVariables,\n TContext,\n TSelectData\n> => {\n const initiallySynced = React.useRef(false);\n\n const translate = useTranslate();\n\n const { resource: resourceProp, action: actionProp } =\n refineCoreProps ?? {};\n\n const { resource, action: actionFromParams } = useResource(resourceProp);\n\n const parsed = useParsed();\n const go = useGo();\n\n const action = actionProp ?? actionFromParams ?? \"\";\n\n const syncingId =\n typeof syncWithLocation === \"object\" && syncWithLocation.syncId;\n\n const syncWithLocationKey =\n typeof syncWithLocation === \"object\" && \"key\" in syncWithLocation\n ? syncWithLocation.key\n : resource && action && syncWithLocation\n ? `modal-${resource?.identifier ?? resource?.name}-${action}`\n : undefined;\n\n const {\n defaultVisible = false,\n autoSubmitClose = true,\n autoResetForm = true,\n } = modalProps ?? {};\n\n const useHookFormResult = useForm<\n TData,\n TError,\n TVariables,\n TContext,\n TSelectData\n >({\n refineCoreProps,\n ...rest,\n });\n\n const {\n reset,\n refineCore: { onFinish, id, setId },\n saveButtonProps,\n handleSubmit,\n } = useHookFormResult;\n\n const { visible, show, close } = useModal({\n defaultVisible,\n });\n\n React.useEffect(() => {\n if (initiallySynced.current === false && syncWithLocationKey) {\n const openStatus = parsed?.params?.[syncWithLocationKey]?.open;\n if (typeof openStatus === \"boolean\") {\n if (openStatus) {\n show();\n }\n } else if (typeof openStatus === \"string\") {\n if (openStatus === \"true\") {\n show();\n }\n }\n\n if (syncingId) {\n const idFromParams = parsed?.params?.[syncWithLocationKey]?.id;\n if (idFromParams) {\n setId?.(idFromParams);\n }\n }\n\n initiallySynced.current = true;\n }\n }, [syncWithLocationKey, parsed, syncingId, setId]);\n\n React.useEffect(() => {\n if (initiallySynced.current === true) {\n if (visible && syncWithLocationKey) {\n go({\n query: {\n [syncWithLocationKey]: {\n ...parsed?.params?.[syncWithLocationKey],\n open: true,\n ...(syncingId && id && { id }),\n },\n },\n options: { keepQuery: true },\n type: \"replace\",\n });\n } else if (syncWithLocationKey && !visible) {\n go({\n query: {\n [syncWithLocationKey]: undefined,\n },\n options: { keepQuery: true },\n type: \"replace\",\n });\n }\n }\n }, [id, visible, show, syncWithLocationKey, syncingId]);\n\n const submit = async (values: TVariables) => {\n await onFinish(values);\n\n if (autoSubmitClose) {\n close();\n }\n\n if (autoResetForm) {\n reset();\n }\n };\n\n const { warnWhen, setWarnWhen } = useWarnAboutChange();\n const handleClose = useCallback(() => {\n if (warnWhen) {\n const warnWhenConfirm = window.confirm(\n translate(\n \"warnWhenUnsavedChanges\",\n \"Are you sure you want to leave? You have unsaved changes.\",\n ),\n );\n\n if (warnWhenConfirm) {\n setWarnWhen(false);\n } else {\n return;\n }\n }\n\n setId?.(undefined);\n close();\n }, [warnWhen]);\n\n const handleShow = useCallback(\n (showId?: BaseKey) => {\n if (typeof showId !== \"undefined\") {\n setId?.(showId);\n }\n const needsIdToOpen = action === \"edit\" || action === \"clone\";\n const hasId =\n typeof showId !== \"undefined\" || typeof id !== \"undefined\";\n if (needsIdToOpen ? hasId : true) {\n show();\n }\n },\n [id],\n );\n\n const title = translate(\n `${resource?.name}.titles.${actionProp}`,\n undefined,\n `${userFriendlyResourceName(\n `${actionProp} ${\n resource?.meta?.label ??\n resource?.options?.label ??\n resource?.label ??\n resource?.name\n }`,\n \"singular\",\n )}`,\n );\n\n return {\n modal: {\n submit,\n close: handleClose,\n show: handleShow,\n visible,\n title,\n },\n ...useHookFormResult,\n saveButtonProps: {\n ...saveButtonProps,\n onClick: (e) => handleSubmit(submit)(e),\n },\n };\n};\n"],"mappings":"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","names":["src_exports","__export","useForm","useModalForm","useStepsForm","__toCommonJS","import_react","import_react_hook_form","import_core","useForm","refineCoreProps","warnWhenUnsavedChangesProp","rest","warnWhenUnsavedChangesRefine","setWarnWhen","warnWhenUnsavedChanges","useFormCoreResult","useFormCore","queryResult","onFinish","formLoading","useHookFormResult","useHookForm","watch","reset","getValues","handleSubmitReactHookForm","_a","fields","registeredFields","key","value","subscription","values","type","onValuesChange","changeValues","handleSubmit","onValid","onInvalid","e","import_react","useStepsForm","stepsProps","rest","defaultStep","isBackValidate","current","setCurrent","useHookFormResult","useForm","trigger","getValues","reset","dirtyFields","queryResult","_a","fields","registeredFields","key","value","go","step","targetStep","import_react","import_core","import_react","useModalForm","modalProps","refineCoreProps","syncWithLocation","rest","_a","_b","_c","_d","_e","_f","_g","initiallySynced","React","translate","resourceProp","actionProp","resource","actionFromParams","parsed","go","action","syncingId","syncWithLocationKey","defaultVisible","autoSubmitClose","autoResetForm","useHookFormResult","useForm","reset","onFinish","id","setId","saveButtonProps","handleSubmit","visible","show","close","openStatus","idFromParams","submit","values","warnWhen","setWarnWhen","handleClose","handleShow","showId","title","e"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/useForm/index.ts","../src/useStepsForm/index.ts","../src/useModalForm/index.ts"],"sourcesContent":["export { useForm, UseFormProps, UseFormReturnType } from \"./useForm\";\nexport {\n useStepsForm,\n UseStepsFormProps,\n UseStepsFormReturnType,\n} from \"./useStepsForm\";\nexport {\n useModalForm,\n UseModalFormProps,\n UseModalFormReturnType,\n} from \"./useModalForm\";\n","import React, { useEffect } from \"react\";\nimport {\n useForm as useHookForm,\n UseFormProps as UseHookFormProps,\n UseFormReturn,\n FieldValues,\n UseFormHandleSubmit,\n Path,\n} from \"react-hook-form\";\nimport {\n BaseRecord,\n HttpError,\n useForm as useFormCore,\n useWarnAboutChange,\n UseFormProps as UseFormCoreProps,\n UseFormReturnType as UseFormReturnTypeCore,\n} from \"@refinedev/core\";\n\nexport type UseFormReturnType<\n TData extends BaseRecord = BaseRecord,\n TError extends HttpError = HttpError,\n TVariables extends FieldValues = FieldValues,\n TContext extends object = {},\n TSelectData extends BaseRecord = TData,\n> = UseFormReturn<TVariables, TContext> & {\n refineCore: UseFormReturnTypeCore<TData, TError, TVariables, TSelectData>;\n saveButtonProps: {\n disabled: boolean;\n onClick: (e: React.BaseSyntheticEvent) => void;\n };\n};\n\nexport type UseFormProps<\n TData extends BaseRecord = BaseRecord,\n TError extends HttpError = HttpError,\n TVariables extends FieldValues = FieldValues,\n TContext extends object = {},\n TSelectData extends BaseRecord = TData,\n> = {\n /**\n * Configuration object for the core of the [useForm](/docs/api-reference/core/hooks/useForm/)\n * @type [`UseFormCoreProps<TData, TError, TVariables>`](/docs/api-reference/core/hooks/useForm/#properties)\n */\n refineCoreProps?: UseFormCoreProps<TData, TError, TVariables, TSelectData>;\n /**\n * When you have unsaved changes and try to leave the current page, **refine** shows a confirmation modal box.\n * @default `false*`\n */\n warnWhenUnsavedChanges?: boolean;\n} & UseHookFormProps<TVariables, TContext>;\n\nexport const useForm = <\n TData extends BaseRecord = BaseRecord,\n TError extends HttpError = HttpError,\n TVariables extends FieldValues = FieldValues,\n TContext extends object = {},\n TSelectData extends BaseRecord = TData,\n>({\n refineCoreProps,\n warnWhenUnsavedChanges: warnWhenUnsavedChangesProp,\n ...rest\n}: UseFormProps<\n TData,\n TError,\n TVariables,\n TContext,\n TSelectData\n> = {}): UseFormReturnType<\n TData,\n TError,\n TVariables,\n TContext,\n TSelectData\n> => {\n const {\n warnWhenUnsavedChanges: warnWhenUnsavedChangesRefine,\n setWarnWhen,\n } = useWarnAboutChange();\n const warnWhenUnsavedChanges =\n warnWhenUnsavedChangesProp ?? warnWhenUnsavedChangesRefine;\n\n const useFormCoreResult = useFormCore<\n TData,\n TError,\n TVariables,\n TSelectData\n >({\n ...refineCoreProps,\n });\n\n const { queryResult, onFinish, formLoading } = useFormCoreResult;\n\n const useHookFormResult = useHookForm<TVariables, TContext>({\n ...rest,\n });\n\n const {\n watch,\n setValue,\n getValues,\n handleSubmit: handleSubmitReactHookForm,\n } = useHookFormResult;\n\n useEffect(() => {\n const data = queryResult?.data?.data;\n if (!data) return;\n\n const registeredFields = Object.keys(getValues());\n Object.entries(data).forEach(([key, value]) => {\n const name = key as Path<TVariables>;\n\n if (registeredFields.includes(name)) {\n setValue(name, value);\n }\n });\n }, [queryResult?.data, setValue, getValues]);\n\n useEffect(() => {\n const subscription = watch((values: any, { type }: { type?: any }) => {\n if (type === \"change\") {\n onValuesChange(values);\n }\n });\n return () => subscription.unsubscribe();\n }, [watch]);\n\n const onValuesChange = (changeValues: Record<string, any>) => {\n if (warnWhenUnsavedChanges) {\n setWarnWhen(true);\n }\n return changeValues;\n };\n\n const handleSubmit: UseFormHandleSubmit<TVariables> =\n (onValid, onInvalid) => async (e) => {\n setWarnWhen(false);\n return await handleSubmitReactHookForm(onValid, onInvalid)(e);\n };\n\n const saveButtonProps = {\n disabled: formLoading,\n onClick: (e: React.BaseSyntheticEvent) => {\n handleSubmit(onFinish, () => false)(e);\n },\n };\n\n return {\n ...useHookFormResult,\n handleSubmit,\n refineCore: useFormCoreResult,\n saveButtonProps,\n };\n};\n","import { useEffect, useState } from \"react\";\nimport { FieldValues, Path } from \"react-hook-form\";\nimport { BaseRecord, HttpError } from \"@refinedev/core\";\n\nimport { useForm, UseFormProps, UseFormReturnType } from \"../useForm\";\n\nexport type UseStepsFormReturnType<\n TData extends BaseRecord = BaseRecord,\n TError extends HttpError = HttpError,\n TVariables extends FieldValues = FieldValues,\n TContext extends object = {},\n TSelectData extends BaseRecord = TData,\n> = UseFormReturnType<TData, TError, TVariables, TContext, TSelectData> & {\n steps: {\n currentStep: number;\n gotoStep: (step: number) => void;\n };\n};\n\nexport type UseStepsFormProps<\n TData extends BaseRecord = BaseRecord,\n TError extends HttpError = HttpError,\n TVariables extends FieldValues = FieldValues,\n TContext extends object = {},\n TSelectData extends BaseRecord = TData,\n> = UseFormProps<TData, TError, TVariables, TContext, TSelectData> & {\n /**\n * @description Configuration object for the steps.\n * `defaultStep`: Allows you to set the initial step.\n * \n * `isBackValidate`: Whether to validation the current step when going back.\n * @type `{\n defaultStep?: number;\n isBackValidate?: boolean;\n }`\n * @default `defaultStep = 0` `isBackValidate = false`\n */\n stepsProps?: {\n defaultStep?: number;\n isBackValidate?: boolean;\n };\n};\n\nexport const useStepsForm = <\n TData extends BaseRecord = BaseRecord,\n TError extends HttpError = HttpError,\n TVariables extends FieldValues = FieldValues,\n TContext extends object = {},\n TSelectData extends BaseRecord = TData,\n>({\n stepsProps,\n ...rest\n}: UseStepsFormProps<\n TData,\n TError,\n TVariables,\n TContext,\n TSelectData\n> = {}): UseStepsFormReturnType<\n TData,\n TError,\n TVariables,\n TContext,\n TSelectData\n> => {\n const { defaultStep = 0, isBackValidate = false } = stepsProps ?? {};\n const [current, setCurrent] = useState(defaultStep);\n\n const useHookFormResult = useForm<\n TData,\n TError,\n TVariables,\n TContext,\n TSelectData\n >({\n ...rest,\n });\n\n const {\n trigger,\n getValues,\n setValue,\n formState: { dirtyFields },\n refineCore: { queryResult },\n } = useHookFormResult;\n\n useEffect(() => {\n const data = queryResult?.data?.data;\n if (!data) return;\n\n const registeredFields = Object.keys(getValues());\n Object.entries(data).forEach(([key, value]) => {\n const name = key as Path<TVariables>;\n\n if (registeredFields.includes(name)) {\n if (!dirtyFields[name]) {\n setValue(name, value);\n }\n }\n });\n }, [queryResult?.data, current, setValue, getValues]);\n\n const go = (step: number) => {\n let targetStep = step;\n\n if (step < 0) {\n targetStep = 0;\n }\n\n setCurrent(targetStep);\n };\n\n const gotoStep = async (step: number) => {\n if (step === current) {\n return;\n }\n\n if (step < current && !isBackValidate) {\n go(step);\n return;\n }\n\n const isValid = await trigger();\n if (isValid) {\n go(step);\n }\n };\n\n return {\n ...useHookFormResult,\n steps: {\n currentStep: current,\n gotoStep,\n },\n };\n};\n","import { useCallback } from \"react\";\nimport {\n BaseKey,\n BaseRecord,\n FormWithSyncWithLocationParams,\n HttpError,\n useGo,\n useModal,\n useParsed,\n useResource,\n userFriendlyResourceName,\n useTranslate,\n useWarnAboutChange,\n} from \"@refinedev/core\";\nimport { FieldValues } from \"react-hook-form\";\n\nimport { useForm, UseFormProps, UseFormReturnType } from \"../useForm\";\nimport React from \"react\";\n\nexport type UseModalFormReturnType<\n TData extends BaseRecord = BaseRecord,\n TError extends HttpError = HttpError,\n TVariables extends FieldValues = FieldValues,\n TContext extends object = {},\n TSelectData extends BaseRecord = TData,\n> = UseFormReturnType<TData, TError, TVariables, TContext, TSelectData> & {\n modal: {\n submit: (values: TVariables) => void;\n close: () => void;\n show: (id?: BaseKey) => void;\n visible: boolean;\n title: string;\n };\n};\n\nexport type UseModalFormProps<\n TData extends BaseRecord = BaseRecord,\n TError extends HttpError = HttpError,\n TVariables extends FieldValues = FieldValues,\n TContext extends object = {},\n TSelectData extends BaseRecord = TData,\n> = UseFormProps<TData, TError, TVariables, TContext, TSelectData> & {\n /**\n * @description Configuration object for the modal.\n * `defaultVisible`: Initial visibility state of the modal.\n * \n * `autoSubmitClose`: Whether the form should be submitted when the modal is closed.\n * \n * `autoResetForm`: Whether the form should be reset when the form is submitted.\n * @type `{\n defaultVisible?: boolean;\n autoSubmitClose?: boolean;\n autoResetForm?: boolean;\n }`\n * @default `defaultVisible = false` `autoSubmitClose = true` `autoResetForm = true`\n */\n modalProps?: {\n defaultVisible?: boolean;\n autoSubmitClose?: boolean;\n autoResetForm?: boolean;\n };\n} & FormWithSyncWithLocationParams;\n\nexport const useModalForm = <\n TData extends BaseRecord = BaseRecord,\n TError extends HttpError = HttpError,\n TVariables extends FieldValues = FieldValues,\n TContext extends object = {},\n TSelectData extends BaseRecord = TData,\n>({\n modalProps,\n refineCoreProps,\n syncWithLocation,\n ...rest\n}: UseModalFormProps<\n TData,\n TError,\n TVariables,\n TContext,\n TSelectData\n> = {}): UseModalFormReturnType<\n TData,\n TError,\n TVariables,\n TContext,\n TSelectData\n> => {\n const initiallySynced = React.useRef(false);\n\n const translate = useTranslate();\n\n const { resource: resourceProp, action: actionProp } =\n refineCoreProps ?? {};\n\n const { resource, action: actionFromParams } = useResource(resourceProp);\n\n const parsed = useParsed();\n const go = useGo();\n\n const action = actionProp ?? actionFromParams ?? \"\";\n\n const syncingId =\n typeof syncWithLocation === \"object\" && syncWithLocation.syncId;\n\n const syncWithLocationKey =\n typeof syncWithLocation === \"object\" && \"key\" in syncWithLocation\n ? syncWithLocation.key\n : resource && action && syncWithLocation\n ? `modal-${resource?.identifier ?? resource?.name}-${action}`\n : undefined;\n\n const {\n defaultVisible = false,\n autoSubmitClose = true,\n autoResetForm = true,\n } = modalProps ?? {};\n\n const useHookFormResult = useForm<\n TData,\n TError,\n TVariables,\n TContext,\n TSelectData\n >({\n refineCoreProps,\n ...rest,\n });\n\n const {\n reset,\n refineCore: { onFinish, id, setId },\n saveButtonProps,\n handleSubmit,\n } = useHookFormResult;\n\n const { visible, show, close } = useModal({\n defaultVisible,\n });\n\n React.useEffect(() => {\n if (initiallySynced.current === false && syncWithLocationKey) {\n const openStatus = parsed?.params?.[syncWithLocationKey]?.open;\n if (typeof openStatus === \"boolean\") {\n if (openStatus) {\n show();\n }\n } else if (typeof openStatus === \"string\") {\n if (openStatus === \"true\") {\n show();\n }\n }\n\n if (syncingId) {\n const idFromParams = parsed?.params?.[syncWithLocationKey]?.id;\n if (idFromParams) {\n setId?.(idFromParams);\n }\n }\n\n initiallySynced.current = true;\n }\n }, [syncWithLocationKey, parsed, syncingId, setId]);\n\n React.useEffect(() => {\n if (initiallySynced.current === true) {\n if (visible && syncWithLocationKey) {\n go({\n query: {\n [syncWithLocationKey]: {\n ...parsed?.params?.[syncWithLocationKey],\n open: true,\n ...(syncingId && id && { id }),\n },\n },\n options: { keepQuery: true },\n type: \"replace\",\n });\n } else if (syncWithLocationKey && !visible) {\n go({\n query: {\n [syncWithLocationKey]: undefined,\n },\n options: { keepQuery: true },\n type: \"replace\",\n });\n }\n }\n }, [id, visible, show, syncWithLocationKey, syncingId]);\n\n const submit = async (values: TVariables) => {\n await onFinish(values);\n\n if (autoSubmitClose) {\n close();\n }\n\n if (autoResetForm) {\n reset();\n }\n };\n\n const { warnWhen, setWarnWhen } = useWarnAboutChange();\n const handleClose = useCallback(() => {\n if (warnWhen) {\n const warnWhenConfirm = window.confirm(\n translate(\n \"warnWhenUnsavedChanges\",\n \"Are you sure you want to leave? You have unsaved changes.\",\n ),\n );\n\n if (warnWhenConfirm) {\n setWarnWhen(false);\n } else {\n return;\n }\n }\n\n setId?.(undefined);\n close();\n }, [warnWhen]);\n\n const handleShow = useCallback(\n (showId?: BaseKey) => {\n if (typeof showId !== \"undefined\") {\n setId?.(showId);\n }\n const needsIdToOpen = action === \"edit\" || action === \"clone\";\n const hasId =\n typeof showId !== \"undefined\" || typeof id !== \"undefined\";\n if (needsIdToOpen ? hasId : true) {\n show();\n }\n },\n [id],\n );\n\n const title = translate(\n `${resource?.name}.titles.${actionProp}`,\n undefined,\n `${userFriendlyResourceName(\n `${actionProp} ${\n resource?.meta?.label ??\n resource?.options?.label ??\n resource?.label ??\n resource?.name\n }`,\n \"singular\",\n )}`,\n );\n\n return {\n modal: {\n submit,\n close: handleClose,\n show: handleShow,\n visible,\n title,\n },\n ...useHookFormResult,\n saveButtonProps: {\n ...saveButtonProps,\n onClick: (e) => handleSubmit(submit)(e),\n },\n };\n};\n"],"mappings":"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","names":["src_exports","__export","useForm","useModalForm","useStepsForm","__toCommonJS","import_react","import_react_hook_form","import_core","useForm","refineCoreProps","warnWhenUnsavedChangesProp","rest","warnWhenUnsavedChangesRefine","setWarnWhen","warnWhenUnsavedChanges","useFormCoreResult","useFormCore","queryResult","onFinish","formLoading","useHookFormResult","useHookForm","watch","setValue","getValues","handleSubmitReactHookForm","_a","data","registeredFields","key","value","name","subscription","values","type","onValuesChange","changeValues","handleSubmit","onValid","onInvalid","e","import_react","useStepsForm","stepsProps","rest","defaultStep","isBackValidate","current","setCurrent","useHookFormResult","useForm","trigger","getValues","setValue","dirtyFields","queryResult","_a","data","registeredFields","key","value","name","go","step","targetStep","import_react","import_core","import_react","useModalForm","modalProps","refineCoreProps","syncWithLocation","rest","_a","_b","_c","_d","_e","_f","_g","initiallySynced","React","translate","resourceProp","actionProp","resource","actionFromParams","parsed","go","action","syncingId","syncWithLocationKey","defaultVisible","autoSubmitClose","autoResetForm","useHookFormResult","useForm","reset","onFinish","id","setId","saveButtonProps","handleSubmit","visible","show","close","openStatus","idFromParams","submit","values","warnWhen","setWarnWhen","handleClose","handleShow","showId","title","e"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/useForm/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAEH,YAAY,IAAI,gBAAgB,EAChC,aAAa,EACb,WAAW,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/useForm/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAEH,YAAY,IAAI,gBAAgB,EAChC,aAAa,EACb,WAAW,EAGd,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACH,UAAU,EACV,SAAS,EAGT,YAAY,IAAI,gBAAgB,EAChC,iBAAiB,IAAI,qBAAqB,EAC7C,MAAM,iBAAiB,CAAC;AAEzB,oBAAY,iBAAiB,CACzB,KAAK,SAAS,UAAU,GAAG,UAAU,EACrC,MAAM,SAAS,SAAS,GAAG,SAAS,EACpC,UAAU,SAAS,WAAW,GAAG,WAAW,EAC5C,QAAQ,SAAS,MAAM,GAAG,EAAE,EAC5B,WAAW,SAAS,UAAU,GAAG,KAAK,IACtC,aAAa,CAAC,UAAU,EAAE,QAAQ,CAAC,GAAG;IACtC,UAAU,EAAE,qBAAqB,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,WAAW,CAAC,CAAC;IAC1E,eAAe,EAAE;QACb,QAAQ,EAAE,OAAO,CAAC;QAClB,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;KAClD,CAAC;CACL,CAAC;AAEF,oBAAY,YAAY,CACpB,KAAK,SAAS,UAAU,GAAG,UAAU,EACrC,MAAM,SAAS,SAAS,GAAG,SAAS,EACpC,UAAU,SAAS,WAAW,GAAG,WAAW,EAC5C,QAAQ,SAAS,MAAM,GAAG,EAAE,EAC5B,WAAW,SAAS,UAAU,GAAG,KAAK,IACtC;IACA;;;OAGG;IACH,eAAe,CAAC,EAAE,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,WAAW,CAAC,CAAC;IAC3E;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;CACpC,GAAG,gBAAgB,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;AAE3C,eAAO,MAAM,OAAO,6ZAqGnB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/useStepsForm/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/useStepsForm/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAQ,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAExD,OAAO,EAAW,YAAY,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAEtE,oBAAY,sBAAsB,CAC9B,KAAK,SAAS,UAAU,GAAG,UAAU,EACrC,MAAM,SAAS,SAAS,GAAG,SAAS,EACpC,UAAU,SAAS,WAAW,GAAG,WAAW,EAC5C,QAAQ,SAAS,MAAM,GAAG,EAAE,EAC5B,WAAW,SAAS,UAAU,GAAG,KAAK,IACtC,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,CAAC,GAAG;IACtE,KAAK,EAAE;QACH,WAAW,EAAE,MAAM,CAAC;QACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;KACpC,CAAC;CACL,CAAC;AAEF,oBAAY,iBAAiB,CACzB,KAAK,SAAS,UAAU,GAAG,UAAU,EACrC,MAAM,SAAS,SAAS,GAAG,SAAS,EACpC,UAAU,SAAS,WAAW,GAAG,WAAW,EAC5C,QAAQ,SAAS,MAAM,GAAG,EAAE,EAC5B,WAAW,SAAS,UAAU,GAAG,KAAK,IACtC,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,CAAC,GAAG;IACjE;;;;;;;;;;OAUG;IACH,UAAU,CAAC,EAAE;QACT,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,cAAc,CAAC,EAAE,OAAO,CAAC;KAC5B,CAAC;CACL,CAAC;AAEF,eAAO,MAAM,YAAY,8WA4FxB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "4.2.
|
|
2
|
+
"version": "4.2.2",
|
|
3
3
|
"license": "MIT",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"typings": "dist/index.d.ts",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"@types/react-dom": "^17.0.0 || ^18.0.0"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
|
-
"@refinedev/core": "^4.
|
|
33
|
+
"@refinedev/core": "^4.12.0",
|
|
34
34
|
"@esbuild-plugins/node-resolve": "^0.1.4",
|
|
35
35
|
"@types/jest": "^29.2.4",
|
|
36
36
|
"jest": "^29.3.1",
|
package/src/useForm/index.ts
CHANGED
|
@@ -5,6 +5,7 @@ import {
|
|
|
5
5
|
UseFormReturn,
|
|
6
6
|
FieldValues,
|
|
7
7
|
UseFormHandleSubmit,
|
|
8
|
+
Path,
|
|
8
9
|
} from "react-hook-form";
|
|
9
10
|
import {
|
|
10
11
|
BaseRecord,
|
|
@@ -95,26 +96,24 @@ export const useForm = <
|
|
|
95
96
|
|
|
96
97
|
const {
|
|
97
98
|
watch,
|
|
98
|
-
|
|
99
|
+
setValue,
|
|
99
100
|
getValues,
|
|
100
101
|
handleSubmit: handleSubmitReactHookForm,
|
|
101
102
|
} = useHookFormResult;
|
|
102
103
|
|
|
103
104
|
useEffect(() => {
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
const registeredFields = Object.keys(getValues());
|
|
107
|
-
Object.entries(queryResult?.data?.data || {}).forEach(
|
|
108
|
-
([key, value]) => {
|
|
109
|
-
if (registeredFields.includes(key)) {
|
|
110
|
-
fields[key] = value;
|
|
111
|
-
}
|
|
112
|
-
},
|
|
113
|
-
);
|
|
105
|
+
const data = queryResult?.data?.data;
|
|
106
|
+
if (!data) return;
|
|
114
107
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
108
|
+
const registeredFields = Object.keys(getValues());
|
|
109
|
+
Object.entries(data).forEach(([key, value]) => {
|
|
110
|
+
const name = key as Path<TVariables>;
|
|
111
|
+
|
|
112
|
+
if (registeredFields.includes(name)) {
|
|
113
|
+
setValue(name, value);
|
|
114
|
+
}
|
|
115
|
+
});
|
|
116
|
+
}, [queryResult?.data, setValue, getValues]);
|
|
118
117
|
|
|
119
118
|
useEffect(() => {
|
|
120
119
|
const subscription = watch((values: any, { type }: { type?: any }) => {
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { renderHook } from "@testing-library/react";
|
|
2
|
-
import { act } from "react-dom/test-utils";
|
|
3
2
|
|
|
4
|
-
import { TestWrapper } from "../../test";
|
|
3
|
+
import { TestWrapper, waitFor, act } from "../../test";
|
|
5
4
|
|
|
6
5
|
import { useStepsForm } from "./";
|
|
6
|
+
import * as UseForm from "../useForm";
|
|
7
7
|
|
|
8
8
|
describe("useStepsForm Hook", () => {
|
|
9
9
|
it("'defaultStep' props should set the initial value of 'currentStep'", async () => {
|
|
@@ -18,7 +18,6 @@ describe("useStepsForm Hook", () => {
|
|
|
18
18
|
wrapper: TestWrapper({}),
|
|
19
19
|
},
|
|
20
20
|
);
|
|
21
|
-
|
|
22
21
|
expect(result.current.steps.currentStep).toBe(4);
|
|
23
22
|
});
|
|
24
23
|
|
|
@@ -26,11 +25,9 @@ describe("useStepsForm Hook", () => {
|
|
|
26
25
|
const { result } = renderHook(() => useStepsForm({}), {
|
|
27
26
|
wrapper: TestWrapper({}),
|
|
28
27
|
});
|
|
29
|
-
|
|
30
28
|
await act(async () => {
|
|
31
29
|
result.current.steps.gotoStep(1);
|
|
32
30
|
});
|
|
33
|
-
|
|
34
31
|
expect(result.current.steps.currentStep).toBe(1);
|
|
35
32
|
});
|
|
36
33
|
|
|
@@ -38,11 +35,9 @@ describe("useStepsForm Hook", () => {
|
|
|
38
35
|
const { result } = renderHook(() => useStepsForm({}), {
|
|
39
36
|
wrapper: TestWrapper({}),
|
|
40
37
|
});
|
|
41
|
-
|
|
42
38
|
await act(async () => {
|
|
43
39
|
result.current.steps.gotoStep(-7);
|
|
44
40
|
});
|
|
45
|
-
|
|
46
41
|
expect(result.current.steps.currentStep).toBe(0);
|
|
47
42
|
});
|
|
48
43
|
|
|
@@ -50,11 +45,9 @@ describe("useStepsForm Hook", () => {
|
|
|
50
45
|
const { result } = renderHook(() => useStepsForm({}), {
|
|
51
46
|
wrapper: TestWrapper({}),
|
|
52
47
|
});
|
|
53
|
-
|
|
54
48
|
await act(async () => {
|
|
55
49
|
result.current.steps.gotoStep(-7);
|
|
56
50
|
});
|
|
57
|
-
|
|
58
51
|
expect(result.current.steps.currentStep).toBe(0);
|
|
59
52
|
});
|
|
60
53
|
|
|
@@ -70,11 +63,70 @@ describe("useStepsForm Hook", () => {
|
|
|
70
63
|
wrapper: TestWrapper({}),
|
|
71
64
|
},
|
|
72
65
|
);
|
|
73
|
-
|
|
74
66
|
await act(async () => {
|
|
75
67
|
result.current.steps.gotoStep(2);
|
|
76
68
|
});
|
|
77
|
-
|
|
78
69
|
expect(result.current.steps.currentStep).toBe(2);
|
|
79
70
|
});
|
|
71
|
+
|
|
72
|
+
it.each([
|
|
73
|
+
{
|
|
74
|
+
mockDirtyFields: {},
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
mockDirtyFields: { field2: true },
|
|
78
|
+
},
|
|
79
|
+
])(
|
|
80
|
+
"should call setValue with correct data according to dirty fields",
|
|
81
|
+
async (scenario) => {
|
|
82
|
+
const mockData = { field1: "field1", field2: "field2" };
|
|
83
|
+
const mockDirtyFields = scenario.mockDirtyFields;
|
|
84
|
+
const setValue = jest.fn();
|
|
85
|
+
const getValues = () => mockData;
|
|
86
|
+
|
|
87
|
+
(jest.spyOn(UseForm, "useForm") as jest.Mock).mockReturnValueOnce({
|
|
88
|
+
setValue,
|
|
89
|
+
getValues,
|
|
90
|
+
formState: { dirtyFields: mockDirtyFields },
|
|
91
|
+
refineCore: { queryResult: { data: { data: mockData } } },
|
|
92
|
+
});
|
|
93
|
+
|
|
94
|
+
const { result } = renderHook(
|
|
95
|
+
() =>
|
|
96
|
+
useStepsForm({
|
|
97
|
+
stepsProps: {
|
|
98
|
+
defaultStep: 1,
|
|
99
|
+
},
|
|
100
|
+
}),
|
|
101
|
+
{
|
|
102
|
+
wrapper: TestWrapper({}),
|
|
103
|
+
},
|
|
104
|
+
);
|
|
105
|
+
|
|
106
|
+
await waitFor(() => {
|
|
107
|
+
expect(!result.current.refineCore.formLoading).toBeTruthy();
|
|
108
|
+
});
|
|
109
|
+
|
|
110
|
+
expect(result.current.refineCore.queryResult?.data?.data).toEqual(
|
|
111
|
+
mockData,
|
|
112
|
+
);
|
|
113
|
+
|
|
114
|
+
const setValueCallTimes =
|
|
115
|
+
Object.keys(mockData).length -
|
|
116
|
+
Object.keys(mockDirtyFields).length;
|
|
117
|
+
expect(setValue).toHaveBeenCalledTimes(setValueCallTimes);
|
|
118
|
+
|
|
119
|
+
Object.keys(mockData).forEach((key) => {
|
|
120
|
+
const keyName = key as keyof typeof mockData &
|
|
121
|
+
keyof typeof mockDirtyFields;
|
|
122
|
+
|
|
123
|
+
if (!mockDirtyFields[keyName]) {
|
|
124
|
+
expect(setValue).toHaveBeenCalledWith(
|
|
125
|
+
key,
|
|
126
|
+
mockData[keyName],
|
|
127
|
+
);
|
|
128
|
+
}
|
|
129
|
+
});
|
|
130
|
+
},
|
|
131
|
+
);
|
|
80
132
|
});
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useEffect, useState } from "react";
|
|
2
|
-
import { FieldValues } from "react-hook-form";
|
|
2
|
+
import { FieldValues, Path } from "react-hook-form";
|
|
3
3
|
import { BaseRecord, HttpError } from "@refinedev/core";
|
|
4
4
|
|
|
5
5
|
import { useForm, UseFormProps, UseFormReturnType } from "../useForm";
|
|
@@ -79,31 +79,26 @@ export const useStepsForm = <
|
|
|
79
79
|
const {
|
|
80
80
|
trigger,
|
|
81
81
|
getValues,
|
|
82
|
-
|
|
82
|
+
setValue,
|
|
83
83
|
formState: { dirtyFields },
|
|
84
84
|
refineCore: { queryResult },
|
|
85
85
|
} = useHookFormResult;
|
|
86
86
|
|
|
87
87
|
useEffect(() => {
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
const registeredFields = Object.keys(getValues());
|
|
91
|
-
Object.entries(queryResult?.data?.data).forEach(([key, value]) => {
|
|
92
|
-
if (registeredFields.includes(key)) {
|
|
93
|
-
if (dirtyFields[key]) {
|
|
94
|
-
fields[key] = getValues(key as any);
|
|
95
|
-
} else {
|
|
96
|
-
fields[key] = value;
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
});
|
|
88
|
+
const data = queryResult?.data?.data;
|
|
89
|
+
if (!data) return;
|
|
100
90
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
91
|
+
const registeredFields = Object.keys(getValues());
|
|
92
|
+
Object.entries(data).forEach(([key, value]) => {
|
|
93
|
+
const name = key as Path<TVariables>;
|
|
94
|
+
|
|
95
|
+
if (registeredFields.includes(name)) {
|
|
96
|
+
if (!dirtyFields[name]) {
|
|
97
|
+
setValue(name, value);
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
});
|
|
101
|
+
}, [queryResult?.data, current, setValue, getValues]);
|
|
107
102
|
|
|
108
103
|
const go = (step: number) => {
|
|
109
104
|
let targetStep = step;
|