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 * External dependencies
*/ */
import { __ } from '@wordpress/i18n'; 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 { compose } from '@wordpress/compose';
import { import {
__experimentalNavigation as Navigation, __experimentalNavigation as Navigation,
@ -85,82 +85,93 @@ const Container = ( { menuItems } ) => {
[ menuItems ] [ menuItems ]
); );
const navDomRef = useRef( null );
return ( return (
<div className="woocommerce-navigation"> <div className="woocommerce-navigation">
<Header /> <Header />
<Navigation <div className="woocommerce-navigation__wrapper" ref={ navDomRef }>
activeItem={ activeItem ? activeItem.id : null } <Navigation
activeMenu={ activeLevel } activeItem={ activeItem ? activeItem.id : null }
onActivateMenu={ ( ...args ) => { activeMenu={ activeLevel }
const navDomRef = document.querySelector( onActivateMenu={ ( ...args ) => {
'.components-navigation' if ( navDomRef && navDomRef.current ) {
); navDomRef.current.scrollTop = 0;
}
if ( navDomRef ) { setActiveLevel( ...args );
navDomRef.scrollTop = 0; } }
} >
{ activeLevel === 'woocommerce' && dashboardUrl && (
setActiveLevel( ...args ); <NavigationBackButton
} } className="woocommerce-navigation__back-to-dashboard"
> href={ dashboardUrl }
{ activeLevel === 'woocommerce' && dashboardUrl && ( backButtonLabel={ __(
<NavigationBackButton 'WordPress Dashboard',
className="woocommerce-navigation__back-to-dashboard" 'woocommerce-navigation'
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>
) } ) }
{ !! pluginItems.length && ( ></NavigationBackButton>
<NavigationGroup ) }
title={ { categories.map( ( category ) => {
category.id === 'woocommerce' const [
? __( primaryItems,
'Extensions', secondaryItems,
'woocommerce-admin' pluginItems,
) ] = categorizedItems[ category.id ] || [ [], [], [] ];
: null return (
} <NavigationMenu
> key={ category.id }
{ pluginItems.map( ( item ) => ( title={ category.title }
<Item key={ item.id } item={ item } /> menu={ category.id }
) ) } parentMenu={ category.parent }
</NavigationGroup> backButtonLabel={
) } category.backButtonLabel || null
{ !! secondaryItems.length && ( }
<NavigationGroup> >
{ secondaryItems.map( ( item ) => ( { !! primaryItems.length && (
<Item key={ item.id } item={ item } /> <NavigationGroup>
) ) } { primaryItems.map( ( item ) => (
</NavigationGroup> <Item
) } key={ item.id }
</NavigationMenu> item={ item }
); />
} ) } ) ) }
</Navigation> </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> </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 z-index: 1100; //Must be greater than z-index on .woocommerce-layout__header
} }
.components-navigation { .woocommerce-navigation__wrapper {
overflow-y: auto; overflow-y: auto;
height: calc(100vh - #{$header-height}); height: calc(100vh - #{$header-height});
}
.components-navigation {
box-sizing: border-box; box-sizing: border-box;
} }