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

Navigator search

Browse Source
This commit is contained in:
MyNameIsBatman 2021-05-12 20:57:30 -03:00
parent 9d8e2e9e97
commit 9eec13d714
6 changed files with 61 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/views/navigator/NavigatorView.scss
View File

@ -1,5 +1,10 @@
.nitro-navigator {
width: 400px;
.content-area {
height: 450px;
max-height: 450px;
}
}
@import './views/NavigatorViews';

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

@ -112,7 +112,7 @@ export const NavigatorView: FC<NavigatorViewProps> = props =>
}) }
</NitroCardTabsView>
<NitroCardContentView>
<NavigatorSearchView />
<NavigatorSearchView onSendSearch={ sendSearch } />
<NavigatorSearchResultSetView />
</NitroCardContentView>
</NitroCardView> }

49
src/views/navigator/views/search-result/NavigatorSearchResultView.scss
View File

@ -1,30 +1,35 @@
.nitro-navigator-result-list {
.nitro-navigator-search-result {
border: 1px solid #ced4da;
.nitro-navigator-result {
background: $grid-active-bg-color;
}
.nitro-navigator-result-list {
&.row {
&.row-cols-1 {
.col:nth-child(even) {
.nitro-navigator-result {
background: $white !important;
}
}
.nitro-navigator-result {
background: $grid-active-bg-color;
}
&.row-cols-2 {
.col:nth-child(4n+3),
.col:nth-child(4n+4) {
.nitro-navigator-result {
background: $white !important;
&.row {
&.row-cols-1 {
.col:nth-child(even) {
.nitro-navigator-result {
background: $white !important;
}
}
}
&.row-cols-2 {
.col:nth-child(4n+3),
.col:nth-child(4n+4) {
.nitro-navigator-result {
background: $white !important;
}
}
}
}
}
}

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

@ -49,7 +49,7 @@ export const NavigatorSearchResultView: FC<NavigatorSearchResultViewProps> = pro
}
return (
<div className="bg-white rounded mb-2 overflow-hidden">
<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>
@ -57,7 +57,7 @@ export const NavigatorSearchResultView: FC<NavigatorSearchResultViewProps> = pro
<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 mt-1 row row-cols-' + classNames({ '1': (displayMode === NavigatorSearchResultViewDisplayMode.LIST), '2': (displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS) }) }>
<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 } />

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

@ -1,4 +1,4 @@
import { FC, useState } from 'react';
import React, { FC, useCallback, useEffect, useState } from 'react';
import { LocalizeText } from '../../../../utils/LocalizeText';
import { INavigatorSearchFilter, NavigatorSearchViewProps } from './NavigatorSearchView.types';
@ -27,13 +27,31 @@ export const NavigatorSearchView: FC<NavigatorSearchViewProps> = props =>
}
];
const [ searchFilter, setSearchFilter ] = useState<INavigatorSearchFilter>(searchFilters[0]);
const [ searchString, setSearchString ] = useState<string>(null);
const [ searchFilter, setSearchFilter ] = useState<number>(0);
const [ searchString, setSearchString ] = useState<string>('');
const search = useCallback(() =>
{
props.onSendSearch(searchFilters[searchFilter].query, searchString);
}, [ searchFilter, searchString ]);
useEffect(() =>
{
search();
}, [ searchFilter ]);
const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) =>
{
if (event.key === 'Enter')
{
search();
}
};
return (
<div className="d-flex w-100 mb-3">
<div className="d-flex w-100 mb-2">
<div>
<select className="form-select form-select-sm flex-shrink-1" onChange={ event => setSearchFilter(searchFilters[event.target.value]) }>
<select className="form-select form-select-sm flex-shrink-1" value={ searchFilter } onChange={ event => setSearchFilter(parseInt(event.target.value)) }>
{ searchFilters.map((filter, index) =>
{
return <option value={ index }>{ LocalizeText('navigator.filter.' + filter.name) }</option>
@ -41,10 +59,10 @@ export const NavigatorSearchView: FC<NavigatorSearchViewProps> = props =>
</select>
</div>
<div className="ms-2 flex-grow-1">
<input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('navigator.filter.input.placeholder') } onChange={ event => setSearchString(event.target.value) } />
<input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('navigator.filter.input.placeholder') } value={ searchString } onChange={ event => setSearchString(event.target.value) } onKeyDown={ event => handleKeyDown(event) } />
</div>
<div className="ms-2">
<button type="button" className="btn btn-primary btn-sm">
<button type="button" className="btn btn-primary btn-sm" onClick={ search }>
<i className="fas fa-search"></i>
</button>
</div>

2
src/views/navigator/views/search/NavigatorSearchView.types.ts
View File

@ -1,6 +1,6 @@
export interface NavigatorSearchViewProps
{
onSendSearch: (code: string, data: string) => void;
}
export interface INavigatorSearchFilter