alex/nova-betterchat
1
0
Fork 0
mirror of https://github.com/NovaOSS/nova-betterchat.git synced 2024-11-25 22:43:59 +01:00
Code Issues Packages Projects Releases Wiki Activity

improve popupmodal

Browse source
This commit is contained in:
Jing Hua 2023-03-05 12:26:47 +08:00
parent 990a83fea8
commit 3eac852d17
2 changed files with 55 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
index.html
View file

@ -23,6 +23,7 @@
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<div id="modal-root"></div>
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
</body> </body>
</html> </html>

96
src/components/PopupModal/PopupModal.tsx
View file

@ -1,4 +1,5 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom';
import CrossIcon2 from '@icon/CrossIcon2'; import CrossIcon2 from '@icon/CrossIcon2';
@ -17,58 +18,69 @@ const PopupModal = ({
handleClose?: () => void; handleClose?: () => void;
children?: React.ReactElement; children?: React.ReactElement;
}) => { }) => {
const modalRoot = document.getElementById('modal-root');
const _handleClose = () => { const _handleClose = () => {
handleClose && handleClose(); handleClose && handleClose();
setIsModalOpen(false); setIsModalOpen(false);
}; };
return ( if (modalRoot) {
<div className='fixed top-0 left-0 z-[999] w-full p-4 overflow-x-hidden overflow-y-auto h-full flex justify-center items-center bg-gray-800/90'> return ReactDOM.createPortal(
<div className='relative w-full h-full max-w-2xl md:h-auto'> <div className='fixed top-0 left-0 z-[999] w-full p-4 overflow-x-hidden overflow-y-auto h-full flex justify-center items-center'>
<div className='relative bg-white rounded-lg shadow dark:bg-gray-700'> <div className='relative z-2 max-w-2xl md:h-auto flex justify-center items-center'>
<div className='flex items-center justify-between p-4 border-b rounded-t dark:border-gray-600'> <div className='relative bg-white rounded-lg shadow dark:bg-gray-700'>
<h3 className='ml-2 text-lg font-semibold text-gray-900 dark:text-white'> <div className='flex items-center justify-between p-4 border-b rounded-t dark:border-gray-600'>
{title} <h3 className='ml-2 text-lg font-semibold text-gray-900 dark:text-white'>
</h3> {title}
<button </h3>
type='button' <button
className='text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white' type='button'
onClick={_handleClose} className='text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white'
> onClick={_handleClose}
<CrossIcon2 /> >
</button> <CrossIcon2 />
</div> </button>
{message && (
<div className='p-6 border-b border-gray-200 dark:border-gray-600'>
<div className='min-w-fit text-gray-900 dark:text-gray-300 text-sm mt-4'>
{message}
</div>
</div> </div>
)}
{children} {message && (
<div className='p-6 border-b border-gray-200 dark:border-gray-600'>
<div className='min-w-fit text-gray-900 dark:text-gray-300 text-sm mt-4'>
{message}
</div>
</div>
)}
<div className='flex items-center justify-center p-6 gap-4'> {children}
<button
type='button' <div className='flex items-center justify-center p-6 gap-4'>
className='btn btn-primary' <button
onClick={handleConfirm} type='button'
> className='btn btn-primary'
Confirm onClick={handleConfirm}
</button> >
<button Confirm
type='button' </button>
className='btn btn-neutral' <button
onClick={_handleClose} type='button'
> className='btn btn-neutral'
Cancel onClick={_handleClose}
</button> >
Cancel
</button>
</div>
</div> </div>
</div> </div>
</div> <div
</div> className='bg-gray-800/90 absolute top-0 left-0 h-full w-full z-[-1]'
); onClick={_handleClose}
/>
</div>,
modalRoot
);
} else {
return null;
}
}; };
export default PopupModal; export default PopupModal;