duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-20 23:46:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

🆙 Update the navigator

Browse Source
This commit is contained in:
duckietm
2026-02-26 10:25:04 +01:00
parent faadd0cf31
commit 7ab3b24331
49 changed files with 716 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/navigator/views/search/NavigatorSearchResultView.tsx
+43 -50
View File
@@ -1,8 +1,8 @@
import { NavigatorSearchComposer, NavigatorSearchResultList } from '@nitrots/nitro-renderer';
import { NavigatorSearchComposer, NavigatorSearchResultList, NavigatorSearchSaveComposer } from '@nitrots/nitro-renderer';
import { FC, useEffect, useState } from 'react';
import { FaBars, FaMinus, FaPlus, FaTh, FaWindowMaximize, FaWindowRestore } from 'react-icons/fa';
import { LocalizeText, NavigatorSearchResultViewDisplayMode, SendMessageComposer } from '../../../../api';
import { AutoGrid, AutoGridProps, Column, Flex, Grid, Text } from '../../../../common';
import { AutoGrid, AutoGridProps, Column, Flex, Grid, LayoutSearchSavesView, Text } from '../../../../common';
import { useNavigator } from '../../../../hooks';
import { NavigatorSearchResultItemView } from './NavigatorSearchResultItemView';
@@ -16,6 +16,8 @@ export const NavigatorSearchResultView: FC<NavigatorSearchResultViewProps> = pro
const { searchResult = null, ...rest } = props;
const [ isExtended, setIsExtended ] = useState(true);
const [ displayMode, setDisplayMode ] = useState<number>(0);
const [ selectedRoomId, setSelectedRoomId ] = useState<number | null>(null);
const [ isPopoverActive, setIsPopoverActive ] = useState<boolean>(false);
const { topLevelContext = null } = useNavigator();
@@ -23,7 +25,7 @@ export const NavigatorSearchResultView: FC<NavigatorSearchResultViewProps> = pro
{
let name = searchResult.code;
if(!name || !name.length || LocalizeText('navigator.searchcode.title.' + name) == ('navigator.searchcode.title.' + name)) return searchResult.data;
if(!name || !name.length || LocalizeText('navigator.searchcode.title.' + name) === ('navigator.searchcode.title.' + name)) return searchResult.data;
if(name.startsWith('${')) return name.slice(2, (name.length - 1));
@@ -51,7 +53,6 @@ export const NavigatorSearchResultView: FC<NavigatorSearchResultViewProps> = pro
if(!searchResult) return;
setIsExtended(!searchResult.closed);
setDisplayMode(searchResult.mode);
}, [ searchResult ]);
@@ -65,54 +66,46 @@ export const NavigatorSearchResultView: FC<NavigatorSearchResultViewProps> = pro
{ !isExtended && <FaPlus className="text-secondary fa-icon" /> }
<Text>{ LocalizeText(getResultTitle()) }</Text>
</Flex>
<div className="flex gap-2">
{ (displayMode === NavigatorSearchResultViewDisplayMode.LIST) && <FaTh className="text-secondary fa-icon" onClick={ toggleDisplayMode } /> }
{ (displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS) && <FaBars className="text-secondary fa-icon" onClick={ toggleDisplayMode } /> }
{ (searchResult.action > 0) && (searchResult.action === 1) && <FaWindowMaximize className="text-secondary fa-icon" onClick={ showMore } /> }
{ (searchResult.action > 0) && (searchResult.action !== 1) && <FaWindowRestore className="text-secondary fa-icon" onClick={ showMore } /> }
<div className="flex gap-2 items-center">
{ (displayMode === NavigatorSearchResultViewDisplayMode.LIST) && <FaTh className="text-secondary fa-icon cursor-pointer" onClick={ toggleDisplayMode } /> }
{ (displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS) && <FaBars className="text-secondary fa-icon cursor-pointer" onClick={ toggleDisplayMode } /> }
{ (searchResult.action > 0) && (searchResult.action === 1) && <FaWindowMaximize className="text-secondary fa-icon cursor-pointer" title={ LocalizeText('navigator.more.rooms') } onClick={ showMore } /> }
{ (searchResult.action > 0) && (searchResult.action !== 1) && <FaWindowRestore className="text-secondary fa-icon cursor-pointer" title={ LocalizeText('navigator.back') } onClick={ showMore } /> }
<LayoutSearchSavesView
title={ LocalizeText('navigator.tooltip.add.saved.search') }
onClick={ () => SendMessageComposer(new NavigatorSearchSaveComposer(getResultTitle(), searchResult.data)) }
/>
</div>
</Flex> { isExtended &&
</Flex>
{ isExtended &&
<>
{
gridHasTwoColumns ? <AutoGrid columnCount={ 3 } { ...rest } className="mx-2" columnMinHeight={ 130 } columnMinWidth={ 110 }>
{ searchResult.rooms.length > 0 && searchResult.rooms.map((room, index) => <NavigatorSearchResultItemView key={ index } roomData={ room } thumbnail={ true } />) }
</AutoGrid> : <Grid className="navigator-grid" columnCount={ 1 } gap={ 0 }>
{ searchResult.rooms.length > 0 && searchResult.rooms.map((room, index) => <NavigatorSearchResultItemView key={ index } roomData={ room } />) }
</Grid>
}
</>
}
{ gridHasTwoColumns
? <AutoGrid columnCount={ 3 } { ...rest } className="mx-2" columnMinHeight={ 130 } columnMinWidth={ 110 }>
{ searchResult.rooms.length > 0 && searchResult.rooms.map((room, index) => (
<NavigatorSearchResultItemView
key={ index }
roomData={ room }
thumbnail={ true }
isPopoverActive={ isPopoverActive }
setIsPopoverActive={ setIsPopoverActive }
selectedRoomId={ selectedRoomId }
setSelectedRoomId={ setSelectedRoomId }
/>
)) }
</AutoGrid>
: <Grid className="navigator-grid" columnCount={ 1 } gap={ 0 }>
{ searchResult.rooms.length > 0 && searchResult.rooms.map((room, index) => (
<NavigatorSearchResultItemView
key={ index }
roomData={ room }
isPopoverActive={ isPopoverActive }
setIsPopoverActive={ setIsPopoverActive }
selectedRoomId={ selectedRoomId }
setSelectedRoomId={ setSelectedRoomId }
/>
)) }
</Grid> }
</> }
</Column>
// <div className="nitro-navigator-search-result bg-white rounded mb-2 overflow-hidden">
// <div className="flex flex-col">
// <div className="flex items-center px-2 py-1 text-black">
// <i className={ 'text-secondary fas ' + (isExtended ? 'fa-minus' : 'fa-plus') } onClick={ toggleExtended }></i>
// <div className="ms-2 grow!">{ LocalizeText(getResultTitle()) }</div>
// <i className={ 'text-secondary fas ' + classNames({ 'fa-bars': (displayMode === NavigatorSearchResultViewDisplayMode.LIST), 'fa-th': displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS })}></i>
// </div>
// { isExtended &&
// <div className={ 'nitro-navigator-result-list row row-cols-' + classNames({ '1': (displayMode === NavigatorSearchResultViewDisplayMode.LIST), '2': (displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS) }) }>
// { searchResult.rooms.length > 0 && searchResult.rooms.map((room, index) =>
// {
// return <NavigatorSearchResultItemView key={ index } roomData={ room } />
// }) }
// </div> }
// </div>
// </div>
// <div className="nitro-navigator-result-list p-2">
// <div className="flex mb-2 small cursor-pointer" onClick={ toggleList }>
// <i className={ "fas " + classNames({ 'fa-plus': !isExtended, 'fa-minus': isExtended })}></i>
// <div className="align-self-center w-full ml-2">{ LocalizeText(getListCode()) }</div>
// <i className={ "fas " + classNames({ 'fa-bars': displayMode === NavigatorResultListViewDisplayMode.LIST, 'fa-th': displayMode >= NavigatorResultListViewDisplayMode.THUMBNAILS })} onClick={ toggleDisplayMode }></i>
// </div>
// <div className={ 'row mr-n2 row-cols-' + classNames({ '1': displayMode === NavigatorResultListViewDisplayMode.LIST, '2': displayMode >= NavigatorResultListViewDisplayMode.THUMBNAILS }) }>
// { isExtended && resultList && resultList.rooms.map((room, index) =>
// {
// return <NavigatorResultView key={ index } result={ room } />
// })
// }
// </div>
// </div>
);
};