mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-10-23 11:23:05 +02:00
Clickable front page links
This commit is contained in:
Bill
parent
ddea5be9bc
commit
c572143268
@ -18,7 +18,7 @@ export const CatalogView: FC<CatalogViewProps> = props =>
|
||||
{
|
||||
const [ isVisible, setIsVisible ] = useState(false);
|
||||
const [ roomPreviewer, setRoomPreviewer ] = useState<RoomPreviewer>(null);
|
||||
const [ pendingPageId, setPendingPageId ] = useState(-1);
|
||||
const [ pendingPageLookup, setPendingPageLookup ] = useState<string>(null);
|
||||
const [ pendingTree, setPendingTree ] = useState<ICatalogPageData[]>(null);
|
||||
const [ catalogState, dispatchCatalogState ] = useReducer(CatalogReducer, initialCatalog);
|
||||
const [ currentTab, setCurrentTab ] = useState<ICatalogPageData>(null);
|
||||
@ -56,7 +56,7 @@ export const CatalogView: FC<CatalogViewProps> = props =>
|
||||
case 'open':
|
||||
if(parts.length > 2)
|
||||
{
|
||||
setPendingPageId(parseInt(parts[2]));
|
||||
setPendingPageLookup(parts[2]);
|
||||
}
|
||||
else
|
||||
{
|
||||
@ -80,7 +80,7 @@ export const CatalogView: FC<CatalogViewProps> = props =>
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
const loadCatalog = (((pendingPageId > -1) && !catalogState.root) || (isVisible && !catalogState.root));
|
||||
const loadCatalog = (((pendingPageLookup !== null) && !catalogState.root) || (isVisible && !catalogState.root));
|
||||
|
||||
if(loadCatalog)
|
||||
{
|
||||
@ -92,24 +92,23 @@ export const CatalogView: FC<CatalogViewProps> = props =>
|
||||
|
||||
if(catalogState.root)
|
||||
{
|
||||
if(!isVisible && (pendingPageId > -1))
|
||||
if(!isVisible && (pendingPageLookup !== null))
|
||||
{
|
||||
setIsVisible(true);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if(pendingPageId > -1)
|
||||
if(pendingPageLookup !== null)
|
||||
{
|
||||
const tree = BuildCatalogPageTree(catalogState.root, pendingPageId);
|
||||
const tree = BuildCatalogPageTree(catalogState.root, pendingPageLookup);
|
||||
|
||||
setCurrentTab(tree.shift());
|
||||
setPendingPageId(-1);
|
||||
setPendingPageLookup(null);
|
||||
setPendingTree(tree);
|
||||
}
|
||||
else
|
||||
{
|
||||
|
||||
setCurrentTab(prevValue =>
|
||||
{
|
||||
if(catalogState.root.children.length)
|
||||
@ -126,7 +125,7 @@ export const CatalogView: FC<CatalogViewProps> = props =>
|
||||
});
|
||||
}
|
||||
}
|
||||
}, [ isVisible, pendingPageId, catalogState.root, setCurrentTab ]);
|
||||
}, [ isVisible, pendingPageLookup, catalogState.root, setCurrentTab ]);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
|
||||
@ -150,13 +150,13 @@ export function GetPetAvailableColors(petIndex: number, palettes: SellablePetPal
|
||||
}
|
||||
}
|
||||
|
||||
export function GetCatalogPageTree(page: ICatalogPageData, targetPageId: number, tree: ICatalogPageData[])
|
||||
export function GetCatalogPageTreeByName(page: ICatalogPageData, lookup: string, tree: ICatalogPageData[])
|
||||
{
|
||||
if(page.pageId === targetPageId) return page;
|
||||
if(page.pageName === lookup) return page;
|
||||
|
||||
for(const pageData of page.children)
|
||||
{
|
||||
const foundPageData = GetCatalogPageTree(pageData, targetPageId, tree);
|
||||
const foundPageData = GetCatalogPageTreeByName(pageData, lookup, tree);
|
||||
|
||||
if(foundPageData)
|
||||
{
|
||||
@ -167,11 +167,35 @@ export function GetCatalogPageTree(page: ICatalogPageData, targetPageId: number,
|
||||
}
|
||||
}
|
||||
|
||||
export function BuildCatalogPageTree(page: ICatalogPageData, targetPageId: number)
|
||||
export function GetCatalogPageTreeById(page: ICatalogPageData, lookup: number, tree: ICatalogPageData[])
|
||||
{
|
||||
if(page.pageId === lookup) return page;
|
||||
|
||||
for(const pageData of page.children)
|
||||
{
|
||||
const foundPageData = GetCatalogPageTreeById(pageData, lookup, tree);
|
||||
|
||||
if(foundPageData)
|
||||
{
|
||||
tree.push(pageData);
|
||||
|
||||
return pageData;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function BuildCatalogPageTree(page: ICatalogPageData, lookup: string)
|
||||
{
|
||||
const pageTree: ICatalogPageData[] = [];
|
||||
|
||||
GetCatalogPageTree(page, targetPageId, pageTree);
|
||||
if(isNaN((lookup as unknown) as number))
|
||||
{
|
||||
GetCatalogPageTreeByName(page, lookup, pageTree);
|
||||
}
|
||||
else
|
||||
{
|
||||
GetCatalogPageTreeById(page, parseInt(lookup), pageTree);
|
||||
}
|
||||
|
||||
if(pageTree.length) pageTree.reverse();
|
||||
|
||||
|
||||
@ -1,56 +1,48 @@
|
||||
import { CatalogFrontPageItem } from 'nitro-renderer';
|
||||
import { FC, useCallback, useMemo } from 'react';
|
||||
import { GetConfiguration } from '../../../../../../api';
|
||||
import { CreateLinkEvent, GetConfiguration } from '../../../../../../api';
|
||||
import { CatalogLayoutFrontpage4ViewProps } from './CatalogLayoutFrontpage4View.types';
|
||||
|
||||
export const CatalogLayoutFrontpage4View: FC<CatalogLayoutFrontpage4ViewProps> = props =>
|
||||
{
|
||||
const { pageParser = null } = props;
|
||||
|
||||
const getFrontPageItem = useCallback((position: number) =>
|
||||
{
|
||||
for(const item of pageParser.frontPageItems)
|
||||
{
|
||||
if(item.position !== position) continue;
|
||||
|
||||
return item;
|
||||
}
|
||||
}, [ pageParser ]);
|
||||
|
||||
const getFrontPageItemImage = useCallback((position: number) =>
|
||||
{
|
||||
const item = getFrontPageItem(position);
|
||||
|
||||
if(!item) return null;
|
||||
|
||||
return item.itemPromoImage;
|
||||
}, [ getFrontPageItem ]);
|
||||
|
||||
const imageLibraryUrl = useMemo(() =>
|
||||
{
|
||||
return GetConfiguration<string>('image.library.url');
|
||||
}, []);
|
||||
|
||||
const selectItem = useCallback((item: CatalogFrontPageItem) =>
|
||||
{
|
||||
switch(item.type)
|
||||
{
|
||||
case CatalogFrontPageItem.ITEM_CATALOGUE_PAGE:
|
||||
CreateLinkEvent(`catalog/open/${ item.catalogPageLocation }`);
|
||||
return;
|
||||
}
|
||||
}, []);
|
||||
|
||||
if(!pageParser) return null;
|
||||
|
||||
return (
|
||||
<div className="row h-100 nitro-catalog-layout-frontpage4">
|
||||
<div className="col-4">
|
||||
{ pageParser.frontPageItems[0] &&
|
||||
<div className="front-page-item h-100" style={ { backgroundImage: `url('${ imageLibraryUrl }${ pageParser.frontPageItems[0].itemPromoImage }')`}}>
|
||||
<div className="front-page-item h-100" style={ { backgroundImage: `url('${ imageLibraryUrl }${ pageParser.frontPageItems[0].itemPromoImage }')`}} onClick={ event => selectItem(pageParser.frontPageItems[0]) }>
|
||||
<div className="front-page-item-caption">{ pageParser.frontPageItems[0].itemName }</div>
|
||||
</div> }
|
||||
</div>
|
||||
<div className="d-flex col-8 flex-column">
|
||||
{ pageParser.frontPageItems[1] &&
|
||||
<div className="front-page-item h-100 mb-2" style={ { backgroundImage: `url('${ imageLibraryUrl }${ pageParser.frontPageItems[1].itemPromoImage }')`}}>
|
||||
<div className="front-page-item h-100 mb-2" style={ { backgroundImage: `url('${ imageLibraryUrl }${ pageParser.frontPageItems[1].itemPromoImage }')`}} onClick={ event => selectItem(pageParser.frontPageItems[1]) }>
|
||||
<div className="front-page-item-caption">{ pageParser.frontPageItems[1].itemName }</div>
|
||||
</div> }
|
||||
{ pageParser.frontPageItems[2] &&
|
||||
<div className="front-page-item h-100 mb-2" style={ { backgroundImage: `url('${ imageLibraryUrl }${ pageParser.frontPageItems[2].itemPromoImage }')`}}>
|
||||
<div className="front-page-item h-100 mb-2" style={ { backgroundImage: `url('${ imageLibraryUrl }${ pageParser.frontPageItems[2].itemPromoImage }')`}} onClick={ event => selectItem(pageParser.frontPageItems[2]) }>
|
||||
<div className="front-page-item-caption">{ pageParser.frontPageItems[2].itemName }</div>
|
||||
</div> }
|
||||
{ pageParser.frontPageItems[3] &&
|
||||
<div className="front-page-item h-100" style={ { backgroundImage: `url('${ imageLibraryUrl }${ pageParser.frontPageItems[3].itemPromoImage }')`}}>
|
||||
<div className="front-page-item h-100" style={ { backgroundImage: `url('${ imageLibraryUrl }${ pageParser.frontPageItems[3].itemPromoImage }')`}} onClick={ event => selectItem(pageParser.frontPageItems[3]) }>
|
||||
<div className="front-page-item-caption">{ pageParser.frontPageItems[3].itemName }</div>
|
||||
</div> }
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user