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

navigator show more & force collapsed

Browse Source
This commit is contained in:
laynester 2022-11-02 17:23:36 -04:00
parent db8a6032ce
commit 726e7d9ede
1 changed files with 19 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/navigator/views/search/NavigatorSearchResultView.tsx
View File

@ -1,8 +1,9 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { NavigatorSearchResultList } from '@nitrots/nitro-renderer'; import { NavigatorSearchComposer, NavigatorSearchResultList } from '@nitrots/nitro-renderer';
import { FC, useEffect, useState } from 'react'; import { FC, useEffect, useState } from 'react';
import { LocalizeText, NavigatorSearchResultViewDisplayMode } from '../../../../api'; import { LocalizeText, NavigatorSearchResultViewDisplayMode, SendMessageComposer } from '../../../../api';
import { AutoGrid, AutoGridProps, Column, Flex, Grid, Text } from '../../../../common'; import { AutoGrid, AutoGridProps, Column, Flex, Grid, Text } from '../../../../common';
import { useNavigator } from '../../../../hooks';
import { NavigatorSearchResultItemView } from './NavigatorSearchResultItemView'; import { NavigatorSearchResultItemView } from './NavigatorSearchResultItemView';
export interface NavigatorSearchResultViewProps extends AutoGridProps export interface NavigatorSearchResultViewProps extends AutoGridProps
@ -16,11 +17,13 @@ export const NavigatorSearchResultView: FC<NavigatorSearchResultViewProps> = pro
const [ isExtended, setIsExtended ] = useState(true); const [ isExtended, setIsExtended ] = useState(true);
const [ displayMode, setDisplayMode ] = useState<number>(0); const [ displayMode, setDisplayMode ] = useState<number>(0);
const { topLevelContext = null } = useNavigator();
const getResultTitle = () => const getResultTitle = () =>
{ {
let name = searchResult.code; let name = searchResult.code;
if(!name || !name.length) 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)); if(name.startsWith('${')) return name.slice(2, (name.length - 1));
@ -36,12 +39,19 @@ export const NavigatorSearchResultView: FC<NavigatorSearchResultViewProps> = pro
return NavigatorSearchResultViewDisplayMode.LIST; return NavigatorSearchResultViewDisplayMode.LIST;
}); });
} }
const showMore = () =>
{
if(searchResult.action == 1) SendMessageComposer(new NavigatorSearchComposer(searchResult.code, ''));
else if(searchResult.action == 2 && topLevelContext) SendMessageComposer(new NavigatorSearchComposer(topLevelContext.code,''));
}
useEffect(() => useEffect(() =>
{ {
if(!searchResult) return; if(!searchResult) return;
//setIsExtended(searchResult.closed); setIsExtended(!searchResult.closed);
setDisplayMode(searchResult.mode); setDisplayMode(searchResult.mode);
}, [ searchResult ]); }, [ searchResult ]);
@ -54,7 +64,11 @@ export const NavigatorSearchResultView: FC<NavigatorSearchResultViewProps> = pro
<FontAwesomeIcon icon={ isExtended ? 'minus' : 'plus' } className="text-secondary" /> <FontAwesomeIcon icon={ isExtended ? 'minus' : 'plus' } className="text-secondary" />
<Text>{ LocalizeText(getResultTitle()) }</Text> <Text>{ LocalizeText(getResultTitle()) }</Text>
</Flex> </Flex>
<FontAwesomeIcon icon={ ((displayMode === NavigatorSearchResultViewDisplayMode.LIST) ? 'th' : (displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS) ? 'bars' : null) } className="text-secondary" onClick={ toggleDisplayMode } /> <Flex gap={ 2 }>
<FontAwesomeIcon icon={ ((displayMode === NavigatorSearchResultViewDisplayMode.LIST) ? 'th' : (displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS) ? 'bars' : null) } className="text-secondary" onClick={ toggleDisplayMode } />
{ (searchResult.action > 0) && <FontAwesomeIcon icon={ searchResult.action == 1 ? 'window-maximize' : 'window-restore' } className="text-secondary" onClick={ showMore } /> }
</Flex>
</Flex> { isExtended && </Flex> { isExtended &&
<> <>
{ {