47 lines
1.3 KiB
JavaScript
47 lines
1.3 KiB
JavaScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { NavigationItem } from '@woocommerce/experimental';
|
|
import { recordEvent } from '@woocommerce/tracks';
|
|
import { WooNavigationItem, useNavSlot } from '@woocommerce/navigation';
|
|
|
|
const Item = ( { item } ) => {
|
|
const slot = useNavSlot( 'woocommerce_navigation_' + item.id );
|
|
const hasFills = Boolean( slot.fills && slot.fills.length );
|
|
|
|
const trackClick = ( id ) => {
|
|
recordEvent( 'navigation_click', {
|
|
menu_item: id,
|
|
} );
|
|
};
|
|
|
|
// Disable reason: The div wrapping the slot item is used for tracking purposes
|
|
// and should not be a tabbable element.
|
|
/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
|
|
|
|
// Only render a slot if a coresponding Fill exists and the item is not a category
|
|
if ( hasFills && ! item.isCategory ) {
|
|
return (
|
|
<NavigationItem key={ item.id } item={ item.id }>
|
|
<div onClick={ () => trackClick( item.id ) }>
|
|
<WooNavigationItem.Slot name={ item.id } />
|
|
</div>
|
|
</NavigationItem>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<NavigationItem
|
|
key={ item.id }
|
|
item={ item.id }
|
|
title={ item.title }
|
|
href={ item.url }
|
|
navigateToMenu={ ! item.url && item.id }
|
|
onClick={ () => trackClick( item.id ) }
|
|
/>
|
|
);
|
|
/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
|
|
};
|
|
|
|
export default Item;
|