58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
"use client"
|
|
|
|
import { usePathname, useRouter, useSearchParams } from "next/navigation"
|
|
import React, { Children, cloneElement, useEffect, useState } from "react"
|
|
|
|
import SidePeek from "@/components/TempDesignSystem/SidePeek"
|
|
import { SidePeekContentKey } from "@/components/TempDesignSystem/SidePeek/types"
|
|
|
|
export default function SidePeekContainer({
|
|
children,
|
|
}: React.PropsWithChildren) {
|
|
const router = useRouter()
|
|
const pathname = usePathname()
|
|
const searchParams = useSearchParams()
|
|
const [activeSidePeek, setActiveSidePeek] =
|
|
useState<SidePeekContentKey | null>(() => {
|
|
const sidePeekParam = searchParams.get(
|
|
"sidepeek"
|
|
) as SidePeekContentKey | null
|
|
return sidePeekParam || null
|
|
})
|
|
|
|
useEffect(() => {
|
|
const sidePeekParam = searchParams.get(
|
|
"sidepeek"
|
|
) as SidePeekContentKey | null
|
|
if (sidePeekParam !== activeSidePeek) {
|
|
setActiveSidePeek(sidePeekParam)
|
|
}
|
|
}, [searchParams, activeSidePeek])
|
|
|
|
function handleClose(isOpen: boolean) {
|
|
if (!isOpen) {
|
|
setActiveSidePeek(null)
|
|
|
|
const nextSearchParams = new URLSearchParams(searchParams.toString())
|
|
nextSearchParams.delete("sidepeek")
|
|
|
|
router.push(`${pathname}?${nextSearchParams}`, { scroll: false })
|
|
}
|
|
}
|
|
const childrenWithIsActive = Children.map(children, (child) => {
|
|
if (!React.isValidElement(child)) {
|
|
return child
|
|
}
|
|
return cloneElement(child as React.ReactElement, {
|
|
isActive:
|
|
(child.props.contentKey as SidePeekContentKey) === activeSidePeek,
|
|
})
|
|
})
|
|
|
|
return (
|
|
<SidePeek activeContent={activeSidePeek} onClose={handleClose}>
|
|
{childrenWithIsActive}
|
|
</SidePeek>
|
|
)
|
|
}
|