94 lines
2.3 KiB
JavaScript
94 lines
2.3 KiB
JavaScript
/*
|
|
Graphictoria 5 (https://gtoria.net)
|
|
Copyright © XlXi 2022
|
|
*/
|
|
|
|
import { useState, useRef, useEffect } from 'react';
|
|
|
|
import { buildGenericApiUrl } from '../util/HTTP.js';
|
|
|
|
const dropdownLinks = [
|
|
{
|
|
area: 'Games',
|
|
urlbase: buildGenericApiUrl('www', 'games/search/')
|
|
},
|
|
{
|
|
area: 'Shop',
|
|
urlbase: buildGenericApiUrl('www', 'shop/search/')
|
|
},
|
|
{
|
|
area: 'Users',
|
|
urlbase: buildGenericApiUrl('www', 'users/search/')
|
|
},
|
|
{
|
|
area: 'Groups',
|
|
urlbase: buildGenericApiUrl('www', 'groups/search/')
|
|
}
|
|
];
|
|
|
|
function useOnClickOutside(refs, handler) {
|
|
useEffect(
|
|
() => {
|
|
const listener = (event) => {
|
|
var shouldReturn = false;
|
|
|
|
refs.map(
|
|
function(val)
|
|
{
|
|
if (shouldReturn == false && (!val.current || val.current.contains(event.target)))
|
|
{
|
|
shouldReturn = true;
|
|
}
|
|
}
|
|
);
|
|
|
|
if(shouldReturn)
|
|
{
|
|
return;
|
|
}
|
|
|
|
handler(event);
|
|
};
|
|
document.addEventListener('mousedown', listener);
|
|
document.addEventListener('touchstart', listener);
|
|
return () => {
|
|
document.removeEventListener('mousedown', listener);
|
|
document.removeEventListener('touchstart', listener);
|
|
};
|
|
},
|
|
[refs, handler]
|
|
);
|
|
}
|
|
|
|
const SearchBar = () => {
|
|
const inputRef = useRef();
|
|
const dropdownRef = useRef();
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
|
|
useOnClickOutside([inputRef, dropdownRef], () => setSearchQuery(''));
|
|
|
|
return (
|
|
<>
|
|
<input type="text" ref={inputRef} className="form-control d-lg-flex" placeholder="Search" aria-label="Search" aria-describedby="graphictoria-nav-search-button" onChange={ changeEvent => setSearchQuery(changeEvent.target.value) } value={ searchQuery }/>
|
|
|
|
{
|
|
searchQuery.length !== 0 ?
|
|
<div ref={dropdownRef} id="graphictoria-search-dropdown">
|
|
<ul className="dropdown-menu show" area-labelledby="graphictoria-search-dropdown">
|
|
{
|
|
dropdownLinks.map(({ area, urlbase }, index) =>
|
|
<li key={index}>
|
|
<a className="dropdown-item py-2" onClick={ () => setSearchQuery('') } href={ urlbase + encodeURIComponent(searchQuery) }>Search <b className="text-truncate graphictoria-search-dropdown-truncate">{searchQuery}</b> in {area}</a>
|
|
</li>
|
|
)
|
|
}
|
|
</ul>
|
|
</div>
|
|
:
|
|
null
|
|
}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default SearchBar; |