alex/nova-betterchat
1
0
Fork 0
mirror of https://github.com/NovaOSS/nova-betterchat.git synced 2024-11-25 17:33: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>
<body>
<div id="root"></div>
<div id="modal-root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

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

@ -1,4 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import CrossIcon2 from '@icon/CrossIcon2';
@ -17,58 +18,69 @@ const PopupModal = ({
handleClose?: () => void;
children?: React.ReactElement;
}) => {
const modalRoot = document.getElementById('modal-root');
const _handleClose = () => {
handleClose && handleClose();
setIsModalOpen(false);
};
return (
<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'>
<div className='relative w-full h-full max-w-2xl md:h-auto'>
<div className='relative bg-white rounded-lg shadow dark:bg-gray-700'>
<div className='flex items-center justify-between p-4 border-b rounded-t dark:border-gray-600'>
<h3 className='ml-2 text-lg font-semibold text-gray-900 dark:text-white'>
{title}
</h3>
<button
type='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'
onClick={_handleClose}
>
<CrossIcon2 />
</button>
</div>
{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>
if (modalRoot) {
return ReactDOM.createPortal(
<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 z-2 max-w-2xl md:h-auto flex justify-center items-center'>
<div className='relative bg-white rounded-lg shadow dark:bg-gray-700'>
<div className='flex items-center justify-between p-4 border-b rounded-t dark:border-gray-600'>
<h3 className='ml-2 text-lg font-semibold text-gray-900 dark:text-white'>
{title}
</h3>
<button
type='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'
onClick={_handleClose}
>
<CrossIcon2 />
</button>
</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'>
<button
type='button'
className='btn btn-primary'
onClick={handleConfirm}
>
Confirm
</button>
<button
type='button'
className='btn btn-neutral'
onClick={_handleClose}
>
Cancel
</button>
{children}
<div className='flex items-center justify-center p-6 gap-4'>
<button
type='button'
className='btn btn-primary'
onClick={handleConfirm}
>
Confirm
</button>
<button
type='button'
className='btn btn-neutral'
onClick={_handleClose}
>
Cancel
</button>
</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;