80 lines
2.0 KiB
TypeScript
80 lines
2.0 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import type { FC } from 'react';
|
|
|
|
type StepProps = {
|
|
readonly useStep: () => {
|
|
stepIndex: number;
|
|
currentStep: number;
|
|
totalSteps: number;
|
|
isFirst: boolean;
|
|
isLast: boolean;
|
|
nextStep: () => void;
|
|
previousStep: () => void;
|
|
};
|
|
};
|
|
|
|
export type WithStep<T> = T & StepProps;
|
|
|
|
type StepperProps = {
|
|
children: React.ReactNode;
|
|
onComplete?: () => void;
|
|
onStepChanged?: (currentStep: number) => void;
|
|
currentStep?: number;
|
|
setCurrentStep?: (step: number) => void;
|
|
};
|
|
|
|
export const Stepper: FC<StepperProps> = ({
|
|
children,
|
|
onComplete,
|
|
onStepChanged,
|
|
currentStep: propCurrentStep,
|
|
setCurrentStep: propSetCurrentStep,
|
|
}) => {
|
|
const [stateCurrentStep, stateSetCurrentStep] = useState(1);
|
|
|
|
// Determine if props are provided, otherwise use state
|
|
const isControlled = propCurrentStep !== undefined && propSetCurrentStep !== undefined;
|
|
const currentStep = isControlled ? propCurrentStep : stateCurrentStep;
|
|
const setCurrentStep = isControlled ? propSetCurrentStep : stateSetCurrentStep;
|
|
|
|
const totalSteps = React.Children.count(children);
|
|
|
|
const nextStep = () => {
|
|
if (currentStep < totalSteps) {
|
|
setCurrentStep(currentStep + 1);
|
|
} else {
|
|
onComplete && onComplete();
|
|
}
|
|
};
|
|
|
|
const previousStep = () => {
|
|
if (currentStep > 1) {
|
|
setCurrentStep(currentStep - 1);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
onStepChanged && onStepChanged(currentStep);
|
|
}, [currentStep, onStepChanged]);
|
|
|
|
const useStep = () => ({
|
|
stepIndex: currentStep - 1,
|
|
currentStep,
|
|
totalSteps,
|
|
isFirst: currentStep === 1,
|
|
isLast: currentStep === totalSteps,
|
|
nextStep,
|
|
previousStep,
|
|
});
|
|
|
|
// empty stepper
|
|
if (totalSteps === 0) return null;
|
|
|
|
const currentChild = React.Children.toArray(children)[currentStep - 1];
|
|
|
|
// type validation
|
|
if (!React.isValidElement<StepProps>(currentChild)) return null;
|
|
|
|
return <>{React.cloneElement(currentChild, { useStep })}</>;
|
|
};
|