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", "p-limit": "5.0.0",
"react": "18.3.1", "react": "18.3.1",
"react-beautiful-dnd": "13.1.1", "react-beautiful-dnd": "13.1.1",
"react-device-detect": "2.2.3",
"react-dom": "18.3.1", "react-dom": "18.3.1",
"react-i18next": "14.1.1", "react-i18next": "14.1.1",
"react-lazily": "0.9.2", "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 Typography from '@mui/material/Typography';
import { useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext.tsx'; import { useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext.tsx';
import { MangaCardMode } from '@/components/manga/MangaCard.types.tsx'; import { MangaCardMode } from '@/components/manga/MangaCard.types.tsx';
import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
const BadgeContainer = styled('div')({ const BadgeContainer = styled('div')({
display: 'flex', display: 'flex',
@@ -43,13 +44,15 @@ export const MangaBadges = ({
}) => { }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const isTouchDevice = MediaQuery.useIsTouchDevice();
const { const {
options: { showUnreadBadge, showDownloadBadge }, options: { showUnreadBadge, showDownloadBadge },
} = useLibraryOptionsContext(); } = useLibraryOptionsContext();
return ( return (
<BadgeContainer> <BadgeContainer>
{inLibraryIndicator && mode === 'source' && ( {!isTouchDevice && inLibraryIndicator && mode === 'source' && (
<Button <Button
className="source-manga-library-state-button" className="source-manga-library-state-button"
component="div" 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 Stack from '@mui/material/Stack';
import Tooltip from '@mui/material/Tooltip'; import Tooltip from '@mui/material/Tooltip';
import { styled } from '@mui/material/styles'; import { styled } from '@mui/material/styles';
import { isMobile } from 'react-device-detect';
import { useRef } from 'react'; import { useRef } from 'react';
import { SpinnerImage } from '@/components/util/SpinnerImage.tsx'; import { SpinnerImage } from '@/components/util/SpinnerImage.tsx';
import { MangaOptionButton } from '@/components/manga/MangaOptionButton.tsx'; import { MangaOptionButton } from '@/components/manga/MangaOptionButton.tsx';
@@ -85,12 +84,12 @@ export const MangaGridCard = ({
visibility: 'visible', visibility: 'visible',
pointerEvents: 'all', pointerEvents: 'all',
}, },
}, '&:hover .source-manga-library-state-button': {
'&:hover .source-manga-library-state-button': { display: 'inline-flex',
display: isMobile ? 'none' : 'inline-flex', },
}, '&:hover .source-manga-library-state-indicator': {
'&:hover .source-manga-library-state-indicator': { display: mode === 'source' ? 'none' : 'flex',
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 Box from '@mui/material/Box';
import Stack from '@mui/material/Stack'; import Stack from '@mui/material/Stack';
import Tooltip from '@mui/material/Tooltip'; import Tooltip from '@mui/material/Tooltip';
import { isMobile } from 'react-device-detect';
import { Link as RouterLink } from 'react-router-dom'; import { Link as RouterLink } from 'react-router-dom';
import { useRef } from 'react'; import { useRef } from 'react';
import { SpinnerImage } from '@/components/util/SpinnerImage.tsx'; import { SpinnerImage } from '@/components/util/SpinnerImage.tsx';
@@ -55,12 +54,12 @@ export const MangaListCard = ({
visibility: 'visible', visibility: 'visible',
pointerEvents: 'all', pointerEvents: 'all',
}, },
}, '&:hover .source-manga-library-state-button': {
'&:hover .source-manga-library-state-button': { display: 'inline-flex',
display: isMobile ? 'none' : 'inline-flex', },
}, '&:hover .source-manga-library-state-indicator': {
'&:hover .source-manga-library-state-indicator': { display: mode === 'source' ? 'none' : 'inline-flex',
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 MoreVertIcon from '@mui/icons-material/MoreVert';
import { PopupState } from 'material-ui-popup-state/hooks'; import { PopupState } from 'material-ui-popup-state/hooks';
import { bindTrigger } from 'material-ui-popup-state'; import { bindTrigger } from 'material-ui-popup-state';
import { isMobile } from 'react-device-detect';
import { SelectableCollectionReturnType } from '@/components/collection/useSelectableCollection.ts'; import { SelectableCollectionReturnType } from '@/components/collection/useSelectableCollection.ts';
import { TManga } from '@/typings.ts'; import { TManga } from '@/typings.ts';
import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
export const MangaOptionButton = forwardRef( export const MangaOptionButton = forwardRef(
( (
@@ -38,6 +38,8 @@ export const MangaOptionButton = forwardRef(
) => { ) => {
const { t } = useTranslation(); const { t } = useTranslation();
const isTouchDevice = MediaQuery.useIsTouchDevice();
const bindTriggerProps = useMemo(() => bindTrigger(popupState), [popupState]); const bindTriggerProps = useMemo(() => bindTrigger(popupState), [popupState]);
const preventDefaultAction = (e: BaseSyntheticEvent) => { const preventDefaultAction = (e: BaseSyntheticEvent) => {
@@ -51,7 +53,7 @@ export const MangaOptionButton = forwardRef(
}; };
const handleClick = (e: MouseEvent | TouchEvent) => { const handleClick = (e: MouseEvent | TouchEvent) => {
if (isMobile) return; if (isTouchDevice) return;
preventDefaultAction(e); preventDefaultAction(e);
popupState.open(e); popupState.open(e);
@@ -107,8 +109,12 @@ export const MangaOptionButton = forwardRef(
minWidth: 'unset', minWidth: 'unset',
paddingX: '0', paddingX: '0',
paddingY: '2.5px', paddingY: '2.5px',
visibility: popupState.isOpen && !isMobile ? 'visible' : 'hidden', visibility: popupState.isOpen ? 'visible' : 'hidden',
pointerEvents: isMobile ? undefined : 'none', pointerEvents: 'none',
'@media not (pointer: fine)': {
visibility: 'hidden',
pointerEvents: undefined,
},
}} }}
onMouseDown={(e) => e.stopPropagation()} 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 { OverridableComponent } from '@mui/material/OverridableComponent';
import { SvgIconTypeMap } from '@mui/material/SvgIcon'; import { SvgIconTypeMap } from '@mui/material/SvgIcon';
import { isMobile } from 'react-device-detect';
import { IconMenuItem } from '@/components/menu/IconMenuItem.tsx'; import { IconMenuItem } from '@/components/menu/IconMenuItem.tsx';
import { getOptionForDirection } from '@/theme.ts'; import { getOptionForDirection } from '@/theme.ts';
import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
export type NestedMenuItemProps = Omit<MuiMenuItemProps, 'button'> & { export type NestedMenuItemProps = Omit<MuiMenuItemProps, 'button'> & {
parentMenuOpen: boolean; parentMenuOpen: boolean;
@@ -69,6 +69,8 @@ const NestedMenuItem = forwardRef<HTMLLIElement | null, NestedMenuItemProps>((pr
...MenuItemProps ...MenuItemProps
} = props; } = props;
const isTouchDevice = MediaQuery.useIsTouchDevice();
const { ref: containerRefProp, ...ContainerProps } = ContainerPropsProp; const { ref: containerRefProp, ...ContainerProps } = ContainerPropsProp;
const menuItemRef = useRef<HTMLLIElement | null>(null); const menuItemRef = useRef<HTMLLIElement | null>(null);
@@ -95,7 +97,7 @@ const NestedMenuItem = forwardRef<HTMLLIElement | null, NestedMenuItemProps>((pr
}; };
const handleMouseEnter = (e: MouseEvent<HTMLElement>) => { const handleMouseEnter = (e: MouseEvent<HTMLElement>) => {
if (isMobile) { if (isTouchDevice) {
return; return;
} }
@@ -129,7 +131,7 @@ const NestedMenuItem = forwardRef<HTMLLIElement | null, NestedMenuItemProps>((pr
}; };
const handleFocus = (e: FocusEvent<HTMLElement>) => { const handleFocus = (e: FocusEvent<HTMLElement>) => {
if (isMobile) { if (isTouchDevice) {
return; return;
} }

9
yarn.lock
View File

@@ -6036,13 +6036,6 @@ react-beautiful-dnd@13.1.1:
redux "^4.0.4" redux "^4.0.4"
use-memo-one "^1.1.1" 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: react-dom@18.3.1:
version "18.3.1" version "18.3.1"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4" 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" resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.4.5.tgz#42ccef2c571fdbd0f6718b1d1f5e6e5ef006f611"
integrity sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ== 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" version "1.0.37"
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-1.0.37.tgz#b5dc7b163a5c1f0c510b08446aed4da92c46373f" resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-1.0.37.tgz#b5dc7b163a5c1f0c510b08446aed4da92c46373f"
integrity sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ== integrity sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ==