Update catalog scrolling

This commit is contained in:
Bill 2022-08-18 00:00:24 -04:00
parent 9440f28a9a
commit dd728d2401
5 changed files with 36 additions and 10 deletions

View File

@ -1,5 +1,5 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { FC } from 'react'; import { FC, useRef } from 'react';
import { ICatalogNode } from '../../../../api'; import { ICatalogNode } from '../../../../api';
import { Base, LayoutGridItem, Text } from '../../../../common'; import { Base, LayoutGridItem, Text } from '../../../../common';
import { useCatalog } from '../../../../hooks'; import { useCatalog } from '../../../../hooks';
@ -16,10 +16,18 @@ export const CatalogNavigationItemView: FC<CatalogNavigationItemViewProps> = pro
{ {
const { node = null, child = false } = props; const { node = null, child = false } = props;
const { activateNode = null } = useCatalog(); const { activateNode = null } = useCatalog();
const elementRef = useRef<HTMLDivElement>();
const selectNode = () =>
{
if(node.isBranch && !node.isActive) elementRef?.current?.scrollIntoView();
activateNode(node);
}
return ( return (
<Base className="nitro-catalog-navigation-section"> <Base innerRef={ elementRef } className="nitro-catalog-navigation-section">
<LayoutGridItem gap={ 1 } column={ false } itemActive={ node.isActive } onClick={ event => activateNode(node) } className={ child ? 'inset' : '' }> <LayoutGridItem gap={ 1 } column={ false } itemActive={ node.isActive } onClick={ selectNode } className={ child ? 'inset' : '' }>
<CatalogIconView icon={ node.iconId } /> <CatalogIconView icon={ node.iconId } />
<Text grow truncate>{ node.localization }</Text> <Text grow truncate>{ node.localization }</Text>
{ node.isBranch && { node.isBranch &&

View File

@ -20,7 +20,7 @@ export const CatalogNavigationView: FC<CatalogNavigationViewProps> = props =>
<> <>
<CatalogSearchView /> <CatalogSearchView />
<Column fullHeight className="nitro-catalog-navigation-grid-container rounded p-1" overflow="hidden"> <Column fullHeight className="nitro-catalog-navigation-grid-container rounded p-1" overflow="hidden">
<AutoGrid gap={ 1 } columnCount={ 1 }> <AutoGrid id="nitro-catalog-main-navigation" gap={ 1 } columnCount={ 1 }>
{ searchResult && (searchResult.filteredNodes.length > 0) && searchResult.filteredNodes.map((n, index) => { searchResult && (searchResult.filteredNodes.length > 0) && searchResult.filteredNodes.map((n, index) =>
{ {
return <CatalogNavigationItemView key={ index } node={ n } />; return <CatalogNavigationItemView key={ index } node={ n } />;

View File

@ -1,4 +1,4 @@
import { FC } from 'react'; import { FC, useEffect, useRef } from 'react';
import { AutoGrid, AutoGridProps, LayoutGridItem } from '../../../../../common'; import { AutoGrid, AutoGridProps, LayoutGridItem } from '../../../../../common';
import { useCatalog } from '../../../../../hooks'; import { useCatalog } from '../../../../../hooks';
@ -11,11 +11,17 @@ export const CatalogBundleGridWidgetView: FC<CatalogBundleGridWidgetViewProps> =
{ {
const { columnCount = 5, children = null, ...rest } = props; const { columnCount = 5, children = null, ...rest } = props;
const { currentOffer = null } = useCatalog(); const { currentOffer = null } = useCatalog();
const elementRef = useRef<HTMLDivElement>();
useEffect(() =>
{
if(elementRef && elementRef.current) elementRef.current.scrollTop = 0;
}, [ currentOffer ]);
if(!currentOffer) return null; if(!currentOffer) return null;
return ( return (
<AutoGrid columnCount={ 5 } { ...rest }> <AutoGrid innerRef={ elementRef } columnCount={ 5 } { ...rest }>
{ currentOffer.products && (currentOffer.products.length > 0) && currentOffer.products.map((product, index) => <LayoutGridItem key={ index } itemImage={ product.getIconUrl() } itemCount={ product.productCount } />) } { currentOffer.products && (currentOffer.products.length > 0) && currentOffer.products.map((product, index) => <LayoutGridItem key={ index } itemImage={ product.getIconUrl() } itemCount={ product.productCount } />) }
{ children } { children }
</AutoGrid> </AutoGrid>

View File

@ -1,4 +1,4 @@
import { FC } from 'react'; import { FC, useEffect, useRef } from 'react';
import { IPurchasableOffer, ProductTypeEnum } from '../../../../../api'; import { IPurchasableOffer, ProductTypeEnum } from '../../../../../api';
import { AutoGrid, AutoGridProps } from '../../../../../common'; import { AutoGrid, AutoGridProps } from '../../../../../common';
import { useCatalog } from '../../../../../hooks'; import { useCatalog } from '../../../../../hooks';
@ -13,6 +13,12 @@ export const CatalogItemGridWidgetView: FC<CatalogItemGridWidgetViewProps> = pro
{ {
const { columnCount = 5, children = null, ...rest } = props; const { columnCount = 5, children = null, ...rest } = props;
const { currentOffer = null, setCurrentOffer = null, currentPage = null, setPurchaseOptions = null } = useCatalog(); const { currentOffer = null, setCurrentOffer = null, currentPage = null, setPurchaseOptions = null } = useCatalog();
const elementRef = useRef<HTMLDivElement>();
useEffect(() =>
{
if(elementRef && elementRef.current) elementRef.current.scrollTop = 0;
}, [ currentPage ]);
if(!currentPage) return null; if(!currentPage) return null;
@ -38,7 +44,7 @@ export const CatalogItemGridWidgetView: FC<CatalogItemGridWidgetViewProps> = pro
} }
return ( return (
<AutoGrid columnCount={ columnCount } { ...rest }> <AutoGrid innerRef={ elementRef } columnCount={ columnCount } { ...rest }>
{ currentPage.offers && (currentPage.offers.length > 0) && currentPage.offers.map((offer, index) => <CatalogGridOfferView key={ index } itemActive={ (currentOffer && (currentOffer.offerId === offer.offerId)) } offer={ offer } selectOffer={ selectOffer } />) } { currentPage.offers && (currentPage.offers.length > 0) && currentPage.offers.map((offer, index) => <CatalogGridOfferView key={ index } itemActive={ (currentOffer && (currentOffer.offerId === offer.offerId)) } offer={ offer } selectOffer={ selectOffer } />) }
{ children } { children }
</AutoGrid> </AutoGrid>

View File

@ -1,4 +1,4 @@
import { FC, useEffect, useState } from 'react'; import { FC, useEffect, useRef, useState } from 'react';
import { IPurchasableOffer, LocalizeText, Offer, ProductTypeEnum } from '../../../../../api'; import { IPurchasableOffer, LocalizeText, Offer, ProductTypeEnum } from '../../../../../api';
import { AutoGrid, AutoGridProps, Button, ButtonGroup } from '../../../../../common'; import { AutoGrid, AutoGridProps, Button, ButtonGroup } from '../../../../../common';
import { useCatalog } from '../../../../../hooks'; import { useCatalog } from '../../../../../hooks';
@ -18,6 +18,7 @@ export const CatalogSpacesWidgetView: FC<CatalogSpacesWidgetViewProps> = props =
const [ selectedGroupIndex, setSelectedGroupIndex ] = useState(-1); const [ selectedGroupIndex, setSelectedGroupIndex ] = useState(-1);
const [ selectedOfferForGroup, setSelectedOfferForGroup ] = useState<IPurchasableOffer[]>(null); const [ selectedOfferForGroup, setSelectedOfferForGroup ] = useState<IPurchasableOffer[]>(null);
const { currentPage = null, currentOffer = null, setCurrentOffer = null, setPurchaseOptions = null } = useCatalog(); const { currentPage = null, currentOffer = null, setCurrentOffer = null, setPurchaseOptions = null } = useCatalog();
const elementRef = useRef<HTMLDivElement>();
const setSelectedOffer = (offer: IPurchasableOffer) => const setSelectedOffer = (offer: IPurchasableOffer) =>
{ {
@ -91,6 +92,11 @@ export const CatalogSpacesWidgetView: FC<CatalogSpacesWidgetViewProps> = props =
}); });
}, [ currentOffer, selectedGroupIndex, selectedOfferForGroup, setPurchaseOptions ]); }, [ currentOffer, selectedGroupIndex, selectedOfferForGroup, setPurchaseOptions ]);
useEffect(() =>
{
if(elementRef && elementRef.current) elementRef.current.scrollTop = 0;
}, [ selectedGroupIndex ]);
if(!groupedOffers || (selectedGroupIndex === -1)) return null; if(!groupedOffers || (selectedGroupIndex === -1)) return null;
const offers = groupedOffers[selectedGroupIndex]; const offers = groupedOffers[selectedGroupIndex];
@ -100,7 +106,7 @@ export const CatalogSpacesWidgetView: FC<CatalogSpacesWidgetViewProps> = props =
<ButtonGroup> <ButtonGroup>
{ SPACES_GROUP_NAMES.map((name, index) => <Button key={ index } active={ (selectedGroupIndex === index) } onClick={ event => setSelectedGroupIndex(index) }>{ LocalizeText(`catalog.spaces.tab.${ name }`) }</Button>) } { SPACES_GROUP_NAMES.map((name, index) => <Button key={ index } active={ (selectedGroupIndex === index) } onClick={ event => setSelectedGroupIndex(index) }>{ LocalizeText(`catalog.spaces.tab.${ name }`) }</Button>) }
</ButtonGroup> </ButtonGroup>
<AutoGrid columnCount={ columnCount } { ...rest }> <AutoGrid innerRef={ elementRef } columnCount={ columnCount } { ...rest }>
{ offers && (offers.length > 0) && offers.map((offer, index) => <CatalogGridOfferView key={ index } itemActive={ (currentOffer && (currentOffer === offer)) } offer={ offer } selectOffer={ offer => setSelectedOffer(offer) } />) } { offers && (offers.length > 0) && offers.map((offer, index) => <CatalogGridOfferView key={ index } itemActive={ (currentOffer && (currentOffer === offer)) } offer={ offer } selectOffer={ offer => setSelectedOffer(offer) } />) }
{ children } { children }
</AutoGrid> </AutoGrid>