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

Render selection fab in case only one category exists (#553)

Browse Source
This commit is contained in:
schroda
2024-01-15 21:19:35 +01:00
committed by GitHub
parent 38b364bb55
commit 6708a958ce
1 changed files with 70 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
src/screens/Library.tsx
View File

@@ -95,6 +95,27 @@ export function Library() {
[selectedItemIds.length, mangas], [selectedItemIds.length, mangas],
); );
const selectionFab = useMemo(() => {
if (!isSelectModeActive) {
return null;
}
return (
<SelectionFAB selectedItemsCount={selectedItemIds.length} title="manga.title">
{(handleClose, setHideMenu) => (
<MangaActionMenuItems
selectedMangas={selectedMangas}
onClose={(selectionModeState) => {
handleClose();
setIsSelectModeActive(selectionModeState);
}}
setHideMenu={setHideMenu}
/>
)}
</SelectionFAB>
);
}, [isSelectModeActive, selectedMangas]);
const { setTitle, setAction } = useContext(NavBarContext); const { setTitle, setAction } = useContext(NavBarContext);
useEffect(() => { useEffect(() => {
const title = t('library.title'); const title = t('library.title');
@@ -172,76 +193,60 @@ export function Library() {
if (tabs.length === 1) { if (tabs.length === 1) {
return ( return (
<LibraryMangaGrid <>
mangas={mangas} <LibraryMangaGrid
message={t('library.error.label.empty')} mangas={mangas}
isLoading={activeTab != null && mangaLoading} message={t('library.error.label.empty')}
selectedMangaIds={selectedItemIds} isLoading={activeTab != null && mangaLoading}
isSelectModeActive={isSelectModeActive} selectedMangaIds={selectedItemIds}
handleSelection={handleSelect} isSelectModeActive={isSelectModeActive}
showFilteredOutMessage={showFilteredOutMessage} handleSelection={handleSelect}
/> showFilteredOutMessage={showFilteredOutMessage}
/>
{selectionFab}
</>
); );
} }
return ( return (
<> <TabsWrapper>
<TabsWrapper> <TabsMenu value={activeTab.order} onChange={(e, newTab) => handleTabChange(newTab)} tabsCount={tabs.length}>
<TabsMenu
value={activeTab.order}
onChange={(e, newTab) => handleTabChange(newTab)}
tabsCount={tabs.length}
>
{tabs.map((tab) => (
<Tab
sx={{ display: 'flex' }}
key={tab.id}
label={
<TitleWithSizeTag>
{tab.name}
{options.showTabSize ? <TitleSizeTag label={tab.mangas.totalCount} /> : null}
</TitleWithSizeTag>
}
value={tab.order}
/>
))}
</TabsMenu>
{tabs.map((tab) => ( {tabs.map((tab) => (
<TabPanel key={tab.order} index={tab.order} currentIndex={activeTab.order}> <Tab
{tab === activeTab && sx={{ display: 'flex' }}
(mangaError ? ( key={tab.id}
<EmptyView label={
message={t('manga.error.label.request_failure')} <TitleWithSizeTag>
messageExtra={mangaError.message ?? mangaError} {tab.name}
/> {options.showTabSize ? <TitleSizeTag label={tab.mangas.totalCount} /> : null}
) : ( </TitleWithSizeTag>
<LibraryMangaGrid }
mangas={mangas} value={tab.order}
message={t('library.error.label.empty')} />
isLoading={mangaLoading}
selectedMangaIds={selectedItemIds}
isSelectModeActive={isSelectModeActive}
handleSelection={handleSelect}
showFilteredOutMessage={showFilteredOutMessage}
/>
))}
</TabPanel>
))} ))}
</TabsWrapper> </TabsMenu>
{isSelectModeActive && ( {tabs.map((tab) => (
<SelectionFAB selectedItemsCount={selectedItemIds.length} title="manga.title"> <TabPanel key={tab.order} index={tab.order} currentIndex={activeTab.order}>
{(handleClose, setHideMenu) => ( {tab === activeTab &&
<MangaActionMenuItems (mangaError ? (
selectedMangas={selectedMangas} <EmptyView
onClose={(selectionModeState) => { message={t('manga.error.label.request_failure')}
handleClose(); messageExtra={mangaError.message ?? mangaError}
setIsSelectModeActive(selectionModeState); />
}} ) : (
setHideMenu={setHideMenu} <LibraryMangaGrid
/> mangas={mangas}
)} message={t('library.error.label.empty')}
</SelectionFAB> isLoading={mangaLoading}
)} selectedMangaIds={selectedItemIds}
</> isSelectModeActive={isSelectModeActive}
handleSelection={handleSelect}
showFilteredOutMessage={showFilteredOutMessage}
/>
))}
</TabPanel>
))}
{selectionFab}
</TabsWrapper>
); );
} }