@atlaskit/avatar-group
Version:
An avatar group displays a number of avatars grouped together in a stack or grid.
80 lines (78 loc) • 3 kB
JavaScript
import { KEY_DOWN, KEY_END, KEY_HOME, KEY_UP } from '@atlaskit/ds-lib/keycodes';
const actionMap = {
[KEY_DOWN]: 'next',
[KEY_UP]: 'prev',
[KEY_HOME]: 'first',
[KEY_END]: 'last'
};
/**
* currentFocusedIdx + 1 will not work if the next focusable element
* is disabled. So, we need to iterate through the following menu items
* to find one that isn't disabled. If all following elements are disabled,
* return undefined.
*/
const getNextFocusableElement = (refs, currentFocusedIdx) => {
while (currentFocusedIdx + 1 < refs.length) {
const isDisabled = refs[currentFocusedIdx + 1].getAttribute('disabled') !== null;
if (!isDisabled) {
return refs[currentFocusedIdx + 1];
}
currentFocusedIdx++;
}
return;
};
/**
* currentFocusedIdx - 1 will not work if the prev focusable element
* is disabled. So, we need to iterate through the previous menu items
* to find one that isn't disabled. If all previous elements are disabled,
* return undefined.
*/
const getPrevFocusableElement = (refs, currentFocusedIdx) => {
while (currentFocusedIdx > 0) {
const isDisabled = refs[currentFocusedIdx - 1].getAttribute('disabled') !== null;
if (!isDisabled) {
return refs[currentFocusedIdx - 1];
}
currentFocusedIdx--;
}
return;
};
export default function handleFocus(refs) {
return e => {
const currentFocusedIdx = refs.findIndex(el => {
var _document$activeEleme;
return (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.isSameNode(el);
});
const action = actionMap[e.key];
switch (action) {
case 'next':
if (currentFocusedIdx < refs.length - 1) {
e.preventDefault();
const nextFocusableElement = getNextFocusableElement(refs, currentFocusedIdx);
nextFocusableElement === null || nextFocusableElement === void 0 ? void 0 : nextFocusableElement.focus();
}
break;
case 'prev':
if (currentFocusedIdx > 0) {
e.preventDefault();
const prevFocusableElement = getPrevFocusableElement(refs, currentFocusedIdx);
prevFocusableElement === null || prevFocusableElement === void 0 ? void 0 : prevFocusableElement.focus();
}
break;
case 'first':
e.preventDefault();
// Search for first non-disabled element if first element is disabled
const nextFocusableElement = getNextFocusableElement(refs, -1);
nextFocusableElement === null || nextFocusableElement === void 0 ? void 0 : nextFocusableElement.focus();
break;
case 'last':
e.preventDefault();
// Search for last non-disabled element if last element is disabled
const prevFocusableElement = getPrevFocusableElement(refs, refs.length);
prevFocusableElement === null || prevFocusableElement === void 0 ? void 0 : prevFocusableElement.focus();
break;
default:
return;
}
};
}