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

Move "SelectableCollection" to "base" folder

Browse Source
This commit is contained in:
schroda
2025-10-04 00:14:11 +02:00
parent 9329ef5fdc
commit 3e98b5172d
13 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/features/category/components/CategorySelect.tsx
View File

@@ -18,7 +18,7 @@ import { Link } from 'react-router-dom';
import Stack from '@mui/material/Stack';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { Mangas } from '@/features/manga/services/Mangas.ts';
import { useSelectableCollection } from '@/features/collection/hooks/useSelectableCollection.ts';
import { useSelectableCollection } from '@/base/collection/hooks/useSelectableCollection.ts';
import { ThreeStateCheckboxInput } from '@/base/components/inputs/ThreeStateCheckboxInput.tsx';
import { Categories } from '@/features/category/services/Categories.ts';
import { CheckboxInput } from '@/base/components/inputs/CheckboxInput.tsx';

6
src/features/chapter/components/ChapterList.tsx
View File

@@ -21,7 +21,7 @@ import {
} from '@/features/chapter/utils/ChapterList.util.tsx';
import { EmptyViewAbsoluteCentered } from '@/base/components/feedback/EmptyViewAbsoluteCentered.tsx';
import { ChaptersToolbarMenu } from '@/features/chapter/components/ChaptersToolbarMenu.tsx';
import { SelectionFAB } from '@/features/collection/components/SelectionFAB.tsx';
import { SelectionFAB } from '@/base/collection/components/SelectionFAB.tsx';
import { DEFAULT_FULL_FAB_HEIGHT } from '@/base/components/buttons/StyledFab.tsx';
import {
ChapterListFieldsFragment,
@@ -29,8 +29,8 @@ import {
GetChaptersMangaQueryVariables,
MangaScreenFieldsFragment,
} from '@/lib/graphql/generated/graphql.ts';
import { useSelectableCollection } from '@/features/collection/hooks/useSelectableCollection.ts';
import { SelectableCollectionSelectAll } from '@/features/collection/components/SelectableCollectionSelectAll.tsx';
import { useSelectableCollection } from '@/base/collection/hooks/useSelectableCollection.ts';
import { SelectableCollectionSelectAll } from '@/base/collection/components/SelectableCollectionSelectAll.tsx';
import { Chapters } from '@/features/chapter/services/Chapters.ts';
import { ChapterActionMenuItems } from '@/features/chapter/components/actions/ChapterActionMenuItems.tsx';
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';

2
src/features/chapter/components/actions/ChapterActionMenuItems.tsx
View File

@@ -16,7 +16,7 @@ import BookmarkRemove from '@mui/icons-material/BookmarkRemove';
import BookmarkAdd from '@mui/icons-material/BookmarkAdd';
import DoneAll from '@mui/icons-material/DoneAll';
import { ComponentProps, useMemo } from 'react';
import { SelectableCollectionReturnType } from '@/features/collection/hooks/useSelectableCollection.ts';
import { SelectableCollectionReturnType } from '@/base/collection/hooks/useSelectableCollection.ts';
import { Chapters } from '@/features/chapter/services/Chapters.ts';
import { MenuItem } from '@/base/components/menu/MenuItem.tsx';
import {

40
src/features/collection/components/SelectableCollectionSelectAll.tsx
View File

@@ -1,40 +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 Checkbox from '@mui/material/Checkbox';
import { useTranslation } from 'react-i18next';
import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
export const SelectableCollectionSelectAll = ({
areAllItemsSelected,
areNoItemsSelected,
onChange,
}: {
areAllItemsSelected: boolean;
areNoItemsSelected: boolean;
onChange: (checked: boolean) => void;
}) => {
const { t } = useTranslation();
return (
<CustomTooltip title={t(!areAllItemsSelected ? 'global.button.select_all' : 'global.button.clear_selection')}>
<Checkbox
sx={{
padding: '8px',
color: 'inherit',
'&.Mui-checked, &.MuiCheckbox-indeterminate': {
color: 'inherit',
},
}}
checked={areAllItemsSelected}
indeterminate={!areNoItemsSelected && !areAllItemsSelected}
onChange={(_, checked) => onChange(checked)}
/>
</CustomTooltip>
);
};

55
src/features/collection/components/SelectableCollectionSelectMode.tsx
View File

@@ -1,55 +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 Checkbox from '@mui/material/Checkbox';
import { useTranslation } from 'react-i18next';
import ClearIcon from '@mui/icons-material/Clear';
import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
import { SelectableCollectionSelectAll } from '@/features/collection/components/SelectableCollectionSelectAll.tsx';
export const SelectableCollectionSelectMode = ({
isActive,
areAllItemsSelected,
areNoItemsSelected,
onSelectAll,
onModeChange,
}: {
isActive: boolean;
areAllItemsSelected: boolean;
areNoItemsSelected: boolean;
onSelectAll: (selectAll: boolean) => void;
onModeChange: (checked: boolean) => void;
}) => {
const { t } = useTranslation();
return (
<>
{isActive && (
<SelectableCollectionSelectAll
areAllItemsSelected={areAllItemsSelected}
areNoItemsSelected={areNoItemsSelected}
onChange={onSelectAll}
/>
)}
<CustomTooltip title={t(!isActive ? 'global.button.select_all' : 'global.button.cancel')}>
<Checkbox
checkedIcon={<ClearIcon />}
sx={{
padding: '8px',
color: 'inherit',
'&.Mui-checked': {
color: 'inherit',
},
}}
checked={isActive}
onChange={(_, checked) => onModeChange(checked)}
/>
</CustomTooltip>
</>
);
};

65
src/features/collection/components/SelectionFAB.tsx
View File

@@ -1,65 +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 MoreHoriz from '@mui/icons-material/MoreHoriz';
import Fab from '@mui/material/Fab';
import Box from '@mui/material/Box';
import { styled } from '@mui/material/styles';
import React, { type JSX } from 'react';
import { useTranslation } from 'react-i18next';
import PopupState, { bindMenu, bindTrigger } from 'material-ui-popup-state';
import { DEFAULT_FAB_STYLE } from '@/base/components/buttons/StyledFab.tsx';
import { Menu } from '@/base/components/menu/Menu.tsx';
import { TranslationKey } from '@/base/Base.types.ts';
interface SelectionFABProps {
children: (handleClose: () => void, setHideMenu: (hide: boolean) => void) => JSX.Element;
selectedItemsCount: number;
title: TranslationKey;
}
const FabContainer = styled(Box)(({ theme }) => ({
...DEFAULT_FAB_STYLE,
height: `calc(${DEFAULT_FAB_STYLE.height} + 1)`,
paddingTop: '8px',
zIndex: 1, // the "Checkbox" (MUI) component of the "ChapterCard" has z-index 1, which causes it to take over the mouse events
[theme.breakpoints.down('md')]: {
marginBottom: '64px',
},
}));
export const SelectionFAB: React.FC<SelectionFABProps> = ({ children, selectedItemsCount, title }) => {
const { t } = useTranslation();
return (
<PopupState variant="popover" popupId="selection-fab-menu">
{(popupState) => (
<>
<FabContainer {...bindTrigger(popupState)}>
<Fab variant="extended" color="primary" id="selectionMenuButton">
{`${selectedItemsCount} ${t(title, { count: selectedItemsCount })}`}
<MoreHoriz sx={{ ml: 1 }} />
</Fab>
</FabContainer>
<Menu
{...bindMenu(popupState)}
id="selectionMenu"
anchorOrigin={{ horizontal: 'right', vertical: 'top' }}
transformOrigin={{ horizontal: 'right', vertical: 'bottom' }}
MenuListProps={{
'aria-labelledby': 'selectionMenuButton',
}}
>
{(onClose, setHideMenu) => children(onClose, setHideMenu)}
</Menu>
</>
)}
</PopupState>
);
};

145
src/features/collection/hooks/useSelectableCollection.ts
View File

@@ -1,145 +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 { useCallback, useRef, useState } from 'react';
export type SelectableCollectionReturnType<Id extends number | string, Key extends string = string> = {
selectedItemIds: Id[];
keySelectedItemIds: Id[];
areAllItemsSelected: boolean;
areNoItemsSelected: boolean;
areAllItemsForKeySelected: boolean;
areNoItemsForKeySelected: boolean;
handleSelection: (id: Id, selected: boolean, options?: { selectRange?: boolean; key?: Key }) => void;
handleSelectAll: (selectAll: boolean, ids: Id[], key?: Key) => void;
setSelectionForKey: (key: Key, ids: Id[]) => void;
getSelectionForKey: (key: Key) => Id[];
clearSelection: () => void;
reset: () => void;
};
export const useSelectableCollection = <Id extends number | string, Key extends string = 'default'>(
totalCount: number,
{
itemIds = [],
keyCount = totalCount,
currentKey,
initialState = {} as Record<Key, Id[]>,
}: {
itemIds?: Id[];
keyCount?: number;
currentKey: Key;
initialState?: Record<Key, Id[]>;
},
): SelectableCollectionReturnType<Id, Key> => {
const [keyToSelectedItemIds, setKeyToSelectedItemIds] = useState<Record<string, Id[]>>(initialState);
const lastSelectedItemInfoRef = useRef<{ id: Id; key: Key }>(undefined);
const selectedItemIds = [...new Set(Object.values(keyToSelectedItemIds).flat())];
const areAllItemsSelected = selectedItemIds.length === totalCount;
const areNoItemsSelected = !selectedItemIds.length;
const keySelectedItemIds = keyToSelectedItemIds[currentKey] ?? [];
const areAllItemsForKeySelected = keySelectedItemIds.length === keyCount;
const areNoItemsForKeySelected = keySelectedItemIds.length === 0;
if (areNoItemsForKeySelected) {
lastSelectedItemInfoRef.current = undefined;
}
const handleSelection: SelectableCollectionReturnType<Id, Key>['handleSelection'] = useCallback(
(id, selected, { selectRange = false, key = currentKey } = {}) => {
const deselect = !selected;
const { id: lastSelectedItemId, key: lastSelectedItemIdKey } = lastSelectedItemInfoRef.current ?? {};
lastSelectedItemInfoRef.current = { id, key };
const isSelectRange = selectRange && key === lastSelectedItemIdKey && lastSelectedItemId !== undefined;
const indexOfLastSelectedItemId = isSelectRange ? itemIds.indexOf(lastSelectedItemId) : -1;
const indexOfSelectedId = isSelectRange ? itemIds.indexOf(id) : -1;
const selectedIds = isSelectRange
? itemIds.slice(
Math.min(indexOfLastSelectedItemId, indexOfSelectedId),
Math.max(indexOfLastSelectedItemId, indexOfSelectedId) + 1,
)
: [id];
if (deselect) {
setKeyToSelectedItemIds((prevState) => ({
...prevState,
[key]: prevState[key]?.filter((selectedItemId) => !selectedIds.includes(selectedItemId)) ?? [],
}));
return;
}
setKeyToSelectedItemIds((prevState) => ({
...prevState,
[key]: [...new Set([...(prevState[key] ?? []), ...selectedIds])],
}));
},
[currentKey, itemIds],
);
const handleSelectAll = useCallback(
(selectAll: boolean, ids: Id[], key: Key = currentKey) => {
switch (selectAll) {
case true:
setKeyToSelectedItemIds((prevState) => ({
...prevState,
[key]: [...ids],
}));
break;
case false:
setKeyToSelectedItemIds((prevState) => ({
...prevState,
[key]: [],
}));
break;
default:
break;
}
},
[currentKey],
);
const setSelectionForKey = useCallback((key: Key, ids: Id[]) => {
setKeyToSelectedItemIds((prevState) => ({
...prevState,
[key]: [...ids],
}));
}, []);
const getSelectionForKey = useCallback((key: Key) => keyToSelectedItemIds[key], [keyToSelectedItemIds]);
const clearSelection = useCallback(() => {
setKeyToSelectedItemIds({});
}, []);
const reset = useCallback(() => {
clearSelection();
setKeyToSelectedItemIds(initialState);
}, [clearSelection, initialState]);
return {
selectedItemIds,
keySelectedItemIds,
handleSelection,
handleSelectAll,
areAllItemsSelected,
areNoItemsSelected,
areAllItemsForKeySelected,
areNoItemsForKeySelected,
setSelectionForKey,
getSelectionForKey,
clearSelection,
reset,
};
};

6
src/features/library/screens/Library.tsx
View File

@@ -23,10 +23,10 @@ import { LibraryToolbarMenu } from '@/features/library/components/LibraryToolbar
import { LibraryMangaGrid } from '@/features/library/components/LibraryMangaGrid.tsx';
import { AppbarSearch } from '@/base/components/AppbarSearch.tsx';
import { UpdateChecker } from '@/features/updates/components/UpdateChecker.tsx';
import { useSelectableCollection } from '@/features/collection/hooks/useSelectableCollection.ts';
import { SelectableCollectionSelectMode } from '@/features/collection/components/SelectableCollectionSelectMode.tsx';
import { useSelectableCollection } from '@/base/collection/hooks/useSelectableCollection.ts';
import { SelectableCollectionSelectMode } from '@/base/collection/components/SelectableCollectionSelectMode.tsx';
import { useGetVisibleLibraryMangas } from '@/features/library/hooks/useGetVisibleLibraryMangas.ts';
import { SelectionFAB } from '@/features/collection/components/SelectionFAB.tsx';
import { SelectionFAB } from '@/base/collection/components/SelectionFAB.tsx';
import { MangaActionMenuItems } from '@/features/manga/components/MangaActionMenuItems.tsx';
import { TabsMenu } from '@/base/components/tabs/TabsMenu.tsx';
import { TabsWrapper } from '@/base/components/tabs/TabsWrapper.tsx';

2
src/features/manga/Manga.types.ts
View File

@@ -9,7 +9,7 @@
import { LongPressPointerHandlers, LongPressResult } from 'use-long-press/lib/use-long-press.types';
import { PopupState } from 'material-ui-popup-state/hooks';
import type { JSX } from 'react';
import { SelectableCollectionReturnType } from '@/features/collection/hooks/useSelectableCollection.ts';
import { SelectableCollectionReturnType } from '@/base/collection/hooks/useSelectableCollection.ts';
import { useManageMangaLibraryState } from '@/features/manga/hooks/useManageMangaLibraryState.tsx';
import {
ChapterType,

2
src/features/manga/components/MangaActionMenuItems.tsx
View File

@@ -20,7 +20,7 @@ import { Link } from 'react-router-dom';
import SyncIcon from '@mui/icons-material/Sync';
import Dialog from '@mui/material/Dialog';
import { Mangas } from '@/features/manga/services/Mangas.ts';
import { SelectableCollectionReturnType } from '@/features/collection/hooks/useSelectableCollection.ts';
import { SelectableCollectionReturnType } from '@/base/collection/hooks/useSelectableCollection.ts';
import { MenuItem } from '@/base/components/menu/MenuItem.tsx';
import {
createGetMenuItemTitle,

2
src/features/manga/components/MangaGrid.tsx
View File

@@ -14,7 +14,7 @@ import { useTranslation } from 'react-i18next';
import { EmptyViewAbsoluteCentered } from '@/base/components/feedback/EmptyViewAbsoluteCentered.tsx';
import { LoadingPlaceholder } from '@/base/components/feedback/LoadingPlaceholder.tsx';
import { MangaCard } from '@/features/manga/components/cards/MangaCard.tsx';
import { SelectableCollectionReturnType } from '@/features/collection/hooks/useSelectableCollection.ts';
import { SelectableCollectionReturnType } from '@/base/collection/hooks/useSelectableCollection.ts';
import { DEFAULT_FULL_FAB_HEIGHT } from '@/base/components/buttons/StyledFab.tsx';
import { MangaCardProps } from '@/features/manga/Manga.types.ts';
import { MangaType } from '@/lib/graphql/generated/graphql.ts';

2
src/features/manga/components/MangaOptionButton.tsx
View File

@@ -15,7 +15,7 @@ import MoreVertIcon from '@mui/icons-material/MoreVert';
import { PopupState } from 'material-ui-popup-state/hooks';
import { bindTrigger } from 'material-ui-popup-state';
import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
import { SelectableCollectionReturnType } from '@/features/collection/hooks/useSelectableCollection.ts';
import { SelectableCollectionReturnType } from '@/base/collection/hooks/useSelectableCollection.ts';
import { MangaType } from '@/lib/graphql/generated/graphql.ts';
import { MUIUtil } from '@/lib/mui/MUI.util.ts';