formik-stepper/dist/fields/RadioField/index.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 __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React, { useCallback, useMemo } from "react";
import { useField, useFormikContext } from "formik";
var initStyle = {
    height: "1em",
    width: "1em",
    marginInlineEnd: " 0.5em",
    marginTop: "0.25em",
    verticalAlign: "top",
};
export var RadioField = React.memo(function (_a) {
    var label = _a.label, labelColor = _a.labelColor, options = _a.options, component = _a.component, style = _a.style, props = __rest(_a, ["label", "labelColor", "options", "component", "style"]);
    var _b = useField(props), field = _b[0], meta = _b[1];
    var setFieldValue = useFormikContext().setFieldValue;
    var error = meta.error, touched = meta.touched;
    var errorText = error || null;
    var hasError = !!error;
    var onChangeHanlder = useCallback(function (value) {
        setFieldValue(field.name, value);
    }, [field.name, setFieldValue]);
    var FieldComponent = useMemo(function () { return (React.createElement("div", null,
        React.createElement("label", { style: { color: labelColor } }, label),
        options.map(function (option, index) { return (React.createElement("div", { key: index + "-" + option.value },
            React.createElement("input", __assign({ type: "radio", id: option.value.replace(/\s/g, "-"), checked: field.value === option.value, disabled: option.disabled, style: __assign(__assign({}, initStyle), style) }, field, props, { onChange: function () { return onChangeHanlder(option.value); } })),
            React.createElement("label", { htmlFor: option.value.replace(/\s/g, "-"), style: { color: labelColor } }, option.label))); }),
        hasError && touched ? (React.createElement("label", { style: { color: "#b50000", marginTop: 5 } }, errorText)) : null)); }, [
        labelColor,
        label,
        options,
        hasError,
        touched,
        errorText,
        field,
        style,
        props,
        onChangeHanlder,
    ]);
    if (typeof component === "function") {
        return component({ field: field, meta: meta, label: label });
    }
    return FieldComponent;
});
RadioField.displayName = "RadioField";
export default RadioField;