@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
141 lines (140 loc) • 6.36 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("motion/react");
var _react2 = _interopRequireWildcard(require("react"));
var _RadioButtonGroup = require("./radio-button-group/RadioButtonGroup");
var _RadioButton = require("./RadioButton.styles");
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 RadioButton = ({
children,
shouldShowRightElementOnlyOnChecked = false,
label,
id,
rightElement,
isDisabled = false
}) => {
const {
selectedRadioButtonId,
updateSelectedRadioButtonId,
radioButtonRightElements,
updateHasRightElement,
radioButtonsCanBeUnchecked
} = (0, _react2.useContext)(_RadioButtonGroup.RadioButtonGroupContext);
const [internalIsChecked, setInternalIsChecked] = (0, _react2.useState)(false);
const [isHovered, setIsHovered] = (0, _react2.useState)(false);
const isInGroup = typeof updateSelectedRadioButtonId === 'function';
const isMarked = isInGroup ? selectedRadioButtonId === id : internalIsChecked;
const uncheckable = radioButtonsCanBeUnchecked;
const handleClick = (0, _react2.useCallback)(() => {
if (isDisabled) {
return;
}
if (uncheckable) {
if (updateSelectedRadioButtonId) {
updateSelectedRadioButtonId(id === selectedRadioButtonId ? undefined : id);
}
setInternalIsChecked(prev => !prev);
return;
}
if (typeof updateSelectedRadioButtonId === 'function') {
updateSelectedRadioButtonId(id);
}
setInternalIsChecked(true);
}, [id, isDisabled, uncheckable, selectedRadioButtonId, updateSelectedRadioButtonId]);
const handleMouseEnter = (0, _react2.useCallback)(() => {
if (!isDisabled) {
setIsHovered(true);
}
}, [isDisabled]);
const handleMouseLeave = () => {
setIsHovered(false);
};
const radioButtonRightElementMargin = (0, _react2.useMemo)(() => {
if (!radioButtonRightElements) {
return 'NONE';
}
const index = radioButtonRightElements.findIndex(element => element.id === id);
if (index < 0) {
return 'NONE';
}
const prevButton = radioButtonRightElements[index - 1];
const currentButton = radioButtonRightElements[index];
const nextButton = radioButtonRightElements[index + 1];
if (!(currentButton !== null && currentButton !== void 0 && currentButton.hasRightElement)) {
return 'NONE';
}
switch (true) {
case (prevButton === null || prevButton === void 0 ? void 0 : prevButton.hasRightElement) && !(nextButton !== null && nextButton !== void 0 && nextButton.hasRightElement):
return 'TOP';
case !(prevButton !== null && prevButton !== void 0 && prevButton.hasRightElement) && (nextButton === null || nextButton === void 0 ? void 0 : nextButton.hasRightElement):
return 'BOTTOM';
case (currentButton === null || currentButton === void 0 ? void 0 : currentButton.hasRightElement) && !(nextButton !== null && nextButton !== void 0 && nextButton.hasRightElement) && !(prevButton !== null && prevButton !== void 0 && prevButton.hasRightElement):
return 'NONE';
default:
return 'BOTH';
}
}, [id, radioButtonRightElements]);
const shouldShowRightElement = (0, _react2.useMemo)(() => {
if (rightElement) {
if (shouldShowRightElementOnlyOnChecked) {
return isMarked;
}
return true;
}
return false;
}, [isMarked, rightElement, shouldShowRightElementOnlyOnChecked]);
(0, _react2.useEffect)(() => {
if (typeof updateHasRightElement === 'function') {
window.setTimeout(() => {
updateHasRightElement(id, shouldShowRightElement);
}, 10);
}
}, [id, shouldShowRightElement, updateHasRightElement]);
return (0, _react2.useMemo)(() => /*#__PURE__*/_react2.default.createElement(_RadioButton.StyledRadioButton, {
$isDisabled: isDisabled,
$radioButtonRightElementMargin: radioButtonRightElementMargin
}, /*#__PURE__*/_react2.default.createElement(_RadioButton.StyledRadioButtonWrapper, null, /*#__PURE__*/_react2.default.createElement(_RadioButton.StyledRadioButtonPseudoCheckBox, {
$isDisabled: isDisabled,
$isChecked: isMarked,
onClick: handleClick
}, /*#__PURE__*/_react2.default.createElement(_RadioButton.StyledRadioButtonCheckBoxMark, {
onMouseEnter: handleMouseEnter,
onMouseLeave: handleMouseLeave,
$isHovered: isHovered,
$isSelected: isMarked,
$isDisabled: isDisabled
})), /*#__PURE__*/_react2.default.createElement(_RadioButton.StyledRadioButtonCheckBox, {
onClick: handleClick,
onMouseEnter: handleMouseEnter,
onMouseLeave: handleMouseLeave,
disabled: isDisabled,
$isDisabled: isDisabled,
type: "radio",
checked: isMarked,
onChange: () => {}
}), /*#__PURE__*/_react2.default.createElement(_RadioButton.StyledLabelWrapper, null, label && /*#__PURE__*/_react2.default.createElement(_RadioButton.StyledRadioButtonLabel, {
$isDisabled: isDisabled,
onClick: handleClick,
onMouseEnter: handleMouseEnter,
onMouseLeave: handleMouseLeave
}, label), shouldShowRightElement && rightElement)), children && /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
initial: false
}, /*#__PURE__*/_react2.default.createElement(_RadioButton.StyledMotionRadioButtonChildren, {
animate: isMarked ? {
opacity: 1,
height: 'auto'
} : {
opacity: 0,
height: 0
},
transition: {
duration: 0.2
}
}, children))), [children, handleClick, handleMouseEnter, isDisabled, isHovered, isMarked, label, radioButtonRightElementMargin, rightElement, shouldShowRightElement]);
};
RadioButton.displayName = 'RadioButton';
var _default = exports.default = RadioButton;
//# sourceMappingURL=RadioButton.js.map