@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
92 lines (91 loc) • 5.71 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { useEffect, useRef } from 'react';
import { useDispatch } from 'react-redux';
import { AdaptableIconComponent } from '../../AdaptableIconComponent';
import { cn } from '../../../../lib/utils';
import { targetOwn } from '../../../../components/twUtils';
import { useAdaptable } from '../../../AdaptableContext';
import { getSettingsPanelNavigationItems } from './useMenuItems';
import { isSettingsPanelNavigationItem, } from './settingsPanelNavigationTypes';
const navigationItemClassName = 'ab-Adaptable-Popup__Navigation__List__Item';
const NavigationItem = ({ menuItem, isActive, dataName, customIcon, onAction, showModuleIcons, }) => {
const ref = useRef(null);
useEffect(() => {
if (isActive) {
ref.current?.focus();
}
}, [isActive]);
return (_jsx("li", { className: cn(navigationItemClassName, {
[`${navigationItemClassName}--active`]: isActive,
}), children: _jsxs("button", { ref: ref, type: "button", className: cn(`${navigationItemClassName}__Button ${targetOwn.focusOutline}`, {
'twa:flex twa:flex-row twa:items-center twa:gap-2': 'layout flex',
[`twa:bg-transparent`]: !isActive,
'twa:bg-accent twa:text-accentlight': isActive,
'twa:px-2 twa:py-1.5': true,
'twa:rounded-standard': true,
}), onMouseDown: () => onAction(), "data-name": dataName, tabIndex: isActive ? 0 : -1, children: [showModuleIcons && menuItem.icon && (_jsx(AdaptableIconComponent, { icon: menuItem.icon, iconClassName: `${navigationItemClassName}__Icon` })), customIcon ? _jsx(AdaptableIconComponent, { icon: customIcon }) : null, menuItem.label] }) }));
};
const NavigationHeader = ({ label, showDividerAbove }) => (_jsxs("li", { className: cn(navigationItemClassName, `${navigationItemClassName}--header`, 'twa:list-none'), "aria-hidden": "true", children: [showDividerAbove ? (_jsx("span", { className: `${navigationItemClassName}__HeaderDivider`, role: "separator", "aria-hidden": "true" })) : null, _jsx("span", { className: `${navigationItemClassName}__Header`, children: label })] }));
const findNavigationItemIndex = (entries, activeItem) => entries.findIndex((entry) => isSettingsPanelNavigationItem(entry) &&
(entry.menuItem.category === activeItem || entry.menuItem.label === activeItem));
const getAdjacentNavigationItem = (entries, currentIndex, direction) => {
let index = currentIndex + direction;
while (index >= 0 && index < entries.length) {
const entry = entries[index];
if (isSettingsPanelNavigationItem(entry)) {
return entry.menuItem;
}
index += direction;
}
const navigationItems = getSettingsPanelNavigationItems(entries);
if (!navigationItems.length) {
return null;
}
return direction === -1 ? navigationItems[navigationItems.length - 1] : navigationItems[0];
};
export const Navigation = (props) => {
const { api } = useAdaptable();
const dispatch = useDispatch();
const makeActive = (menuItem) => {
dispatch(menuItem.reduxAction);
};
const handleKeyPress = React.useCallback((event) => {
const { code } = event;
if (code === 'ArrowUp' || code === 'ArrowDown' || code === 'Home' || code === 'End') {
event.preventDefault();
event.stopPropagation();
const navigationItems = getSettingsPanelNavigationItems(props.menuItems);
if (!navigationItems.length) {
return;
}
let nextMenuItem = null;
if (code === 'Home') {
nextMenuItem = navigationItems[0];
}
else if (code === 'End') {
nextMenuItem = navigationItems[navigationItems.length - 1];
}
else {
const currentIndex = findNavigationItemIndex(props.menuItems, props.activeItem);
nextMenuItem = getAdjacentNavigationItem(props.menuItems, currentIndex, code === 'ArrowUp' ? -1 : 1);
}
if (nextMenuItem) {
makeActive(nextMenuItem);
}
}
}, [props.activeItem, props.menuItems]);
const firstHeaderIndex = props.menuItems.findIndex((entry) => entry.type === 'header');
return (_jsx("nav", { className: "ab-Adaptable-Popup__Navigation twa:overflow-auto", tabIndex: -1, children: _jsx("ul", { className: "ab-Adaptable-Popup__Navigation__List twa:m-0 twa:list-none twa:py-3 twa:gap-1 twa:flex twa:flex-col", onKeyDown: handleKeyPress, children: props.menuItems.map((entry, index) => {
if (entry.type === 'header') {
return (_jsx(NavigationHeader, { label: entry.label, showDividerAbove: index !== firstHeaderIndex }, `header-${entry.label}-${index}`));
}
const menuItem = entry.menuItem;
const isActive = props.activeItem === menuItem.category || menuItem.label === props.activeItem;
const customIcon = props.customSettingsPanels?.find?.((customSettingPanel) => customSettingPanel.name === menuItem.label)?.icon ?? null;
const dataName = menuItem.category === 'CustomSettingsPanel'
? `CSP-${menuItem.label}`
: menuItem.category ?? menuItem.label;
return (_jsx(NavigationItem, { menuItem: menuItem, isActive: isActive, dataName: dataName, customIcon: customIcon, showModuleIcons: api.optionsApi.getSettingsPanelOptions().showModuleIcons, onAction: () => makeActive(menuItem) }, menuItem.label));
}) }) }));
};