@open-formulieren/formio-builder/lib/cjs/components/formio/radio.js

An opinionated Formio webform builder for Open Forms

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Radio = exports.RadioInput = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const clsx_1 = __importDefault(require("clsx"));
const formik_1 = require("formik");
const react_intl_1 = require("react-intl");
const errors_1 = require("../../utils/errors");
const component_1 = __importDefault(require("./component"));
const description_1 = __importDefault(require("./description"));
const RadioInput = ({ name, value, label, description }) => {
    const { hasErrors } = (0, errors_1.useValidationErrors)(name);
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(formik_1.Field, { name: name, as: "input", type: "radio", value: value, className: (0, clsx_1.default)('form-check-input', { 'is-invalid': hasErrors }) }), (0, jsx_runtime_1.jsx)("span", { children: label }), description && (0, jsx_runtime_1.jsx)(description_1.default, { text: description })] }));
};
exports.RadioInput = RadioInput;
const EmptyLabel = () => ((0, jsx_runtime_1.jsx)("em", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: '7rzPgD', defaultMessage: [{ type: 0, value: "(missing label)" }] }) }));
const Radio = ({ name, options, label, required = false, isClearable = false, tooltip = '', description = '', isLoading = false, }) => {
    const { getFieldProps, setFieldValue } = (0, formik_1.useFormikContext)();
    const { value } = getFieldProps(name);
    const hasSelection = !!options.find(opt => opt.value === value);
    if (isLoading) {
        return ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'BFq6vL', defaultMessage: [{ type: 0, value: "Loading values..." }] }));
    }
    return ((0, jsx_runtime_1.jsxs)(component_1.default, Object.assign({ type: "radio", field: name, label: label, tooltip: tooltip, required: required }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "form-radio radio" }, { children: options.map(({ value, label, description }, index) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "form-check" }, { children: (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "form-check-label" }, { children: (0, jsx_runtime_1.jsx)(exports.RadioInput, { name: name, value: value, label: label || (0, jsx_runtime_1.jsx)(EmptyLabel, {}), description: description }) })) }), `option-${value}-${index}`))) })), description && (0, jsx_runtime_1.jsx)(description_1.default, { text: description }), hasSelection && isClearable && ((0, jsx_runtime_1.jsx)("button", Object.assign({ type: "button", className: "btn btn-link btn-sm", onClick: () => setFieldValue(name, undefined), style: { padding: 0 } }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'S4Lvvs', defaultMessage: [{ type: 0, value: "Clear selection" }] }) })))] })));
};
exports.Radio = Radio;
exports.default = exports.Radio;