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

Update Navigator

Browse Source
This commit is contained in:
Bill 2021-12-13 00:43:04 -05:00
parent 255c4bf0b7
commit 77b9779b80
16 changed files with 103 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/views/navigator/NavigatorMessageHandler.tsx
View File

@ -5,10 +5,9 @@ import { UpdateDoorStateEvent } from '../../events';
import { dispatchUiEvent } from '../../hooks';
import { CreateMessageHook, SendMessageHook } from '../../hooks/messages/message-event';
import { useNavigatorContext } from './context/NavigatorContext';
import { NavigatorMessageHandlerProps } from './NavigatorMessageHandler.types';
import { NavigatorActions } from './reducers/NavigatorReducer';
export const NavigatorMessageHandler: FC<NavigatorMessageHandlerProps> = props =>
export const NavigatorMessageHandler: FC<{}> = props =>
{
const { navigatorState = null, dispatchNavigatorState = null } = useNavigatorContext();

3
src/views/navigator/NavigatorMessageHandler.types.ts
View File

@ -1,3 +0,0 @@
export interface NavigatorMessageHandlerProps
{
}

12
src/views/navigator/NavigatorView.tsx
View File

@ -9,7 +9,6 @@ import { SendMessageHook } from '../../hooks/messages/message-event';
import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../layout';
import { NavigatorContextProvider } from './context/NavigatorContext';
import { NavigatorMessageHandler } from './NavigatorMessageHandler';
import { NavigatorViewProps } from './NavigatorView.types';
import { initialNavigator, NavigatorActions, NavigatorReducer } from './reducers/NavigatorReducer';
import { NavigatorRoomCreatorView } from './views/creator/NavigatorRoomCreatorView';
import { NavigatorRoomDoorbellView } from './views/room-doorbell/NavigatorRoomDoorbellView';
@ -17,10 +16,10 @@ import { NavigatorRoomInfoView } from './views/room-info/NavigatorRoomInfoView';
import { NavigatorRoomLinkView } from './views/room-link/NavigatorRoomLinkView';
import { NavigatorRoomPasswordView } from './views/room-password/NavigatorRoomPasswordView';
import { NavigatorRoomSettingsView } from './views/room-settings/NavigatorRoomSettingsView';
import { NavigatorSearchResultSetView } from './views/search-result-set/NavigatorSearchResultSetView';
import { NavigatorSearchResultView } from './views/search-result/NavigatorSearchResultView';
import { NavigatorSearchView } from './views/search/NavigatorSearchView';
export const NavigatorView: FC<NavigatorViewProps> = props =>
export const NavigatorView: FC<{}> = props =>
{
const [ isVisible, setIsVisible ] = useState(false);
const [ isCreatorOpen, setCreatorOpen ] = useState(false);
@ -252,13 +251,12 @@ export const NavigatorView: FC<NavigatorViewProps> = props =>
</NitroCardTabsItemView>
</NitroCardTabsView>
<NitroCardContentView>
<div className="d-flex flex-column h-100">
{ !isCreatorOpen && <>
{ !isCreatorOpen &&
<>
<NavigatorSearchView sendSearch={ sendSearch } />
<NavigatorSearchResultSetView />
{ (navigatorState.searchResult && navigatorState.searchResult.results.map((result, index) => <NavigatorSearchResultView key={ index } searchResult={ result } />)) }
</> }
{ isCreatorOpen && <NavigatorRoomCreatorView /> }
</div>
</NitroCardContentView>
</NitroCardView> }
{ isRoomInfoOpen && <NavigatorRoomInfoView onCloseClick={ () => setRoomInfoOpen(false) } /> }

8
src/views/navigator/NavigatorView.types.ts
View File

@ -1,8 +0,0 @@
import { RoomDataParser } from '@nitrots/nitro-renderer';
export interface NavigatorViewProps
{}
export interface INavigatorContext
{
onTryVisitRoom: (roomData: RoomDataParser) => void;
}

5
src/views/navigator/common/INavigatorSearchFilter.ts Normal file
View File

@ -0,0 +1,5 @@
export interface INavigatorSearchFilter
{
name: string;
query: string;
}

11
src/views/navigator/views/search/NavigatorSearchView.types.ts → src/views/navigator/common/SearchFilterOptions.ts
View File

@ -1,13 +1,4 @@
export interface NavigatorSearchViewProps
{
sendSearch: (searchValue: string, contextCode: string) => void;
}
export interface INavigatorSearchFilter
{
name: string;
query: string;
}
import { INavigatorSearchFilter } from './INavigatorSearchFilter';
export const SearchFilterOptions: INavigatorSearchFilter[] = [
{

12
src/views/navigator/context/NavigatorContext.tsx
View File

@ -1,12 +1,18 @@
import { createContext, FC, useContext } from 'react';
import { INavigatorContext, NavigatorContextProps } from './NavigatorContext.types';
import { createContext, Dispatch, FC, ProviderProps, useContext } from 'react';
import { INavigatorAction, INavigatorState } from '../reducers/NavigatorReducer';
export interface INavigatorContext
{
navigatorState: INavigatorState;
dispatchNavigatorState: Dispatch<INavigatorAction>;
}
const NavigatorContext = createContext<INavigatorContext>({
navigatorState: null,
dispatchNavigatorState: null
});
export const NavigatorContextProvider: FC<NavigatorContextProps> = props =>
export const NavigatorContextProvider: FC<ProviderProps<INavigatorContext>> = props =>
{
return <NavigatorContext.Provider value={ props.value }>{ props.children }</NavigatorContext.Provider>
}

13
src/views/navigator/context/NavigatorContext.types.ts
View File

@ -1,13 +0,0 @@
import { Dispatch, ProviderProps } from 'react';
import { INavigatorAction, INavigatorState } from '../reducers/NavigatorReducer';
export interface INavigatorContext
{
navigatorState: INavigatorState;
dispatchNavigatorState: Dispatch<INavigatorAction>;
}
export interface NavigatorContextProps extends ProviderProps<INavigatorContext>
{
}

1
src/views/navigator/views/NavigatorViews.scss
View File

@ -1,5 +1,4 @@
@import './creator/NavigatorRoomCreatorView';
@import './search/NavigatorSearchView';
@import './search-result/NavigatorSearchResultView';
@import './search-result-item/NavigatorSearchResultItemView';
@import './room-info/NavigatorRoomInfoView';

32
src/views/navigator/views/search-result-item/NavigatorSearchResultItemView.tsx
View File

@ -1,14 +1,20 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { RoomDataParser } from '@nitrots/nitro-renderer';
import classNames from 'classnames';
import { FC, MouseEvent } from 'react';
import { CreateRoomSession, GetSessionDataManager, TryVisitRoom } from '../../../../api';
import { Flex, FlexProps } from '../../../../common/Flex';
import { Text } from '../../../../common/Text';
import { UpdateDoorStateEvent } from '../../../../events';
import { dispatchUiEvent } from '../../../../hooks';
import { NavigatorSearchResultItemViewProps } from './NavigatorSearchResultItemView.types';
export interface NavigatorSearchResultItemViewProps extends FlexProps
{
roomData: RoomDataParser
}
export const NavigatorSearchResultItemView: FC<NavigatorSearchResultItemViewProps> = props =>
{
const { roomData = null } = props;
const { roomData = null, children = null, ...rest } = props;
function getUserCounterColor(): string
{
@ -64,8 +70,19 @@ export const NavigatorSearchResultItemView: FC<NavigatorSearchResultItemViewProp
}
return (
<div className="col">
<div className="d-flex flex-column justify-content-center align-items-center nitro-navigator-result small cursor-pointer" onClick={ visitRoom }>
<Flex pointer onClick={ visitRoom } overflow="hidden" gap={ 2 } { ...rest }>
<Flex center className={ 'badge p-1 ' + getUserCounterColor() } gap={ 1 }>
<FontAwesomeIcon icon="user" />
{ roomData.userCount }
</Flex>
<Text truncate className="flex-grow-1">{ roomData.roomName }</Text>
<Flex reverse alignItems="center" gap={ 1 }>
<i className="icon icon-navigator-info" onClick={ openInfo } />
{ roomData.habboGroupId > 0 && <i className="icon icon-navigator-room-group" /> }
{ (roomData.doorMode !== RoomDataParser.OPEN_STATE) &&
<i className={ ('icon icon-navigator-room-' + ((roomData.doorMode === RoomDataParser.DOORBELL_STATE) ? 'locked' : (roomData.doorMode === RoomDataParser.PASSWORD_STATE) ? 'password' : (roomData.doorMode === RoomDataParser.INVISIBLE_STATE) ? 'invisible' : '')) } /> }
</Flex>
{/* <div className="d-flex flex-column justify-content-center align-items-center nitro-navigator-result small cursor-pointer" onClick={ visitRoom }>
<div className="d-flex justify-content-between w-100 px-2 py-1">
<div className="d-flex justify-content-center flex-grow-1 overflow-hidden">
<div className={ 'd-flex align-items-center justify-content-center badge p-1 ' + getUserCounterColor() }>
@ -84,7 +101,8 @@ export const NavigatorSearchResultItemView: FC<NavigatorSearchResultItemViewProp
}
</div>
</div>
</div>
</div>
</div> */}
{ children }
</Flex>
);
}

6
src/views/navigator/views/search-result-item/NavigatorSearchResultItemView.types.ts
View File

@ -1,6 +0,0 @@
import { RoomDataParser } from '@nitrots/nitro-renderer';
export interface NavigatorSearchResultItemViewProps
{
roomData: RoomDataParser
}

23
src/views/navigator/views/search-result-set/NavigatorSearchResultSetView.tsx
View File

@ -1,23 +0,0 @@
import { FC } from 'react';
import { useNavigatorContext } from '../../context/NavigatorContext';
import { NavigatorSearchResultView } from '../search-result/NavigatorSearchResultView';
import { NavigatorSearchResultSetViewProps } from './NavigatorSearchResultSetView.types';
export const NavigatorSearchResultSetView: FC<NavigatorSearchResultSetViewProps> = props =>
{
const { navigatorState = null } = useNavigatorContext();
const { searchResult = null } = navigatorState;
if(!searchResult || !searchResult.results.length) return null;
return (
<>
<div className="h-100 overflow-auto">
{ (searchResult.results.map((result, index) =>
{
return <NavigatorSearchResultView key={ index } searchResult={ result } />
})) }
</div>
</>
);
}

4
src/views/navigator/views/search-result-set/NavigatorSearchResultSetView.types.ts
View File

@ -1,4 +0,0 @@
export interface NavigatorSearchResultSetViewProps
{
}

46
src/views/navigator/views/search-result/NavigatorSearchResultView.tsx
View File

@ -1,6 +1,10 @@
import classNames from 'classnames';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { FC, useEffect, useState } from 'react';
import { LocalizeText } from '../../../../api';
import { Column } from '../../../../common/Column';
import { Flex } from '../../../../common/Flex';
import { Grid } from '../../../../common/Grid';
import { Text } from '../../../../common/Text';
import { NavigatorSearchResultItemView } from '../search-result-item/NavigatorSearchResultItemView';
import { NavigatorSearchResultViewDisplayMode, NavigatorSearchResultViewProps } from './NavigatorSearchResultView.types';
@ -49,22 +53,38 @@ export const NavigatorSearchResultView: FC<NavigatorSearchResultViewProps> = pro
}
return (
<div className="nitro-navigator-search-result bg-white rounded mb-2 overflow-hidden">
<div className="d-flex flex-column">
<div className="d-flex align-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 flex-grow-1">{ LocalizeText(getResultTitle()) }</div>
<i className={ 'text-secondary fas ' + classNames({ 'fa-bars': (displayMode === NavigatorSearchResultViewDisplayMode.LIST), 'fa-th': displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS })}></i>
</div>
<Column className="bg-white rounded p-1" overflow="hidden">
<Flex fullWidth alignItems="center" justifyContent="between" className="p-1">
<Flex alignItems="center" gap={ 1 }>
<FontAwesomeIcon icon={ isExtended ? 'minus' : 'plus' } className="text-secondary" onClick={ toggleExtended } />
<Text>{ LocalizeText(getResultTitle()) }</Text>
</Flex>
<FontAwesomeIcon icon={ ((displayMode === NavigatorSearchResultViewDisplayMode.LIST) ? 'bars' : (displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS) ? 'th' : null) } className="text-secondary" onClick={ toggleExtended } />
</Flex>
<Grid columnCount={ ((displayMode === NavigatorSearchResultViewDisplayMode.LIST) ? 1 : (displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS) ? 2 : 1) }>
{ 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) =>
searchResult.rooms.length > 0 && searchResult.rooms.map((room, index) =>
{
return <NavigatorSearchResultItemView key={ index } roomData={ room } />
}) }
</div> }
</div>
</div>
</Grid>
</Column>
// <div className="nitro-navigator-search-result bg-white rounded mb-2 overflow-hidden">
// <div className="d-flex flex-column">
// <div className="d-flex align-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 flex-grow-1">{ 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="d-flex mb-2 small cursor-pointer" onClick={ toggleList }>
// <i className={ "fas " + classNames({ 'fa-plus': !isExtended, 'fa-minus': isExtended })}></i>

0
src/views/navigator/views/search/NavigatorSearchView.scss
View File

32
src/views/navigator/views/search/NavigatorSearchView.tsx
View File

@ -1,7 +1,15 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React, { FC, KeyboardEvent, useCallback, useState } from 'react';
import { LocalizeText } from '../../../../api';
import { Button } from '../../../../common/Button';
import { Flex } from '../../../../common/Flex';
import { SearchFilterOptions } from '../../common/SearchFilterOptions';
import { useNavigatorContext } from '../../context/NavigatorContext';
import { NavigatorSearchViewProps, SearchFilterOptions } from './NavigatorSearchView.types';
export interface NavigatorSearchViewProps
{
sendSearch: (searchValue: string, contextCode: string) => void;
}
export const NavigatorSearchView: FC<NavigatorSearchViewProps> = props =>
{
@ -36,23 +44,21 @@ export const NavigatorSearchView: FC<NavigatorSearchViewProps> = props =>
};
return (
<div className="d-flex w-100 mb-2">
<div>
<select className="form-select form-select-sm flex-shrink-1" value={ searchFilterIndex } onChange={ event => setSearchFilterIndex(parseInt(event.target.value)) }>
<Flex fullWidth gap={ 1 }>
<Flex shrink>
<select className="form-select form-select-sm" value={ searchFilterIndex } onChange={ event => setSearchFilterIndex(parseInt(event.target.value)) }>
{ SearchFilterOptions.map((filter, index) =>
{
return <option key={ index } value={ index }>{ LocalizeText('navigator.filter.' + filter.name) }</option>
}) }
</select>
</div>
<div className="ms-2 flex-grow-1">
</Flex>
<Flex fullWidth gap={ 1 }>
<input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('navigator.filter.input.placeholder') } value={ searchValue } onChange={ event => setSearchValue(event.target.value) } onKeyDown={ event => handleKeyDown(event) } />
</div>
<div className="ms-2">
<button type="button" className="btn btn-primary btn-sm" onClick={ processSearch }>
<i className="fas fa-search"></i>
</button>
</div>
</div>
<Button variant="primary" size="sm" onClick={ processSearch }>
<FontAwesomeIcon icon="search" />
</Button>
</Flex>
</Flex>
);
}