@braineet/ui/dist/esm/components/radio-group/index.js

Braineet design system

var _excluded = ["field", "form", "value", "disabled", "readOnly", "name", "options", "toggleStyles", "hasDeselect"];
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
import React from 'react';
import Alert from '../alert';
import Box from '../box';
import { StyledLabel, StyledText, RadioInput } from './styles';

/**
 * The `RadioBtn` component.
 */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export var Radio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
  var field = _ref.field,
    form = _ref.form,
    v = _ref.value,
    disabled = _ref.disabled,
    readOnly = _ref.readOnly,
    name = _ref.name,
    options = _ref.options,
    toggleStyles = _ref.toggleStyles,
    hasDeselect = _ref.hasDeselect,
    restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
  var touch = form == null ? void 0 : form.touched[field == null ? void 0 : field.name];
  var error = form == null ? void 0 : form.errors[field == null ? void 0 : field.name];
  var fieldName = form != null && form.touched && field ? field.name : name;
  var value = field != null && field.value ? field.value : v;
  var onChange = field != null && field.onChange ? field.onChange : restProps.onChange;
  var deSelect = function deSelect(e) {
    if (!hasDeselect) return;
    if (field && field.onChange) {
      if (field && field.value === e.target.value) {
        field.onChange(e);
      }
    } else if (v === e.target.value && restProps.onChange) {
      restProps.onChange(e);
    }
  };
  return /*#__PURE__*/_jsxs(Box, _extends({}, restProps, {
    role: "radiogroup",
    children: [error && touch && /*#__PURE__*/_jsx(Alert, {
      icon: "error_alert",
      color: "error",
      children: error
    }), options.map(function (option, index) {
      return /*#__PURE__*/_jsxs(StyledLabel, {
        forwardedAs: "label",
        htmlFor: !!option.readOnly || readOnly ? '' : fieldName + option.value,
        checked: value === option.value,
        disabled: disabled || option.disabled,
        readOnly: !!option.readOnly || readOnly,
        style: toggleStyles,
        width: "100%",
        display: "flex",
        children: [/*#__PURE__*/_jsx(RadioInput, _extends({
          ref: index === 0 ? ref : null,
          type: "radio",
          name: fieldName,
          "aria-checked": value === option.value,
          onClick: !!option.readOnly || readOnly ? function () {} : deSelect,
          disabled: disabled || option.disabled,
          readOnly: !!option.readOnly || readOnly
        }, field, restProps, {
          checked: value === option.value,
          onChange: !!option.readOnly || readOnly ? function () {} : onChange,
          id: fieldName + option.value,
          value: option.value
        })), /*#__PURE__*/_jsx(StyledText, {
          size: "sm",
          ml: "8px",
          children: option.label
        })]
      }, option.label + "-id-" + option.value);
    })]
  }));
});
Radio.defaultProps = {
  disabled: false,
  readOnly: false,
  field: null,
  form: null,
  hasDeselect: false,
  required: true,
  toggleStyles: {}
};
export default Radio;