From 320fc4eabb29d9dc2cb28517927b4cb7b0945de8 Mon Sep 17 00:00:00 2001
From: camin-mccluskey <c.mccluskey_7@hotmail.co.uk>
Date: Thu, 23 Nov 2023 15:35:59 +0000
Subject: [PATCH] [FEAT]: Allow custom submit button label

---
 examples/submitStepper/package-lock.json      | 3 ++-
 examples/submitStepper/src/form/StepThree.tsx | 9 ++++++++-
 examples/submitStepper/src/form/StepTwo.tsx   | 7 ++++++-
 package.json                                  | 2 +-
 src/components/SubmitButton.tsx               | 4 +++-
 5 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/examples/submitStepper/package-lock.json b/examples/submitStepper/package-lock.json
index a525b6a..c565f4e 100644
--- a/examples/submitStepper/package-lock.json
+++ b/examples/submitStepper/package-lock.json
@@ -27,7 +27,7 @@
       }
     },
     "../..": {
-      "version": "0.0.1",
+      "version": "0.0.10",
       "license": "MIT",
       "dependencies": {
         "react-context-refs": "^0.2.1"
@@ -47,6 +47,7 @@
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.4.1",
         "prettier": "^3.0.1",
+        "tsc-alias": "^1.8.7",
         "typescript": "^5.0.2",
         "vite": "^4.4.0"
       },
diff --git a/examples/submitStepper/src/form/StepThree.tsx b/examples/submitStepper/src/form/StepThree.tsx
index aed46d5..669cd58 100644
--- a/examples/submitStepper/src/form/StepThree.tsx
+++ b/examples/submitStepper/src/form/StepThree.tsx
@@ -121,7 +121,14 @@ export default function StepThree({ data, onSubmit, reportValidity }: StepThreeP
       <button type="button" onClick={() => append({ name: '', type: Animal.DOG })}>
         Add a pet
       </button>
-      <SubmitButton handleSubmit={handleSubmit} onSubmit={onSubmit} disabled={!isValid} />
+      <SubmitButton handleSubmit={handleSubmit} onSubmit={onSubmit} disabled={!isValid}>
+        <div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+            <path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" />
+          </svg>
+          <span>Done</span>
+        </div>
+      </SubmitButton>
     </form>
   )
 }
diff --git a/examples/submitStepper/src/form/StepTwo.tsx b/examples/submitStepper/src/form/StepTwo.tsx
index 3442a47..dac2973 100644
--- a/examples/submitStepper/src/form/StepTwo.tsx
+++ b/examples/submitStepper/src/form/StepTwo.tsx
@@ -50,7 +50,12 @@ export default function StepTwo({ data, onSubmit, reportValidity }: StepTwoProps
       <label>Country Code</label>
       <input type="text" {...register('address.countryCode')} />
       <p style={{ fontSize: '10px', color: 'red' }}>{errors.address?.countryCode?.message}</p>
-      <SubmitButton handleSubmit={handleSubmit} onSubmit={onSubmit} disabled={!isValid} />
+      <SubmitButton
+        handleSubmit={handleSubmit}
+        onSubmit={onSubmit}
+        disabled={!isValid}
+        label="Next Step"
+      />
     </form>
   )
 }
diff --git a/package.json b/package.json
index 92143b8..d0889fd 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-hook-form-multistep",
   "description": "Extensible multistep forms for React Hook Form.",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "private": false,
   "author": {
     "name": "Camin McCluskey",
diff --git a/src/components/SubmitButton.tsx b/src/components/SubmitButton.tsx
index 83ca235..f12a044 100644
--- a/src/components/SubmitButton.tsx
+++ b/src/components/SubmitButton.tsx
@@ -7,6 +7,7 @@ import type { FormStepOnSubmit } from '~/types'
 type SubmitButtonProps<StepFormData extends FieldValues> = {
   label?: string
   className?: string
+  children?: React.ReactNode
   handleSubmit: UseFormHandleSubmit<StepFormData>
   onSubmit: FormStepOnSubmit<StepFormData>
   disabled: boolean
@@ -15,6 +16,7 @@ type SubmitButtonProps<StepFormData extends FieldValues> = {
 export default function SubmitButton<StepFormData extends FieldValues>({
   label = 'Next',
   className,
+  children,
   handleSubmit,
   onSubmit,
   disabled,
@@ -29,7 +31,7 @@ export default function SubmitButton<StepFormData extends FieldValues>({
 
   return (
     <button type="submit" className={className} disabled={disabled} ref={submitButtonRef}>
-      {label}
+      {children || label}
     </button>
   )
 }