Skip to content

Commit 8a70ea8

Browse files
chetoncheton
committed
Drop '@trendmicro/react-anchor' dependency
1 parent 365fe21 commit 8a70ea8

6 files changed

Lines changed: 60 additions & 55 deletions

File tree

‎README.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,6 @@ active | boolean | false | Highlight the navigation item as active.
104104
disabled | boolean | false | Disable the navigation item, making it unselectable.
105105
expanded | boolean | false | Whether the navigation item is expanded or collapsed.
106106
eventKey | any | _(required)_ | Value passed to the `onSelect` handler, useful for identifying the selected navigation item.
107-
href | string | | HTML `href` attribute corresponding to `a.href`.
108107
onClick | function(event) | | Callback fired when the navigation item is clicked.
109108
onSelect | function(eventKey, event) | | Callback fired when a navigation item is selected.
110109

‎examples/Styled/StyledSideNav.jsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -28,41 +28,41 @@ const StyledNav = styled(Nav)`
2828
[class*="sidenav-subnav--"] {
2929
> [class*="sidenav-subnavitem--"],
3030
> [class*="sidenav-subnavitem--"]:hover {
31-
> a {
31+
> [class*="navitem--"] {
3232
color: #222;
3333
}
3434
}
3535
> [class*="sidenav-subnavitem--"]:hover {
36-
> a {
36+
> [class*="navitem--"] {
3737
background-color: #eee;
3838
}
3939
}
4040
> [class*="sidenav-subnavitem--"][class*="selected--"] {
41-
> a {
41+
> [class*="navitem--"] {
4242
color: #db3d44;
4343
}
44-
> a::before {
44+
> [class*="navitem--"]::before {
4545
border-left: 2px solid #db3d44;
4646
}
4747
}
4848
}
4949
}
5050
5151
&& > [class*="sidenav-navitem--"] {
52-
> a {
52+
> [class*="navitem--"] {
5353
background-color: inherit;
5454
color: #222;
5555
}
5656
}
5757
&& > [class*="sidenav-navitem--"]:hover {
58-
> a {
58+
> [class*="navitem--"] {
5959
background-color: #eee;
6060
}
6161
}
6262
&& > [class*="sidenav-navitem--"],
6363
&& > [class*="sidenav-navitem--"]:hover {
64-
> a {
65-
[class*="sidenav-nav-icon--"] {
64+
> [class*="navitem--"] {
65+
[class*="navicon--"] {
6666
&, > * {
6767
color: #666;
6868
}
@@ -77,9 +77,9 @@ const StyledNav = styled(Nav)`
7777
7878
&& > [class*="sidenav-navitem--"][class*="highlighted--"],
7979
&& > [class*="sidenav-navitem--"][class*="highlighted--"]:hover {
80-
> a {
81-
[class*="sidenav-nav-icon--"],
82-
[class*="sidenav-nav-text--"] {
80+
> [class*="navitem--"] {
81+
[class*="navicon--"],
82+
[class*="navtext--"] {
8383
&, > * {
8484
color: #db3d44;
8585
}

‎src/NavItem.jsx‎

Lines changed: 14 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Anchor from '@trendmicro/react-anchor';
1+
/* eslint jsx-a11y/click-events-have-key-events: 0 */
22
import chainedFunction from 'chained-function';
33
import cx from 'classnames';
44
import PropTypes from 'prop-types';
@@ -33,9 +33,6 @@ class NavItem extends PureComponent {
3333
// Value passed to the `onSelect` handler, useful for identifying the selected navigation item.
3434
eventKey: PropTypes.any,
3535

36-
// HTML `href` attribute corresponding to `a.href`.
37-
href: PropTypes.string,
38-
3936
// Callback fired when the navigation item is clicked.
4037
onClick: PropTypes.func,
4138

@@ -71,14 +68,11 @@ class NavItem extends PureComponent {
7168

7269
handleSelect = (event) => {
7370
const {
74-
href, disabled, onSelect, eventKey
71+
disabled, onSelect, eventKey
7572
} = this.props;
7673

77-
if (!href || disabled) {
78-
event.preventDefault();
79-
}
80-
8174
if (disabled) {
75+
event.preventDefault();
8276
return;
8377
}
8478

@@ -126,8 +120,9 @@ class NavItem extends PureComponent {
126120
})}
127121
style={style}
128122
>
129-
<Anchor
123+
<div
130124
{...props}
125+
className={styles.navitem}
131126
disabled={disabled}
132127
role="menuitem"
133128
tabIndex="-1"
@@ -136,13 +131,13 @@ class NavItem extends PureComponent {
136131
this.handleSelect
137132
)}
138133
>
139-
<div className={styles.sidenavNavIcon}>
134+
<div className={styles.navicon}>
140135
{navIcon && navIcon.props ? navIcon.props.children : null}
141136
</div>
142-
<div className={styles.sidenavNavText}>
137+
<div className={styles.navtext}>
143138
{navText && navText.props ? navText.props.children : null}
144139
</div>
145-
</Anchor>
140+
</div>
146141
</Component>
147142
);
148143
}
@@ -191,8 +186,9 @@ class NavItem extends PureComponent {
191186
})}
192187
style={style}
193188
>
194-
<Anchor
189+
<div
195190
{...props}
191+
className={styles.navitem}
196192
disabled={disabled}
197193
role="menuitem"
198194
tabIndex="-1"
@@ -201,14 +197,14 @@ class NavItem extends PureComponent {
201197
(navItems.length === 0) ? this.handleSelect : noop
202198
)}
203199
>
204-
<div className={styles.sidenavNavIcon}>
200+
<div className={styles.navicon}>
205201
{navIcon && navIcon.props ? navIcon.props.children : null}
206202
</div>
207-
<div className={styles.sidenavNavText}>
203+
<div className={styles.navtext}>
208204
{navText && navText.props ? navText.props.children : null}
209205
</div>
210-
</Anchor>
211-
{others}
206+
{others}
207+
</div>
212208
{(navItems.length > 0) &&
213209
<div
214210
{...props}

‎src/sidenav-expanded.styl‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
min-width: 240px;
33

44
.sidenav-nav > .sidenav-navitem {
5-
.sidenav-nav-icon + .sidenav-nav-text {
5+
.navicon + .navtext {
66
display: inline-block;
77
}
88
}
99

1010
.sidenav-nav > .sidenav-navitem {
11-
&.expandable > a {
11+
&.expandable > .navitem {
1212
cursor: pointer;
1313
}
1414
}
@@ -60,11 +60,11 @@
6060
z-index: -1;
6161
}
6262

63-
&.selected > a {
63+
&.selected > .navitem {
6464
color: #fff;
6565
}
6666

67-
&.selected > a::before {
67+
&.selected > .navitem::before {
6868
content: " ";
6969
width: 2px;
7070
height: 20px;
@@ -74,12 +74,12 @@
7474
border-left: 2px #ffffff solid;
7575
}
7676

77-
&:hover > a {
77+
&:hover > .navitem {
7878
background: transparent;
7979
color: #fff;
8080
}
8181

82-
> a {
82+
> .navitem {
8383
color: #f9dcdd;
8484
padding: 0 14px 0 20px;
8585
line-height: 28px;

‎src/sidenav-navitem.styl‎

Lines changed: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,46 +2,46 @@
22
clear: both;
33
position: relative;
44

5-
&.highlighted > a {
5+
&.highlighted > .navitem {
66
cursor: default;
77
}
88

9-
&:hover > a::after {
9+
&:hover > .navitem::after {
1010
background: #fff;
1111
opacity: .15;
1212
}
1313

14-
&.highlighted > a::after,
15-
&:hover.highlighted > a::after {
14+
&.highlighted > .navitem::after,
15+
&:hover.highlighted > .navitem::after {
1616
background: #000;
1717
opacity: .2;
1818
}
1919

20-
&.highlighted.expanded > a::after,
21-
&:hover.highlighted.expanded > a::after {
20+
&.highlighted.expanded > .navitem::after,
21+
&:hover.highlighted.expanded > .navitem::after {
2222
background: #000;
2323
opacity: .25;
2424
}
2525

26-
&.highlighted.selected.expanded > a::after,
27-
&:hover.highlighted.selected.expanded > a::after {
26+
&.highlighted.selected.expanded > .navitem::after,
27+
&:hover.highlighted.selected.expanded > .navitem::after {
2828
background: #000;
2929
opacity: .2;
3030
}
3131

32-
&:hover > a .sidenav-nav-icon,
33-
&.highlighted > a .sidenav-nav-icon {
32+
&:hover > .navitem .navicon,
33+
&.highlighted > .navitem .navicon {
3434
opacity: 1;
3535
}
3636

37-
&:hover > a .sidenav-nav-icon,
38-
&:hover > a .sidenav-nav-text,
39-
&.highlighted > a .sidenav-nav-icon,
40-
&.highlighted > a .sidenav-nav-text {
37+
&:hover > .navitem .navicon,
38+
&:hover > .navitem .navtext,
39+
&.highlighted > .navitem .navicon,
40+
&.highlighted > .navitem .navtext {
4141
color: #fff;
4242
}
4343

44-
> a {
44+
> .navitem {
4545
position: relative;
4646
display: block;
4747
line-height: 50px;
@@ -50,6 +50,11 @@
5050
text-decoration: none;
5151
color: #fff;
5252
font-size: 14px;
53+
cursor: pointer;
54+
55+
&:focus {
56+
outline: 0;
57+
}
5358

5459
// Background layer
5560
&::after {
@@ -65,7 +70,7 @@
6570
}
6671
}
6772

68-
> a .sidenav-nav-icon {
73+
> .navitem .navicon {
6974
display: block;
7075
float: left;
7176
width: 64px;
@@ -84,7 +89,7 @@
8489
color: #f9dcdd;
8590
}
8691
}
87-
> a .sidenav-nav-icon + .sidenav-nav-text {
92+
> .navitem .navicon + .navtext {
8893
display: none;
8994
}
9095
}

‎src/sidenav-subnavitem.styl‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,24 @@
1515
margin-bottom: 8px;
1616
}
1717

18-
&.selected > a {
18+
&.selected > .navitem {
1919
color: #db3d44;
2020
font-weight: bold;
2121
background: none;
2222
cursor: default;
2323
}
2424

25-
> a {
25+
> .navitem {
2626
display: block;
2727
text-decoration: none;
2828
color: #222;
2929
font-size: 13px;
3030
line-height: 30px;
3131
padding: 0 24px;
32+
cursor: pointer;
33+
34+
&:focus {
35+
outline: 0;
36+
}
3237
}
3338
}

0 commit comments

Comments
 (0)