@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
71 lines (70 loc) • 3.33 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.RadioButtonGroupContext = void 0;
var _react = _interopRequireWildcard(require("react"));
var _radioButton = require("../../../utils/radioButton");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const RadioButtonGroupContext = exports.RadioButtonGroupContext = /*#__PURE__*/_react.default.createContext({
selectedRadioButtonId: undefined,
updateSelectedRadioButtonId: undefined,
radioButtonsCanBeUnchecked: false,
radioButtonRightElements: [],
updateHasRightElement: undefined,
shouldEnableKeyboardHighlighting: undefined
});
RadioButtonGroupContext.displayName = 'RadioButtonGroupContext';
const RadioButtonGroup = /*#__PURE__*/(0, _react.forwardRef)(({
children,
canUncheckRadioButtons,
selectedId,
onSelect,
shouldEnableKeyboardHighlighting
}, ref) => {
const [selectedRadioButtonId, setSelectedRadioButtonId] = (0, _react.useState)(undefined);
const [radioButtonRightElements, setRadioButtonRightElements] = (0, _react.useState)([]);
const isControlled = typeof selectedId === 'string';
(0, _react.useEffect)(() => {
setSelectedRadioButtonId(selectedId);
}, [selectedId]);
const updateSelectedRadioButtonId = (0, _react.useCallback)(id => {
if (typeof onSelect === 'function') {
onSelect(id);
}
if (!isControlled) {
setSelectedRadioButtonId(id);
}
}, [isControlled, onSelect]);
const updateHasRightElement = (0, _react.useCallback)((id, hasRightElement) => {
setRadioButtonRightElements(prevState => prevState.map(prev => id === prev.id ? {
id,
hasRightElement
} : prev));
}, []);
(0, _react.useEffect)(() => {
const ids = (0, _radioButton.getRadioButtonOrder)(children);
const rightElements = ids.map(id => ({
id,
hasRightElement: false
}));
setRadioButtonRightElements(rightElements);
}, [children]);
(0, _react.useImperativeHandle)(ref, () => ({
updateSelectedRadioButtonId
}), [updateSelectedRadioButtonId]);
const providerValue = (0, _react.useMemo)(() => ({
selectedRadioButtonId,
updateSelectedRadioButtonId,
radioButtonsCanBeUnchecked: canUncheckRadioButtons,
updateHasRightElement,
radioButtonRightElements,
shouldEnableKeyboardHighlighting
}), [canUncheckRadioButtons, radioButtonRightElements, selectedRadioButtonId, shouldEnableKeyboardHighlighting, updateHasRightElement, updateSelectedRadioButtonId]);
return /*#__PURE__*/_react.default.createElement(RadioButtonGroupContext.Provider, {
value: providerValue
}, children);
});
RadioButtonGroup.displayName = 'RadioButtonGroup';
var _default = exports.default = RadioButtonGroup;
//# sourceMappingURL=RadioButtonGroup.js.map