|
@ -1,9 +1,10 @@ |
|
|
import React from 'react'; |
|
|
import React, { useState } from 'react'; |
|
|
import { LazyLoadImage } from 'react-lazy-load-image-component'; |
|
|
import { LazyLoadImage } from 'react-lazy-load-image-component'; |
|
|
import { useHistory } from 'react-router-dom'; |
|
|
import { useHistory } from 'react-router-dom'; |
|
|
|
|
|
import { useHotkeys } from 'react-hotkeys-hook'; |
|
|
import { Icon, Input, InputGroup } from 'rsuite'; |
|
|
import { Icon, Input, InputGroup } from 'rsuite'; |
|
|
import ViewTypeButtons from '../viewtypes/ViewTypeButtons'; |
|
|
import ViewTypeButtons from '../viewtypes/ViewTypeButtons'; |
|
|
import { StyledInputGroup } from '../shared/styled'; |
|
|
import { StyledIconButton, StyledInputGroup } from '../shared/styled'; |
|
|
import { CoverArtWrapper, PageHeaderTitle } from './styled'; |
|
|
import { CoverArtWrapper, PageHeaderTitle } from './styled'; |
|
|
import cacheImage from '../shared/cacheImage'; |
|
|
import cacheImage from '../shared/cacheImage'; |
|
|
import CustomTooltip from '../shared/CustomTooltip'; |
|
|
import CustomTooltip from '../shared/CustomTooltip'; |
|
@ -27,6 +28,12 @@ const GenericPageHeader = ({ |
|
|
showTitleTooltip, |
|
|
showTitleTooltip, |
|
|
}: any) => { |
|
|
}: any) => { |
|
|
const history = useHistory(); |
|
|
const history = useHistory(); |
|
|
|
|
|
const [openSearch, setOpenSearch] = useState(false); |
|
|
|
|
|
|
|
|
|
|
|
useHotkeys('ctrl+f', () => { |
|
|
|
|
|
setOpenSearch(true); |
|
|
|
|
|
document.getElementById('local-search-input')?.focus(); |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
return ( |
|
|
return ( |
|
|
<> |
|
|
<> |
|
@ -86,30 +93,50 @@ const GenericPageHeader = ({ |
|
|
{sidetitle && <span style={{ display: 'inline-block' }}>{sidetitle}</span>} |
|
|
{sidetitle && <span style={{ display: 'inline-block' }}>{sidetitle}</span>} |
|
|
{showSearchBar && ( |
|
|
{showSearchBar && ( |
|
|
<span style={{ display: 'inline-block' }}> |
|
|
<span style={{ display: 'inline-block' }}> |
|
|
<StyledInputGroup inside> |
|
|
{searchQuery !== '' || openSearch ? ( |
|
|
<Input |
|
|
<StyledInputGroup inside onClick={() => console.log('click')}> |
|
|
id="local-search-input" |
|
|
<InputGroup.Addon> |
|
|
size="md" |
|
|
<Icon icon="search" /> |
|
|
value={searchQuery} |
|
|
</InputGroup.Addon> |
|
|
placeholder="Search..." |
|
|
<Input |
|
|
onChange={handleSearch} |
|
|
id="local-search-input" |
|
|
onPressEnter={() => { |
|
|
value={searchQuery} |
|
|
if (searchQuery.trim()) { |
|
|
onChange={handleSearch} |
|
|
history.push(`/search?query=${searchQuery}`); |
|
|
onPressEnter={() => { |
|
|
} |
|
|
if (searchQuery.trim()) { |
|
|
}} |
|
|
history.push(`/search?query=${searchQuery}`); |
|
|
onKeyDown={(e: KeyboardEvent) => { |
|
|
} |
|
|
if (e.key === 'Escape') { |
|
|
}} |
|
|
|
|
|
onKeyDown={(e: KeyboardEvent) => { |
|
|
|
|
|
if (e.key === 'Escape') { |
|
|
|
|
|
clearSearchQuery(); |
|
|
|
|
|
setOpenSearch(false); |
|
|
|
|
|
} |
|
|
|
|
|
}} |
|
|
|
|
|
style={{ width: '180px' }} |
|
|
|
|
|
/> |
|
|
|
|
|
<InputGroup.Button |
|
|
|
|
|
appearance="subtle" |
|
|
|
|
|
onClick={() => { |
|
|
clearSearchQuery(); |
|
|
clearSearchQuery(); |
|
|
} |
|
|
setOpenSearch(false); |
|
|
}} |
|
|
}} |
|
|
/> |
|
|
> |
|
|
{searchQuery !== '' && ( |
|
|
|
|
|
<InputGroup.Button appearance="subtle" onClick={clearSearchQuery}> |
|
|
|
|
|
<Icon icon="close" /> |
|
|
<Icon icon="close" /> |
|
|
</InputGroup.Button> |
|
|
</InputGroup.Button> |
|
|
)} |
|
|
</StyledInputGroup> |
|
|
</StyledInputGroup> |
|
|
) : ( |
|
|
|
|
|
<StyledIconButton |
|
|
|
|
|
onClick={() => { |
|
|
|
|
|
setOpenSearch(true); |
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
document.getElementById('local-search-input')?.focus(); |
|
|
|
|
|
}, 50); |
|
|
|
|
|
}} |
|
|
|
|
|
appearance="subtle" |
|
|
|
|
|
icon={<Icon icon="search" />} |
|
|
|
|
|
/> |
|
|
|
|
|
)} |
|
|
</span> |
|
|
</span> |
|
|
)} |
|
|
)} |
|
|
</span> |
|
|
</span> |
|
|