Fix:Adding Indexing to the Catalog Tabs

This commit is contained in:
duckietm 2024-03-19 09:39:01 +01:00
parent 304e945c13
commit e4658143fa

View File

@ -72,24 +72,28 @@ export const CatalogView: FC<{}> = props =>
<NitroCardView uniqueKey="catalog" className="nitro-catalog" style={ GetConfiguration('catalog.headers') ? { width: 710 } : {} }> <NitroCardView uniqueKey="catalog" className="nitro-catalog" style={ GetConfiguration('catalog.headers') ? { width: 710 } : {} }>
<NitroCardHeaderView headerText={ LocalizeText('catalog.title') } onCloseClick={ event => setIsVisible(false) } /> <NitroCardHeaderView headerText={ LocalizeText('catalog.title') } onCloseClick={ event => setIsVisible(false) } />
<NitroCardTabsView> <NitroCardTabsView>
{ rootNode && (rootNode.children.length > 0) && rootNode.children.map(child => {rootNode &&
{ rootNode.children.length > 0 &&
if(!child.isVisible) return null; rootNode.children.map((child, index) => {
if (!child.isVisible) return null;
// Generate a unique key using the index of the map function
const uniqueKey = `${child.pageId}-${index}`;
return ( return (
<NitroCardTabsItemView key={ child.pageId } isActive={ child.isActive } onClick={ event => <NitroCardTabsItemView
{ key={uniqueKey}
if(searchResult) setSearchResult(null); isActive={child.isActive}
onClick={(event) => {
if (searchResult) setSearchResult(null);
activateNode(child); activateNode(child);
} } > }}
<Flex gap={ GetConfiguration('catalog.tab.icons') ? 1 : 0 } alignItems="center"> >
{ GetConfiguration('catalog.tab.icons') && <CatalogIconView icon={ child.iconId } /> } <Flex gap={GetConfiguration('catalog.tab.icons') ? 1 : 0} alignItems="center">
{ child.localization } {GetConfiguration('catalog.tab.icons') && <CatalogIconView icon={child.iconId} />}
{child.localization}
</Flex> </Flex>
</NitroCardTabsItemView> </NitroCardTabsItemView>
); );
}) } })}
</NitroCardTabsView> </NitroCardTabsView>
<NitroCardContentView> <NitroCardContentView>
<Grid> <Grid>