🔨 refactor: tabcommon -datnguyen

:%s

src/components/common/TabCommon/TabCommon.module.scss

@@ -1,21 +1,28 @@
 @import '../../../styles/utilities';
-
-.tabCommon {
-    @apply flex;
-    position: relative;
-    border-bottom: 2px solid #FBFBFB;
-    padding-top: 1.6rem;
-    padding-bottom: 1.6rem;
-    width: 100%;
-
-    .slider {
-        @apply inline-block;
-        height: .2rem;
-        border-radius: 3px;
-        background-color: var(--primary);
-        position: absolute;
-        z-index: 1200;
-        bottom: 0;
-        transition: all .4s linear;
+.tabWapper{
+    @apply flex flex-col w-full;
+    .tabHeader{
+        @apply relative;
+        .tabList {
+            @apply flex;
+            position: relative;
+            border-bottom: 2px solid #FBFBFB;
+            padding: 0.8rem 0;
+            width: 100%;
+            &.center{
+                @apply justify-center;
+            }
+        
+        }
+        .slider {
+            @apply inline-block;
+            height: .2rem;
+            border-radius: 3px;
+            background-color: var(--primary);
+            position: absolute;
+            z-index: 1200;
+            bottom: 0;
+            transition: all .25s linear;
+        }
     }
 }

src/components/common/TabCommon/TabCommon.tsx

@@ -1,36 +1,85 @@
-import React, { RefObject, useEffect } from "react"
+import React, {
+  Children,
+  PropsWithChildren,
+  ReactElement,
+  RefObject,
+  useEffect,
+  useRef,
+  useState,
+	cloneElement,
+} from 'react'
 import s from './TabCommon.module.scss'
 
 import TabItem from './components/TabItem/TabItem'
+import { TabPaneProps } from './components/TabPane/TabPane'
+import classNames from 'classnames'
 
 interface TabCommonProps {
-    tabs: {ref:RefObject<HTMLLIElement>, tabName: string, active: boolean, onClick: (tabIndex: number, tabPane?: string) => void}[];
-    defaultActiveTab: number;
-    sliderRef : RefObject<HTMLDivElement>;
-    slideToTab: (ref: any) => void;
+  defaultActiveTab?: number
+  children: React.ReactNode
+	center?:boolean
 }
 
-const TabCommon = ({ tabs, defaultActiveTab, sliderRef, slideToTab } : TabCommonProps) => {
+const TabCommon = ({
+  defaultActiveTab = 0,
+  children,
+	center
+}: TabCommonProps) => {
+  const [active, setActive] = useState(0)
+  const slider = useRef<HTMLDivElement>(null)
+  const headerRef = useRef<HTMLUListElement>(null)
+  useEffect(() => {
+    setActive(defaultActiveTab)
+  }, [])
 
-    useEffect(() => {
-        slideToTab(tabs[defaultActiveTab].ref);
-    }, [])
+  useEffect(() => {
+    slide(active)
+  }, [active])
 
-    return (
-        <ul className={s.tabCommon}>
-            {
-                tabs.map((tab) => {
-                    return (
-                        <li key={tab.tabName} ref={tab.ref}>
-                            <TabItem onClick={tab.onClick} active={tab.active}>{tab.tabName}</TabItem>
-                        </li>
-                    )
-                })
-            }
-    
-            <div ref={sliderRef} className={s.slider}></div>
+  function slide(index: number) {
+    const active = headerRef.current?.children
+      .item(index)
+      ?.getBoundingClientRect()
+    const current = slider.current
+    if (current && active) {
+      let width = active.width - 24 <= 0 ? 24 : active.width - 24
+      let left = active.left 
+      current.style.width = width.toString() + 'px'
+      current.style.left = left.toString() + 'px'
+    }
+  }
+  const onTabClick = (index: number) => {
+    setActive(index)
+  }
+  return (
+    <section className={s.tabWapper}>
+      <div className={s.tabHeader}>
+        <ul className={classNames(s.tabList,{[s.center]:center})} ref={headerRef}>
+          {Children.map(children, (tab, index) => {
+            let item = tab as ReactElement<PropsWithChildren<TabPaneProps>>
+            return (
+              <li key={item.props.tabName}>
+                <TabItem
+                  active={active === index}
+                  onClick={onTabClick}
+                  tabIndex={index}
+                >
+                  {item.props.tabName}
+                </TabItem>
+              </li>
+            )
+          })}
         </ul>
-    )
+        <div ref={slider} className={s.slider}></div>
+      </div>
+      <div className={s.tabBody}>
+				{Children.map(children, (tab, index) => {
+					let item = tab as ReactElement<PropsWithChildren<TabPaneProps>>
+					return cloneElement(item, { active:index===active });
+				})
+			}</div>
+    </section>
+  )
 }
 
-export default TabCommon;
+export default TabCommon

src/components/common/TabCommon/components/TabItem/TabItem.module.scss

@@ -1,22 +1,14 @@
-@import '../../../../styles/utilities';
+@import '../../../../../styles/utilities';
 
 .tabItem {
-    margin-right: 4.8rem;
-    padding-top: 1.6rem;
-    padding-bottom: 1.6rem;
-
+    margin-right:2.4rem;
+    padding: 0.8rem 0;
+    min-width: 2.4rem;
     &:hover {
         @apply cursor-pointer;
     }
-}
-
-.tabItemActive {
-    @apply font-bold;
-    margin-right: 4.8rem;
-    padding-top: 1.6rem;
-    padding-bottom: 1.6rem;
-
-    &:hover {
-        @apply cursor-pointer;
+    &.tabItemActive {
+        @apply font-bold;
     }
 }
+

src/components/common/TabCommon/components/TabItem/TabItem.tsx

@@ -1,19 +1,32 @@
-import React from "react"
+import classNames from 'classnames'
+import React, { RefObject, useRef } from 'react'
 import s from './TabItem.module.scss'
 
 interface TabItemProps {
-    active: boolean;
-    children: string;
-    onClick: (tabIndex: number, tabPane: string) => void;
+  active: boolean
+  children: string
+  onClick?: (tabIndex: number) => void
+  tabIndex: number
 }
 
-const TabItem = ({ active = false, children, onClick } : TabItemProps) => {
-
-    return (
-        <span onClick={onClick} className={active ? s.tabItemActive : s.tabItem} >
-            {children}
-        </span>
-    )
+const TabItem = ({
+  active = false,
+  children,
+  onClick,
+  tabIndex,
+}: TabItemProps) => {
+  const handleClick = () => {
+    onClick && onClick(tabIndex)
+  }
+  return (
+    <span
+      onClick={handleClick}
+      // className={active ? s.tabItemActive : s.tabItem}
+      className={classNames(s.tabItem, {[s.tabItemActive]:active})}
+    >
+      {children}
+    </span>
+  )
 }
 
-export default TabItem;
+export default TabItem

src/components/common/TabCommon/components/TabPane/TabPane.module.scss

@@ -1,20 +1,20 @@
-@import '../../../../../../styles/utilities';
-
+@import "../../../../../styles/utilities";
 .tabPane {
     @apply hidden;
-    animation-duration: 0.6s;
-    animation-name: appear;
-    @keyframes appear {
-        from {
-            margin-left: 100%;
-            width: 200%;
-        }
+    transition: all 0.6s;
+    // animation-duration: 0.6s;
+    // animation-name: appear;
+    // @keyframes appear {
+    //     from {
+    //         margin-left: 100%;
+    //         width: 200%;
+    //     }
         
-        to {
-            margin-left: 0%;
-            width: 100%;
-        }
-    }
+    //     to {
+    //         margin-left: 0%;
+    //         width: 100%;
+    //     }
+    // }
     
 
     &.active {

src/components/common/TabCommon/components/TabPane/TabPane.tsx

@@ -2,15 +2,16 @@ import classNames from "classnames"
 import React from "react"
 import s from './TabPane.module.scss'
 
-interface TabPaneProps {
-    active: string;
+export interface TabPaneProps {
+    active: boolean;
     children?: React.ReactNode;
+    tabName: string
 }
 
-const TabPane = ({ active="", children } : TabPaneProps) => {
+const TabPane = ({ active, children } : TabPaneProps) => {
     return (
         <section className={classNames(s.tabPane, {
-            [s[active]] : active
+            [s.active] : active
         })}>
             {children}
         </section>