This commit is contained in:
sonnguyenkieio 2021-09-07 15:35:46 +07:00
parent db1efeada2
commit 88fc92fa4f
6 changed files with 36 additions and 75 deletions

2
.gitignore vendored
View File

@ -35,3 +35,5 @@ yarn-error.log*
# vercel
.vercel
.eslintrc

3
next-env.d.ts vendored
View File

@ -1,3 +1,6 @@
/// <reference types="next" />
/// <reference types="next/types/global" />
/// <reference types="next/image-types/global" />
// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.

View File

@ -4,17 +4,8 @@ import { AccountNavigation, DeliveryItem, AccountPage } from 'src/components/mod
export default function Home() {
const crumbs = [
{link: "/", name: "Home"},
{link: "/blogs", name: "Blog"},
{link: "/product-list", name: "Product List"},
{link: "/product-detail", name: "Product Detail"},
];
return (
<>
<BreadcrumbCommon crumbs={crumbs} showHomePage={true} />
<AccountPage />

View File

@ -1,73 +1,34 @@
import React, { useState, RefObject, useEffect, useRef } from "react"
import React, { RefObject, useEffect } from "react"
import s from './TabCommon.module.scss'
import TabItem from './TabItem/TabItem'
interface TabCommonProps {
changeTabPane: (target:string) => void;
tabs: {ref:RefObject<HTMLLIElement>, tabName: string, active: boolean, onClick: (tabIndex: number, tabPane: string) => void}[];
defaultActiveTab: number;
sliderRef : RefObject<HTMLDivElement>;
slideToTab: (ref: any) => void;
}
const TabCommon = ({ changeTabPane } : 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)
changeTabPane("waiting")
setItem2Active(unActive)
setItem3Active(unActive)
slide(item1)
}
function toggleItem2():void {
setItem2Active(active)
changeTabPane("delivering")
setItem1Active(unActive)
setItem3Active(unActive)
slide(item2)
}
function toggleItem3():void {
setItem3Active(active)
changeTabPane("delivered")
setItem1Active(unActive)
setItem2Active(unActive)
slide(item3)
}
const TabCommon = ({ tabs, defaultActiveTab, sliderRef, slideToTab } : TabCommonProps) => {
useEffect(() => {
slide(item1);
slideToTab(tabs[defaultActiveTab].ref);
}, [])
return (
<ul className={s.tabCommon}>
<li ref={item1}>
<TabItem onClick={toggleItem1} active={item1Active}>Wait for Comfirmation</TabItem>
{
tabs.map((tab) => {
return (
<li key={tab.tabName} ref={tab.ref}>
<TabItem onClick={tab.onClick} active={tab.active}>{tab.tabName}</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>
)
})
}
<div ref={sliderRef} className={s.slider}></div>
</ul>
)
}

View File

@ -5,9 +5,16 @@
padding-top: 1.6rem;
padding-bottom: 1.6rem;
&.active {
@apply font-bold;
&:hover {
@apply cursor-pointer;
}
}
.tabItemActive {
@apply font-bold;
margin-right: 4.8rem;
padding-top: 1.6rem;
padding-bottom: 1.6rem;
&:hover {
@apply cursor-pointer;

View File

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