Browse Source

Change search to use controlled btn before input

master
jeffvli 3 years ago
committed by Jeff
parent
commit
ac061f8beb
  1. 2
      src/components/layout/GenericPage.tsx
  2. 73
      src/components/layout/GenericPageHeader.tsx

2
src/components/layout/GenericPage.tsx

@ -1,6 +1,5 @@
import React, { useEffect, useState } from 'react';
import { Divider } from 'rsuite';
import { useHotkeys } from 'react-hotkeys-hook';
import { useAppSelector } from '../../redux/hooks';
import { PageContainer, PageHeader, PageContent } from './styled';
import { isCached } from '../../shared/utils';
@ -9,7 +8,6 @@ const GenericPage = ({ header, children, hideDivider, ...rest }: any) => {
const playQueue = useAppSelector((state) => state.playQueue);
const misc = useAppSelector((state) => state.misc);
const [backgroundImage, setBackgroundImage] = useState('');
useHotkeys('ctrl+f', () => document.getElementById('local-search-input')?.focus());
useEffect(() => {
if (misc.dynamicBackground) {

73
src/components/layout/GenericPageHeader.tsx

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

Loading…
Cancel
Save