feat: ModalCommon

:%s
This commit is contained in:
unknown
2021-08-27 11:57:18 +07:00
parent f612256f8c
commit c27fbef46b
8 changed files with 147 additions and 1 deletions

View File

@@ -0,0 +1,40 @@
import React, { useRef } from 'react'
import { Close } from 'src/components/icons'
import { useOnClickOutside } from 'src/utils/useClickOutSide'
import s from "./ModalCommon.module.scss"
interface Props {
onClose: () => void
visible: boolean
children:React.ReactNode
}
const ModalCommon = ({ onClose, visible,children }: Props) => {
const modalRef = useRef<HTMLDivElement>(null)
const clickOutSide = () => {
onClose && onClose()
}
useOnClickOutside(modalRef, clickOutSide)
return (
<>
{visible && (
<div
className={s.background}
>
<div className={s.warpper}>
<div
className={s.modal}
ref={modalRef}
>
<div className={s.close} onClick={clickOutSide}>
<Close/>
</div>
{children}
</div>
</div>
</div>
)}
</>
)
}
export default ModalCommon