Add possibility to customize stepCount or wrap context children

[Luca]

I need to wrap my steps into a common wrapper which needs itself to access the context too.
Example:

// Example: show the active step in the header
const Header = () => <p>I am the header component</p>;

// Example: show the "previous" and "next" buttons in the footer
const Footer = () => <p>I am the footer component</p>;

const App = () => {
  return (
    <Wizard startIndex={0} header={<Header />} footer={<Footer />}>
        <StepWrapper> {/* <-- This needs to access context too. */}
           <Step1 />
           <Step2 />
           <Step3 />
        </StepWrapper>
    </Wizard>
  );
};

But looking at the context code stepCount is retrieved in this way so:

const stepCount = React.Children.toArray(children).length;

So in the example provided stepCount results to be 1 because it considers only StepWrapper as child.

The needed feature should be the possibility to manually customize this value or something to define a steps wrapper able to access context.

Is this something possible to do? Thank you.

[Luca]

Found this merge request #86 that probably addresses the issue.

[Jonas De Vrient]

Fixed by #86

[Jonas De Vrient]

v2.2.0

[Luca]

@devrnt I was testing v2.2.0, Is there a reason why header and footer are excluded from wrapper?

[Jonas De Vrient]

It was introduced focused on the animation use case. It doesn't make much sense to animate the footer (probably previous/next buttons) or header

[Luca]

@devrnt Got it, probably I had to explain better my needs.
My target was to be able to extend somehow the context provided with another context of additional info useful for my wizard.

For example in order to handle an info about the steps in error state I thought to do something like this:

export function AdditionalWizardContextProvider({ children, ...props }) {
	const [errorSteps, setErrorSteps] = useState([]);
	const { activeStep } = useWizard();

	const stepHasError = useCallback(
		(stepIdx = activeStep) => errorSteps.includes(stepIdx),
		[errorSteps]
	);

	const contextValue = useMemo(
		() => ({
			errorSteps,
			setErrorSteps,
			stepHasError
		}),
		[
			errorSteps,
			setErrorSteps,
			stepHasError
		]
	);

	return (
		<AdditionalWizardContextProvider.Provider>
			{children}
		</AdditionalWizardContextProvider.Provider>
	);
}

The usage would be something like this:

			<Wizard
				header={<WizardStepper {...StepperProps} />}
				footer={<WizardStepButtons onSubmit={onSubmit} />}
				wrapper={<AdditionalWizardContextProvider />}
			>
				<Step1/>
				<Step2/>
			</Wizard>

Error info would be accessed and displayed directly from WizardStepper (header) component (but maybe needed also by footer component) and this info would be just one of the things I want to handle in my customized context. I didn't want to force the library to do something that is not recognized as a value and didn't want to re-do the very well done job already offered by it.

I hope this makes sense to you and it doesn't sound like a customization gone too far.

(I've edited the example, it was wrong)