formik-stepper/dist/fromikForm/FormikButtons.js

Get ready to take your form-building game to the next level with this revolutionary React component. With its seamless integration with the powerful Formik library, you'll be building forms faster and more efficiently than ever before. But that's not all

var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var __generator = (this && this.__generator) || function (thisArg, body) {
    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
    function verb(n) { return function (v) { return step([n, v]); }; }
    function step(op) {
        if (f) throw new TypeError("Generator is already executing.");
        while (g && (g = 0, op[0] && (_ = 0)), _) try {
            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
            if (y = 0, t) op = [op[0] & 2, t.value];
            switch (op[0]) {
                case 0: case 1: t = op; break;
                case 4: _.label++; return { value: op[1], done: false };
                case 5: _.label++; y = op[1]; op = [0]; continue;
                case 7: op = _.ops.pop(); _.trys.pop(); continue;
                default:
                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
                    if (t[2]) _.ops.pop();
                    _.trys.pop(); continue;
            }
            op = body.call(thisArg, _);
        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
    }
};
import React, { useCallback, useEffect, useMemo, useRef, useState, } from "react";
import { useFormikContext } from "formik";
import { validate } from "./utils";
export var FormikButtons = function (_a) {
    var step = _a.step, setStep = _a.setStep, childrenLength = _a.childrenLength, nextButton = _a.nextButton, prevButton = _a.prevButton, submitButton = _a.submitButton, currentStep = _a.currentStep;
    var _b = useState(false), isSubmitting = _b[0], setIsSubmitting = _b[1];
    var stepObject = useRef(currentStep);
    var _c = useFormikContext(), validateForm = _c.validateForm, setTouched = _c.setTouched, setFieldError = _c.setFieldError, submitForm = _c.submitForm, setSubmitting = _c.setSubmitting, submitting = _c.isSubmitting;
    var onValidate = useCallback(function (isLastStep) { return __awaiter(void 0, void 0, void 0, function () {
        var errors, error_1;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    _a.trys.push([0, 5, , 6]);
                    return [4 /*yield*/, validateForm()];
                case 1:
                    errors = _a.sent();
                    if (!validate({
                        errors: errors,
                        setTouched: setTouched,
                        setFieldError: setFieldError,
                        currentStep: stepObject.current,
                    })) return [3 /*break*/, 4];
                    if (!isLastStep) return [3 /*break*/, 3];
                    setSubmitting(true);
                    return [4 /*yield*/, submitForm()];
                case 2:
                    _a.sent();
                    return [3 /*break*/, 4];
                case 3:
                    setStep(step + 1);
                    _a.label = 4;
                case 4: return [3 /*break*/, 6];
                case 5:
                    error_1 = _a.sent();
                    console.error(error_1);
                    return [3 /*break*/, 6];
                case 6: return [2 /*return*/];
            }
        });
    }); }, [
        setFieldError,
        setStep,
        setSubmitting,
        setTouched,
        step,
        submitForm,
        validateForm,
    ]);
    useEffect(function () {
        setIsSubmitting(submitting);
    }, [submitting]);
    var onPrev = useCallback(function () {
        setStep(step - 1);
    }, [setStep, step]);
    return useMemo(function () { return (React.createElement("div", { style: { marginTop: "1em", display: "flex" } },
        step > 0 && (React.createElement("button", { type: "button", className: "formik-s-btn", onClick: onPrev, style: __assign({ backgroundColor: "#f44336" }, prevButton === null || prevButton === void 0 ? void 0 : prevButton.style) }, (prevButton === null || prevButton === void 0 ? void 0 : prevButton.label) || "Prev")),
        step < childrenLength - 1 && (React.createElement("button", { type: "button", className: "formik-s-btn", onClick: function () { return onValidate(false); }, style: __assign(__assign({ backgroundColor: "#04AA6D" }, nextButton === null || nextButton === void 0 ? void 0 : nextButton.style), { marginInlineStart: "auto" }) }, (nextButton === null || nextButton === void 0 ? void 0 : nextButton.label) || "Next")),
        (step === childrenLength - 1 || childrenLength === 1) && (React.createElement("button", { type: "button", className: "formik-s-btn", style: __assign(__assign({ backgroundColor: "#04AA6D" }, submitButton === null || submitButton === void 0 ? void 0 : submitButton.style), { marginInlineStart: "auto" }), disabled: isSubmitting, onClick: function () { return onValidate(true); } }, (submitButton === null || submitButton === void 0 ? void 0 : submitButton.label) || "Submit")))); }, [
        childrenLength,
        isSubmitting,
        nextButton === null || nextButton === void 0 ? void 0 : nextButton.label,
        nextButton === null || nextButton === void 0 ? void 0 : nextButton.style,
        onPrev,
        onValidate,
        prevButton === null || prevButton === void 0 ? void 0 : prevButton.label,
        prevButton === null || prevButton === void 0 ? void 0 : prevButton.style,
        step,
        submitButton === null || submitButton === void 0 ? void 0 : submitButton.label,
        submitButton === null || submitButton === void 0 ? void 0 : submitButton.style,
    ]);
};
FormikButtons.displayName = "FormikButtons";
export default React.memo(FormikButtons);