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

Use HOC for reader context usage

Browse Source
This commit is contained in:
schroda
2024-12-21 03:46:55 +01:00
parent 34f484a946
commit f5642af219
27 changed files with 997 additions and 459 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/modules/reader/components/ReaderPageNumber.tsx
View File

@@ -11,29 +11,46 @@ import Typography from '@mui/material/Typography';
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';
import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
import { ProgressBarType, ReadingDirection } from '@/modules/reader/types/Reader.types.ts';
import {
IReaderSettings,
ProgressBarType,
ReadingDirection,
TReaderScrollbarContext,
} from '@/modules/reader/types/Reader.types.ts';
import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx';
import { getPage } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
import { useReaderProgressBarContext } from '@/modules/reader/contexts/ReaderProgressBarContext.tsx';
import { useReaderScrollbarContext } from '@/modules/reader/contexts/ReaderScrollbarContext.tsx';
import { reverseString } from '@/util/Strings.ts';
import { NavbarContextType } from '@/modules/navigation-bar/NavigationBar.types.ts';
import { ReaderStatePages, TReaderProgressBarContext } from '@/modules/reader/types/ReaderProgressBar.types.ts';
import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
export const ReaderPageNumber = () => {
const { isDesktop } = ReaderService.useOverlayMode();
const { scrollbarXSize } = useReaderScrollbarContext();
const { readerNavBarWidth } = useNavBarContext();
const { isMaximized } = useReaderProgressBarContext();
const { currentPageIndex, pages, totalPages } = userReaderStatePagesContext();
const { progressBarType, shouldShowPageNumber, readingDirection } = ReaderService.useSettings();
const BaseReaderPageNumber = ({
isDesktop,
scrollbarXSize,
readerNavBarWidth,
isMaximized,
currentPageIndex,
pages,
totalPages,
progressBarType,
shouldShowPageNumber,
readingDirection,
}: Pick<TReaderScrollbarContext, 'scrollbarXSize'> &
Pick<ReturnType<typeof ReaderService.useOverlayMode>, 'isDesktop'> &
Pick<NavbarContextType, 'readerNavBarWidth'> &
Pick<TReaderProgressBarContext, 'isMaximized'> &
Pick<ReaderStatePages, 'currentPageIndex' | 'pages' | 'totalPages'> &
Pick<IReaderSettings, 'progressBarType' | 'shouldShowPageNumber' | 'readingDirection'>) => {
const pageName = useMemo(() => {
const currentPageName = getPage(currentPageIndex, pages).name;
const SEPARATOR = '/';
const tmpPageName = `${currentPageName}${SEPARATOR}${totalPages}`;
return readingDirection.value === ReadingDirection.LTR ? tmpPageName : reverseString(tmpPageName, SEPARATOR);
}, [currentPageIndex, pages, totalPages, readingDirection.value]);
return readingDirection === ReadingDirection.LTR ? tmpPageName : reverseString(tmpPageName, SEPARATOR);
}, [currentPageIndex, pages, totalPages, readingDirection]);
if (!shouldShowPageNumber) {
return null;
@@ -74,3 +91,27 @@ export const ReaderPageNumber = () => {
</Stack>
);
};
export const ReaderPageNumber = withPropsFrom(
BaseReaderPageNumber,
[
ReaderService.useOverlayMode,
useReaderScrollbarContext,
useNavBarContext,
useReaderProgressBarContext,
userReaderStatePagesContext,
ReaderService.useSettingsWithoutDefaultFlag,
],
[
'isDesktop',
'scrollbarXSize',
'readerNavBarWidth',
'isMaximized',
'currentPageIndex',
'pages',
'totalPages',
'progressBarType',
'shouldShowPageNumber',
'readingDirection',
],
);