Merge pull request #725 from devtron-labs/fix/tab-group-animation

fix: tab group animation

Author: arunjaindev

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.12.0-pre-7",
+    "version": "1.12.0-pre-9",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 
-import { useMemo } from 'react'
-import { Link, NavLink, useRouteMatch } from 'react-router-dom'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { Link, NavLink, useLocation } from 'react-router-dom'
 import { motion } from 'framer-motion'
 
 import { Tooltip } from '@Common/Tooltip'
 import { ComponentSizeType } from '@Shared/constants'
 
-import { getPathnameToMatch, getTabBadge, getTabDescription, getTabIcon, getTabIndicator } from './TabGroup.helpers'
+import { getTabBadge, getTabDescription, getTabIcon, getTabIndicator } from './TabGroup.helpers'
 import { AdditionalTabProps, TabGroupProps, TabProps } from './TabGroup.types'
 import { getClassNameBySizeMap, tabGroupClassMap } from './TabGroup.utils'
 
@@ -57,13 +57,17 @@ const Tab = ({
     tooltipProps,
     uniqueGroupId,
 }: TabProps & Pick<TabGroupProps, 'size' | 'hideTopPadding'> & AdditionalTabProps) => {
-    const { path } = useRouteMatch()
-    const pathToMatch = tabType === 'navLink' || tabType === 'link' ? getPathnameToMatch(props.to, path) : ''
-
-    // using match to define if tab is active as useRouteMatch return an object if path is matched otherwise return null/undefined
-    const match = useRouteMatch(pathToMatch)
-
-    const isTabActive = tabType === 'button' ? active : !!match
+    const { pathname, search } = useLocation()
+    const ref = useRef<HTMLAnchorElement>(null)
+    const [isTabActive, setIsTabActive] = useState(tabType === 'button' && active)
+
+    useEffect(() => {
+        if (tabType === 'navLink') {
+            setIsTabActive(ref.current?.classList.contains('active') || false)
+            return
+        }
+        setIsTabActive(active)
+    }, [active, tabType, pathname, search])
 
     const { tabClassName, iconClassName, badgeClassName } = getClassNameBySizeMap({
         hideTopPadding,
@@ -110,6 +114,7 @@ const Tab = ({
             case 'navLink':
                 return (
                     <NavLink
+                        ref={ref}
                         className={`${tabClassName} dc__no-decor flexbox-col tab-group__tab__nav-link ${disabled ? 'cursor-not-allowed' : ''}`}
                         aria-disabled={disabled}
                         {...props}

src/Shared/Components/TabGroup/TabGroup.component.tsx

@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-import { LinkProps, NavLinkProps } from 'react-router-dom'
-
 import { ReactComponent as ICErrorExclamation } from '@Icons/ic-error-exclamation.svg'
 import { ReactComponent as ICWarning } from '@Icons/ic-warning.svg'
 
@@ -67,14 +65,3 @@ export const getTabDescription = (description: TabProps['description']) =>
                 : description}
         </ul>
     )
-
-const replaceTrailingSlash = (pathname: string) => pathname.replace(/\/+$/, '')
-
-export const getPathnameToMatch = (to: NavLinkProps['to'] | LinkProps['to'], currentPathname: string): string => {
-    if (typeof to === 'string' || (to && typeof to === 'object' && 'pathname' in to)) {
-        const pathname = typeof to === 'string' ? to : to.pathname || ''
-        // handling absolute and relative paths
-        return pathname.startsWith('/') ? pathname : `${replaceTrailingSlash(currentPathname)}/${pathname}`
-    }
-    return ''
-}