8000 feat(NavLink): Added useExact property throughout navigation hierarchy. · tabler/tabler-react@b7f263e · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content
This repository was archived by the owner on Mar 1, 2024. It is now read-only.

Commit b7f263e

Browse files
committed
feat(NavLink): Added useExact property throughout navigation hierarchy.
1 parent aac1bc2 commit b7f263e

File tree

5 files changed

+21
-3
lines changed

5 files changed

+21
-3
lines changed

example/src/SiteWrapper.react.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,17 @@ type navItem = {|
3636
+active?: boolean,
3737
+LinkComponent?: React.ElementType,
3838
+subItems?: Array<subNavItem>,
39+
+useExact?: boolean,
3940
|};
4041

4142
const navBarItems: Array<navItem> = [
42-
{ value: "Home", to: "/", icon: "home", LinkComponent: withRouter(NavLink) },
43+
{
44+
value: "Home",
45+
to: "/",
46+
icon: "home",
47+
LinkComponent: withRouter(NavLink),
48+
useExact: true,
49+
},
4350
{
4451
value: "Interface",
4552
icon: "box",

src/components/Nav/Nav.react.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ type navItem = {|
2222
+active?: boolean,
2323
+LinkComponent?: React.ElementType,
2424
+subItems?: Array<subNavItem>,
25+
+useExact?: boolean,
2526
|};
2627

2728
type Props = {|
@@ -123,6 +124,7 @@ class Nav extends React.Component<Props, State> {
123124
LinkComponent={a.LinkComponent}
124125
subItemsObjects={a.subItems}
125126
active={this.computeActive(a.active, a.to, a.subItems)}
127+
useExact={a.useExact}
126128
/>
127129
))) ||
128130
children}

src/components/Nav/NavItem.react.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,10 @@ type Props = {|
3232
* Position of the subnav Dropdown
3333
*/
3434
+position?: Placement,
35+
/**
36+
* Whether or not to pass "exact" property to underlying NavLink component
37+
*/
38+
+useExact?: boolean,
3539
|};
3640

3741
type State = {
@@ -68,6 +72,7 @@ class NavItem extends React.Component<Props, State> {
6872
active,
6973
subItems,
7074
subItemsObjects,
75+
useExact,
7176
position = "bottom-start",
7277
}: Props = this.props;
7378

@@ -85,6 +90,7 @@ class NavItem extends React.Component<Props, State> {
8590
hasSubNav={hasSubNav}
8691
active={active}
8792
rootRef={ref}
93+
useExact={useExact}
8894
>
8995
{!hasSubNav && typeof children === "string" ? children : value}
9096
</Nav.Link>
@@ -98,6 +104,7 @@ class NavItem extends React.Component<Props, State> {
98104
RootComponent={LinkComponent}
99105
hasSubNav={hasSubNav}
100106
active={active}
107+
useExact={useExact}
101108
>
102109
{!hasSubNav && typeof children === "string" ? children : value}
103110
</Nav.Link>

src/components/Nav/NavLink.react.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ type Props = {|
1212
+to?: string,
1313
+hasSubNav?: boolean,
1414
+rootRef?: (?HTMLElement) => void,
15+
+useExact?: boolean,
1516
|};
1617

1718
function NavLink({
@@ -23,6 +24,7 @@ function NavLink({
2324
to,
2425
hasSubNav,
2526
rootRef,
27+
useExact,
2628
}: Props): React.Node {
2729
const classes = cn({ "nav-link": true, active: active }, className);
2830

@@ -36,9 +38,8 @@ function NavLink({
3638
{children}
3739
</React.Fragment>
3840
);
39-
4041
return RootComponent ? (
41-
<RootComponent exact className={classes} to={to}>
42+
<RootComponent exact={useExact || false} className={classes} to={to}>
4243
{childrenForAll}
4344
</RootComponent>
4445
) : (

src/components/Site/SiteNav.react.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ type navItem = {|
1818
+active?: boolean,
1919
+LinkComponent?: React.ElementType,
2020
+subItems?: Array<subNavItem>,
21+
+useExact?: boolean,
2122
|};
2223

2324
type navItems = Array<navItem>;

0 commit comments

Comments
 (0)
0