1 | "use strict";
|
2 | Object.defineProperty(exports, "__esModule", { value: true });
|
3 | exports.NavItem = void 0;
|
4 | const tslib_1 = require("tslib");
|
5 | const React = tslib_1.__importStar(require("react"));
|
6 | const nav_1 = tslib_1.__importDefault(require("@patternfly/react-styles/css/components/Nav/nav"));
|
7 | const react_styles_1 = require("@patternfly/react-styles");
|
8 | const Nav_1 = require("./Nav");
|
9 | const PageSidebar_1 = require("../Page/PageSidebar");
|
10 | const helpers_1 = require("../../helpers");
|
11 | const Popper_1 = require("../../helpers/Popper/Popper");
|
12 | const angle_right_icon_1 = tslib_1.__importDefault(require('@patternfly/react-icons/dist/js/icons/angle-right-icon'));
|
13 | const NavItem = (_a) => {
|
14 | var { children, styleChildren = true, className, to, isActive = false, groupId = null, itemId = null, preventDefault = false, onClick = null, component = 'a', flyout, onShowFlyout, ouiaId, ouiaSafe } = _a, props = tslib_1.__rest(_a, ["children", "styleChildren", "className", "to", "isActive", "groupId", "itemId", "preventDefault", "onClick", "component", "flyout", "onShowFlyout", "ouiaId", "ouiaSafe"]);
|
15 | const { flyoutRef, setFlyoutRef } = React.useContext(Nav_1.NavContext);
|
16 | const { isNavOpen } = React.useContext(PageSidebar_1.PageSidebarContext);
|
17 | const [flyoutTarget, setFlyoutTarget] = React.useState(null);
|
18 | const [isHovered, setIsHovered] = React.useState(false);
|
19 | const ref = React.useRef();
|
20 | const flyoutVisible = ref === flyoutRef;
|
21 | const popperRef = React.useRef();
|
22 | const Component = component;
|
23 | const hasFlyout = flyout !== undefined;
|
24 | const showFlyout = (show, override) => {
|
25 | if ((!flyoutVisible || override) && show) {
|
26 | setFlyoutRef(ref);
|
27 | }
|
28 | else if ((flyoutVisible || override) && !show) {
|
29 | setFlyoutRef(null);
|
30 | }
|
31 | onShowFlyout && show && onShowFlyout();
|
32 | };
|
33 | const onMouseOver = (event) => {
|
34 | const evtContainedInFlyout = event.target.closest('.pf-c-nav__item.pf-m-flyout');
|
35 | if (hasFlyout && !flyoutVisible) {
|
36 | showFlyout(true);
|
37 | }
|
38 | else if (flyoutRef !== null && !evtContainedInFlyout) {
|
39 | setFlyoutRef(null);
|
40 | }
|
41 | };
|
42 | const onFlyoutClick = (event) => {
|
43 | const target = event.target;
|
44 | const closestItem = target.closest('.pf-m-flyout');
|
45 | if (!closestItem) {
|
46 | if (hasFlyout) {
|
47 | showFlyout(false, true);
|
48 | }
|
49 | else if (flyoutRef !== null) {
|
50 | setFlyoutRef(null);
|
51 | }
|
52 | }
|
53 | };
|
54 | const handleFlyout = (event) => {
|
55 | var _a, _b;
|
56 | const key = event.key;
|
57 | const target = event.target;
|
58 | if (!(((_a = popperRef === null || popperRef === void 0 ? void 0 : popperRef.current) === null || _a === void 0 ? void 0 : _a.contains(target)) || (hasFlyout && ((_b = ref === null || ref === void 0 ? void 0 : ref.current) === null || _b === void 0 ? void 0 : _b.contains(target))))) {
|
59 | return;
|
60 | }
|
61 | if (key === ' ' || key === 'ArrowRight') {
|
62 | event.stopPropagation();
|
63 | event.preventDefault();
|
64 | if (!flyoutVisible) {
|
65 | showFlyout(true);
|
66 | setFlyoutTarget(target);
|
67 | }
|
68 | }
|
69 | if (key === 'Escape' || key === 'ArrowLeft') {
|
70 | if (flyoutVisible) {
|
71 | event.stopPropagation();
|
72 | event.preventDefault();
|
73 | showFlyout(false);
|
74 | }
|
75 | }
|
76 | };
|
77 | React.useEffect(() => {
|
78 | if (hasFlyout) {
|
79 | window.addEventListener('click', onFlyoutClick);
|
80 | }
|
81 | return () => {
|
82 | if (hasFlyout) {
|
83 | window.removeEventListener('click', onFlyoutClick);
|
84 | }
|
85 | };
|
86 | }, []);
|
87 | React.useEffect(() => {
|
88 | if (flyoutTarget) {
|
89 | if (flyoutVisible) {
|
90 | const flyoutItems = Array.from(popperRef.current.getElementsByTagName('UL')[0].children).filter(el => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider')));
|
91 | flyoutItems[0].firstChild.focus();
|
92 | }
|
93 | else {
|
94 | flyoutTarget.focus();
|
95 | }
|
96 | }
|
97 | }, [flyoutVisible, flyoutTarget]);
|
98 | const flyoutButton = (React.createElement("span", { className: react_styles_1.css(nav_1.default.navToggle) },
|
99 | React.createElement("span", { className: react_styles_1.css(nav_1.default.navToggleIcon) },
|
100 | React.createElement(angle_right_icon_1.default, { "aria-hidden": true }))));
|
101 | const renderDefaultLink = (context) => {
|
102 | const preventLinkDefault = preventDefault || !to;
|
103 | return (React.createElement(Component, Object.assign({ href: to, onClick: (e) => context.onSelect(e, groupId, itemId, to, preventLinkDefault, onClick), className: react_styles_1.css(nav_1.default.navLink, isActive && nav_1.default.modifiers.current, isHovered && nav_1.default.modifiers.hover, className), "aria-current": isActive ? 'page' : null, tabIndex: isNavOpen ? null : '-1' }, props),
|
104 | children,
|
105 | flyout && flyoutButton));
|
106 | };
|
107 | const renderClonedChild = (context, child) => React.cloneElement(child, Object.assign(Object.assign({ onClick: (e) => context.onSelect(e, groupId, itemId, to, preventDefault, onClick), 'aria-current': isActive ? 'page' : null }, (styleChildren && {
|
108 | className: react_styles_1.css(nav_1.default.navLink, isActive && nav_1.default.modifiers.current, child.props && child.props.className)
|
109 | })), { tabIndex: child.props.tabIndex || isNavOpen ? null : -1, children: hasFlyout ? (React.createElement(React.Fragment, null,
|
110 | child.props.children,
|
111 | flyoutButton)) : (child.props.children) }));
|
112 | const ouiaProps = helpers_1.useOUIAProps(exports.NavItem.displayName, ouiaId, ouiaSafe);
|
113 | const handleMouseEnter = () => {
|
114 | setIsHovered(true);
|
115 | };
|
116 | const handleMouseLeave = () => {
|
117 | setIsHovered(false);
|
118 | };
|
119 | const flyoutPopper = (React.createElement(Popper_1.Popper, { reference: ref, popper: React.createElement("div", { ref: popperRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, flyout), placement: "right-start", isVisible: flyoutVisible, onDocumentKeyDown: handleFlyout }));
|
120 | const navItem = (React.createElement(React.Fragment, null,
|
121 | React.createElement("li", Object.assign({ onMouseOver: onMouseOver, className: react_styles_1.css(nav_1.default.navItem, hasFlyout && nav_1.default.modifiers.flyout, className), ref: ref }, ouiaProps),
|
122 | React.createElement(Nav_1.NavContext.Consumer, null, context => React.isValidElement(children)
|
123 | ? renderClonedChild(context, children)
|
124 | : renderDefaultLink(context))),
|
125 | flyout && flyoutPopper));
|
126 | return navItem;
|
127 | };
|
128 | exports.NavItem = NavItem;
|
129 | exports.NavItem.displayName = 'NavItem';
|
130 |
|
\ | No newline at end of file |