@braineet/ui
Version:
Braineet design system
92 lines (91 loc) • 4.1 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"];
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
/**
* The `RadioBtn` component.
*/
var 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);
})]
}));
});
exports.Radio = Radio;
Radio.defaultProps = {
disabled: false,
readOnly: false,
field: null,
form: null,
hasDeselect: false,
required: true,
toggleStyles: {}
};
var _default = Radio;
exports.default = _default;