59 lines
1.4 KiB
JavaScript
59 lines
1.4 KiB
JavaScript
import { useRecoilState } from 'recoil'
|
|
import { popupState } from '@/store/popupAtom'
|
|
import { useEffect } from 'react'
|
|
|
|
export function usePopup() {
|
|
const [popup, setPopup] = useRecoilState(popupState)
|
|
|
|
useEffect(() => {
|
|
console.log(popup)
|
|
}, [popup])
|
|
|
|
const addPopup = (id, depth, component) => {
|
|
setPopup({ children: [...filterDepth(depth), { id: id, depth: depth, component: component }] })
|
|
}
|
|
|
|
const closePopup = (id) => {
|
|
console.log(id)
|
|
setPopup({ children: [...filterChildrenPopup(id).filter((child) => child.id !== id)] })
|
|
}
|
|
|
|
const filterPopup = (depth) => {
|
|
setPopup({ children: [...filterDepth(depth)] })
|
|
}
|
|
|
|
const filterChildrenPopup = (id) => {
|
|
const target = popup.children.filter((child) => child.id === id)
|
|
if (target.length !== 0) {
|
|
return popup.children.filter((child) => child.depth <= target[0].depth)
|
|
}
|
|
|
|
return popup.children
|
|
}
|
|
|
|
const closePopups = (ids) => {
|
|
setPopup({ children: [...popup.children.filter((child) => !ids.includes(child.id))] })
|
|
}
|
|
|
|
const closeAll = () => {
|
|
setPopup({ children: [] })
|
|
}
|
|
|
|
const closePrevPopup = () => {
|
|
setPopup({ children: [...popup.children.slice(popup.children.length - 1)] })
|
|
}
|
|
|
|
const filterDepth = (depth) => {
|
|
return [...popup.children.filter((child) => child.depth !== depth)]
|
|
}
|
|
|
|
return {
|
|
popup,
|
|
setPopup,
|
|
addPopup,
|
|
closePopup,
|
|
closePopups,
|
|
closeAll,
|
|
}
|
|
}
|