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

Prevent mui card ripple on child element click

Browse Source
This commit is contained in:
schroda
2025-03-29 03:12:36 +01:00
parent 517610ac6d
commit 9ad1af4846
9 changed files with 53 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/lib/mui/MUI.util.ts Normal file
View File

@@ -0,0 +1,26 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import React, { BaseSyntheticEvent } from 'react';
import { chainEventHandlers } from 'material-ui-popup-state/chainEventHandlers';
export class MUIUtil {
static preventRipple(): (e: BaseSyntheticEvent) => void {
return (e) => e.stopPropagation();
}
static preventRippleProp<T extends Record<string, unknown>[]>(
...handlers: T
): T & Pick<React.DOMAttributes<unknown>, 'onMouseDown' | 'onTouchStart'> {
// @ts-ignore - "chainEventHandlers" is wrongly typed
return chainEventHandlers(...handlers, {
onMouseDown: MUIUtil.preventRipple(),
onTouchStart: MUIUtil.preventRipple(),
}) as T & Pick<React.DOMAttributes<unknown>, 'onMouseDown' | 'onTouchStart'>;
}
}

2
src/modules/chapter/components/buttons/ChapterDownloadButton.tsx
View File

@@ -14,6 +14,7 @@ import { ChapterIdInfo, Chapters } from '@/modules/chapter/services/Chapters.ts'
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { makeToast } from '@/modules/core/utils/Toast.ts';
import { getErrorMessage } from '@/lib/HelperFunctions.ts';
import { MUIUtil } from '@/lib/mui/MUI.util.ts';
export const ChapterDownloadButton = ({
chapterId,
@@ -40,6 +41,7 @@ export const ChapterDownloadButton = ({
return (
<CustomTooltip title={t('chapter.action.download.add.label.action')}>
<IconButton
{...MUIUtil.preventRippleProp()}
onClick={(e) => {
e.stopPropagation();
e.preventDefault();

10
src/modules/chapter/components/cards/ChapterCard.tsx
View File

@@ -38,6 +38,7 @@ import {
} from '@/modules/chapter/services/Chapters.ts';
import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
import { ChapterCardMetadata } from '@/modules/chapter/components/cards/ChapterCardMetadata.tsx';
import { MUIUtil } from '@/lib/mui/MUI.util.ts';
type TChapter = ChapterIdInfo &
ChapterMangaInfo &
@@ -87,11 +88,11 @@ export const ChapterCard = memo((props: IProps) => {
const handleClickOpenMenu = (
event: React.MouseEvent | React.TouchEvent,
openMenu: (e: React.SyntheticEvent) => void,
openMenu?: (e: React.SyntheticEvent) => void,
) => {
event.stopPropagation();
event.preventDefault();
openMenu(event);
openMenu?.(event);
};
const longPressBind = useLongPress((event, { context: openMenu }) => {
@@ -187,8 +188,9 @@ export const ChapterCard = memo((props: IProps) => {
<CustomTooltip title={t('global.button.options')}>
<IconButton
ref={menuButtonRef}
{...bindTrigger(popupState)}
onClick={(e) => handleClickOpenMenu(e, popupState.open)}
{...MUIUtil.preventRippleProp(bindTrigger(popupState), {
onClick: (e: MouseEvent) => handleClickOpenMenu(e),
})}
aria-label="more"
sx={{
color: 'inherit',

5
src/modules/downloads/screens/DownloadQueue.tsx
View File

@@ -37,6 +37,7 @@ import { DownloaderState, DownloadState } from '@/lib/graphql/generated/graphql.
import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
import { getErrorMessage } from '@/lib/HelperFunctions.ts';
import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
import { MUIUtil } from '@/lib/mui/MUI.util.ts';
const HeightPreservingItem = ({ children, ...props }: BoxProps) => (
// the height is necessary to prevent the item container from collapsing, which confuses Virtuoso measurements
@@ -75,7 +76,7 @@ const DownloadChapterItem = memo(
p: 1.5,
}}
>
<IconButton sx={{ pointerEvents: 'none' }}>
<IconButton {...MUIUtil.preventRippleProp()} sx={{ pointerEvents: 'none' }}>
<DragHandle />
</IconButton>
<Stack sx={{ flex: 1, ml: 1 }} direction="column">
@@ -95,6 +96,7 @@ const DownloadChapterItem = memo(
{item.state === DownloadState.Error && (
<CustomTooltip title={t('global.button.retry')}>
<IconButton
{...MUIUtil.preventRippleProp()}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
@@ -107,6 +109,7 @@ const DownloadChapterItem = memo(
)}
<CustomTooltip title={t('chapter.action.download.delete.label.action')}>
<IconButton
{...MUIUtil.preventRippleProp()}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();

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

@@ -12,6 +12,7 @@ import PlayArrowIcon from '@mui/icons-material/PlayArrow';
import { Link } from 'react-router-dom';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { ChapterReadInfo, Chapters, ChapterSourceOrderInfo } from '@/modules/chapter/services/Chapters.ts';
import { MUIUtil } from '@/lib/mui/MUI.util.ts';
export const ContinueReadingButton = ({
showContinueReadingButton,
@@ -34,6 +35,7 @@ export const ContinueReadingButton = ({
return (
<CustomTooltip title={t(isFirstChapter ? 'global.button.start' : 'global.button.resume')}>
<Button
{...MUIUtil.preventRippleProp()}
variant="contained"
size="small"
sx={{ minWidth: 'unset', py: 0.5, px: 0.75 }}
@@ -41,7 +43,6 @@ export const ContinueReadingButton = ({
to={`${mangaLinkTo}/chapter/${chapter.sourceOrder}`}
state={Chapters.getReaderOpenChapterLocationState(chapter)}
onClick={(e) => e.stopPropagation()}
onMouseDown={(e) => e.stopPropagation()}
>
<PlayArrowIcon />
</Button>

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

@@ -13,6 +13,7 @@ import Typography from '@mui/material/Typography';
import { MangaCardMode } from '@/modules/manga/Manga.types.ts';
import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx';
import { useMetadataServerSettings } from '@/modules/settings/services/ServerSettingsMetadata.ts';
import { MUIUtil } from '@/lib/mui/MUI.util.ts';
const BadgeContainer = styled('div')(({ theme }) => ({
display: 'flex',
@@ -57,7 +58,7 @@ export const MangaBadges = ({
component="div"
variant="contained"
size="small"
onMouseDown={(e) => e.stopPropagation()}
{...MUIUtil.preventRippleProp()}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();

19
src/modules/manga/components/MangaOptionButton.tsx
View File

@@ -7,7 +7,7 @@
*/
import { useTranslation } from 'react-i18next';
import { BaseSyntheticEvent, MouseEvent, TouchEvent, ChangeEvent, useMemo, forwardRef, ForwardedRef } from 'react';
import { BaseSyntheticEvent, ChangeEvent, useMemo, forwardRef, ForwardedRef } from 'react';
import Button from '@mui/material/Button';
import Checkbox from '@mui/material/Checkbox';
import IconButton from '@mui/material/IconButton';
@@ -17,6 +17,7 @@ import { bindTrigger } from 'material-ui-popup-state';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { SelectableCollectionReturnType } from '@/modules/collection/hooks/useSelectableCollection.ts';
import { MangaType } from '@/lib/graphql/generated/graphql.ts';
import { MUIUtil } from '@/lib/mui/MUI.util.ts';
export const MangaOptionButton = forwardRef(
(
@@ -49,12 +50,6 @@ export const MangaOptionButton = forwardRef(
handleSelection?.(id, isSelected);
};
const handleClick = (e: MouseEvent | TouchEvent) => {
preventDefaultAction(e);
popupState.open(e);
bindTriggerProps.onClick(e as any);
};
if (!handleSelection) {
return null;
}
@@ -67,7 +62,7 @@ export const MangaOptionButton = forwardRef(
return (
<CustomTooltip title={t(selected ? 'global.button.deselect' : 'global.button.select')}>
<Checkbox checked={selected} onMouseDown={preventDefaultAction} onChange={handleSelectionChange} />
<Checkbox {...MUIUtil.preventRippleProp()} checked={selected} onChange={handleSelectionChange} />
</CustomTooltip>
);
}
@@ -77,10 +72,8 @@ export const MangaOptionButton = forwardRef(
<CustomTooltip title={t('global.button.options')}>
<IconButton
ref={ref}
{...bindTriggerProps}
onClick={handleClick}
{...MUIUtil.preventRippleProp(bindTriggerProps, { onClick: preventDefaultAction })}
aria-label="more"
onMouseDown={preventDefaultAction}
>
<MoreVertIcon />
</IconButton>
@@ -92,8 +85,7 @@ export const MangaOptionButton = forwardRef(
<CustomTooltip title={t('global.button.options')}>
<Button
ref={ref}
{...bindTriggerProps}
onClick={handleClick}
{...MUIUtil.preventRippleProp(bindTriggerProps, { onClick: preventDefaultAction })}
className="manga-option-button"
size="small"
variant="contained"
@@ -107,7 +99,6 @@ export const MangaOptionButton = forwardRef(
display: 'none',
},
}}
onMouseDown={(e) => e.stopPropagation()}
>
<MoreVertIcon />
</Button>

3
src/modules/source/components/SourceCard.tsx
View File

@@ -24,6 +24,7 @@ import { GetSourcesListQuery } from '@/lib/graphql/generated/graphql.ts';
import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx';
import { translateExtensionLanguage } from '@/modules/extension/Extensions.utils.ts';
import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
import { MUIUtil } from '@/lib/mui/MUI.util.ts';
interface IProps {
source: GetSourcesListQuery['sources']['nodes'][number];
@@ -134,6 +135,7 @@ export const SourceCard: React.FC<IProps> = (props: IProps) => {
<Stack sx={{ flexDirection: 'row', gap: 1 }}>
{supportsLatest && (
<Button
{...MUIUtil.preventRippleProp()}
variant="outlined"
component={Link}
to={AppRoutes.sources.childRoutes.browse.path(id)}
@@ -144,6 +146,7 @@ export const SourceCard: React.FC<IProps> = (props: IProps) => {
)}
{!isMobileWidth && (
<Button
{...MUIUtil.preventRippleProp()}
variant="outlined"
component={Link}
to={AppRoutes.sources.childRoutes.browse.path(id)}

6
src/modules/tracker/components/cards/TrackerMangaCard.tsx
View File

@@ -28,6 +28,7 @@ import { Metadata } from '@/modules/core/components/Metadata.tsx';
import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx';
import { TTrackerManga } from '@/modules/tracker/services/Trackers.ts';
import { MANGA_COVER_ASPECT_RATIO } from '@/modules/manga/Manga.constants.ts';
import { MUIUtil } from '@/lib/mui/MUI.util.ts';
const TrackerMangaCardTitle = ({ title, selected }: { title: string; selected: boolean }) => (
<Stack
@@ -75,12 +76,11 @@ const TrackerMangaCardSummary = ({ summary }: { summary: string }) => {
{summary.length && showSummaryExpandButton && (
<Button
component="div"
{...MUIUtil.preventRippleProp()}
onClick={(e) => {
e.stopPropagation();
setIsSummaryExpanded(!isSummaryExpanded);
}}
onTouchStart={(e) => e.stopPropagation()}
onMouseDown={(e) => e.stopPropagation()}
>
{t(isSummaryExpanded ? 'global.button.show_less' : 'global.button.show_more')}
</Button>
@@ -91,13 +91,13 @@ const TrackerMangaCardSummary = ({ summary }: { summary: string }) => {
const TrackerMangaCardLink = ({ children, url }: { children: React.ReactNode; url: string }) => (
<Link
{...MUIUtil.preventRippleProp()}
href={url}
rel="noreferrer"
target="_blank"
underline="none"
color="inherit"
onClick={(e) => e.stopPropagation()}
onMouseDown={(e) => e.stopPropagation()}
>
{children}
</Link>