nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-26 23:50:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

Catalog navigation scrolling changes

Browse Source
This commit is contained in:
Bill 2022-08-18 12:17:01 -04:00
parent 43f3f1895e
commit 1fafc9342a
1 changed files with 3 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/catalog/views/navigation/CatalogNavigationItemView.tsx
View File

@ -1,5 +1,5 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { FC, useRef } from 'react'; import { FC } 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,18 +16,10 @@ 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 innerRef={ elementRef } className="nitro-catalog-navigation-section"> <Base className="nitro-catalog-navigation-section">
<LayoutGridItem gap={ 1 } column={ false } itemActive={ node.isActive } onClick={ selectNode } className={ child ? 'inset' : '' }> <LayoutGridItem gap={ 1 } column={ false } itemActive={ node.isActive } onClick={ event => activateNode(node) } 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 &&