11import React from 'react' ;
22import PropTypes from 'prop-types' ;
33import {
4- Route , useHref , useLocation , useMatch , useNavigate ,
4+ useHref ,
5+ useLocation ,
6+ useMatch ,
7+ useNavigate ,
58} from 'react-router-dom' ;
69import { isFunction } from 'lodash' ;
710
8- const isModifiedEvent = ( event ) => ! ! ( event . metaKey || event . altKey || event . ctrlKey || event . shiftKey ) ;
11+ const isModifiedEvent = ( event ) =>
12+ ! ! ( event . metaKey || event . altKey || event . ctrlKey || event . shiftKey ) ;
913
1014const LinkContainer = ( {
1115 children,
@@ -20,8 +24,19 @@ const LinkContainer = ({
2024 // eslint-disable-next-line comma-dangle
2125 ...props
2226} ) => {
27+ const path = typeof to === 'object' ? to . pathname : to ;
2328 const navigate = useNavigate ( ) ;
2429 const href = useHref ( typeof to === 'string' ? { pathname : to } : to ) ;
30+ const match = useMatch ( path ) ;
31+ const location = useLocation ( ) ;
32+ const child = React . Children . only ( children ) ;
33+ 34+ const isActive = ! ! ( getIsActive
35+ ? isFunction ( getIsActive )
36+ ? getIsActive ( match , location )
37+ : getIsActive
38+ : match ) ;
39+ 2540 const handleClick = ( event ) => {
2641 if ( children . props . onClick ) {
2742 children . props . onClick ( event ) ;
@@ -32,9 +47,9 @@ const LinkContainer = ({
3247 }
3348
3449 if (
35- ! event . defaultPrevented // onClick prevented default
36- && event . button === 0 // ignore right clicks
37- && ! isModifiedEvent ( event ) // ignore clicks with modifier keys
50+ ! event . defaultPrevented && // onClick prevented default
51+ event . button === 0 && // ignore right clicks
52+ ! isModifiedEvent ( event ) // ignore clicks with modifier keys
3853 ) {
3954 event . preventDefault ( ) ;
4055
@@ -44,56 +59,35 @@ const LinkContainer = ({
4459 }
4560 } ;
4661
47- const child = React . Children . only ( children ) ;
48- const path = typeof to === 'object' ? to . pathname : to ;
49- const InnerRouteElement = ( ) => {
50- const match = useMatch ( path ) ;
51- const location = useLocation ( ) ;
52- const isActive = ! ! ( getIsActive ? ( isFunction ( getIsActive ) ? getIsActive ( match , location ) : getIsActive ) : match ) ;
53- 54- return React . cloneElement (
55- child ,
56- {
57- ...props ,
58- className : [ className , child . props . className , isActive ? activeClassName : null ]
59- . join ( ' ' ) . trim ( ) ,
60- style : isActive ? { ...style , ...activeStyle } : style ,
61- href,
62- onClick : handleClick ,
63- } ,
64- ) ;
65- } ;
66- 67- return (
68- < Route
69- path = { path }
70- element = { < InnerRouteElement /> }
71- />
72- ) ;
62+ return React . cloneElement ( child , {
63+ ...props ,
64+ className : [
65+ className ,
66+ child . props . className ,
67+ isActive ? activeClassName : null ,
68+ ]
69+ . join ( ' ' )
70+ . trim ( ) ,
71+ style : isActive ? { ...style , ...activeStyle } : style ,
72+ href,
73+ onClick : handleClick ,
74+ } ) ;
7375} ;
7476
7577LinkContainer . propTypes = {
7678 children : PropTypes . element . isRequired ,
7779 onClick : PropTypes . func ,
7880 replace : PropTypes . bool ,
79- to : PropTypes . oneOfType ( [
80- PropTypes . string ,
81- PropTypes . object ,
82- ] ) . isRequired ,
81+ to : PropTypes . oneOfType ( [ PropTypes . string , PropTypes . object ] ) . isRequired ,
8382 className : PropTypes . string ,
8483 activeClassName : PropTypes . string ,
85- style : PropTypes . objectOf ( PropTypes . oneOfType ( [
86- PropTypes . string ,
87- PropTypes . number ,
88- ] ) ) ,
89- activeStyle : PropTypes . objectOf ( PropTypes . oneOfType ( [
90- PropTypes . string ,
91- PropTypes . number ,
92- ] ) ) ,
93- isActive : PropTypes . oneOfType ( [
94- PropTypes . func ,
95- PropTypes . bool ,
96- ] ) ,
84+ style : PropTypes . objectOf (
85+ PropTypes . oneOfType ( [ PropTypes . string , PropTypes . number ] ) ,
86+ ) ,
87+ activeStyle : PropTypes . objectOf (
88+ PropTypes . oneOfType ( [ PropTypes . string , PropTypes . number ] ) ,
89+ ) ,
90+ isActive : PropTypes . oneOfType ( [ PropTypes . func , PropTypes . bool ] ) ,
9791} ;
9892
9993LinkContainer . defaultProps = {
0 commit comments