miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 6 Packages Projects Releases Wiki Activity

fix(nx-dev): fix tabs logic (#28470)

Browse Source 
Fix tabs being hidden when selecting a tab in a different tab group
This commit is contained in:
Isaac Mann 2024-10-16 10:42:43 -04:00 committed by GitHub
parent 5dbea2e16f
commit 494715929d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 16 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
nx-dev/ui-markdoc/src/lib/tags/tabs.component.tsx
View File

@ -23,8 +23,11 @@ export function Tabs({
const [currentTab, setCurrentTab] = useState<string>(labels[0]); const [currentTab, setCurrentTab] = useState<string>(labels[0]);
useEffect(() => { useEffect(() => {
const handleTabSelectedEvent = (defaultTab?: string) => { const handleTabSelectedEvent = (
tabSelectedEvent: CustomEvent<{ defaultTab?: string }>
) => {
const selectedTab = localStorage.getItem(SELECTED_TAB_KEY); const selectedTab = localStorage.getItem(SELECTED_TAB_KEY);
const defaultTab = tabSelectedEvent.detail.defaultTab;
if (selectedTab && labels.includes(selectedTab)) { if (selectedTab && labels.includes(selectedTab)) {
setCurrentTab(selectedTab); setCurrentTab(selectedTab);
} else if (defaultTab) { } else if (defaultTab) {
@ -32,15 +35,23 @@ export function Tabs({
} }
}; };
handleTabSelectedEvent(labels[0]); handleTabSelectedEvent(
window.addEventListener(TAB_SELECTED_EVENT, handleTabSelectedEvent); new CustomEvent(TAB_SELECTED_EVENT, { detail: { defaultTab: labels[0] } })
);
window.addEventListener(
TAB_SELECTED_EVENT,
handleTabSelectedEvent as EventListener
);
return () => return () =>
window.removeEventListener(TAB_SELECTED_EVENT, handleTabSelectedEvent); window.removeEventListener(
TAB_SELECTED_EVENT,
handleTabSelectedEvent as EventListener
);
}, [labels]); }, [labels]);
const handleTabClick = (label: string) => { const handleTabClick = (label: string) => {
localStorage.setItem(SELECTED_TAB_KEY, label); localStorage.setItem(SELECTED_TAB_KEY, label);
window.dispatchEvent(new Event(TAB_SELECTED_EVENT)); window.dispatchEvent(new CustomEvent(TAB_SELECTED_EVENT, { detail: {} }));
setCurrentTab(label); setCurrentTab(label);
}; };