2020-10-13 01:40:53 +00:00
|
|
|
/**
|
|
|
|
* External dependencies
|
|
|
|
*/
|
|
|
|
import { __ } from '@wordpress/i18n';
|
2020-11-12 17:10:42 +00:00
|
|
|
import { useEffect, useMemo, useState, useRef } from '@wordpress/element';
|
2020-10-13 01:40:53 +00:00
|
|
|
import { compose } from '@wordpress/compose';
|
|
|
|
import {
|
|
|
|
__experimentalNavigation as Navigation,
|
|
|
|
__experimentalNavigationBackButton as NavigationBackButton,
|
|
|
|
__experimentalNavigationMenu as NavigationMenu,
|
|
|
|
__experimentalNavigationGroup as NavigationGroup,
|
|
|
|
} from '@wordpress/components';
|
2020-10-21 17:02:45 +00:00
|
|
|
import { getAdminLink } from '@woocommerce/wc-admin-settings';
|
|
|
|
import { NAVIGATION_STORE_NAME } from '@woocommerce/data';
|
2020-10-13 01:40:53 +00:00
|
|
|
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' );
|
|
|
|
}, [] );
|
|
|
|
|
2020-10-21 17:02:45 +00:00
|
|
|
const dashboardUrl = getAdminLink( '' );
|
2020-10-13 01:40:53 +00:00
|
|
|
|
|
|
|
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 );
|
2020-11-11 18:16:12 +00:00
|
|
|
if ( initialMatchedItem ) {
|
|
|
|
setActiveItem( initialMatchedItem );
|
|
|
|
setActiveLevel( initialMatchedItem.parent );
|
|
|
|
}
|
2020-10-13 01:40:53 +00:00
|
|
|
|
|
|
|
const removeListener = addHistoryListener( () => {
|
|
|
|
setTimeout( () => {
|
|
|
|
const matchedItem = getMatchingItem( menuItems );
|
|
|
|
if ( matchedItem ) {
|
|
|
|
setActiveItem( matchedItem );
|
|
|
|
}
|
|
|
|
}, 0 );
|
|
|
|
} );
|
|
|
|
|
|
|
|
return removeListener;
|
|
|
|
}, [ menuItems ] );
|
|
|
|
|
2020-10-21 17:01:46 +00:00
|
|
|
const getMenuItemsByCategory = ( items ) => {
|
|
|
|
return items.reduce( ( acc, item ) => {
|
|
|
|
if ( ! acc[ item.parent ] ) {
|
2020-11-05 14:00:04 +00:00
|
|
|
acc[ item.parent ] = [ [], [], [] ];
|
|
|
|
}
|
|
|
|
let index = 0;
|
|
|
|
if ( item.menuId === 'secondary' ) {
|
|
|
|
index = 1;
|
|
|
|
} else if ( item.menuId === 'plugins' ) {
|
|
|
|
index = 2;
|
2020-10-21 17:01:46 +00:00
|
|
|
}
|
|
|
|
acc[ item.parent ][ index ].push( item );
|
|
|
|
return acc;
|
|
|
|
}, {} );
|
|
|
|
};
|
|
|
|
|
|
|
|
const categorizedItems = useMemo(
|
|
|
|
() => getMenuItemsByCategory( menuItems ),
|
|
|
|
[ menuItems ]
|
|
|
|
);
|
|
|
|
|
2020-11-12 17:10:42 +00:00
|
|
|
const navDomRef = useRef( null );
|
|
|
|
|
2020-10-13 01:40:53 +00:00
|
|
|
return (
|
|
|
|
<div className="woocommerce-navigation">
|
|
|
|
<Header />
|
2020-11-12 17:10:42 +00:00
|
|
|
<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;
|
|
|
|
}
|
2020-11-06 20:52:01 +00:00
|
|
|
|
2020-11-12 17:10:42 +00:00
|
|
|
setActiveLevel( ...args );
|
|
|
|
} }
|
|
|
|
>
|
|
|
|
{ activeLevel === 'woocommerce' && dashboardUrl && (
|
|
|
|
<NavigationBackButton
|
|
|
|
className="woocommerce-navigation__back-to-dashboard"
|
|
|
|
href={ dashboardUrl }
|
|
|
|
backButtonLabel={ __(
|
|
|
|
'WordPress Dashboard',
|
|
|
|
'woocommerce-navigation'
|
2020-10-21 17:01:46 +00:00
|
|
|
) }
|
2020-11-12 17:10:42 +00:00
|
|
|
></NavigationBackButton>
|
|
|
|
) }
|
|
|
|
{ categories.map( ( category ) => {
|
|
|
|
const [
|
|
|
|
primaryItems,
|
|
|
|
secondaryItems,
|
|
|
|
pluginItems,
|
|
|
|
] = categorizedItems[ category.id ] || [ [], [], [] ];
|
|
|
|
return (
|
|
|
|
<NavigationMenu
|
|
|
|
key={ category.id }
|
|
|
|
title={ category.title }
|
|
|
|
menu={ category.id }
|
|
|
|
parentMenu={ category.parent }
|
|
|
|
backButtonLabel={
|
|
|
|
category.backButtonLabel || null
|
|
|
|
}
|
|
|
|
>
|
|
|
|
{ !! primaryItems.length && (
|
|
|
|
<NavigationGroup>
|
|
|
|
{ primaryItems.map( ( item ) => (
|
|
|
|
<Item
|
|
|
|
key={ item.id }
|
|
|
|
item={ item }
|
|
|
|
/>
|
|
|
|
) ) }
|
|
|
|
</NavigationGroup>
|
|
|
|
) }
|
|
|
|
{ !! pluginItems.length && (
|
|
|
|
<NavigationGroup
|
|
|
|
title={
|
|
|
|
category.id === 'woocommerce'
|
|
|
|
? __(
|
|
|
|
'Extensions',
|
|
|
|
'woocommerce-admin'
|
|
|
|
)
|
|
|
|
: null
|
|
|
|
}
|
|
|
|
>
|
|
|
|
{ pluginItems.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>
|
2020-10-13 01:40:53 +00:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default compose(
|
|
|
|
withSelect( ( select ) => {
|
|
|
|
const { getActiveItem, getMenuItems } = select( NAVIGATION_STORE_NAME );
|
|
|
|
|
|
|
|
return {
|
|
|
|
activeItem: getActiveItem(),
|
|
|
|
menuItems: getMenuItems(),
|
|
|
|
};
|
|
|
|
} )
|
|
|
|
)( Container );
|