@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
154 lines (153 loc) • 6.19 kB
JavaScript
;
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const vue = require("vue");
const emoji_picker_constants = require("../emoji_picker_constants.cjs");
function useKeyboardNavigation() {
const emojiRefs = vue.ref([]);
const emojiFilteredRefs = vue.ref([]);
const isFiltering = vue.ref(false);
const hoverFirstEmoji = vue.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 === emoji_picker_constants.ARROW_KEYS.ARROW_UP) {
const position = indexEmoji % emoji_picker_constants.EMOJIS_PER_ROW;
if (!focusEmoji(0, indexEmoji - emoji_picker_constants.EMOJIS_PER_ROW)) {
const lastEmojiPosition = emojiFilteredRefs.value.length - emojiFilteredRefs.value.length % emoji_picker_constants.EMOJIS_PER_ROW + position;
focusEmoji(0, lastEmojiPosition);
if (!focusEmoji(0, lastEmojiPosition)) {
focusEmoji(0, emojiFilteredRefs.value.length - 1);
}
}
}
if (key === emoji_picker_constants.ARROW_KEYS.ARROW_DOWN) {
if (!focusEmoji(0, indexEmoji + emoji_picker_constants.EMOJIS_PER_ROW)) {
const position = indexEmoji % emoji_picker_constants.EMOJIS_PER_ROW;
if ((_a = emojiFilteredRefs.value) == null ? void 0 : _a[indexEmoji + (emoji_picker_constants.EMOJIS_PER_ROW - position)]) {
focusEmoji(0, emojiFilteredRefs.value.length - 1);
} else {
focusEmoji(0, position);
}
}
}
if (key === emoji_picker_constants.ARROW_KEYS.ARROW_LEFT) {
_handleHorizontalNavigation("left", 0, indexEmoji);
}
if (key === emoji_picker_constants.ARROW_KEYS.ARROW_RIGHT) {
_handleHorizontalNavigation("right", 0, indexEmoji);
}
}
function handleArrowNavigation(key, indexTab, indexEmoji) {
var _a, _b;
if (key === "ArrowUp") {
const position = indexEmoji % emoji_picker_constants.EMOJIS_PER_ROW;
if (indexTab === 0) {
const numberOfMissingEmojis = emoji_picker_constants.EMOJIS_PER_ROW - emojiRefs.value[emojiRefs.value.length - 1].length % emoji_picker_constants.EMOJIS_PER_ROW;
const emojiToJump = emojiRefs.value[emojiRefs.value.length - 1].length + numberOfMissingEmojis - (emoji_picker_constants.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 - emoji_picker_constants.EMOJIS_PER_ROW)) {
const previousTab = indexTab - 1 < 0 ? 0 : indexTab - 1;
const emojisInPreviousTab = emojiRefs.value[previousTab].length;
const lastEmojiPosition = emojisInPreviousTab - emojisInPreviousTab % emoji_picker_constants.EMOJIS_PER_ROW + position;
if (!focusEmoji(previousTab, lastEmojiPosition)) {
focusEmoji(indexTab - 1, emojiRefs.value[indexTab - 1].length - 1);
}
}
}
if (key === "ArrowDown") {
if (!focusEmoji(indexTab, indexEmoji + emoji_picker_constants.EMOJIS_PER_ROW)) {
const position = indexEmoji % emoji_picker_constants.EMOJIS_PER_ROW;
if ((_b = (_a = emojiRefs.value) == null ? void 0 : _a[indexTab]) == null ? void 0 : _b[indexEmoji + (emoji_picker_constants.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
};
}
exports.useKeyboardNavigation = useKeyboardNavigation;
//# sourceMappingURL=useKeyboardNavigation.cjs.map