forked from virtualvivek/react-windows-ui
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
66 lines (57 loc) · 1.42 KB
/
index.js
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
import React from "react";
const isJavaScriptProtocol = /^[\u0000-\u001F ]*j[\r\n\t]*a[\r\n\t]*v[\r\n\t]*a[\r\n\t]*s[\r\n\t]*c[\r\n\t]*r[\r\n\t]*i[\r\n\t]*p[\r\n\t]*t[\r\n\t]*\:/i
const NavBarLink = (props) => {
const {
icon,
text,
href,
active,
imgSrc,
imgAlt,
onClick,
showBadge,
imgBorderRadius,
badgeBackgroundColor,
allowJavaScriptUrls = true
} = props;
if (isJavaScriptProtocol.test(href) && !allowJavaScriptUrls) {
console.warn(`NavBarLink has blocked a javascript: URL as a security precaution`);
return null;
}
const renderBadge = () => {
if(showBadge > 0 || showBadge !== "") {
return <div className="app-badge"
style={{backgroundColor: badgeBackgroundColor}}>
{showBadge}
</div>;
}
return <></>;
}
const renderImg = () => {
return imgSrc ?
<img
src={imgSrc}
alt={imgAlt}
style={{borderRadius: imgBorderRadius}}
/>
: ""
}
return (
<li className="app-navbar-list-item">
<a
{...(active && { "aria-current": "page", className: "active", "aria-selected": "true" })}
onClick={onClick}
href={href}>
{icon}
{renderImg()}
<span>{text}</span>
{showBadge ? renderBadge() : ""}
</a>
</li>
)
}
NavBarLink.defaultProps = {
text: "Nav Link",
onClick: () => {},
}
export default NavBarLink;