formik-wizard-simple
Version:
Multi-step form wizard with Formik
66 lines (65 loc) • 2.91 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Wizard = void 0;
const formik_1 = require("formik");
const react_1 = __importStar(require("react"));
const context_1 = require("../../context");
const Step_1 = require("../Step");
function Wizard({ children, onSubmit, resetTouchedOnMove = false, onRenderAfterStep, onRenderBeforeStep, initialStep = 0, formProps, ...rest }) {
const [step, setStep] = react_1.useState(initialStep);
const steps = react_1.default.Children.toArray(children);
const stepNode = steps[step];
const isLastStep = step === steps.length - 1;
const onSetStep = (value) => setStep(value);
const onNextStep = () => setStep(current => Math.min(current + 1, steps.length - 1));
const onPreviousStep = () => setStep(current => Math.max(current - 1, 0));
const onHandleSubmit = async (values, helpers) => {
if (stepNode.props.onSubmit) {
await stepNode.props.onSubmit(values, helpers, step);
}
if (isLastStep) {
onSubmit(values, helpers);
}
else {
if (resetTouchedOnMove) {
helpers.setTouched({});
}
onNextStep();
}
};
return (react_1.default.createElement(formik_1.Formik, Object.assign({}, rest, { onSubmit: onHandleSubmit, validationSchema: stepNode.props.validationSchema }),
react_1.default.createElement(formik_1.Form, Object.assign({}, formProps),
react_1.default.createElement(context_1.WizardContext.Provider, { value: {
isLastStep,
onNextStep,
onPreviousStep,
step,
onSetStep,
totalSteps: steps.length,
stepId: stepNode.props.id
} },
onRenderBeforeStep,
stepNode,
onRenderAfterStep))));
}
exports.Wizard = Wizard;
Wizard.Step = Step_1.Step;