Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adding wrapper class around navigation to implement scroll styles/logic (https://github.com/woocommerce/woocommerce-admin/pull/5570)

This commit is contained in:
Joel Thiessen 2020-11-12 09:10:42 -08:00 committed by GitHub
parent aebd120a16
commit b8238d91dc
2 changed files with 87 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,7 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { useEffect, useMemo, useState } from '@wordpress/element';
import { useEffect, useMemo, useState, useRef } from '@wordpress/element';
import { compose } from '@wordpress/compose';
import {
__experimentalNavigation as Navigation,
@ -85,82 +85,93 @@ const Container = ( { menuItems } ) => {
[ menuItems ]
);
const navDomRef = useRef( null );
return (
<div className="woocommerce-navigation">
<Header />
<Navigation
activeItem={ activeItem ? activeItem.id : null }
activeMenu={ activeLevel }
onActivateMenu={ ( ...args ) => {
const navDomRef = document.querySelector(
'.components-navigation'
);
<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;
}
if ( navDomRef ) {
navDomRef.scrollTop = 0;
}
setActiveLevel( ...args );
} }
>
{ activeLevel === 'woocommerce' && dashboardUrl && (
<NavigationBackButton
className="woocommerce-navigation__back-to-dashboard"
href={ dashboardUrl }
backButtonLabel={ __(
'WordPress Dashboard',
'woocommerce-navigation'
) }
></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>
setActiveLevel( ...args );
} }
>
{ activeLevel === 'woocommerce' && dashboardUrl && (
<NavigationBackButton
className="woocommerce-navigation__back-to-dashboard"
href={ dashboardUrl }
backButtonLabel={ __(
'WordPress Dashboard',
'woocommerce-navigation'
) }
{ !! 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>
></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>
</div>
);
};

5
plugins/woocommerce-admin/client/navigation/style.scss
View File

@ -22,9 +22,12 @@
z-index: 1100; //Must be greater than z-index on .woocommerce-layout__header
}
.components-navigation {
.woocommerce-navigation__wrapper {
overflow-y: auto;
height: calc(100vh - #{$header-height});
}
.components-navigation {
box-sizing: border-box;
}