From 07e088e268abcd9fa6922a86d4fea5c5694bf4c7 Mon Sep 17 00:00:00 2001
From: sonnguyenkieio <sonnguyen@kie.io>
Date: Mon, 6 Sep 2021 14:02:33 +0700
Subject: [PATCH] :sparkles: feat: Tab Common

---
 .../common/TabCommon/TabCommon.module.scss    | 27 ++++++----
 src/components/common/TabCommon/TabCommon.tsx | 50 +++++++++++++++----
 .../TabCommon/TabItem/TabItem.module.scss     |  1 -
 .../common/TabCommon/TabItem/TabItem.tsx      |  9 ++--
 4 files changed, 61 insertions(+), 26 deletions(-)

diff --git a/src/components/common/TabCommon/TabCommon.module.scss b/src/components/common/TabCommon/TabCommon.module.scss
index 9e5fbc1df..f794a841a 100644
--- a/src/components/common/TabCommon/TabCommon.module.scss
+++ b/src/components/common/TabCommon/TabCommon.module.scss
@@ -1,15 +1,22 @@
 @import '../../../styles/utilities';
 
-.tabCommonOutSide {
-    @apply spacing-horizontal;
-    
-    .tabCommon {
-        @apply flex;
-        position: relative;
-        border-bottom: 2px solid #FBFBFB;
-        padding-top: 1.6rem;
-        padding-bottom: 1.6rem;
-        width: 100%;
+.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;
     }
 }
 
diff --git a/src/components/common/TabCommon/TabCommon.tsx b/src/components/common/TabCommon/TabCommon.tsx
index d07cf06e8..67fe107a6 100644
--- a/src/components/common/TabCommon/TabCommon.tsx
+++ b/src/components/common/TabCommon/TabCommon.tsx
@@ -1,46 +1,74 @@
-import React, { useState } from "react"
+import React, { useState, RefObject, useEffect, useRef } from "react"
 import s from './TabCommon.module.scss'
 
 import TabItem from './TabItem/TabItem'
 
 interface TabCommonProps {
-
+    changeTab: (target:string) => void;
 }
 
-const TabCommon = ({ } : TabCommonProps) => {
+const TabCommon = ({ changeTab } : TabCommonProps) => {
     const active = "active", unActive = "";
-
     const [item1Active, setItem1Active] = useState(active);
     const [item2Active, setItem2Active] = useState(unActive);
     const [item3Active, setItem3Active] = useState(unActive);
 
+    const item1 = useRef<HTMLLIElement>(null);
+    const item2 = useRef<HTMLLIElement>(null);
+    const item3 = useRef<HTMLLIElement>(null);
+    const slider = useRef<HTMLDivElement>(null);
+
+    function slide(ref: RefObject<HTMLLIElement>) {
+        const width = ref.current.offsetWidth;
+        const left = ref.current.offsetLeft; 
+               
+        slider.current.style.width = (width-48).toString()+"px";
+        slider.current.style.left = left.toString()+"px";
+    }
+
     function toggleItem1():void {
         setItem1Active(active)
+        changeTab("waiting")
 
         setItem2Active(unActive)
         setItem3Active(unActive)
+        slide(item1)
     }
+
     function toggleItem2():void {
         setItem2Active(active)
+        changeTab("delivering")
 
         setItem1Active(unActive)
         setItem3Active(unActive)
+        slide(item2)
     }
     function toggleItem3():void {
         setItem3Active(active)
+        changeTab("delivered")
 
         setItem1Active(unActive)
         setItem2Active(unActive)
+        slide(item3)
     }
 
+    useEffect(() => {
+        slide(item1);
+    }, [])
+
     return (
-        <section className={s.tabCommonOutSide}>
-            <div className={s.tabCommon}>
-                <span onClick={toggleItem1}><TabItem active={item1Active}>Wait for Comfirmation</TabItem></span>
-                <span onClick={toggleItem2}><TabItem active={item2Active}>Delivering</TabItem></span>
-                <span onClick={toggleItem3}><TabItem active={item3Active}>Delivered</TabItem></span>
-            </div>
-        </section>
+        <ul className={s.tabCommon}>
+            <li ref={item1}>
+                <TabItem onClick={toggleItem1} active={item1Active}>Wait for Comfirmation</TabItem>
+            </li>
+            <li ref={item2}>
+                <TabItem onClick={toggleItem2} active={item2Active}>Delivering</TabItem>
+            </li>
+            <li ref={item3}>
+                <TabItem onClick={toggleItem3} active={item3Active}>Delivered</TabItem>
+            </li>
+            <div ref={slider} className={s.slider}></div>
+        </ul>
     )
 }
 
diff --git a/src/components/common/TabCommon/TabItem/TabItem.module.scss b/src/components/common/TabCommon/TabItem/TabItem.module.scss
index efb10f1f4..3d3b44604 100644
--- a/src/components/common/TabCommon/TabItem/TabItem.module.scss
+++ b/src/components/common/TabCommon/TabItem/TabItem.module.scss
@@ -7,7 +7,6 @@
 
     &.active {
         @apply font-bold;
-        border-bottom: 2px solid var(--primary);
     }
 
     &:hover {
diff --git a/src/components/common/TabCommon/TabItem/TabItem.tsx b/src/components/common/TabCommon/TabItem/TabItem.tsx
index a889ee68b..62de3c595 100644
--- a/src/components/common/TabCommon/TabItem/TabItem.tsx
+++ b/src/components/common/TabCommon/TabItem/TabItem.tsx
@@ -4,13 +4,14 @@ import s from './TabItem.module.scss'
 
 interface TabItemProps {
     active: string;
-    target?: string;
-    children?: string;
+    children: string;
+    onClick: () => void;
 }
 
-const TabItem = ({ active = "", children } : TabItemProps) => {
+const TabItem = ({ active = "", children, onClick } : TabItemProps) => {
+
     return (
-        <span className={classNames(s.tabItem, {
+        <span onClick={onClick} className={classNames(s.tabItem, {
             [s[active]]: active
         })}>
             {children}