@saas-ui/forms 1.0.0-rc.7 → 1.0.0

package/src/use-step-form.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
-import { FieldValues, SubmitHandler } from 'react-hook-form'
-import { createContext } from '@chakra-ui/react-utils'
+import { FieldValues, SubmitHandler, UnpackNestedValue } from 'react-hook-form'
+import { createContext, MaybeRenderProp } from '@chakra-ui/react-utils'
 import {
   useStepper,
   useStep,
@@ -14,8 +14,16 @@ export interface StepState {
   resolver?: any
   isActive?: boolean
   isCompleted?: boolean
+  onSubmit?: FormStepSubmitHandler
 }
 
+export type FormStepSubmitHandler<
+  TFieldValues extends FieldValues = FieldValues
+> = (
+  data: UnpackNestedValue<TFieldValues>,
+  stepper: UseStepperReturn
+) => Promise<void>
+
 export interface StepFormContext extends UseStepperReturn {
   updateStep(state: StepState): void
   steps: Record<string, StepState>
@@ -34,9 +42,7 @@ export interface UseStepFormProps<
   TFieldValues extends FieldValues = FieldValues
 > extends Omit<UseStepperProps, 'onChange'>,
     Omit<FormProps<TFieldValues>, 'children'> {
-  children:
-    | React.ReactNode
-    | ((stepper: UseStepFormReturn<TFieldValues>) => React.ReactElement)
+  children: MaybeRenderProp<UseStepFormReturn<TFieldValues>>
 }
 
 export interface UseStepFormReturn<
@@ -63,11 +69,12 @@ export function useStepForm<TFieldValues extends FieldValues = FieldValues>(
 
   const onSubmitStep: SubmitHandler<TFieldValues> = React.useCallback(
     async (data) => {
+      const step = steps[activeStep]
+
       if (isLastStep) {
         return props
           .onSubmit?.(data)
           .then(() => {
-            const step = steps[activeStep]
             updateStep({
               ...step,
               isCompleted: true,
@@ -76,9 +83,15 @@ export function useStepForm<TFieldValues extends FieldValues = FieldValues>(
           .then(nextStep) // Show completed step
       }
 
-      nextStep()
+      try {
+        await step.onSubmit?.(data, stepper)
+
+        nextStep()
+      } catch (e) {
+        // Step submission failed.
+      }
     },
-    [activeStep, isLastStep]
+    [steps, activeStep, isLastStep]
   )
 
   const getFormProps = React.useCallback(() => {
@@ -114,16 +127,17 @@ export interface UseFormStepProps {
   name: string
   schema?: any
   resolver?: any
+  onSubmit?: FormStepSubmitHandler
 }
 
 export function useFormStep(props: UseFormStepProps): StepState {
-  const { name, schema, resolver } = props
+  const { name, schema, resolver, onSubmit } = props
   const step = useStep({ name })
 
   const { steps, updateStep } = useStepFormContext()
 
   React.useEffect(() => {
-    updateStep({ name, schema, resolver })
+    updateStep({ name, schema, resolver, onSubmit })
   }, [name, schema])
 
   return {