60 lines
1.2 KiB
JavaScript
60 lines
1.2 KiB
JavaScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { Component } from '@wordpress/element';
|
|
import { withSelect } from '@wordpress/data';
|
|
|
|
/**
|
|
* WooCommerce dependencies
|
|
*/
|
|
import { SETTINGS_STORE_NAME } from '@woocommerce/data';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import './style.scss';
|
|
|
|
class Navigation extends Component {
|
|
renderMenuItem( item, depth = 0 ) {
|
|
const { slug, title, url } = item;
|
|
|
|
return (
|
|
<li
|
|
key={ slug }
|
|
className={ `woocommerce-navigation__menu-item woocommerce-navigation__menu-item-depth-${ depth }` }
|
|
>
|
|
<a href={ url }>{ title }</a>
|
|
{ item.children && item.children.length && (
|
|
<ul className="woocommerce-navigation__submenu">
|
|
{ item.children.map( ( childItem ) => {
|
|
return this.renderMenuItem( childItem, depth + 1 );
|
|
} ) }
|
|
</ul>
|
|
) }
|
|
</li>
|
|
);
|
|
}
|
|
|
|
render() {
|
|
const { items } = this.props;
|
|
|
|
return (
|
|
<div className="woocommerce-navigation">
|
|
<ul className="woocommerce-navigation__menu">
|
|
{ items.map( ( item ) => {
|
|
return this.renderMenuItem( item );
|
|
} ) }
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default withSelect( ( select ) => {
|
|
const items = select( SETTINGS_STORE_NAME ).getSetting(
|
|
'wc_admin',
|
|
'wcNavigation'
|
|
);
|
|
return { items };
|
|
} )( Navigation );
|