mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 04:14:18 +00:00
update
This commit is contained in:
parent
db1efeada2
commit
88fc92fa4f
2
.gitignore
vendored
2
.gitignore
vendored
@ -35,3 +35,5 @@ yarn-error.log*
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
.eslintrc
|
||||
|
3
next-env.d.ts
vendored
3
next-env.d.ts
vendored
@ -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.
|
||||
|
@ -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 />
|
||||
|
||||
|
||||
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -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>
|
||||
)
|
||||
|
Loading…
x
Reference in New Issue
Block a user