Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | 2x 2x | import { useRef, useEffect, Fragment, useState } from "react";
import { handleNavigation } from "../helpers";
import AnimationGroup from "../AnimationGroup/AnimationGroup";
import PropTypes from "prop-types";
const NavLinkInline = ({
url,
urlExpressionToMatch,
className,
icon,
rightIcon,
label,
isActive,
showLabel,
linkCallback,
disabled,
target,
}) => {
const localUrl = urlExpressionToMatch || url;
const urlRegExp = new RegExp(`${localUrl}/?$`);
const path = window.location.href && window.location.href.split("?")[0];
const currentPage = path && path.match(urlRegExp);
const svgRef = useRef();
const [showTooltip, setShowTooltip] = useState(false);
const tooltipRef = useRef();
useEffect(() => {
if (!showLabel && svgRef.current) {
const existingMouseenter = svgRef.current.onmouseover;
const existingMouseout = svgRef.current.onmouseout;
svgRef.current.onmouseover = () => {
if (tooltipRef.current) {
const svgOffset = svgRef.current.getBoundingClientRect();
tooltipRef.current.style.top = `${svgOffset.top - 5}px`;
tooltipRef.current.style.display = "block";
}
if (typeof existingMouseenter === "function") {
existingMouseenter();
}
};
svgRef.current.onmouseout = () => {
if (tooltipRef.current) {
tooltipRef.current.style.display = "none";
}
if (typeof existingMouseout === "function") {
existingMouseout();
}
};
setShowTooltip(true);
}
if (showLabel) {
setShowTooltip(false);
}
}, [svgRef.current, showLabel]);
return (
<Fragment>
<a
href={disabled ? undefined : url}
onClick={(e) => handleNavigation(e, linkCallback, label)}
className={`${className} ${currentPage || isActive ? "active" : ""} ${
disabled ? "disabled" : ""
}`}
data-track-category="SidebarNav"
data-track-action={`GoTo${label ? label.split(" ").join("") : ""}`}
data-track-label={label}
aria-label={label}
data-cy={label}
target={`${target ? target : "_self"}`}
>
<svg
className={`left-icon ${disabled ? "disabled" : ""}`}
aria-hidden="true"
focusable="false"
ref={svgRef}
>
{icon}
</svg>
<AnimationGroup display={showLabel}>
<span tabIndex="-1" className="sidebar-inline-link-label">
{label}
{rightIcon}
</span>
</AnimationGroup>
</a>
{showTooltip && (
<div ref={tooltipRef} className="sidebar-tooltip">
<span className="sidebar-tooltip-text">{label}</span>
</div>
)}
</Fragment>
);
};
NavLinkInline.propTypes = {
urlExpressionToMatch: PropTypes.string,
url: PropTypes.string,
className: PropTypes.string,
icon: PropTypes.element,
rightIcon: PropTypes.element,
label: PropTypes.string,
isActive: PropTypes.bool,
showLabel: PropTypes.bool,
linkCallback: PropTypes.func,
disabled: PropTypes.bool,
target: PropTypes.string,
};
export default NavLinkInline;
|