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

136 lines
3.4 KiB
JavaScript

/**
* External dependencies
*/
import { useEffect, useMemo, useState, useRef } from '@wordpress/element';
import classnames from 'classnames';
import { compose } from '@wordpress/compose';
import { Navigation } from '@woocommerce/experimental';
import { NAVIGATION_STORE_NAME, useUser } from '@woocommerce/data';
import { recordEvent } from '@woocommerce/tracks';
import { withSelect } from '@wordpress/data';
/**
* Internal dependencies
*/
import {
addHistoryListener,
getMappedItemsCategories,
getMatchingItem,
} from '../../utils';
import Header from '../header';
import { PrimaryMenu } from './primary-menu';
import { SecondaryMenu } from './secondary-menu';
const Container = ( { menuItems } ) => {
useEffect( () => {
// Collapse the original WP Menu.
document.documentElement.classList.remove( 'wp-toolbar' );
document.body.classList.add( 'has-woocommerce-navigation' );
const adminMenu = document.getElementById( 'adminmenumain' );
if ( ! adminMenu ) {
return;
}
adminMenu.classList.add( 'folded' );
}, [] );
const [ activeItem, setActiveItem ] = useState( 'woocommerce-home' );
const [ activeLevel, setActiveLevel ] = useState( 'woocommerce' );
useEffect( () => {
const initialMatchedItem = getMatchingItem( menuItems );
if ( initialMatchedItem && activeItem !== initialMatchedItem ) {
setActiveItem( initialMatchedItem );
setActiveLevel( initialMatchedItem.parent );
}
const removeListener = addHistoryListener( () => {
setTimeout( () => {
const matchedItem = getMatchingItem( menuItems );
if ( matchedItem ) {
setActiveItem( matchedItem );
}
}, 0 );
} );
return removeListener;
}, [ menuItems ] );
const { currentUserCan } = useUser();
const { categories, items } = useMemo(
() => getMappedItemsCategories( menuItems, currentUserCan ),
[ menuItems, currentUserCan ]
);
const navDomRef = useRef( null );
const onBackClick = ( id ) => {
recordEvent( 'navigation_back_click', {
category: id,
} );
};
const isRoot = activeLevel === 'woocommerce';
const classes = classnames( 'woocommerce-navigation', {
'is-root': isRoot,
} );
return (
<div className={ classes }>
<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 );
} }
>
{ Object.values( categories ).map( ( category ) => {
const categoryItems = items[ category.id ];
return (
!! categoryItems && [
<PrimaryMenu
key={ category.id }
category={ category }
onBackClick={ onBackClick }
primaryItems={ [
...categoryItems.primary,
...categoryItems.favorites,
] }
pluginItems={ categoryItems.plugins }
/>,
<SecondaryMenu
key={ `secondary/${ category.id }` }
category={ category }
onBackClick={ onBackClick }
items={ categoryItems.secondary }
/>,
]
);
} ) }
</Navigation>
</div>
</div>
);
};
export default compose(
withSelect( ( select ) => {
const { getActiveItem, getMenuItems } = select( NAVIGATION_STORE_NAME );
return {
activeItem: getActiveItem(),
menuItems: getMenuItems(),
};
} )
)( Container );