nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2025-02-18 18:02:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

Busted catalog page selector

Browse Source
This commit is contained in:
Bill 2021-07-25 01:33:30 -04:00
parent 80d854d214
commit e794745e21
7 changed files with 33 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/views/catalog/CatalogView.tsx
View File

@ -76,12 +76,7 @@ export const CatalogView: FC<CatalogViewProps> = props =>
case 'open':
if(parts.length > 2)
{
dispatchCatalogState({
type: CatalogActions.SET_PENDING_PAGE_ID,
payload: {
pendingPageId: parseInt(parts[2])
}
});
setPendingPageId(parseInt(parts[2]));
}
else
{
@ -89,7 +84,7 @@ export const CatalogView: FC<CatalogViewProps> = props =>
}
return;
}
}, [ dispatchCatalogState ]);
}, []);
useEffect(() =>
{
@ -128,6 +123,7 @@ export const CatalogView: FC<CatalogViewProps> = props =>
setCurrentTab(tree.shift());
setPendingTree(tree);
setPendingPageId(-1);
}
}
}, [ isVisible, pendingPageId, catalogState.root, buildCatalogPageTree, setCurrentTab ]);
@ -176,7 +172,7 @@ export const CatalogView: FC<CatalogViewProps> = props =>
<div className="row h-100">
{ (!pageParser || (pageParser && !pageParser.frontPageItems.length)) &&
<div className="col-3 d-flex flex-column h-100">
<CatalogNavigationView page={ currentNavigationPage } />
<CatalogNavigationView page={ currentNavigationPage } pendingTree={ pendingTree } setPendingTree={ setPendingTree } />
</div> }
<div className="col h-100">
<CatalogPageView roomPreviewer={ roomPreviewer } />

16
src/views/catalog/views/navigation/CatalogNavigationView.tsx
View File

@ -1,28 +1,18 @@
import { ICatalogPageData } from 'nitro-renderer';
import { FC, useEffect } from 'react';
import { FC } from 'react';
import { CatalogSearchView } from '../search/CatalogSearchView';
import { CatalogNavigationViewProps } from './CatalogNavigationView.types';
import { CatalogNavigationSetView } from './set/CatalogNavigationSetView';
export let ACTIVE_PAGES: ICatalogPageData[] = [];
export const CatalogNavigationView: FC<CatalogNavigationViewProps> = props =>
{
const { page = null } = props;
useEffect(() =>
{
if(!page) return;
ACTIVE_PAGES = [ page ];
}, [ page ]);
const { page = null, pendingTree = null, setPendingTree = null } = props;
return (
<>
<CatalogSearchView />
<div className="border border-2 rounded overflow-hidden nitro-catalog-navigation p-1 h-100">
<div className="navigation-container h-100">
<CatalogNavigationSetView page={ page } isFirstSet={ true } />
<CatalogNavigationSetView page={ page } isFirstSet={ true } pendingTree={ pendingTree } setPendingTree={ setPendingTree } />
</div>
</div>
</>

3
src/views/catalog/views/navigation/CatalogNavigationView.types.ts
View File

@ -1,6 +1,9 @@
import { ICatalogPageData } from 'nitro-renderer';
import { Dispatch, SetStateAction } from 'react';
export interface CatalogNavigationViewProps
{
page: ICatalogPageData;
pendingTree: ICatalogPageData[];
setPendingTree: Dispatch<SetStateAction<ICatalogPageData[]>>;
}

18
src/views/catalog/views/navigation/item/CatalogNavigationItemView.tsx
View File

@ -9,9 +9,8 @@ import { CatalogNavigationItemViewProps } from './CatalogNavigationItemView.type
export const CatalogNavigationItemView: FC<CatalogNavigationItemViewProps> = props =>
{
const { page = null, isActive = false, setActiveChild = null } = props;
const { page = null, isActive = false, pendingTree = null, setPendingTree = null, setActiveChild = null } = props;
const [ isExpanded, setIsExpanded ] = useState(false);
const [ myTree, setMyTree ] = useState<ICatalogPageData[]>(null);
const { dispatchCatalogState = null } = useCatalogContext();
const select = useCallback((selectPage: ICatalogPageData) =>
@ -46,7 +45,18 @@ export const CatalogNavigationItemView: FC<CatalogNavigationItemViewProps> = pro
SendMessageHook(new CatalogPageComposer(page.pageId, -1, CatalogMode.MODE_NORMAL));
}, [ isActive, page, select, dispatchCatalogState ]);
if(!page.visible) return null;
useEffect(() =>
{
if(!page || !pendingTree || !pendingTree.length) return;
const index = pendingTree.indexOf(page);
if(index === -1) return;
//if(!pendingTree.length) setPendingTree(null);
select(page);
}, [ pendingTree, page, select, setPendingTree ]);
return (
<div className="col pb-1 catalog-navigation-item-container">
@ -57,7 +67,7 @@ export const CatalogNavigationItemView: FC<CatalogNavigationItemViewProps> = pro
</div>
{ isActive && isExpanded && page.children && (page.children.length > 0) &&
<div className="d-flex flex-column mt-1">
<CatalogNavigationSetView page={ page } />
<CatalogNavigationSetView page={ page } pendingTree={ pendingTree } setPendingTree={ setPendingTree } />
</div> }
</div>
);

2
src/views/catalog/views/navigation/item/CatalogNavigationItemView.types.ts
View File

@ -5,5 +5,7 @@ export interface CatalogNavigationItemViewProps
{
page: ICatalogPageData;
isActive: boolean;
pendingTree: ICatalogPageData[];
setPendingTree: Dispatch<SetStateAction<ICatalogPageData[]>>;
setActiveChild: Dispatch<SetStateAction<ICatalogPageData>>;
}

21
src/views/catalog/views/navigation/set/CatalogNavigationSetView.tsx
View File

@ -1,17 +1,16 @@
import { ICatalogPageData } from 'nitro-renderer';
import { FC, useEffect, useState } from 'react';
import { ACTIVE_PAGES } from '../CatalogNavigationView';
import { CatalogNavigationItemView } from '../item/CatalogNavigationItemView';
import { CatalogNavigationSetViewProps } from './CatalogNavigationSetView.types';
export const CatalogNavigationSetView: FC<CatalogNavigationSetViewProps> = props =>
{
const { page = null, isFirstSet = false } = props;
const { page = null, isFirstSet = false, pendingTree = null, setPendingTree = null } = props;
const [ activeChild, setActiveChild ] = useState<ICatalogPageData>(null);
useEffect(() =>
{
if(!isFirstSet || !page || (page.pageId === -1)) return;
if(!isFirstSet || !page || (page.pageId === -1) || pendingTree) return;
if(page && page.children.length)
{
@ -19,19 +18,7 @@ export const CatalogNavigationSetView: FC<CatalogNavigationSetViewProps> = props
setActiveChild(child);
}
}, [ page, isFirstSet ]);
useEffect(() =>
{
if(!activeChild) return;
const index = (ACTIVE_PAGES.push(activeChild) - 1);
return () =>
{
ACTIVE_PAGES.splice(index, (ACTIVE_PAGES.length - index));
}
}, [ activeChild ]);
}, [ page, isFirstSet, pendingTree ]);
return (
<div className="row row-cols-1 g-0 catalog-navigation-set-container w-100">
@ -39,7 +26,7 @@ export const CatalogNavigationSetView: FC<CatalogNavigationSetViewProps> = props
{
if(!page.visible) return null;
return <CatalogNavigationItemView key={ index } page={ page } isActive={ (activeChild === page) } setActiveChild={ setActiveChild } />
return <CatalogNavigationItemView key={ index } page={ page } isActive={ (activeChild === page) } pendingTree={ pendingTree } setPendingTree={ setPendingTree } setActiveChild={ setActiveChild } />
}) }
</div>
);

3
src/views/catalog/views/navigation/set/CatalogNavigationSetView.types.ts
View File

@ -1,7 +1,10 @@
import { ICatalogPageData } from 'nitro-renderer';
import { Dispatch, SetStateAction } from 'react';
export interface CatalogNavigationSetViewProps
{
page: ICatalogPageData;
isFirstSet?: boolean;
pendingTree: ICatalogPageData[];
setPendingTree: Dispatch<SetStateAction<ICatalogPageData[]>>;
}