ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

handle search shortcuts (#116)

Browse Source 
* code cleanup

* fix some issues

* handle search keyboard shortcuts
This commit is contained in:
Aria Moradi
2021-12-19 18:06:27 +03:30
committed by GitHub
parent 83f025161b
commit 7eedce62cd
7 changed files with 91 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/ExtensionSearch.tsx
View File

@@ -1,56 +0,0 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import React, { useState, useRef } from 'react';
import SearchIcon from '@mui/icons-material/Search';
import { IconButton, Input } from '@mui/material';
import CancelIcon from '@mui/icons-material/Cancel';
import { useQueryParam, StringParam } from 'use-query-params';
export default function LibrarySearch() {
const [query, setQuery] = useQueryParam('query', StringParam);
const [searchOpen, setSearchOpen] = useState(!!query);
const inputRef = useRef<HTMLInputElement>();
function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
setQuery(e.target.value === '' ? undefined : e.target.value);
}
const cancelSearch = () => {
setQuery(null);
setSearchOpen(false);
};
const handleBlur = () => {
if (!query) setSearchOpen(false);
};
const openSearch = () => {
setSearchOpen(true);
// Put Focus Action at the end of the Callstack so Input actually exists on the dom
setTimeout(() => {
if (inputRef && inputRef.current) inputRef.current.focus();
});
};
return (
<>
{searchOpen ? (
<Input
value={query || ''}
onChange={handleChange}
onBlur={handleBlur}
inputRef={inputRef}
endAdornment={(
<IconButton onClick={cancelSearch}>
<CancelIcon />
</IconButton>
)}
/>
) : (
<SearchIcon onClick={openSearch} />
)}
</>
);
}

4
src/components/chapter/ChapterList.tsx
View File

@@ -18,7 +18,7 @@ import ChapterOptions from 'components/chapter/ChapterOptions';
import ChapterCard from 'components/chapter/ChapterCard';
import useLocalStorage from 'util/useLocalStorage';
const List = styled(Virtuoso)(({ theme }) => ({
const CustomVirtuoso = styled(Virtuoso)(({ theme }) => ({
listStyle: 'none',
padding: 0,
minHeight: '200px',
@@ -221,7 +221,7 @@ export default function ChapterList(props: IProps) {
<ChapterOptions options={options} setOptions={setOptions} />
</Box>
<List
<CustomVirtuoso
style={{ // override Virtuoso default values and set them with class
height: 'undefined',
// 900 is the md breakpoint in MUI

2
src/components/library/LibraryMangaGrid.tsx
View File

@@ -8,7 +8,7 @@
import React from 'react';
import MangaGrid, { IMangaGridProps } from 'components/MangaGrid';
import useLibraryOptions, { NullAndUndefined } from 'util/useLibraryOptions';
import useLibraryOptions from 'util/useLibraryOptions';
const FILTERED_OUT_MESSAGE = 'There are no Manga matching this filter';

33
src/components/library/LibrarySearch.tsx → src/components/util/AppbarSearch.tsx
View File

@@ -6,17 +6,14 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import SearchIcon from '@mui/icons-material/Search';
import { IconButton, Input } from '@mui/material';
import CancelIcon from '@mui/icons-material/Cancel';
import useLibraryOptions from '../../util/useLibraryOptions';
import { useQueryParam, StringParam } from 'use-query-params';
export default function LibrarySearch() {
const {
query,
setQuery,
} = useLibraryOptions();
export default function AppbarSearch() {
const [query, setQuery] = useQueryParam('query', StringParam);
const [searchOpen, setSearchOpen] = useState(!!query);
const inputRef = React.useRef<HTMLInputElement>();
@@ -35,6 +32,22 @@ export default function LibrarySearch() {
if (inputRef && inputRef.current) inputRef.current.focus();
});
};
const handleSearchShortcut = (e: KeyboardEvent) => {
if ((e.code === 'F3') || (e.ctrlKey && e.code === 'KeyF')) {
e.preventDefault();
openSearch();
}
};
useEffect(() => {
window.addEventListener('keydown', handleSearchShortcut);
return () => {
window.removeEventListener('keydown', handleSearchShortcut);
};
}, [handleSearchShortcut]);
return (
<>
{searchOpen
@@ -52,7 +65,11 @@ export default function LibrarySearch() {
</IconButton>
)}
/>
) : <SearchIcon onClick={openSearch} /> }
) : (
<IconButton onClick={openSearch}>
<SearchIcon />
</IconButton>
)}
</>
);
}

105
src/screens/Extensions.tsx
View File

@@ -17,11 +17,14 @@ import LangSelect from 'components/navbar/action/LangSelect';
import { extensionDefaultLangs, langCodeToName, langSortCmp } from 'util/language';
import { makeToaster } from 'components/util/Toast';
import LoadingPlaceholder from 'components/util/LoadingPlaceholder';
import ExtensionSearch from 'components/ExtensionSearch';
import AppbarSearch from 'components/util/AppbarSearch';
import { useQueryParam, StringParam } from 'use-query-params';
import { GroupedVirtuoso } from 'react-virtuoso';
import { Virtuoso } from 'react-virtuoso';
import { Typography, useMediaQuery, useTheme } from '@mui/material';
const LANGUAGE = 0;
const EXTENSIONS = 1;
const allLangs: string[] = [];
interface GroupedExtension {
@@ -33,10 +36,8 @@ function groupExtensions(extensions: IExtension[]) {
const sortedExtenions: GroupedExtension = { installed: [], 'updates pending': [], all: [] };
extensions.forEach((extension) => {
if (sortedExtenions[extension.lang] === undefined) {
if (sortedExtenions[extension.lang] === undefined) {
sortedExtenions[extension.lang] = [];
if (extension.lang !== 'all') { allLangs.push(extension.lang); }
}
sortedExtenions[extension.lang] = [];
if (extension.lang !== 'all') { allLangs.push(extension.lang); }
}
if (extension.installed) {
if (extension.hasUpdate) {
@@ -68,17 +69,14 @@ export default function MangaExtensions() {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
// VirtuosoGroup: ExtArr, LangArr, langCountArr
const [extArr, setExtArr] = useState<IExtension[]>([]);
const [langArr, setLangArr] = useState<string[]>([]);
const [langCountArr, setLangCountArr] = useState<number[]>([]);
const [flatRenderItems, setFlatRenderItems] = useState<(IExtension | string)[]>([]);
const [query] = useQueryParam('query', StringParam);
useEffect(() => {
setTitle('Extensions');
setAction(
<>
<ExtensionSearch />
<AppbarSearch />
<IconButton
onClick={
() => document.getElementById('external-extension-file')?.click()
@@ -115,15 +113,21 @@ export default function MangaExtensions() {
return nsfwFilter && ext.name.toLowerCase().includes(query.toLowerCase());
});
const groupedExtensions: [string, IExtension[]][] = groupExtensions(filtered)
.filter((group) => group[1].length !== 0)
.filter((group) => group[0] === 'installed' || 'updates pending' || 'all'
|| shownLangs.includes(group[0]));
const combinedShownLangs = ['installed', 'updates pending', 'all', ...shownLangs];
// The Virtual List set up
setExtArr(groupedExtensions.reduce((p, c) => p.concat(...c[1]), [] as IExtension[]));
setLangArr(groupedExtensions.map((g) => g[0]));
setLangCountArr(groupedExtensions.map((lang) => lang[1].length));
const groupedExtensions: [string, IExtension[]][] = groupExtensions(filtered)
.filter((group) => group[EXTENSIONS].length > 0)
.filter((group) => combinedShownLangs.includes(group[LANGUAGE]));
// Virtual List set up
const flatExtensions = [] as (IExtension | string)[];
groupedExtensions.forEach((group) => {
flatExtensions.push(group[LANGUAGE]);
group[1].forEach((it) => flatExtensions.push(it));
});
setFlatRenderItems(flatExtensions);
}
}, [extensionsRaw, query, shownLangs]);
@@ -178,7 +182,7 @@ export default function MangaExtensions() {
document.removeEventListener('dragover', dragOverHandler);
input?.removeEventListener('change', changeHandler);
};
}, [extArr]); // useEffect only after <input> renders
}, [flatRenderItems]); // useEffect only after <input> renders
if (extensionsRaw.length === 0) {
return <LoadingPlaceholder />;
@@ -192,30 +196,43 @@ export default function MangaExtensions() {
id="external-extension-file"
style={{ display: 'none' }}
/>
<GroupedVirtuoso
fixedItemHeight={57}
groupCounts={langCountArr}
groupContent={(index) => (
<Typography
key={langArr[index][0]}
variant="h4"
style={{
paddingLeft: 25, margin: 0, paddingBottom: 5, backgroundColor: 'rgb(18, 18, 18)',
}}
>
{langCodeToName(langArr[index])}
</Typography>
)}
style={{ height: isMobile ? 'calc(100vh - 64px - 64px)' : 'calc(100vh - 64px)' }}
itemContent={(index) => (
<ExtensionCard
key={extArr[index].apkName}
extension={extArr[index]}
notifyInstall={() => {
triggerUpdate();
}}
/>
)}
<Virtuoso
style={{
height: isMobile ? 'calc(100vh - 64px - 64px)' : 'calc(100vh - 64px)',
}}
totalCount={flatRenderItems.length}
itemContent={(index) => {
if (typeof (flatRenderItems[index]) === 'string') {
const item = flatRenderItems[index] as string;
return (
<Typography
key={item}
variant="h2"
style={{
paddingLeft: 25,
paddingBottom: '0.83em',
paddingTop: '0.83em',
backgroundColor: 'rgb(18, 18, 18)',
fontSize: '2em',
fontWeight: 'bold',
}}
>
{langCodeToName(item)}
</Typography>
);
}
const item = flatRenderItems[index] as IExtension;
return (
<ExtensionCard
key={item.apkName}
extension={item}
notifyInstall={() => {
triggerUpdate();
}}
/>
);
}}
/>
</>
);

4
src/screens/Library.tsx
View File

@@ -15,7 +15,7 @@ import LoadingPlaceholder from 'components/util/LoadingPlaceholder';
import TabPanel from 'components/util/TabPanel';
import LibraryOptions from 'components/library/LibraryOptions';
import LibraryMangaGrid from 'components/library/LibraryMangaGrid';
import LibrarySearch from 'components/library/LibrarySearch';
import AppbarSearch from 'components/util/AppbarSearch';
import { useQueryParam, NumberParam } from 'use-query-params';
interface IMangaCategory {
@@ -29,7 +29,7 @@ export default function Library() {
useEffect(() => {
setTitle('Library'); setAction(
<>
<LibrarySearch />
<AppbarSearch />
<LibraryOptions />
</>,
);

2
src/util/useLibraryOptions.ts
View File

@@ -8,8 +8,6 @@
import { BooleanParam, useQueryParam, StringParam } from 'use-query-params';
export type NullAndUndefined<T> = T | null | undefined;
interface IUseLibraryOptions {
downloaded: NullAndUndefined<boolean>
setDownloaded: (downloaded: NullAndUndefined<boolean>)=>void