Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | 19x 44x 44x 44x 44x 44x 44x 44x 220x 24x 24x 96x 24x 44x 61x 44x | import { useCallback, useRef, useState } from "react";
type TStatusBar = { label: string; barValue: number };
const useBusinessProfileSteps = (steps: TStatusBar[], defaultStep: string) => {
const [step, setStep] = useState(defaultStep);
const [isLoaded, setIsLoaded] = useState<boolean>(false);
const stepperRef = useRef<any>(null);
const [statusBar, setStatusBar] = useState<TStatusBar[]>(steps);
const handleNext = () => stepperRef.current?.handleNext();
const handleBack = () => stepperRef.current?.handleBack();
const handleUpdateStatusValue = useCallback(
(label: string) => (value: number) => {
setStatusBar((prev) =>
prev.map((s) => {
if (s.label !== label) return s;
return {
...s,
barValue: value,
};
}),
);
},
[],
);
const stepperConfig = {
setStep,
defaultStep,
customSteps: statusBar,
ref: stepperRef,
setIsLoaded,
overriderActiveStep: Object.values(statusBar).findIndex(
(x) => x.label === step,
),
};
return {
stepperConfig,
handleUpdateStatusValue,
statusBar,
setStatusBar,
step,
setStep,
isLoaded,
handleBack,
handleNext,
};
};
export default useBusinessProfileSteps;
|