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

Memoize components

Browse Source
This commit is contained in:
schroda
2024-12-22 00:41:56 +01:00
parent f5642af219
commit 58c402dd0e
18 changed files with 38 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/modules/reader/components/overlay/ReaderOverlay.tsx
View File

@@ -7,7 +7,7 @@
*/
import Box from '@mui/material/Box';
import { useState } from 'react';
import { memo, useState } from 'react';
import { BaseReaderOverlayProps, MobileHeaderProps } from '@/modules/reader/types/ReaderOverlay.types.ts';
import { ReaderSettings } from '@/modules/reader/components/settings/ReaderSettings.tsx';
import { ReaderPageNumber } from '@/modules/reader/components/ReaderPageNumber.tsx';
@@ -51,7 +51,7 @@ const BaseReaderOverlay = ({
};
export const ReaderOverlay = withPropsFrom(
BaseReaderOverlay,
memo(BaseReaderOverlay),
[ReaderService.useOverlayMode],
['isDesktop', 'isMobile'],
);

3
src/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx
View File

@@ -22,6 +22,7 @@ import { Link as RouterLink } from 'react-router-dom';
import { alpha } from '@mui/material/styles';
import Tooltip from '@mui/material/Tooltip';
import Slide from '@mui/material/Slide';
import { memo } from 'react';
import { useGetOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts';
import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines.tsx';
import { actionToTranslationKey, ChapterAction, Chapters } from '@/modules/chapter/services/Chapters.ts';
@@ -141,7 +142,7 @@ const BaseReaderOverlayHeaderMobile = ({
};
export const ReaderOverlayHeaderMobile = withPropsFrom(
BaseReaderOverlayHeaderMobile,
memo(BaseReaderOverlayHeaderMobile),
[useReaderStateMangaContext, useReaderStateChaptersContext, useReaderScrollbarContext],
['manga', 'currentChapter', 'scrollbarYSize'],
);

4
src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktop.tsx
View File

@@ -14,7 +14,7 @@ import ArrowBack from '@mui/icons-material/ArrowBack';
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
import PushPinIcon from '@mui/icons-material/PushPin';
import Divider from '@mui/material/Divider';
import { useCallback, useLayoutEffect, useRef, useState } from 'react';
import { memo, useCallback, useLayoutEffect, useRef, useState } from 'react';
import Drawer from '@mui/material/Drawer';
import { useGetOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts';
import { ReaderNavBarDesktopProps } from '@/modules/reader/types/ReaderOverlay.types.ts';
@@ -178,7 +178,7 @@ const BaseReaderNavBarDesktop = ({
};
export const ReaderNavBarDesktop = withPropsFrom(
BaseReaderNavBarDesktop,
memo(BaseReaderNavBarDesktop),
[
useNavBarContext,
useReaderStateMangaContext,

4
src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopChapterNavigation.tsx
View File

@@ -10,7 +10,7 @@ import Stack from '@mui/material/Stack';
import { useTranslation } from 'react-i18next';
import Box from '@mui/material/Box';
import MenuItem from '@mui/material/MenuItem';
import { useLayoutEffect } from 'react';
import { memo, useLayoutEffect } from 'react';
import Popover from '@mui/material/Popover';
import { bindPopover, bindTrigger, usePopupState } from 'material-ui-popup-state/hooks';
import FormControl from '@mui/material/FormControl';
@@ -117,7 +117,7 @@ const BaseReaderNavBarDesktopChapterNavigation = ({
};
export const ReaderNavBarDesktopChapterNavigation = withPropsFrom(
BaseReaderNavBarDesktopChapterNavigation,
memo(BaseReaderNavBarDesktopChapterNavigation),
[
() => ({
readerThemeDirection: ReaderService.useGetThemeDirection(),

4
src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopPageNavigation.tsx
View File

@@ -9,7 +9,7 @@
import Stack from '@mui/material/Stack';
import { useTranslation } from 'react-i18next';
import MenuItem from '@mui/material/MenuItem';
import { useMemo } from 'react';
import { memo, useMemo } from 'react';
import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
import { Select } from '@/modules/core/components/inputs/Select.tsx';
@@ -80,7 +80,7 @@ const BaseReaderNavBarDesktopPageNavigation = ({
};
export const ReaderNavBarDesktopPageNavigation = withPropsFrom(
BaseReaderNavBarDesktopPageNavigation,
memo(BaseReaderNavBarDesktopPageNavigation),
[() => ({ openPage: ReaderControls.useOpenPage() }), ReaderService.useSettingsWithoutDefaultFlag],
['readingDirection', 'openPage'],
);

4
src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobile.tsx
View File

@@ -18,7 +18,7 @@ import DialogContent from '@mui/material/DialogContent';
import Tooltip from '@mui/material/Tooltip';
import { useTranslation } from 'react-i18next';
import Slide from '@mui/material/Slide';
import { useLayoutEffect } from 'react';
import { memo, useLayoutEffect } from 'react';
import { ReaderBottomBarMobileProps } from '@/modules/reader/types/ReaderOverlay.types.ts';
import { MobileReaderProgressBar } from '@/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx';
import { ReaderChapterList } from '@/modules/reader/components/overlay/navigation/ReaderChapterList.tsx';
@@ -123,7 +123,7 @@ const BaseReaderBottomBarMobile = ({
};
export const ReaderBottomBarMobile = withPropsFrom(
BaseReaderBottomBarMobile,
memo(BaseReaderBottomBarMobile),
[useReaderStateChaptersContext, useReaderScrollbarContext],
['currentChapter', 'chapters', 'scrollbarXSize', 'scrollbarYSize'],
);

3
src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobileQuickSettings.tsx
View File

@@ -7,6 +7,7 @@
*/
import Stack from '@mui/material/Stack';
import { memo } from 'react';
import { ReaderSettingReadingMode } from '@/modules/reader/components/settings/layout/ReaderSettingReadingMode.tsx';
import { ReaderSettingReadingDirection } from '@/modules/reader/components/settings/layout/ReaderSettingReadingDirection.tsx';
import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
@@ -49,7 +50,7 @@ const BaseReaderBottomBarMobileQuickSettings = ({
};
export const ReaderBottomBarMobileQuickSettings = withPropsFrom(
BaseReaderBottomBarMobileQuickSettings,
memo(BaseReaderBottomBarMobileQuickSettings),
[useReaderStateMangaContext, ReaderService.useSettings],
['manga', 'readingMode', 'readingDirection'],
);

4
src/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx
View File

@@ -7,7 +7,7 @@
*/
import Box, { BoxProps } from '@mui/material/Box';
import { ReactNode, useCallback, useMemo, useRef } from 'react';
import { memo, ReactNode, useCallback, useMemo, useRef } from 'react';
import ClickAwayListener from '@mui/material/ClickAwayListener';
import { TypographyProps } from '@mui/material/Typography';
import { StackProps } from '@mui/material/Stack';
@@ -218,7 +218,7 @@ const BaseReaderProgressBar = ({
};
export const ReaderProgressBar = withPropsFrom(
BaseReaderProgressBar,
memo(BaseReaderProgressBar),
[
useReaderProgressBarContext,
() => ({ openPage: ReaderControls.useOpenPage() }),

4
src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx
View File

@@ -12,7 +12,7 @@ import SkipNextIcon from '@mui/icons-material/SkipNext';
import Stack from '@mui/material/Stack';
import { alpha } from '@mui/material/styles';
import Box from '@mui/material/Box';
import { useLayoutEffect } from 'react';
import { memo, useLayoutEffect } from 'react';
import { ReaderProgressBar } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx';
import { ReaderProgressBarSlot } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarSlot.tsx';
import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx';
@@ -186,7 +186,7 @@ const BaseMobileReaderProgressBar = ({
};
export const MobileReaderProgressBar = withPropsFrom(
BaseMobileReaderProgressBar,
memo(BaseMobileReaderProgressBar),
[useReaderStateChaptersContext, useReaderOverlayContext, useReaderProgressBarContext],
['previousChapter', 'nextChapter', 'isVisible', 'setIsMaximized'],
);

3
src/modules/reader/components/overlay/progress-bar/variants/StandardReaderProgressBar.tsx
View File

@@ -8,6 +8,7 @@
import { alpha, darken, lighten, useTheme } from '@mui/material/styles';
import Box from '@mui/material/Box';
import { memo } from 'react';
import { ReaderProgressBar } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx';
import { ReaderProgressBarSlot } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarSlot.tsx';
import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx';
@@ -271,7 +272,7 @@ const BaseStandardReaderProgressBar = ({
};
export const StandardReaderProgressBar = withPropsFrom(
BaseStandardReaderProgressBar,
memo(BaseStandardReaderProgressBar),
[
useNavBarContext,
useReaderProgressBarContext,

4
src/modules/reader/components/viewer/ReaderPage.tsx
View File

@@ -6,7 +6,7 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { ComponentProps, ForwardedRef, forwardRef } from 'react';
import { ComponentProps, ForwardedRef, forwardRef, memo } from 'react';
import { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx';
import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
import { IReaderSettings, ReaderCustomFilter, TReaderScrollbarContext } from '@/modules/reader/types/Reader.types.ts';
@@ -142,7 +142,7 @@ const BaseReaderPage = forwardRef(
);
export const ReaderPage = withPropsFrom(
BaseReaderPage,
memo(BaseReaderPage),
[ReaderService.useSettingsWithoutDefaultFlag, useReaderScrollbarContext],
[
'readingMode',

3
src/modules/reader/components/viewer/ReaderTransitionPage.tsx
View File

@@ -11,6 +11,7 @@ import Stack from '@mui/material/Stack';
import { useTranslation } from 'react-i18next';
import Button from '@mui/material/Button';
import { Link } from 'react-router-dom';
import { memo } from 'react';
import { useReaderScrollbarContext } from '@/modules/reader/contexts/ReaderScrollbarContext.tsx';
import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx';
import { ChapterScanlatorInfo } from '@/modules/chapter/services/Chapters.ts';
@@ -204,7 +205,7 @@ const BaseReaderTransitionPage = ({
};
export const ReaderTransitionPage = withPropsFrom(
BaseReaderTransitionPage,
memo(BaseReaderTransitionPage),
[useReaderStateChaptersContext, useReaderScrollbarContext, useNavBarContext],
[
'manga',

3
src/modules/reader/components/viewer/ReaderViewer.tsx
View File

@@ -9,6 +9,7 @@
import {
ForwardedRef,
forwardRef,
memo,
useEffect,
useImperativeHandle,
useLayoutEffect,
@@ -337,7 +338,7 @@ const BaseReaderViewer = forwardRef(
);
export const ReaderViewer = withPropsFrom(
BaseReaderViewer,
memo(BaseReaderViewer),
[
userReaderStatePagesContext,
ReaderService.useSettingsWithoutDefaultFlag,

4
src/modules/reader/components/viewer/pager/BasePager.tsx
View File

@@ -6,7 +6,7 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { ReactNode, useEffect, useMemo, useRef } from 'react';
import { memo, ReactNode, useEffect, useMemo, useRef } from 'react';
import Box, { BoxProps } from '@mui/material/Box';
import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
import { getImageWidthStyling, getPageIndexesToLoad } from '@/modules/reader/utils/ReaderPager.utils.tsx';
@@ -87,7 +87,7 @@ const BaseBasePager = ({
};
export const BasePager = withPropsFrom(
BaseBasePager,
memo(BaseBasePager),
[ReaderService.useSettingsWithoutDefaultFlag],
['readingMode', 'pageScaleMode', 'shouldStretchPage', 'readerWidth', 'imagePreLoadAmount'],
);

4
src/modules/reader/components/viewer/pager/ReaderDoublePagedPager.tsx
View File

@@ -7,7 +7,7 @@
*/
import { Direction, useTheme } from '@mui/material/styles';
import { Fragment, useMemo } from 'react';
import { Fragment, memo, useMemo } from 'react';
import { BasePager } from '@/modules/reader/components/viewer/pager/BasePager.tsx';
import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
import { IReaderSettings, ReaderPagerProps, ReadingDirection } from '@/modules/reader/types/Reader.types.ts';
@@ -116,7 +116,7 @@ const BaseReaderDoublePagedPager = ({
};
export const ReaderDoublePagedPager = withPropsFrom(
BaseReaderDoublePagedPager,
memo(BaseReaderDoublePagedPager),
[ReaderService.useSettingsWithoutDefaultFlag],
['readingDirection'],
);

3
src/modules/reader/components/viewer/pager/ReaderHorizontalPager.tsx
View File

@@ -7,6 +7,7 @@
*/
import { useTheme } from '@mui/material/styles';
import { memo } from 'react';
import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
import { BasePager } from '@/modules/reader/components/viewer/pager/BasePager.tsx';
import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
@@ -72,7 +73,7 @@ const BaseReaderHorizontalPager = ({
};
export const ReaderHorizontalPager = withPropsFrom(
BaseReaderHorizontalPager,
memo(BaseReaderHorizontalPager),
[ReaderService.useSettingsWithoutDefaultFlag],
['pageGap', 'readingDirection'],
);

5
src/modules/reader/components/viewer/pager/ReaderPagedPager.tsx
View File

@@ -6,11 +6,12 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { memo } from 'react';
import { BasePager } from '@/modules/reader/components/viewer/pager/BasePager.tsx';
import { ReaderPagerProps } from '@/modules/reader/types/Reader.types.ts';
import { createReaderPage } from '@/modules/reader/utils/ReaderPager.utils.tsx';
export const ReaderPagedPager = ({
const BaseReaderPagedPager = ({
onLoad,
onError,
pageLoadStates,
@@ -44,3 +45,5 @@ export const ReaderPagedPager = ({
/>
);
};
export const ReaderPagedPager = memo(BaseReaderPagedPager);

3
src/modules/reader/components/viewer/pager/ReaderVerticalPager.tsx
View File

@@ -6,6 +6,7 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { memo } from 'react';
import { BasePager } from '@/modules/reader/components/viewer/pager/BasePager.tsx';
import { IReaderSettings, ReaderPagerProps, ReadingMode } from '@/modules/reader/types/Reader.types.ts';
import { createReaderPage } from '@/modules/reader/utils/ReaderPager.utils.tsx';
@@ -50,7 +51,7 @@ const BaseReaderVerticalPager = ({
};
export const ReaderVerticalPager = withPropsFrom(
BaseReaderVerticalPager,
memo(BaseReaderVerticalPager),
[ReaderService.useSettingsWithoutDefaultFlag],
['pageGap', 'readingMode'],
);