@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
91 lines (90 loc) • 5.17 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Navigation = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_1 = require("react");
const react_redux_1 = require("react-redux");
const clsx_1 = tslib_1.__importDefault(require("clsx"));
const AdaptableIconComponent_1 = require("../../AdaptableIconComponent");
const twUtils_1 = require("../../../../components/twUtils");
const AdaptableContext_1 = require("../../../AdaptableContext");
const navigationItemClassName = 'ab-Adaptable-Popup__Navigation__List__Item';
const NavigationItem = ({ menuItem, isActive, dataName, customIcon, onAction, showModuleIcons, }) => {
const ref = (0, react_1.useRef)(null);
(0, react_1.useEffect)(() => {
if (isActive) {
ref.current?.focus();
}
}, [isActive]);
return (React.createElement("li", { className: (0, clsx_1.default)(navigationItemClassName, {
[`${navigationItemClassName}--active`]: isActive,
}) },
React.createElement("button", { ref: ref, type: "button", className: (0, clsx_1.default)(`${navigationItemClassName}__Button ${twUtils_1.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 },
showModuleIcons && menuItem.icon && (React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: menuItem.icon, iconClassName: `${navigationItemClassName}__Icon` })),
customIcon ? React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: customIcon }) : null,
menuItem.label)));
};
const Navigation = (props) => {
const { api } = (0, AdaptableContext_1.useAdaptable)();
const makeActive = (menuItem) => {
dispatch(menuItem.reduxAction);
};
const getMenuItemForDirection = (direction) => {
const currentIndex = props.menuItems.findIndex((item) => item !== '-' && (item.category === props.activeItem || item.label === props.activeItem));
let foundMenuItem = null;
if (direction === -1) {
let candidate = props.menuItems[currentIndex - 1] !== '-'
? props.menuItems[currentIndex - 1]
: props.menuItems[currentIndex - 2];
foundMenuItem = candidate ? candidate : props.menuItems[props.menuItems.length - 1];
}
else {
let candidate = props.menuItems[currentIndex + 1] !== '-'
? props.menuItems[currentIndex + 1]
: props.menuItems[currentIndex + 2];
foundMenuItem = candidate ? candidate : props.menuItems[0];
}
return foundMenuItem === '-' ? null : foundMenuItem;
};
const dispatch = (0, react_redux_1.useDispatch)();
const handleKeyPress = React.useCallback((event) => {
const { code } = event;
if (code === 'ArrowUp' || code === 'ArrowDown' || code === 'Home' || code === 'End') {
event.preventDefault();
event.stopPropagation();
let nextMenuItem = null;
if (code === 'Home') {
nextMenuItem = props.menuItems[0];
}
else if (code === 'End') {
nextMenuItem = props.menuItems[props.menuItems.length - 1];
}
else {
nextMenuItem = getMenuItemForDirection(event.code === 'ArrowUp' ? -1 : 1);
}
if (nextMenuItem) {
makeActive(nextMenuItem);
}
}
}, [props.activeItem, props.menuItems]);
return (React.createElement("nav", { className: "ab-Adaptable-Popup__Navigation twa:overflow-auto", tabIndex: -1 },
React.createElement("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 }, props.menuItems.map((menuItem, index) => {
if (menuItem === '-') {
return (React.createElement("li", { key: `separator-${index}`, className: `${navigationItemClassName}__Separator` }));
}
const isActive = props.activeItem === menuItem.category || menuItem.label === props.activeItem;
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(NavigationItem, { key: menuItem.label, menuItem: menuItem, isActive: isActive, dataName: dataName, customIcon: customIcon, showModuleIcons: api.optionsApi.getSettingsPanelOptions().showModuleIcons, onAction: () => makeActive(menuItem) }));
}))));
};
exports.Navigation = Navigation;