130 lines
3.4 KiB
JavaScript
130 lines
3.4 KiB
JavaScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { __ } from '@wordpress/i18n';
|
|
import { useEffect, useState } 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 { withSelect } from '@wordpress/data';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import { addHistoryListener, getMatchingItem } from '../../utils';
|
|
import { NAVIGATION_STORE_NAME } from '../../store';
|
|
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 dashboardUrl =
|
|
window.wcNavigation && window.wcNavigation.dashboardUrl;
|
|
|
|
const categories = menuItems.filter( ( item ) => item.isCategory );
|
|
categories.push( {
|
|
capability: 'manage_woocommerce',
|
|
id: 'woocommerce',
|
|
isCategory: true,
|
|
menuId: 'primary',
|
|
migrate: true,
|
|
order: 10,
|
|
parent: '',
|
|
title: 'WooCommerce',
|
|
} );
|
|
|
|
const [ activeItem, setActiveItem ] = useState( 'woocommerce-home' );
|
|
const [ activeLevel, setActiveLevel ] = useState( 'woocommerce' );
|
|
|
|
useEffect( () => {
|
|
const initialMatchedItem = getMatchingItem( menuItems );
|
|
setActiveItem( initialMatchedItem );
|
|
setActiveLevel( initialMatchedItem.parent );
|
|
|
|
const removeListener = addHistoryListener( () => {
|
|
setTimeout( () => {
|
|
const matchedItem = getMatchingItem( menuItems );
|
|
if ( matchedItem ) {
|
|
setActiveItem( matchedItem );
|
|
}
|
|
}, 0 );
|
|
} );
|
|
|
|
return removeListener;
|
|
}, [ menuItems ] );
|
|
|
|
return (
|
|
<div className="woocommerce-navigation">
|
|
<Header />
|
|
<Navigation
|
|
activeItem={ activeItem ? activeItem.id : null }
|
|
activeMenu={ activeLevel }
|
|
onActivateMenu={ setActiveLevel }
|
|
>
|
|
{ activeLevel === 'woocommerce' && dashboardUrl && (
|
|
<NavigationBackButton
|
|
className="woocommerce-navigation__back-to-dashboard"
|
|
href={ dashboardUrl }
|
|
backButtonLabel={ __(
|
|
'WordPress Dashboard',
|
|
'woocommerce-navigation'
|
|
) }
|
|
></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>
|
|
) ) }
|
|
</Navigation>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default compose(
|
|
withSelect( ( select ) => {
|
|
const { getActiveItem, getMenuItems } = select( NAVIGATION_STORE_NAME );
|
|
|
|
return {
|
|
activeItem: getActiveItem(),
|
|
menuItems: getMenuItems(),
|
|
};
|
|
} )
|
|
)( Container );
|