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 );
|