@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
56 lines • 1.88 kB
JavaScript
import { useCallback, useEffect, useState } from 'react';
export const useSliderButtonPopupKeyboard = ({
isPopupOpen,
popupItems,
currentPopupId,
shownItemsCount,
popupItemRefs,
popupRef,
focusThumb,
onSelectPopupItem
}) => {
const [focusedPopupIndex, setFocusedPopupIndex] = useState(0);
useEffect(() => {
if (!isPopupOpen) {
return;
}
const selectedIndex = popupItems.findIndex(({
id
}) => id === currentPopupId);
const initialIndex = selectedIndex >= 0 ? selectedIndex : 0;
setFocusedPopupIndex(initialIndex);
window.requestAnimationFrame(() => {
popupItemRefs.current[initialIndex]?.focus();
});
}, [currentPopupId, isPopupOpen, popupItems, popupItemRefs]);
const handlePopupKeyDown = useCallback(event => {
if (!isPopupOpen || popupItems.length === 0) {
return;
}
if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
event.preventDefault();
const direction = event.key === 'ArrowDown' ? 1 : -1;
const nextIndex = (focusedPopupIndex + direction + popupItems.length) % popupItems.length;
setFocusedPopupIndex(nextIndex);
popupItemRefs.current[nextIndex]?.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') {
event.preventDefault();
popupRef.current?.hide();
focusThumb();
}
}, [focusThumb, focusedPopupIndex, isPopupOpen, onSelectPopupItem, popupItemRefs, popupItems, popupRef, shownItemsCount]);
return {
handlePopupKeyDown
};
};
//# sourceMappingURL=useSliderButtonPopupKeyboard.js.map