🔨 refactor: Account Navigation

src/components/modules/account/AccountNavigation/AccountNavigation.tsx

@@ -1,49 +1,68 @@
-import React, { useRef, RefObject, useEffect } from "react"
+import React, { useRef, useEffect, Children, ReactElement, PropsWithChildren, useState, cloneElement } from "react"
 import s from './AccountNavigation.module.scss'
 
-import AccountNavigationItem from './components/AccountNavigationItem' 
+import AccountNavigationItem from './components/AccountNavigationItem/AccountNavigationItem'
+import {TabPaneProps} from '../../../common/TabCommon/components/TabPane/TabPane'
 
 interface AccountNavigationProps {
-    items: {ref: RefObject<HTMLDivElement>, active: boolean, itemName: string, onClick: (tabIndex: number)=>void}[];
     defaultActiveIndex: number;
+    children: React.ReactNode
 }
 
-const AccountNavigation = ({ items, defaultActiveIndex } : AccountNavigationProps) => {
-
+const AccountNavigation = ({ defaultActiveIndex, children } : AccountNavigationProps) => {
+    const [active, setActive] = useState(defaultActiveIndex)
     const sliderRef = useRef<HTMLDivElement>(null);
+    const headerRef = useRef<HTMLUListElement>(null)
 
-    function slide(index: number) {        
-        const previousItem = items[index].ref.current;
-        const slider = sliderRef.current;
-        if (previousItem && slider) {            
-            const top = previousItem.offsetTop;
-            slider.style.top = top.toString()+"px";
+    const onTabClick = (index: number) => {
+        setActive(index)
+    }
+
+    function slide(index: number) {       
+        const active = headerRef.current?.children.item(index)?.getBoundingClientRect()
+        const header = headerRef.current?.getBoundingClientRect()
+        const current = sliderRef.current
+
+        if (current && active && header) {
+            const top = active.top;
+            current.style.top = top.toString()+"px";
         }
     }
 
-    const handleClick = (item: {ref: RefObject<HTMLDivElement>, active: boolean, itemName: string, onClick: (tabIndex: number)=>void},
-                        index: number) => {
-        slide(index);                    
-        item.onClick(index);
-        
-    }
-
     useEffect(() => {
-        slide(defaultActiveIndex);
-    }, [])
+        slide(active);
+    }, [active])
 
     return (
         <section className={s.accountNavigation}>
-            {   
-                items.map((item, i) => {
-                    return (
-                        <div key={item.itemName} ref={item.ref}>
-                            <AccountNavigationItem onClick={() => {handleClick(item, i)}} active={item.active}>{item.itemName}</AccountNavigationItem>
-                        </div>
-                    )
-                })
-            }
-            <div ref={sliderRef} className={s.slider}></div>
+            <ul className={s.tabList} ref={headerRef}>
+                {
+                    Children.map(children, (tab, index) => {
+                        let item = tab as ReactElement<PropsWithChildren<TabPaneProps>>
+                        return (
+                            <li key={item.props.tabName}>
+                            <AccountNavigationItem
+                                active={active === index}
+                                onClick={onTabClick}
+                                tabIndex={index}
+                            >
+                                {item.props.tabName}
+                            </AccountNavigationItem>
+                            </li>
+                        )
+                    })
+                }
+                <div ref={sliderRef} className={s.slider}></div>
+            </ul>
+
+            <div className={s.tabBody}>
+                {
+                    Children.map(children, (tab, index) => {
+                        let item = tab as ReactElement<PropsWithChildren<TabPaneProps>>
+                        return cloneElement(item, { active: index === active });
+                    })
+               }
+            </div>
         </section>
     )
 }