model config click backdrop to confirm

This commit is contained in:
Jing Hua 2023-04-09 23:13:16 +08:00
parent 23628ae7a6
commit c8f77bd23a
2 changed files with 9 additions and 1 deletions

View file

@ -44,6 +44,7 @@ const ConfigMenu = ({
title={t('configuration') as string} title={t('configuration') as string}
setIsModalOpen={setIsModalOpen} setIsModalOpen={setIsModalOpen}
handleConfirm={handleConfirm} handleConfirm={handleConfirm}
handleClickBackdrop={handleConfirm}
> >
<div className='p-6 border-b border-gray-200 dark:border-gray-600'> <div className='p-6 border-b border-gray-200 dark:border-gray-600'>
<ModelSelector _model={_model} _setModel={_setModel} /> <ModelSelector _model={_model} _setModel={_setModel} />

View file

@ -10,6 +10,7 @@ const PopupModal = ({
setIsModalOpen, setIsModalOpen,
handleConfirm, handleConfirm,
handleClose, handleClose,
handleClickBackdrop,
cancelButton = true, cancelButton = true,
children, children,
}: { }: {
@ -18,6 +19,7 @@ const PopupModal = ({
setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>; setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
handleConfirm?: () => void; handleConfirm?: () => void;
handleClose?: () => void; handleClose?: () => void;
handleClickBackdrop?: () => void;
cancelButton?: boolean; cancelButton?: boolean;
children?: React.ReactElement; children?: React.ReactElement;
}) => { }) => {
@ -29,6 +31,11 @@ const PopupModal = ({
setIsModalOpen(false); setIsModalOpen(false);
}; };
const _handleBackdropClose = () => {
if (handleClickBackdrop) handleClickBackdrop();
else _handleClose();
};
if (modalRoot) { if (modalRoot) {
return ReactDOM.createPortal( 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='fixed top-0 left-0 z-[999] w-full p-4 overflow-x-hidden overflow-y-auto h-full flex justify-center items-center'>
@ -81,7 +88,7 @@ const PopupModal = ({
</div> </div>
<div <div
className='bg-gray-800/90 absolute top-0 left-0 h-full w-full z-[-1]' className='bg-gray-800/90 absolute top-0 left-0 h-full w-full z-[-1]'
onClick={_handleClose} onClick={_handleBackdropClose}
/> />
</div>, </div>,
modalRoot modalRoot