antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2025-12-31 10:03:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Lint all files

Browse source
This commit is contained in:
jeffvli 2023-07-01 19:10:05 -07:00
parent 22af76b4d6
commit 30e52ebb54
334 changed files with 76519 additions and 75932 deletions
Download patch file Download diff file Expand all files Collapse all files

176
src/renderer/features/search/components/search-header.tsx
View file

@ -11,96 +11,100 @@ import { useContainerQuery } from '/@/renderer/hooks';
import { AppRoute } from '/@/renderer/router/routes';
interface SearchHeaderProps {
getDatasource: (searchQuery: string, itemType: LibraryItem) => IDatasource | undefined;
navigationId: string;
tableRef: MutableRefObject<AgGridReactType | null>;
getDatasource: (searchQuery: string, itemType: LibraryItem) => IDatasource | undefined;
navigationId: string;
tableRef: MutableRefObject<AgGridReactType | null>;
}
export const SearchHeader = ({ tableRef, getDatasource, navigationId }: SearchHeaderProps) => {
const { itemType } = useParams() as { itemType: LibraryItem };
const [searchParams, setSearchParams] = useSearchParams();
const cq = useContainerQuery();
const { itemType } = useParams() as { itemType: LibraryItem };
const [searchParams, setSearchParams] = useSearchParams();
const cq = useContainerQuery();
const handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => {
if (!e.target.value) return;
setSearchParams({ query: e.target.value }, { replace: true, state: { navigationId } });
const datasource = getDatasource(e.target.value, itemType);
if (!datasource) return;
tableRef.current?.api.setDatasource(datasource);
}, 200);
const handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => {
if (!e.target.value) return;
setSearchParams({ query: e.target.value }, { replace: true, state: { navigationId } });
const datasource = getDatasource(e.target.value, itemType);
if (!datasource) return;
tableRef.current?.api.setDatasource(datasource);
}, 200);
return (
<Stack
ref={cq.ref}
spacing={0}
>
<PageHeader>
<Flex
justify="space-between"
w="100%"
return (
<Stack
ref={cq.ref}
spacing={0}
>
<LibraryHeaderBar>
<LibraryHeaderBar.Title>Search</LibraryHeaderBar.Title>
</LibraryHeaderBar>
<Group>
<SearchInput
// key={`search-input-${initialQuery}`}
defaultValue={searchParams.get('query') || ''}
openedWidth={cq.isMd ? 250 : cq.isSm ? 200 : 150}
onChange={handleSearch}
/>
</Group>
</Flex>
</PageHeader>
<FilterBar>
<Group>
<Button
compact
replace
component={Link}
fw={600}
size="md"
state={{ navigationId }}
to={{
pathname: generatePath(AppRoute.SEARCH, { itemType: LibraryItem.SONG }),
search: searchParams.toString(),
}}
variant={itemType === LibraryItem.SONG ? 'filled' : 'subtle'}
>
Tracks
</Button>
<Button
compact
replace
component={Link}
fw={600}
size="md"
state={{ navigationId }}
to={{
pathname: generatePath(AppRoute.SEARCH, { itemType: LibraryItem.ALBUM }),
search: searchParams.toString(),
}}
variant={itemType === LibraryItem.ALBUM ? 'filled' : 'subtle'}
>
Albums
</Button>
<Button
compact
replace
component={Link}
fw={600}
size="md"
state={{ navigationId }}
to={{
pathname: generatePath(AppRoute.SEARCH, { itemType: LibraryItem.ALBUM_ARTIST }),
search: searchParams.toString(),
}}
variant={itemType === LibraryItem.ALBUM_ARTIST ? 'filled' : 'subtle'}
>
Artists
</Button>
</Group>
</FilterBar>
</Stack>
);
<PageHeader>
<Flex
justify="space-between"
w="100%"
>
<LibraryHeaderBar>
<LibraryHeaderBar.Title>Search</LibraryHeaderBar.Title>
</LibraryHeaderBar>
<Group>
<SearchInput
// key={`search-input-${initialQuery}`}
defaultValue={searchParams.get('query') || ''}
openedWidth={cq.isMd ? 250 : cq.isSm ? 200 : 150}
onChange={handleSearch}
/>
</Group>
</Flex>
</PageHeader>
<FilterBar>
<Group>
<Button
compact
replace
component={Link}
fw={600}
size="md"
state={{ navigationId }}
to={{
pathname: generatePath(AppRoute.SEARCH, { itemType: LibraryItem.SONG }),
search: searchParams.toString(),
}}
variant={itemType === LibraryItem.SONG ? 'filled' : 'subtle'}
>
Tracks
</Button>
<Button
compact
replace
component={Link}
fw={600}
size="md"
state={{ navigationId }}
to={{
pathname: generatePath(AppRoute.SEARCH, {
itemType: LibraryItem.ALBUM,
}),
search: searchParams.toString(),
}}
variant={itemType === LibraryItem.ALBUM ? 'filled' : 'subtle'}
>
Albums
</Button>
<Button
compact
replace
component={Link}
fw={600}
size="md"
state={{ navigationId }}
to={{
pathname: generatePath(AppRoute.SEARCH, {
itemType: LibraryItem.ALBUM_ARTIST,
}),
search: searchParams.toString(),
}}
variant={itemType === LibraryItem.ALBUM_ARTIST ? 'filled' : 'subtle'}
>
Artists
</Button>
</Group>
</FilterBar>
</Stack>
);
};