@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
177 lines (176 loc) • 8.32 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");
var _calculate = require("../../utils/calculate");
var _useKeyboardFocusHighlighting = require("../../hooks/useKeyboardFocusHighlighting");
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,
shouldShowCentered = true,
isDisabled = false,
shouldEnableKeyboardHighlighting
}) => {
const {
selectedRadioButtonId,
updateSelectedRadioButtonId,
radioButtonRightElements,
updateHasRightElement,
radioButtonsCanBeUnchecked,
shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingFromGroup
} = (0, _react2.useContext)(_RadioButtonGroup.RadioButtonGroupContext);
const [internalIsChecked, setInternalIsChecked] = (0, _react2.useState)(false);
const [isHovered, setIsHovered] = (0, _react2.useState)(false);
const [radioButtonTop, setRadioButtonTop] = (0, _react2.useState)(undefined);
const radioButtonBoxRef = (0, _react2.useRef)(null);
const radioButtonRootRef = (0, _react2.useRef)(null);
const isInGroup = typeof updateSelectedRadioButtonId === 'function';
const isMarked = isInGroup ? selectedRadioButtonId === id : internalIsChecked;
const uncheckable = radioButtonsCanBeUnchecked;
const effectiveShouldEnableKeyboardHighlighting = shouldEnableKeyboardHighlightingFromGroup ?? shouldEnableKeyboardHighlighting;
const shouldShowKeyboardHighlighting = (0, _useKeyboardFocusHighlighting.useKeyboardFocusHighlighting)(effectiveShouldEnableKeyboardHighlighting && !isDisabled);
(0, _react2.useEffect)(() => {
if (radioButtonRootRef.current && !shouldShowCentered) {
var _radioButtonBoxRef$cu;
const singleLineHeight = (0, _calculate.getHeightOfSingleTextLine)({
container: radioButtonRootRef.current
});
const boxHeight = ((_radioButtonBoxRef$cu = radioButtonBoxRef.current) === null || _radioButtonBoxRef$cu === void 0 ? void 0 : _radioButtonBoxRef$cu.getBoundingClientRect().height) ?? 0;
setRadioButtonTop((singleLineHeight - boxHeight) / 2);
}
}, [shouldShowCentered]);
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 handleKeyDown = (0, _react2.useCallback)(event => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
handleClick();
}
}, [handleClick]);
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, {
ref: radioButtonRootRef,
$shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
}, /*#__PURE__*/_react2.default.createElement(_RadioButton.StyledRadioButtonCheckBox, {
onClick: handleClick,
onMouseEnter: handleMouseEnter,
onMouseLeave: handleMouseLeave,
onKeyDown: handleKeyDown,
disabled: isDisabled,
$isDisabled: isDisabled,
$shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
type: "radio",
checked: isMarked,
onChange: () => {}
}), /*#__PURE__*/_react2.default.createElement(_RadioButton.StyledRadioButtonPseudoCheckBox, {
$isDisabled: isDisabled,
$isChecked: isMarked,
ref: radioButtonBoxRef,
onClick: handleClick,
style: {
top: shouldShowCentered ? '50%' : radioButtonTop,
transform: shouldShowCentered ? 'translateY(-50%)' : undefined
}
}, /*#__PURE__*/_react2.default.createElement(_RadioButton.StyledRadioButtonCheckBoxMark, {
onMouseEnter: handleMouseEnter,
onMouseLeave: handleMouseLeave,
$isHovered: isHovered,
$isSelected: isMarked,
$isDisabled: isDisabled
})), /*#__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, handleKeyDown, handleMouseEnter, isDisabled, isHovered, isMarked, label, radioButtonRightElementMargin, radioButtonTop, rightElement, shouldShowCentered, shouldShowKeyboardHighlighting, shouldShowRightElement]);
};
RadioButton.displayName = 'RadioButton';
var _default = exports.default = RadioButton;
//# sourceMappingURL=RadioButton.js.map