mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 12:24:18 +00:00
✨ feat: change active tab from query in page account
:%s
This commit is contained in:
parent
9a385a3f14
commit
24bacba766
@ -3,17 +3,40 @@ import s from './AccountNavigation.module.scss'
|
|||||||
|
|
||||||
import AccountNavigationItem from './components/AccountNavigationItem/AccountNavigationItem'
|
import AccountNavigationItem from './components/AccountNavigationItem/AccountNavigationItem'
|
||||||
import {TabPaneProps} from '../../../common/TabCommon/components/TabPane/TabPane'
|
import {TabPaneProps} from '../../../common/TabCommon/components/TabPane/TabPane'
|
||||||
|
import { ACCOUNT_TAB, QUERY_KEY } from "src/utils/constanst.utils"
|
||||||
|
import { useRouter } from "next/router"
|
||||||
|
|
||||||
interface AccountNavigationProps {
|
interface AccountNavigationProps {
|
||||||
defaultActiveIndex: number;
|
defaultActiveIndex: number;
|
||||||
children: React.ReactNode
|
children: React.ReactNode
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const getTabIndex = (tab?: string): number => {
|
||||||
|
switch (tab) {
|
||||||
|
case ACCOUNT_TAB.CUSTOMER_INFO:
|
||||||
|
return 0;
|
||||||
|
case ACCOUNT_TAB.ORDER:
|
||||||
|
return 1;
|
||||||
|
case ACCOUNT_TAB.FAVOURITE:
|
||||||
|
return 2;
|
||||||
|
default:
|
||||||
|
return 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const AccountNavigation = ({ defaultActiveIndex, children } : AccountNavigationProps) => {
|
const AccountNavigation = ({ defaultActiveIndex, children } : AccountNavigationProps) => {
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
const [active, setActive] = useState(defaultActiveIndex)
|
const [active, setActive] = useState(defaultActiveIndex)
|
||||||
const sliderRef = useRef<HTMLDivElement>(null);
|
const sliderRef = useRef<HTMLDivElement>(null);
|
||||||
const headerRef = useRef<HTMLUListElement>(null)
|
const headerRef = useRef<HTMLUListElement>(null)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const query = router.query[QUERY_KEY.TAB] as string
|
||||||
|
const index = getTabIndex(query)
|
||||||
|
setActive(index)
|
||||||
|
}, [router.query[QUERY_KEY.TAB]])
|
||||||
|
|
||||||
const onTabClick = (index: number) => {
|
const onTabClick = (index: number) => {
|
||||||
setActive(index)
|
setActive(index)
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user