88 lines
3.0 KiB
TypeScript
88 lines
3.0 KiB
TypeScript
import Modal from "@mui/material/Modal";
|
|
import { useCallback, useEffect, useState } from "react";
|
|
import { motion } from "framer-motion";
|
|
import { IoClose } from "react-icons/io5";
|
|
import Button from "../../components/button";
|
|
import { MuiModalProps } from "../../types/props";
|
|
|
|
export default function MuiModal({
|
|
isOpenModal,
|
|
setIsOpenModal,
|
|
title,
|
|
nameService,
|
|
submitText,
|
|
submitOnClick,
|
|
disabled,
|
|
handleCloseCustom,
|
|
aboveSubmit,
|
|
children,
|
|
}: MuiModalProps) {
|
|
const [open, setOpen] = useState(false);
|
|
const handleOpen = () => setOpen(true);
|
|
const handleClose = useCallback(() => {
|
|
setOpen(false);
|
|
setIsOpenModal(false);
|
|
}, [setIsOpenModal]);
|
|
|
|
useEffect(() => {
|
|
if (isOpenModal) handleOpen();
|
|
else handleClose();
|
|
}, [isOpenModal, handleClose]);
|
|
|
|
return (
|
|
<div>
|
|
<Modal
|
|
open={open}
|
|
onClose={handleCloseCustom || handleClose}
|
|
aria-labelledby="modal-modal-title"
|
|
aria-describedby="modal-modal-description"
|
|
className="relative w-full h-full flex justify-center items-center !border-none !outline-none !ring-0 overflow-y-auto p-4"
|
|
>
|
|
<motion.div
|
|
className="max-md:w-72 md:w-80 lg:w-96 max-h-[90vh] shadow-xl shadow-[rgb(20,20,20)] bg-[rgb(20,20,20,0.99)] rounded-lg p-4 relative flex flex-col justify-between items-center gap-4 my-auto overflow-y-auto"
|
|
initial={{ y: "-100vw", opacity: 0 }}
|
|
animate={{ y: 0, opacity: 1 }}
|
|
transition={{ duration: 0.5 }}
|
|
>
|
|
<motion.div className="w-full h-full flex gap-2 justify-between">
|
|
<h1 className="text-lg md:text-xl font-bold">
|
|
{title && title}
|
|
{nameService && (
|
|
<span className="text-secondTheme"> {nameService} </span>
|
|
)}
|
|
</h1>
|
|
<button onClick={handleCloseCustom || handleClose}>
|
|
<IoClose className="w-7 h-7" />
|
|
</button>
|
|
</motion.div>
|
|
<motion.div className="w-full flex-1 flex flex-col justify-between text-center items-center overflow-y-auto">
|
|
{children}
|
|
</motion.div>
|
|
<motion.div className="w-full h-full flex flex-col gap-2">
|
|
{aboveSubmit && (
|
|
<div className="w-full flex justify-center">{aboveSubmit}</div>
|
|
)}
|
|
<motion.div
|
|
className={`w-full h-full flex ${
|
|
submitText ? "justify-end" : "justify-center"
|
|
} items-center gap-2 md:gap-3 text-lg md:text-xl`}
|
|
>
|
|
<Button onClick={handleCloseCustom || handleClose}> بستن </Button>
|
|
{submitText && (
|
|
<Button
|
|
extra={`${disabled && "!bg-slate-300"}`}
|
|
onClick={submitOnClick}
|
|
disabled={disabled}
|
|
>
|
|
{" "}
|
|
{submitText}{" "}
|
|
</Button>
|
|
)}
|
|
</motion.div>
|
|
</motion.div>
|
|
</motion.div>
|
|
</Modal>
|
|
</div>
|
|
);
|
|
}
|