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

Update to react v19

Browse Source
This commit is contained in:
schroda
2025-04-18 20:42:41 +02:00
parent 213f561fe4
commit 3f93549f34
22 changed files with 52 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/modules/collection/components/SelectionFAB.tsx
View File

@@ -10,7 +10,7 @@ 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 from 'react';
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 '@/modules/core/components/buttons/StyledFab.tsx';

2
src/modules/collection/hooks/useSelectableCollection.ts
View File

@@ -38,7 +38,7 @@ export const useSelectableCollection = <Id extends number | string, Key extends
): SelectableCollectionReturnType<Id, Key> => {
const [keyToSelectedItemIds, setKeyToSelectedItemIds] = useState<Record<string, Id[]>>(initialState);
const lastSelectedItemInfoRef = useRef<{ id: Id; key: Key }>();
const lastSelectedItemInfoRef = useRef<{ id: Id; key: Key }>(undefined);
const selectedItemIds = [...new Set(Object.values(keyToSelectedItemIds).flat())];
const areAllItemsSelected = selectedItemIds.length === totalCount;

2
src/modules/core/components/AppbarSearch.tsx
View File

@@ -31,7 +31,7 @@ export const AppbarSearch: React.FunctionComponent<IProps> = (props) => {
const [query, setQuery] = useQueryParam('query', StringParam);
const [isSearchOpen, setIsSearchOpen] = useState(!isClosable || !!query);
const inputRef = React.useRef<HTMLInputElement>();
const inputRef = React.useRef<HTMLInputElement>(undefined);
const [searchString, setSearchString] = useState(query ?? '');

2
src/modules/core/components/menu/IconMenuItem.tsx
View File

@@ -27,7 +27,7 @@ type IconMenuItemProps = {
renderLabel?: () => React.ReactNode;
LeftIcon?: OverridableComponent<SvgIconTypeMap> & { muiName: string };
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
ref?: RefObject<HTMLLIElement>;
ref?: RefObject<HTMLLIElement | null>;
RightIcon?: OverridableComponent<SvgIconTypeMap> & { muiName: string };
sx?: SxProps<Theme>;
};

2
src/modules/core/components/menu/Menu.tsx
View File

@@ -7,7 +7,7 @@
*/
import MuiMenu, { MenuProps } from '@mui/material/Menu';
import { useState } from 'react';
import { useState, type JSX } from 'react';
export const Menu = ({
children,

2
src/modules/core/components/placeholder/EmptyView.tsx
View File

@@ -8,7 +8,7 @@
// adopted from: https://github.com/tachiyomiorg/tachiyomi/blob/master/app/src/main/java/eu/kanade/tachiyomi/widget/EmptyView.kt
import { useMemo, useState } from 'react';
import { useMemo, useState, type JSX } from 'react';
import Typography from '@mui/material/Typography';
import { SxProps, Theme } from '@mui/material/styles';
import { useTranslation } from 'react-i18next';

2
src/modules/core/components/placeholder/LoadingPlaceholder.tsx
View File

@@ -6,7 +6,7 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import React from 'react';
import React, { type JSX } from 'react';
import CircularProgress from '@mui/material/CircularProgress';
import Box from '@mui/material/Box';

2
src/modules/core/components/settings/MutableListSetting.tsx
View File

@@ -14,7 +14,7 @@ import ListItemButton from '@mui/material/ListItemButton';
import ListItemText from '@mui/material/ListItemText';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { useEffect, useState } from 'react';
import { useEffect, useState, type JSX } from 'react';
import DialogContent from '@mui/material/DialogContent';
import DialogActions from '@mui/material/DialogActions';
import { useTranslation } from 'react-i18next';

4
src/modules/core/hooks/useAutomaticScrolling.ts
View File

@@ -77,8 +77,8 @@ export const useAutomaticScrolling = (
} => {
const isCallback = typeof refOrCallback === 'function';
const elementStyle = useRef<CSSStyleDeclaration>();
const scrollTriggerTimer = useRef<NodeJS.Timeout>();
const elementStyle = useRef<CSSStyleDeclaration>(undefined);
const scrollTriggerTimer = useRef<NodeJS.Timeout>(undefined);
const scrollTriggerAnimationFrameId = useRef(-1);
const [isActive, setIsActive] = useState(false);

2
src/modules/core/hooks/useIntersectionObserver.tsx
View File

@@ -9,7 +9,7 @@
import { RefObject, useLayoutEffect, useState } from 'react';
export const useIntersectionObserver = (
ref: RefObject<HTMLElement> | HTMLElement | undefined | null,
ref: RefObject<HTMLElement | null> | HTMLElement | undefined | null,
callback: IntersectionObserverCallback,
{
ignoreInitialObserve = false,

4
src/modules/core/hooks/useMouseDragScroll.tsx
View File

@@ -32,12 +32,12 @@ export const useMouseDragScroll = (
) => {
const [isDragging, setIsDragging] = useState(false);
const elementStyle = useRef<CSSStyleDeclaration>();
const elementStyle = useRef<CSSStyleDeclaration>(undefined);
const previousClickPosX = useRef<Positions>([0, 0, 0]);
const previousClickPosY = useRef<Positions>([0, 0, 0]);
const previousClickTime = useRef<ClickTimes>([0, 0, 0]);
const scrollAtT0 = useRef<[ScrollLeft: number, ScrollTop: number]>([0, 0]);
const inertiaTimeInterval = useRef<NodeJS.Timeout>();
const inertiaTimeInterval = useRef<NodeJS.Timeout>(undefined);
useEffect(() => {
const element = ref?.current;

2
src/modules/core/hooks/useResizeObserver.tsx
View File

@@ -9,7 +9,7 @@
import { RefObject, useLayoutEffect, useState } from 'react';
export const useResizeObserver = (
ref: RefObject<HTMLElement> | HTMLElement | undefined | null,
ref: RefObject<HTMLElement | null> | HTMLElement | undefined | null,
callback: ResizeObserverCallback,
): (() => void) => {
const [disconnect, setDisconnect] = useState<() => void>(() => {});

1
src/modules/manga/Manga.types.ts
View File

@@ -8,6 +8,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 '@/modules/collection/hooks/useSelectableCollection.ts';
import { useManageMangaLibraryState } from '@/modules/manga/hooks/useManageMangaLibraryState.tsx';
import {

3
src/modules/manga/components/MangaGrid.tsx
View File

@@ -15,6 +15,7 @@ import React, {
useMemo,
useRef,
useState,
type JSX,
} from 'react';
import Grid, { GridTypeMap } from '@mui/material/Grid';
import Box, { BoxProps } from '@mui/material/Box';
@@ -164,7 +165,7 @@ const VerticalGrid = forwardRef(
const snapshotSessionKey = getGridSnapshotKey(location);
const [snapshot] = useSessionStorage<GridStateSnapshot | undefined>(snapshotSessionKey, undefined);
const persistGridStateTimeout = useRef<NodeJS.Timeout | undefined>();
const persistGridStateTimeout = useRef<NodeJS.Timeout | undefined>(undefined);
const persistGridState = (gridState: GridStateSnapshot) => {
const currentUrl = window.location.href;

2
src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopAutoScroll.tsx
View File

@@ -28,7 +28,7 @@ export const ReaderNavBarDesktopAutoScroll = ({
const { t } = useTranslation();
const { isActive, toggleActive } = useReaderAutoScrollContext();
const updateTimeout = useRef<NodeJS.Timeout>();
const updateTimeout = useRef<NodeJS.Timeout>(undefined);
return (
<Stack sx={{ flexDirection: 'row', gap: 1 }}>

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

@@ -76,7 +76,7 @@ const BaseReaderProgressBar = ({
fullSegmentClicks: boolean;
}) => {
const progressBarRef = useRef<HTMLDivElement | null>(null);
const draggingDetectionTimeout = useRef<NodeJS.Timeout>();
const draggingDetectionTimeout = useRef<NodeJS.Timeout>(undefined);
const [totalPagesTextWidth, setTotalPagesTextWidth] = useState(0);
const totalPagesTextRef = useRef<HTMLSpanElement | null>(null);

2
src/modules/reader/hooks/useReaderHideCursorOnInactivity.ts
View File

@@ -9,7 +9,7 @@
import { MutableRefObject, useEffect, useRef } from 'react';
export const useReaderHideCursorOnInactivity = (scrollElementRef: MutableRefObject<HTMLDivElement | null>) => {
const mouseInactiveTimeout = useRef<NodeJS.Timeout>();
const mouseInactiveTimeout = useRef<NodeJS.Timeout>(undefined);
useEffect(() => {
const setCursorVisibility = (visible: boolean) => {

2
src/modules/reader/hooks/useReaderSetPagesState.ts
View File

@@ -39,7 +39,7 @@ export const useReaderSetPagesState = (
setPageToScrollToIndex: ReaderStatePages['setPageToScrollToIndex'],
setTransitionPageMode: ReaderStatePages['setTransitionPageMode'],
) => {
const previousPageData = useRef<string[]>();
const previousPageData = useRef<string[]>(undefined);
useLayoutEffect(() => {
const pagesPayload = pagesResponse.data?.fetchChapterPages;

6
src/modules/reader/hooks/useReaderShowSettingPreviewOnChange.ts
View File

@@ -30,9 +30,9 @@ export const useReaderShowSettingPreviewOnChange = (
const { t } = useTranslation();
// show setting previews on change or when open reader
const previousReadingMode = useRef<IReaderSettingsWithDefaultFlag['readingMode']>();
const previousTapZoneLayout = useRef<IReaderSettingsWithDefaultFlag['tapZoneLayout']>();
const previousTapZoneInvertMode = useRef<IReaderSettingsWithDefaultFlag['tapZoneInvertMode']>();
const previousReadingMode = useRef<IReaderSettingsWithDefaultFlag['readingMode']>(undefined);
const previousTapZoneLayout = useRef<IReaderSettingsWithDefaultFlag['tapZoneLayout']>(undefined);
const previousTapZoneInvertMode = useRef<IReaderSettingsWithDefaultFlag['tapZoneInvertMode']>(undefined);
const isInitialPreview = useRef(true);
useEffect(() => {

4
src/modules/reader/utils/ReaderSettings.utils.tsx
View File

@@ -6,7 +6,7 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { ForwardRefExoticComponent, MemoExoticComponent, RefAttributes } from 'react';
import { NamedExoticComponent, RefAttributes } from 'react';
import {
IReaderSettings,
IReaderSettingsWithDefaultFlag,
@@ -59,7 +59,7 @@ export const isAutoWebtoonMode = (
export const getPagerForReadingMode = (
readingMode: ReadingMode,
): MemoExoticComponent<ForwardRefExoticComponent<ReaderPagerProps & RefAttributes<HTMLDivElement>>> => {
): NamedExoticComponent<ReaderPagerProps & RefAttributes<HTMLDivElement>> => {
switch (readingMode) {
case ReadingMode.SINGLE_PAGE:
return ReaderPagedPager;