Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
getListItemIndex(
evt: React.FocusEvent | React.KeyboardEvent | React.MouseEvent
) {
let eventTarget = evt.target as HTMLElement | null;
let index = -1;
// Find the first ancestor that is a list item or the list.
while (
eventTarget &&
!eventTarget.classList.contains(
MDCListFoundation.cssClasses.LIST_ITEM_CLASS
) &&
!eventTarget.classList.contains(MDCListFoundation.cssClasses.ROOT)
) {
eventTarget = eventTarget.parentElement as HTMLLIElement;
}
// Get the index of the element if it is a list item.
if (
eventTarget &&
eventTarget.classList.contains(
MDCListFoundation.cssClasses.LIST_ITEM_CLASS
)
) {
index = this.listElements.indexOf(eventTarget as HTMLLIElement);
}
// Find the first ancestor that is a list item or the list.
while (
eventTarget &&
!eventTarget.classList.contains(
MDCListFoundation.cssClasses.LIST_ITEM_CLASS
) &&
!eventTarget.classList.contains(MDCListFoundation.cssClasses.ROOT)
) {
eventTarget = eventTarget.parentElement as HTMLLIElement;
}
// Get the index of the element if it is a list item.
if (
eventTarget &&
eventTarget.classList.contains(
MDCListFoundation.cssClasses.LIST_ITEM_CLASS
)
) {
index = this.listElements.indexOf(eventTarget as HTMLLIElement);
}
return index;
}
const listElements = useCallback((el: Element | null): HTMLLIElement[] => {
if (el) {
return [].slice.call(
el.querySelectorAll(`.${MDCListFoundation.cssClasses.LIST_ITEM_CLASS}`)
);
}
return [];
}, []);
(evt: React.KeyboardEvent & KeyboardEvent) => {
props.onKeyDown?.(evt);
const index = getListItemIndex(evt);
if (index >= 0) {
foundation.handleKeydown(
evt,
evt.target instanceof Element &&
evt.target.classList.contains(
MDCListFoundation.cssClasses.LIST_ITEM_CLASS
),
index
);
}
},
[getListItemIndex, foundation, props.onKeyDown]