@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
154 lines (153 loc) • 5.63 kB
JavaScript
import { ref } from "vue";
import { ARROW_KEYS, EMOJIS_PER_ROW } from "../emoji_picker_constants.js";
function useKeyboardNavigation() {
const emojiRefs = ref([]);
const emojiFilteredRefs = ref([]);
const isFiltering = ref(false);
const hoverFirstEmoji = ref(true);
function _handleArrowLeft(indexTab, indexEmoji) {
if (!focusEmoji(indexTab, indexEmoji - 1)) {
if (emojiRefs.value[indexTab - 1]) {
focusEmoji(indexTab - 1, emojiRefs.value[indexTab - 1].length - 1);
} else {
focusEmoji(emojiRefs.value.length - 1, emojiRefs.value[emojiRefs.value.length - 1].length - 1);
}
}
}
function _handleArrowRight(indexTab, indexEmoji) {
if (!focusEmoji(indexTab, indexEmoji + 1)) {
if (!focusEmoji(indexTab + 1, 0)) {
focusEmoji(0, 0);
}
}
}
function _handleArrowLeftFiltered(indexTab, indexEmoji) {
if (!focusEmoji(0, indexEmoji - 1)) {
focusEmoji(0, emojiFilteredRefs.value.length - 1);
}
}
function _handleArrowRightFiltered(indexTab, indexEmoji) {
if (!focusEmoji(0, indexEmoji + 1)) {
focusEmoji(0, 0);
}
}
function _handleHorizontalNavigation(direction, indexTab, indexEmoji) {
if (isFiltering.value) {
if (direction === "left") {
_handleArrowLeftFiltered(indexTab, indexEmoji);
} else if (direction === "right") {
_handleArrowRightFiltered(indexTab, indexEmoji);
}
} else {
if (direction === "left") {
_handleArrowLeft(indexTab, indexEmoji);
} else if (direction === "right") {
_handleArrowRight(indexTab, indexEmoji);
}
}
}
function focusEmoji(indexTab, indexEmoji) {
var _a, _b, _c;
const emojiRef = isFiltering.value ? (_a = emojiFilteredRefs.value) == null ? void 0 : _a[indexEmoji] : (_c = (_b = emojiRefs.value) == null ? void 0 : _b[indexTab]) == null ? void 0 : _c[indexEmoji];
if (emojiRef) {
emojiRef.focus();
return true;
}
return false;
}
function setEmojiRef(el, indexTab, indexEmoji) {
if (!emojiRefs.value[indexTab]) {
emojiRefs.value[indexTab] = [];
}
emojiRefs.value[indexTab][indexEmoji] = el;
}
function setFilteredRef(el, index) {
emojiFilteredRefs.value[index] = el;
}
function handleArrowNavigationFiltered(key, indexEmoji) {
var _a;
hoverFirstEmoji.value = false;
if (key === ARROW_KEYS.ARROW_UP) {
const position = indexEmoji % EMOJIS_PER_ROW;
if (!focusEmoji(0, indexEmoji - EMOJIS_PER_ROW)) {
const lastEmojiPosition = emojiFilteredRefs.value.length - emojiFilteredRefs.value.length % EMOJIS_PER_ROW + position;
focusEmoji(0, lastEmojiPosition);
if (!focusEmoji(0, lastEmojiPosition)) {
focusEmoji(0, emojiFilteredRefs.value.length - 1);
}
}
}
if (key === ARROW_KEYS.ARROW_DOWN) {
if (!focusEmoji(0, indexEmoji + EMOJIS_PER_ROW)) {
const position = indexEmoji % EMOJIS_PER_ROW;
if ((_a = emojiFilteredRefs.value) == null ? void 0 : _a[indexEmoji + (EMOJIS_PER_ROW - position)]) {
focusEmoji(0, emojiFilteredRefs.value.length - 1);
} else {
focusEmoji(0, position);
}
}
}
if (key === ARROW_KEYS.ARROW_LEFT) {
_handleHorizontalNavigation("left", 0, indexEmoji);
}
if (key === ARROW_KEYS.ARROW_RIGHT) {
_handleHorizontalNavigation("right", 0, indexEmoji);
}
}
function handleArrowNavigation(key, indexTab, indexEmoji) {
var _a, _b;
if (key === "ArrowUp") {
const position = indexEmoji % EMOJIS_PER_ROW;
if (indexTab === 0) {
const numberOfMissingEmojis = EMOJIS_PER_ROW - emojiRefs.value[emojiRefs.value.length - 1].length % EMOJIS_PER_ROW;
const emojiToJump = emojiRefs.value[emojiRefs.value.length - 1].length + numberOfMissingEmojis - (EMOJIS_PER_ROW - position);
if (!focusEmoji(emojiRefs.value.length - 1, emojiToJump)) {
focusEmoji(emojiRefs.value.length - 1, emojiRefs.value[emojiRefs.value.length - 1].length - 1);
}
return;
}
if (!focusEmoji(indexTab, indexEmoji - EMOJIS_PER_ROW)) {
const previousTab = indexTab - 1 < 0 ? 0 : indexTab - 1;
const emojisInPreviousTab = emojiRefs.value[previousTab].length;
const lastEmojiPosition = emojisInPreviousTab - emojisInPreviousTab % EMOJIS_PER_ROW + position;
if (!focusEmoji(previousTab, lastEmojiPosition)) {
focusEmoji(indexTab - 1, emojiRefs.value[indexTab - 1].length - 1);
}
}
}
if (key === "ArrowDown") {
if (!focusEmoji(indexTab, indexEmoji + EMOJIS_PER_ROW)) {
const position = indexEmoji % EMOJIS_PER_ROW;
if ((_b = (_a = emojiRefs.value) == null ? void 0 : _a[indexTab]) == null ? void 0 : _b[indexEmoji + (EMOJIS_PER_ROW - position)]) {
focusEmoji(indexTab, emojiRefs.value[indexTab].length - 1);
} else {
if (!focusEmoji(indexTab + 1, position)) {
if (!focusEmoji(0, position)) {
focusEmoji(0, emojiRefs.value[0].length - 1);
}
}
}
}
}
if (key === "ArrowLeft") {
_handleHorizontalNavigation("left", indexTab, indexEmoji);
}
if (key === "ArrowRight") {
_handleHorizontalNavigation("right", indexTab, indexEmoji);
}
}
return {
emojiFilteredRefs,
isFiltering,
hoverFirstEmoji,
setEmojiRef,
setFilteredRef,
focusEmoji,
handleArrowNavigationFiltered,
handleArrowNavigation
};
}
export {
useKeyboardNavigation
};
//# sourceMappingURL=useKeyboardNavigation.js.map