@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
54 lines (53 loc) • 3.33 kB
JavaScript
import * as React from 'react';
import { useDispatch } from 'react-redux';
import join from '../../../../components/utils/join';
import { useGlobalEvent } from '../../../../components/utils/useGlobalEvent';
import { AdaptableIconComponent } from '../../AdaptableIconComponent';
export const Navigation = (props) => {
const dispatch = useDispatch();
const handleKeyPress = React.useCallback((event) => {
if ((event.ctrlKey || event.metaKey) &&
(event.code === 'ArrowUp' || event.code === 'ArrowDown')) {
const isKeyUp = event.code === 'ArrowUp';
const currentIndex = props.menuItems.findIndex((item) => item !== '-' && (item.category === props.activeItem || item.label === props.activeItem));
let nextMenuItem = null;
if (isKeyUp) {
let candidate = props.menuItems[currentIndex - 1] !== '-'
? props.menuItems[currentIndex - 1]
: props.menuItems[currentIndex - 2];
nextMenuItem = candidate ? candidate : props.menuItems[props.menuItems.length - 1];
}
else {
let candidate = props.menuItems[currentIndex + 1] !== '-'
? props.menuItems[currentIndex + 1]
: props.menuItems[currentIndex + 2];
nextMenuItem = candidate ? candidate : props.menuItems[0];
}
if (nextMenuItem && nextMenuItem !== '-') {
dispatch(nextMenuItem.reduxAction);
}
}
}, [props.activeItem, props.menuItems]);
useGlobalEvent('keydown', handleKeyPress);
return (React.createElement("nav", { className: "ab-Adaptable-Popup__Navigation" },
React.createElement("ul", { className: "ab-Adaptable-Popup__Navigation__List" }, props.menuItems.map((menuItem, index) => {
const baseClassName = 'ab-Adaptable-Popup__Navigation__List__Item';
if (menuItem === '-') {
return React.createElement("li", { key: `separator-${index}`, className: `${baseClassName}__Separator` });
}
const isActive = props.activeItem === menuItem.category || menuItem.label === props.activeItem;
const className = join(baseClassName, isActive && `${baseClassName}--active`);
let customIcon = props.customSettingsPanels?.find?.((customSettingPanel) => customSettingPanel.name === menuItem.label)?.icon ?? null;
const dataName = menuItem.category === 'CustomSettingsPanel'
? `CSP-${menuItem.label}`
: menuItem.category ?? menuItem.label;
return (React.createElement("li", { className: className, key: menuItem.label },
React.createElement("button", { type: "button", className: `${baseClassName}__Button`, onClick: () => {
dispatch(menuItem.reduxAction);
}, "data-name": dataName },
props.api.optionsApi.getSettingsPanelOptions().showModuleIcons &&
menuItem.icon && (React.createElement(AdaptableIconComponent, { icon: menuItem.icon, iconClassName: `${baseClassName}__Icon` })),
customIcon && React.createElement(AdaptableIconComponent, { icon: customIcon }),
menuItem.label)));
}))));
};