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

An opinionated Formio webform builder for Open Forms

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import clsx from 'clsx';
import { Field, useFormikContext } from 'formik';
import { FormattedMessage } from 'react-intl';
import { useValidationErrors } from '../../utils/errors';
import Component from './component';
import Description from './description';
export const RadioInput = ({ name, value, label, description }) => {
    const { hasErrors } = useValidationErrors(name);
    return (_jsxs(_Fragment, { children: [_jsx(Field, { name: name, as: "input", type: "radio", value: value, className: clsx('form-check-input', { 'is-invalid': hasErrors }) }), _jsx("span", { children: label }), description && _jsx(Description, { text: description })] }));
};
const EmptyLabel = () => (_jsx("em", { children: _jsx(FormattedMessage, { id: '7rzPgD', defaultMessage: [{ type: 0, value: "(missing label)" }] }) }));
export const Radio = ({ name, options, label, required = false, isClearable = false, tooltip = '', description = '', isLoading = false, }) => {
    const { getFieldProps, setFieldValue } = useFormikContext();
    const { value } = getFieldProps(name);
    const hasSelection = !!options.find(opt => opt.value === value);
    if (isLoading) {
        return (_jsx(FormattedMessage, { id: 'BFq6vL', defaultMessage: [{ type: 0, value: "Loading values..." }] }));
    }
    return (_jsxs(Component, Object.assign({ type: "radio", field: name, label: label, tooltip: tooltip, required: required }, { children: [_jsx("div", Object.assign({ className: "form-radio radio" }, { children: options.map(({ value, label, description }, index) => (_jsx("div", Object.assign({ className: "form-check" }, { children: _jsx("label", Object.assign({ className: "form-check-label" }, { children: _jsx(RadioInput, { name: name, value: value, label: label || _jsx(EmptyLabel, {}), description: description }) })) }), `option-${value}-${index}`))) })), description && _jsx(Description, { text: description }), hasSelection && isClearable && (_jsx("button", Object.assign({ type: "button", className: "btn btn-link btn-sm", onClick: () => setFieldValue(name, undefined), style: { padding: 0 } }, { children: _jsx(FormattedMessage, { id: 'S4Lvvs', defaultMessage: [{ type: 0, value: "Clear selection" }] }) })))] })));
};
export default Radio;