diff --git a/README.md b/README.md index e2c8a6c..5a1c068 100644 --- a/README.md +++ b/README.md @@ -63,6 +63,8 @@ function Signup() { stepCount={3} isBackDisabled={(index) => { return index === 0 }} isNextDisabled={(index) => { return false }} + isBackLoading={(index) => { return false }} + isNextLoading={(index) => { return false }} onBack={(index) => { console.log('back clicked on step', index) }} onNext={(index) => { console.log('next clicked on step', index) }} > diff --git a/src/PromenadeContext.ts b/src/PromenadeContext.ts index 9fbfb2a..03cd6d4 100644 --- a/src/PromenadeContext.ts +++ b/src/PromenadeContext.ts @@ -22,6 +22,16 @@ type PromenadeContextType = { * @default false */ isBackDisabled: boolean; + /** + * Whether the next button is loading + * @default () => false + */ + isNextLoading?: boolean; + /** + * Whether the back button is loading + * @default () => false + * */ + isBackLoading?: boolean; /** * Function to go forward to the next step. */ diff --git a/src/PromenadeProvider.tsx b/src/PromenadeProvider.tsx index 95f3dcb..cbf090f 100644 --- a/src/PromenadeProvider.tsx +++ b/src/PromenadeProvider.tsx @@ -1,12 +1,9 @@ import React, { - ReactElement, ReactNode, useCallback, - useMemo, useState, } from "react"; import { PromenadeContext } from "@/src/PromenadeContext"; -import { PromenadeStep } from "@/src/PromenadeStep"; type PromenadeProviderProps = { /** @@ -27,6 +24,16 @@ type PromenadeProviderProps = { * @default () => false */ isBackDisabled?: (index: number) => boolean; + /** + * Whether the next button is loading + * @default () => false + */ + isNextLoading?: (index: number) => boolean; + /** + * Whether the back button is loading + * @default () => false + * */ + isBackLoading?: (index: number) => boolean; /** * Callback for when the user clicks the back button */ @@ -42,6 +49,8 @@ export const PromenadeProvider = ({ stepCount, isNextDisabled = () => false, isBackDisabled = () => false, + isNextLoading = () => false, + isBackLoading = () => false, onBack, onNext }: PromenadeProviderProps) => { @@ -80,6 +89,9 @@ export const PromenadeProvider = ({ isNextDisabled: isNextDisabled(index), isBackDisabled: isBackDisabled(index), + isNextLoading: isNextLoading(index), + isBackLoading: isBackLoading(index), + goForward, goBack, cancelFlow,