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

Remove "react-device-detect" dependency

Browse Source
This commit is contained in:
schroda
2024-05-23 02:29:08 +02:00
parent 297ec2580b
commit 809e8a32bd
7 changed files with 32 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -51,7 +51,6 @@
"p-limit": "5.0.0",
"react": "18.3.1",
"react-beautiful-dnd": "13.1.1",
"react-device-detect": "2.2.3",
"react-dom": "18.3.1",
"react-i18next": "14.1.1",
"react-lazily": "0.9.2",

5
src/components/manga/MangaBadges.tsx
View File

@@ -12,6 +12,7 @@ import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import { useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext.tsx';
import { MangaCardMode } from '@/components/manga/MangaCard.types.tsx';
import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
const BadgeContainer = styled('div')({
display: 'flex',
@@ -43,13 +44,15 @@ export const MangaBadges = ({
}) => {
const { t } = useTranslation();
const isTouchDevice = MediaQuery.useIsTouchDevice();
const {
options: { showUnreadBadge, showDownloadBadge },
} = useLibraryOptionsContext();
return (
<BadgeContainer>
{inLibraryIndicator && mode === 'source' && (
{!isTouchDevice && inLibraryIndicator && mode === 'source' && (
<Button
className="source-manga-library-state-button"
component="div"

13
src/components/manga/MangaGridCard.tsx
View File

@@ -14,7 +14,6 @@ import CardActionArea from '@mui/material/CardActionArea';
import Stack from '@mui/material/Stack';
import Tooltip from '@mui/material/Tooltip';
import { styled } from '@mui/material/styles';
import { isMobile } from 'react-device-detect';
import { useRef } from 'react';
import { SpinnerImage } from '@/components/util/SpinnerImage.tsx';
import { MangaOptionButton } from '@/components/manga/MangaOptionButton.tsx';
@@ -85,12 +84,12 @@ export const MangaGridCard = ({
visibility: 'visible',
pointerEvents: 'all',
},
},
'&:hover .source-manga-library-state-button': {
display: isMobile ? 'none' : 'inline-flex',
},
'&:hover .source-manga-library-state-indicator': {
display: mode === 'source' ? 'none' : 'flex',
'&:hover .source-manga-library-state-button': {
display: 'inline-flex',
},
'&:hover .source-manga-library-state-indicator': {
display: mode === 'source' ? 'none' : 'flex',
},
},
}}
>

13
src/components/manga/MangaListCard.tsx
View File

@@ -13,7 +13,6 @@ import Avatar from '@mui/material/Avatar';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Tooltip from '@mui/material/Tooltip';
import { isMobile } from 'react-device-detect';
import { Link as RouterLink } from 'react-router-dom';
import { useRef } from 'react';
import { SpinnerImage } from '@/components/util/SpinnerImage.tsx';
@@ -55,12 +54,12 @@ export const MangaListCard = ({
visibility: 'visible',
pointerEvents: 'all',
},
},
'&:hover .source-manga-library-state-button': {
display: isMobile ? 'none' : 'inline-flex',
},
'&:hover .source-manga-library-state-indicator': {
display: mode === 'source' ? 'none' : 'inline-flex',
'&:hover .source-manga-library-state-button': {
display: 'inline-flex',
},
'&:hover .source-manga-library-state-indicator': {
display: mode === 'source' ? 'none' : 'inline-flex',
},
},
}}
>

14
src/components/manga/MangaOptionButton.tsx
View File

@@ -15,9 +15,9 @@ import IconButton from '@mui/material/IconButton';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import { PopupState } from 'material-ui-popup-state/hooks';
import { bindTrigger } from 'material-ui-popup-state';
import { isMobile } from 'react-device-detect';
import { SelectableCollectionReturnType } from '@/components/collection/useSelectableCollection.ts';
import { TManga } from '@/typings.ts';
import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
export const MangaOptionButton = forwardRef(
(
@@ -38,6 +38,8 @@ export const MangaOptionButton = forwardRef(
) => {
const { t } = useTranslation();
const isTouchDevice = MediaQuery.useIsTouchDevice();
const bindTriggerProps = useMemo(() => bindTrigger(popupState), [popupState]);
const preventDefaultAction = (e: BaseSyntheticEvent) => {
@@ -51,7 +53,7 @@ export const MangaOptionButton = forwardRef(
};
const handleClick = (e: MouseEvent | TouchEvent) => {
if (isMobile) return;
if (isTouchDevice) return;
preventDefaultAction(e);
popupState.open(e);
@@ -107,8 +109,12 @@ export const MangaOptionButton = forwardRef(
minWidth: 'unset',
paddingX: '0',
paddingY: '2.5px',
visibility: popupState.isOpen && !isMobile ? 'visible' : 'hidden',
pointerEvents: isMobile ? undefined : 'none',
visibility: popupState.isOpen ? 'visible' : 'hidden',
pointerEvents: 'none',
'@media not (pointer: fine)': {
visibility: 'hidden',
pointerEvents: undefined,
},
}}
onMouseDown={(e) => e.stopPropagation()}
>

8
src/components/menu/NestedMenuItem.tsx
View File

@@ -34,9 +34,9 @@ import Box from '@mui/material/Box';
import { OverridableComponent } from '@mui/material/OverridableComponent';
import { SvgIconTypeMap } from '@mui/material/SvgIcon';
import { isMobile } from 'react-device-detect';
import { IconMenuItem } from '@/components/menu/IconMenuItem.tsx';
import { getOptionForDirection } from '@/theme.ts';
import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
export type NestedMenuItemProps = Omit<MuiMenuItemProps, 'button'> & {
parentMenuOpen: boolean;
@@ -69,6 +69,8 @@ const NestedMenuItem = forwardRef<HTMLLIElement | null, NestedMenuItemProps>((pr
...MenuItemProps
} = props;
const isTouchDevice = MediaQuery.useIsTouchDevice();
const { ref: containerRefProp, ...ContainerProps } = ContainerPropsProp;
const menuItemRef = useRef<HTMLLIElement | null>(null);
@@ -95,7 +97,7 @@ const NestedMenuItem = forwardRef<HTMLLIElement | null, NestedMenuItemProps>((pr
};
const handleMouseEnter = (e: MouseEvent<HTMLElement>) => {
if (isMobile) {
if (isTouchDevice) {
return;
}
@@ -129,7 +131,7 @@ const NestedMenuItem = forwardRef<HTMLLIElement | null, NestedMenuItemProps>((pr
};
const handleFocus = (e: FocusEvent<HTMLElement>) => {
if (isMobile) {
if (isTouchDevice) {
return;
}

9
yarn.lock
View File

@@ -6036,13 +6036,6 @@ react-beautiful-dnd@13.1.1:
redux "^4.0.4"
use-memo-one "^1.1.1"
react-device-detect@2.2.3:
version "2.2.3"
resolved "https://registry.yarnpkg.com/react-device-detect/-/react-device-detect-2.2.3.tgz#97a7ae767cdd004e7c3578260f48cf70c036e7ca"
integrity sha512-buYY3qrCnQVlIFHrC5UcUoAj7iANs/+srdkwsnNjI7anr3Tt7UY6MqNxtMLlr0tMBied0O49UZVK8XKs3ZIiPw==
dependencies:
ua-parser-js "^1.0.33"
react-dom@18.3.1:
version "18.3.1"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
@@ -6989,7 +6982,7 @@ typescript@5.4.5:
resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.4.5.tgz#42ccef2c571fdbd0f6718b1d1f5e6e5ef006f611"
integrity sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==
ua-parser-js@^1.0.33, ua-parser-js@^1.0.35:
ua-parser-js@^1.0.35:
version "1.0.37"
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-1.0.37.tgz#b5dc7b163a5c1f0c510b08446aed4da92c46373f"
integrity sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ==