63 lines
1.4 KiB
TypeScript
63 lines
1.4 KiB
TypeScript
|
import { createContext, useContext, useState, ReactNode, useCallback } from 'react';
|
||
|
|
import { useEffect } from 'react';
|
||
|
|
|
||
|
|
interface ModalContextType {
|
||
|
|
isOpen: boolean;
|
||
|
|
modalType: string;
|
||
|
|
modalData: any;
|
||
|
|
openModal: (modalType: string, modalData?: any) => void;
|
||
|
|
closeModal: () => void;
|
||
|
|
closeLoader: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
const ModalContext = createContext<ModalContextType>({
|
||
|
|
isOpen: false,
|
||
|
|
modalType: '',
|
||
|
|
modalData: null,
|
||
|
|
openModal: () => {},
|
||
|
|
closeModal: () => {},
|
||
|
|
closeLoader: () => {},
|
||
|
|
});
|
||
|
|
|
||
|
|
export const useModalContext = () => useContext(ModalContext);
|
||
|
|
|
||
|
|
export function ModalProvider({ children }: { children: ReactNode }) {
|
||
|
|
const [isOpen, setOpen] = useState(false);
|
||
|
|
const [modalType, setType] = useState('');
|
||
|
|
const [modalData, setData] = useState(null);
|
||
|
|
|
||
|
|
const openModal = (type: string, data?: any) => {
|
||
|
|
setOpen(true);
|
||
|
|
setType(type);
|
||
|
|
setData(data);
|
||
|
|
};
|
||
|
|
|
||
|
|
const closeModal = useCallback(() => {
|
||
|
|
setOpen(false);
|
||
|
|
setType('');
|
||
|
|
setData(null);
|
||
|
|
|
||
|
|
window.location.reload()
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const closeLoader = useCallback(() => {
|
||
|
|
setOpen(false);
|
||
|
|
setType('');
|
||
|
|
setData(null);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (isOpen) {
|
||
|
|
document.body.style.overflow = 'hidden';
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
document.body.style.overflow = 'auto';
|
||
|
|
}
|
||
|
|
}, [isOpen])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<ModalContext.Provider value={{ isOpen, modalType, modalData, openModal, closeModal, closeLoader }}>
|
||
|
|
{children}
|
||
|
|
</ModalContext.Provider>
|
||
|
|
);
|
||
|
|
}
|