From fd7b16f8fc4ff5e75a6c5b49e26b696c1b3b2cd4 Mon Sep 17 00:00:00 2001
From: Writwick Das <writzx@gmail.com>
Date: Mon, 9 May 2022 14:48:29 +0200
Subject: [PATCH] - update LinkContainer props (active class and style) for v6

---
 src/LinkContainer.js | 43 +++++++++++++++++--------------------------
 1 file changed, 17 insertions(+), 26 deletions(-)

diff --git a/src/LinkContainer.js b/src/LinkContainer.js
index 9cc6844..bfdc6a7 100644
--- a/src/LinkContainer.js
+++ b/src/LinkContainer.js
@@ -11,21 +11,19 @@ const isModifiedEvent = (event) =>
   !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
 
 const LinkContainer = ({
-  children,
-  onClick,
-  replace, // eslint-disable-line no-unused-vars
-  to,
-  activeClassName,
-  className,
-  activeStyle,
-  style,
-  isActive: getIsActive,
-  // eslint-disable-next-line comma-dangle
-  ...props
-}) => {
+                         children,
+                         onClick,
+                         replace, // eslint-disable-line no-unused-vars
+                         to,
+                         className,
+                         style,
+                         isActive: getIsActive,
+                         // eslint-disable-next-line comma-dangle
+                         ...props
+                       }) => {
   const path = typeof to === 'object' ? to.pathname : to;
   const navigate = useNavigate();
-  const href = useHref(typeof to === 'string' ? { pathname: to } : to);
+  const href = useHref(typeof to === 'string' ? {pathname: to} : to);
   const match = useMatch(path);
   const location = useLocation();
   const child = React.Children.only(children);
@@ -61,13 +59,12 @@ const LinkContainer = ({
   return React.cloneElement(child, {
     ...props,
     className: [
-      className,
+      typeof className === 'function' ? className({isActive}) : className,
       child.props.className,
-      isActive ? activeClassName : null,
     ]
       .join(' ')
       .trim(),
-    style: isActive ? { ...style, ...activeStyle } : style,
+    style: typeof style === 'function' ? style({isActive}) : style,
     href,
     onClick: handleClick,
   });
@@ -78,24 +75,18 @@ LinkContainer.propTypes = {
   onClick: PropTypes.func,
   replace: PropTypes.bool,
   to: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
-  className: PropTypes.string,
-  activeClassName: PropTypes.string,
-  style: PropTypes.objectOf(
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  style: PropTypes.oneOfType([PropTypes.objectOf(
     PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  ),
-  activeStyle: PropTypes.objectOf(
-    PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  ),
+  ), PropTypes.func]),
   isActive: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
 };
 
 LinkContainer.defaultProps = {
   replace: false,
-  activeClassName: 'active',
   onClick: null,
-  className: null,
+  className: ({isActive}) => isActive ? 'active' : null,
   style: null,
-  activeStyle: null,
   isActive: null,
 };