feat(kanban): implement portal for delete confirmation modal

- Introduced a Portal component to render the delete confirmation modal outside the main DOM hierarchy, improving UI responsiveness.
- Updated the delete confirmation modal to utilize the Portal for better overlay management and user experience.
- Enhanced styling and interaction handling for the modal, ensuring it aligns with the application's theme and accessibility standards.
This commit is contained in:
shancds
2025-07-11 10:37:53 +05:30
parent 635b5ce8e1
commit 87675cc73c

View File

@@ -24,7 +24,13 @@ import {
fetchEnhancedKanbanGroups,
IGroupBy,
} from '@/features/enhanced-kanban/enhanced-kanban.slice';
import { createPortal } from 'react-dom';
// Simple Portal component
const Portal: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const portalRoot = document.getElementById('portal-root') || document.body;
return createPortal(children, portalRoot);
};
interface KanbanGroupProps {
group: ITaskListGroup;
@@ -414,8 +420,15 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
{/* Simple Delete Confirmation */}
{showDeleteConfirm && (
<div className="fixed inset-0 bg-black bg-opacity-25 flex items-center justify-center z-50">
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 max-w-sm w-full mx-4">
<Portal>
<div
className="fixed inset-0 bg-black bg-opacity-25 flex items-center justify-center z-[99999]"
onClick={() => setShowDeleteConfirm(false)}
>
<div
className="bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 max-w-sm w-full mx-4"
onClick={e => e.stopPropagation()}
>
<div className="p-4">
<div className="flex items-center gap-3 mb-3">
<div className="flex-shrink-0">
@@ -454,6 +467,7 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
</div>
</div>
</div>
</Portal>
)}
<div className="enhanced-kanban-group-tasks">
{/* Create card at top */}