jobiqo-cl
Version:
[](https://circleci.com/gh/jobiqo/jobiqo-cl)
51 lines (48 loc) • 2.29 kB
JavaScript
import React__default, { useState } from 'react';
import { Button } from '../../02-atoms/01-forms/01-button/index.js';
import { Spacing } from '../../02-atoms/06-layout/07-spacing/index.js';
import { ArrowLongRightIcon } from '../../../icons/ArrowLongRight.js';
import { WizardContext } from './context/index.js';
import { WizardActions } from './styles/index.js';
/**
* @file index.tsx
*
* @fileoverview Renders a multi-step wizard.
*/
/**
* Called when user clicks next.
*/
const handleNextChanged = (currentStep, setCurrentStep, onNext) => {
setCurrentStep(currentStep + 1);
if (onNext) {
onNext();
}
};
/**
* Called when user clicks next.
*/
const handlePreviousChanged = (currentStep, setCurrentStep, onPrevious) => {
setCurrentStep(currentStep - 1);
if (onPrevious) {
onPrevious();
}
};
/**
* A multistep wizard that can be used for long forms or things that need a lot of
* input from a user and where detailed information
* about each information group is important.
*/
const Wizard = ({ children, nextLabel, previousLabel, numberSteps, steps, finishLabel, onFinish, onNext, onPrevious }) => {
const [currentStep, setCurrentStep] = useState(1);
return (React__default.createElement(WizardContext.Provider, { value: { currentStep, numberSteps, steps } },
children,
React__default.createElement(Spacing, { size: "large" }),
React__default.createElement(WizardActions, null,
currentStep < numberSteps && (React__default.createElement(Button, { type: "button", buttonStyle: "secondary", onClick: e => handleNextChanged(currentStep, setCurrentStep, onNext) },
nextLabel,
"\u00A0",
React__default.createElement(ArrowLongRightIcon, { title: "Next" }))),
currentStep === numberSteps && (React__default.createElement(Button, Object.assign({ type: "button", buttonStyle: "secondary" }, (onFinish ? { onClick: onFinish } : null)), finishLabel)),
currentStep > 1 && (React__default.createElement(Button, { type: "button", buttonStyle: "secondary", raised: false, onClick: e => handlePreviousChanged(currentStep, setCurrentStep, onPrevious) }, previousLabel)))));
};
export { Wizard };