@braineet/ui
Version:
Braineet design system
90 lines (89 loc) • 3.9 kB
JavaScript
;
exports.__esModule = true;
exports.default = exports.Radio = void 0;
var _react = _interopRequireDefault(require("react"));
var _alert = _interopRequireDefault(require("../alert"));
var _box = _interopRequireDefault(require("../box"));
var _styles = require("./styles");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["field", "form", "value", "disabled", "readOnly", "name", "options", "toggleStyles", "hasDeselect"];
/**
* The `RadioBtn` component.
*/
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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; }
var Radio = exports.Radio = /*#__PURE__*/_react.default.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__*/(0, _jsxRuntime.jsxs)(_box.default, _extends({}, restProps, {
role: "radiogroup",
children: [error && touch && /*#__PURE__*/(0, _jsxRuntime.jsx)(_alert.default, {
icon: "error_alert",
color: "error",
children: error
}), options.map(function (option, index) {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.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__*/(0, _jsxRuntime.jsx)(_styles.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__*/(0, _jsxRuntime.jsx)(_styles.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: {}
};
var _default = exports.default = Radio;