Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Only show menu group if items exist (https://github.com/woocommerce/woocommerce-admin/pull/5403) 

* Only show menu group if items exist

* Improve performance for menu item filtering
This commit is contained in:
Joshua T Flowers 2020-10-21 13:01:46 -04:00 committed by GitHub
parent 0d264cf22e
commit 81a8a28b20
1 changed files with 46 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
plugins/woocommerce-admin/client/navigation/components/container/index.js
View File

@ -2,7 +2,7 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { useEffect, useState } from '@wordpress/element';
import { useEffect, useMemo, useState } from '@wordpress/element';
import { compose } from '@wordpress/compose';
import {
__experimentalNavigation as Navigation,
@ -62,6 +62,22 @@ const Container = ( { menuItems } ) => {
return removeListener;
}, [ menuItems ] );
const getMenuItemsByCategory = ( items ) => {
return items.reduce( ( acc, item ) => {
if ( ! acc[ item.parent ] ) {
acc[ item.parent ] = [ [], [] ];
}
const index = item.menuId !== 'secondary' ? 0 : 1;
acc[ item.parent ][ index ].push( item );
return acc;
}, {} );
};
const categorizedItems = useMemo(
() => getMenuItemsByCategory( menuItems ),
[ menuItems ]
);
return (
<div className="woocommerce-navigation">
<Header />
@ -80,38 +96,35 @@ const Container = ( { menuItems } ) => {
) }
></NavigationBackButton>
) }
{ categories.map( ( category ) => (
<NavigationMenu
key={ category.id }
title={ category.title }
menu={ category.id }
parentMenu={ category.parent }
backButtonLabel={ category.backButtonLabel }
>
<NavigationGroup>
{ menuItems
.filter(
( item ) =>
item.parent === category.id &&
item.menuId !== 'secondary'
)
.map( ( item ) => (
<Item key={ item.id } item={ item } />
) ) }
</NavigationGroup>
<NavigationGroup>
{ menuItems
.filter(
( item ) =>
item.parent === category.id &&
item.menuId === 'secondary'
)
.map( ( item ) => (
<Item key={ item.id } item={ item } />
) ) }
</NavigationGroup>
</NavigationMenu>
) ) }
{ categories.map( ( category ) => {
const [ primaryItems, secondaryItems ] = categorizedItems[
category.id
];
return (
<NavigationMenu
key={ category.id }
title={ category.title }
menu={ category.id }
parentMenu={ category.parent }
backButtonLabel={ category.backButtonLabel }
>
{ !! primaryItems.length && (
<NavigationGroup>
{ primaryItems.map( ( item ) => (
<Item key={ item.id } item={ item } />
) ) }
</NavigationGroup>
) }
{ !! secondaryItems.length && (
<NavigationGroup>
{ secondaryItems.map( ( item ) => (
<Item key={ item.id } item={ item } />
) ) }
</NavigationGroup>
) }
</NavigationMenu>
);
} ) }
</Navigation>
</div>
);