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