139 lines
3.2 KiB
JavaScript
139 lines
3.2 KiB
JavaScript
import { useRecoilState } from 'recoil'
|
|
import { contextPopupState, popupState } from '@/store/popupAtom'
|
|
|
|
/**
|
|
* 팝업 관리 훅
|
|
* @returns
|
|
*/
|
|
export function usePopup() {
|
|
const [popup, setPopup] = useRecoilState(popupState)
|
|
const [contextMenuPopup, setContextMenuPopup] = useRecoilState(contextPopupState)
|
|
|
|
/**
|
|
* 팝업 추가
|
|
* @param {*} id 팝업 아이디
|
|
* @param {*} depth 팝업 깊이
|
|
* @param {*} component 팝업 컴포넌트
|
|
* @param {*} isConfig 팝업 타입
|
|
*/
|
|
const addPopup = (id, depth, component, isConfig = false) => {
|
|
setPopup({
|
|
config: isConfig ? [...filterDepth(depth, isConfig), { id, depth, component, isConfig }] : [...popup.config],
|
|
other: !isConfig ? [...filterDepth(depth, isConfig), { id, depth, component, isConfig }] : [...popup.other],
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 팝업 닫기
|
|
* @param {*} id 팝업 아이디
|
|
* @param {*} isConfig 팝업 타입
|
|
*/
|
|
const closePopup = (id, isConfig = false) => {
|
|
if (contextMenuPopup) setContextMenuPopup(null)
|
|
if (isConfig) {
|
|
setPopup({
|
|
config: [...filterChildrenPopup(id, isConfig).filter((child) => child.id !== id)],
|
|
other: popup.other,
|
|
})
|
|
} else {
|
|
setPopup({
|
|
config: popup.config,
|
|
other: [...filterChildrenPopup(id, isConfig).filter((child) => child.id !== id)],
|
|
})
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 팝업 필터
|
|
* @param {*} depth 팝업 깊이
|
|
*/
|
|
const filterPopup = (depth) => {
|
|
setPopup({
|
|
config: [...filterDepth(depth)],
|
|
other: [],
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 팝업 자식 필터
|
|
* @param {*} id 팝업 아이디
|
|
* @param {*} isConfig 팝업 타입
|
|
* @returns
|
|
*/
|
|
const filterChildrenPopup = (id, isConfig) => {
|
|
let target = []
|
|
if (isConfig) {
|
|
target = popup?.config.filter((child) => child.id === id)
|
|
} else {
|
|
target = popup?.other.filter((child) => child.id === id)
|
|
}
|
|
|
|
if (target.length !== 0) {
|
|
if (isConfig) {
|
|
return popup?.config.filter((child) => child.depth <= target[0].depth)
|
|
} else {
|
|
return popup?.other.filter((child) => child.depth <= target[0].depth)
|
|
}
|
|
} else {
|
|
if (isConfig) {
|
|
return popup.config
|
|
} else {
|
|
return popup.other
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 팝업 여러개 닫기
|
|
* @param {*} ids 팝업 아이디 배열
|
|
*/
|
|
const closePopups = (ids) => {
|
|
setPopup({
|
|
config: [...popup?.config.filter((child) => !ids.includes(child.id))],
|
|
other: [...popup?.other.filter((child) => !ids.includes(child.id))],
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 팝업 전체 닫기
|
|
*/
|
|
const closeAll = () => {
|
|
setPopup({
|
|
other: [],
|
|
config: [],
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 이전 팝업 닫기
|
|
*/
|
|
const closePrevPopup = () => {
|
|
setPopup({
|
|
config: [...popup?.slice(popup?.length - 1)],
|
|
other: [],
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 팝업 깊이 필터
|
|
* @param {*} depth 팝업 깊이
|
|
* @param {*} isConfig 팝업 타입
|
|
* @returns
|
|
*/
|
|
const filterDepth = (depth, isConfig) => {
|
|
if (isConfig) {
|
|
return [...popup?.config.filter((child) => child.depth < depth)]
|
|
} else {
|
|
return [...popup?.other.filter((child) => child.depth < depth)]
|
|
}
|
|
}
|
|
|
|
return {
|
|
popup,
|
|
addPopup,
|
|
closePopup,
|
|
closePopups,
|
|
closeAll,
|
|
}
|
|
}
|