@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
66 lines (65 loc) • 2.44 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useSliderButtonPopupKeyboard = void 0;
var _react = require("react");
const useSliderButtonPopupKeyboard = ({
isPopupOpen,
popupItems,
currentPopupId,
shownItemsCount,
popupItemRefs,
popupRef,
focusThumb,
onSelectPopupItem
}) => {
const [focusedPopupIndex, setFocusedPopupIndex] = (0, _react.useState)(0);
(0, _react.useEffect)(() => {
if (!isPopupOpen) {
return;
}
const selectedIndex = popupItems.findIndex(({
id
}) => id === currentPopupId);
const initialIndex = selectedIndex >= 0 ? selectedIndex : 0;
setFocusedPopupIndex(initialIndex);
window.requestAnimationFrame(() => {
var _popupItemRefs$curren;
(_popupItemRefs$curren = popupItemRefs.current[initialIndex]) === null || _popupItemRefs$curren === void 0 || _popupItemRefs$curren.focus();
});
}, [currentPopupId, isPopupOpen, popupItems, popupItemRefs]);
const handlePopupKeyDown = (0, _react.useCallback)(event => {
if (!isPopupOpen || popupItems.length === 0) {
return;
}
if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
var _popupItemRefs$curren2;
event.preventDefault();
const direction = event.key === 'ArrowDown' ? 1 : -1;
const nextIndex = (focusedPopupIndex + direction + popupItems.length) % popupItems.length;
setFocusedPopupIndex(nextIndex);
(_popupItemRefs$curren2 = popupItemRefs.current[nextIndex]) === null || _popupItemRefs$curren2 === void 0 || _popupItemRefs$curren2.focus();
return;
}
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
const nextItem = popupItems[focusedPopupIndex];
if (nextItem) {
onSelectPopupItem(nextItem.id, Math.max(0, shownItemsCount - 1));
}
return;
}
if (event.key === 'Escape' || event.key === 'ArrowLeft' || event.key === 'Tab') {
var _popupRef$current;
event.preventDefault();
(_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 || _popupRef$current.hide();
focusThumb();
}
}, [focusThumb, focusedPopupIndex, isPopupOpen, onSelectPopupItem, popupItemRefs, popupItems, popupRef, shownItemsCount]);
return {
handlePopupKeyDown
};
};
exports.useSliderButtonPopupKeyboard = useSliderButtonPopupKeyboard;
//# sourceMappingURL=useSliderButtonPopupKeyboard.js.map