@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
47 lines (46 loc) • 1.8 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useSliderButtonThumbKeyboard = void 0;
var _react = require("react");
const useSliderButtonThumbKeyboard = ({
currentId,
currentIndex,
shownItemsCount,
items,
onSelectThumbItem
}) => {
const handleThumbKeyDown = (0, _react.useCallback)(event => {
var _items$currentIndex, _items$;
if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
var _items$nextIndex;
event.preventDefault();
const direction = event.key === 'ArrowRight' ? 1 : -1;
const maxVisibleIndex = Math.max(0, shownItemsCount - 1);
const nextIndex = Math.min(maxVisibleIndex, Math.max(0, currentIndex + direction));
if (nextIndex === currentIndex) {
return;
}
const hasMoreItems = items.length > shownItemsCount;
const nextId = hasMoreItems && nextIndex === shownItemsCount - 1 ? 'more' : (_items$nextIndex = items[nextIndex]) === null || _items$nextIndex === void 0 ? void 0 : _items$nextIndex.id;
if (nextId) {
onSelectThumbItem(nextId, nextIndex);
}
return;
}
if (event.key !== 'Enter' && event.key !== ' ') {
return;
}
event.preventDefault();
const fallbackId = currentId || ((_items$currentIndex = items[currentIndex]) === null || _items$currentIndex === void 0 ? void 0 : _items$currentIndex.id) || ((_items$ = items[0]) === null || _items$ === void 0 ? void 0 : _items$.id);
if (fallbackId) {
onSelectThumbItem(fallbackId, currentIndex);
}
}, [currentId, currentIndex, items, onSelectThumbItem, shownItemsCount]);
return {
handleThumbKeyDown
};
};
exports.useSliderButtonThumbKeyboard = useSliderButtonThumbKeyboard;
//# sourceMappingURL=useSliderButtonThumbKeyboard.js.map