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

225 lines
5.6 KiB
JavaScript

/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { useEffect, useMemo, useState, useRef } from '@wordpress/element';
import { compose } from '@wordpress/compose';
import {
__experimentalNavigation as Navigation,
__experimentalNavigationBackButton as NavigationBackButton,
__experimentalNavigationMenu as NavigationMenu,
__experimentalNavigationGroup as NavigationGroup,
} from '@wordpress/components';
import { NAVIGATION_STORE_NAME } from '@woocommerce/data';
import { recordEvent } from '@woocommerce/tracks';
import { withSelect } from '@wordpress/data';
/**
* Internal dependencies
*/
import { addHistoryListener, getMatchingItem } from '../../utils';
import Header from '../header';
import Item from '../../components/Item';
const Container = ( { menuItems } ) => {
useEffect( () => {
// Collapse the original WP Menu.
const adminMenu = document.getElementById( 'adminmenumain' );
adminMenu.classList.add( 'folded' );
}, [] );
const { rootBackLabel, rootBackUrl } = window.wcNavigation;
const parentCategory = {
capability: 'manage_woocommerce',
id: 'woocommerce',
isCategory: true,
menuId: 'primary',
migrate: true,
order: 10,
parent: '',
title: 'WooCommerce',
};
const categoriesMap = menuItems.reduce(
( acc, item ) => {
if ( item.isCategory ) {
return { ...acc, [ item.id ]: item };
}
return acc;
},
{
woocommerce: parentCategory,
}
);
const categories = Object.values( categoriesMap );
const [ activeItem, setActiveItem ] = useState( 'woocommerce-home' );
const [ activeLevel, setActiveLevel ] = useState( 'woocommerce' );
useEffect( () => {
const initialMatchedItem = getMatchingItem( menuItems );
if ( initialMatchedItem ) {
setActiveItem( initialMatchedItem );
setActiveLevel( initialMatchedItem.parent );
}
const removeListener = addHistoryListener( () => {
setTimeout( () => {
const matchedItem = getMatchingItem( menuItems );
if ( matchedItem ) {
setActiveItem( matchedItem );
}
}, 0 );
} );
return removeListener;
}, [ menuItems ] );
const getMenuItemsByCategory = ( items ) => {
return items.reduce( ( acc, item ) => {
// Set up the category if it doesn't yet exist.
if ( ! acc[ item.parent ] ) {
acc[ item.parent ] = {};
}
// Check if parent category is in the same menu.
if (
item.parent !== 'woocommerce' &&
categoriesMap[ item.parent ] &&
categoriesMap[ item.parent ].menuId !== item.menuId
) {
return acc;
}
// Create the menu object if it doesn't exist in this category.
if ( ! acc[ item.parent ][ item.menuId ] ) {
acc[ item.parent ][ item.menuId ] = [];
}
acc[ item.parent ][ item.menuId ].push( item );
return acc;
}, {} );
};
const categorizedItems = useMemo(
() => getMenuItemsByCategory( menuItems ),
[ menuItems ]
);
const navDomRef = useRef( null );
const trackBackClick = ( id ) => {
recordEvent( 'navigation_back_click', {
category: id,
} );
};
const isRootBackVisible = activeLevel === 'woocommerce' && rootBackUrl;
return (
<div className="woocommerce-navigation">
<Header />
<div className="woocommerce-navigation__wrapper" ref={ navDomRef }>
<Navigation
activeItem={ activeItem ? activeItem.id : null }
activeMenu={ activeLevel }
onActivateMenu={ ( ...args ) => {
if ( navDomRef && navDomRef.current ) {
navDomRef.current.scrollTop = 0;
}
setActiveLevel( ...args );
} }
>
{ isRootBackVisible && (
<NavigationBackButton
className="woocommerce-navigation__back-to-dashboard"
href={ rootBackUrl }
backButtonLabel={ rootBackLabel }
onClick={ () => trackBackClick( 'woocommerce' ) }
></NavigationBackButton>
) }
{ categories.map( ( category ) => {
const {
primary: primaryItems,
secondary: secondaryItems,
plugins: pluginItems,
} = categorizedItems[ category.id ] || {};
return (
<NavigationMenu
key={ category.id }
title={ category.title }
menu={ category.id }
parentMenu={ category.parent }
backButtonLabel={
category.backButtonLabel || null
}
onBackButtonClick={
isRootBackVisible
? null
: () => trackBackClick( category.id )
}
>
{ !! primaryItems && (
<NavigationGroup>
{ primaryItems.map( ( item ) => (
<Item
key={ item.id }
item={ item }
/>
) ) }
</NavigationGroup>
) }
{ !! pluginItems && (
<NavigationGroup
title={
category.id === 'woocommerce'
? __(
'Extensions',
'woocommerce-admin'
)
: null
}
>
{ pluginItems.map( ( item ) => (
<Item
key={ item.id }
item={ item }
/>
) ) }
</NavigationGroup>
) }
{ !! secondaryItems && (
<NavigationGroup
onBackButtonClick={ () =>
trackBackClick( category.id )
}
>
{ secondaryItems.map( ( item ) => (
<Item
key={ item.id }
item={ item }
/>
) ) }
</NavigationGroup>
) }
</NavigationMenu>
);
} ) }
</Navigation>
</div>
</div>
);
};
export default compose(
withSelect( ( select ) => {
const { getActiveItem, getMenuItems } = select( NAVIGATION_STORE_NAME );
return {
activeItem: getActiveItem(),
menuItems: getMenuItems(),
};
} )
)( Container );