@indec/form-builder/lib/components/Radio/Radio.js

Form builder

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _FieldMessage = _interopRequireDefault(require("../FieldMessage"));
var _InputLabel = _interopRequireDefault(require("../InputLabel"));
var _breakpoints = _interopRequireDefault(require("../../constants/breakpoints"));
var _hooks = require("../../hooks");
var _Icons = require("../Icons");
var _MobileRadio = _interopRequireDefault(require("./MobileRadio"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function Radio(_ref) {
  var options = _ref.options,
    field = _ref.field,
    _ref$disabled = _ref.disabled,
    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
    label = _ref.label,
    form = _ref.form,
    _ref$warnings = _ref.warnings,
    warnings = _ref$warnings === void 0 ? {} : _ref$warnings;
  var _useBreakpoint = (0, _hooks.useBreakpoint)(),
    breakpoint = _useBreakpoint.breakpoint;
  return breakpoint === _breakpoints["default"].EXTRA_SMALL ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_MobileRadio["default"], {
    options: options,
    field: field,
    disabled: disabled,
    label: label,
    form: form,
    warnings: warnings
  }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: "fb:flex fb:flex-col fb:w-full",
    "data-testid": "radio",
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel["default"], {
      warnings: warnings,
      form: form,
      field: field,
      label: label,
      disabled: disabled
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "fb:space-y-3 fb:mt-2",
      role: "radiogroup",
      onBlur: form.handleBlur,
      children: options.map(function (option, index) {
        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
          className: "fb:flex fb:items-center fb:space-x-2",
          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
            htmlFor: "".concat(field.name, "-").concat(option.value),
            className: "fb:group fb:flex fb:items-center fb:space-x-4 fb:p-2 fb:rounded-lg fb:transition-all fb:duration-200 ".concat(disabled ? 'fb:opacity-50 fb:cursor-not-allowed' : 'fb:cursor-pointer'),
            "data-testid": "radio-".concat(index),
            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
              className: "fb:relative fb:flex-shrink-0",
              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
                id: "".concat(field.name, "-").concat(option.value),
                type: "radio",
                name: field.name,
                value: option.value,
                checked: option.value === field.value,
                onChange: function onChange(e) {
                  field.onChange(e);
                  form.setFieldTouched(field.name, false);
                },
                disabled: disabled,
                className: "fb:sr-only"
              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                className: "fb:w-6 fb:h-6 fb:border-2 fb:rounded-full fb:flex fb:items-center fb:justify-center fb:transition-all fb:duration-200 fb:transform ".concat(option.value === field.value ? 'fb:bg-blue-600 fb:border-blue-600 fb:scale-100 fb:shadow-md' : 'fb:bg-white fb:border-gray-300 fb:scale-100', " ").concat(disabled ? 'fb:opacity-50' : '', " fb:focus-within:ring-2 fb:focus-within:ring-blue-500 fb:focus-within:ring-offset-2"),
                children: option.value === field.value && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                  className: "fb:w-2 fb:h-2 fb:bg-white fb:rounded-full fb:transform fb:transition-transform fb:duration-150 fb:scale-110"
                })
              })]
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
              className: "fb:select-none fb:font-medium fb:transition-colors fb:duration-200 ".concat(disabled ? 'fb:text-gray-400' : 'fb:text-gray-900'),
              children: option.label
            })]
          }), option.value === field.value && !disabled && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
            type: "button",
            onClick: function onClick() {
              return form.setFieldValue(field.name, '');
            },
            className: "fb:p-1 fb:text-red-600 fb:hover:text-red-800 fb:hover:bg-red-50 fb:rounded fb:transition-colors fb:duration-200",
            "data-testid": "clean-option-".concat(index),
            "aria-label": "Clear selection",
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.DeleteIcon, {})
          })]
        }, option.value);
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldMessage["default"], {
      form: form,
      field: field,
      warnings: warnings
    })]
  });
}
var _default = exports["default"] = Radio;