Added tab visibility context and provider for dynamic tab management

- Introduced TabVisibilityProvider component
- Created TabContent for conditional rendering
- Added context and hooks for tab visibility
- Updated DocumentManager dependencies
- Integrated provider in App component
This commit is contained in:
yangdx
2025-03-13 15:15:42 +08:00
parent d28a94d55d
commit 3b6fabca0e
7 changed files with 145 additions and 31 deletions

View File

@@ -0,0 +1,39 @@
import React, { useEffect } from 'react';
import { useTabVisibility } from '@/contexts/useTabVisibility';
interface TabContentProps {
tabId: string;
children: React.ReactNode;
className?: string;
}
/**
* TabContent component that manages visibility based on tab selection
* Works with the TabVisibilityContext to show/hide content based on active tab
*/
const TabContent: React.FC<TabContentProps> = ({ tabId, children, className = '' }) => {
const { isTabVisible, setTabVisibility } = useTabVisibility();
const isVisible = isTabVisible(tabId);
// Register this tab with the context when mounted
useEffect(() => {
setTabVisibility(tabId, true);
// Cleanup when unmounted
return () => {
setTabVisibility(tabId, false);
};
}, [tabId, setTabVisibility]);
if (!isVisible) {
return null;
}
return (
<div className={className}>
{children}
</div>
);
};
export default TabContent;