Feature/utilize long press (#709)

* Open manga action menu on long press

* Open chapter action menu on long press

src/components/MangaCard.tsx

@@ -9,11 +9,11 @@
 import Card from '@mui/material/Card';
 import CardActionArea from '@mui/material/CardActionArea';
 import Typography from '@mui/material/Typography';
-import { Link } from 'react-router-dom';
+import { Link as RouterLink } from 'react-router-dom';
-import { Avatar, Box, CardContent, Stack, styled, Tooltip } from '@mui/material';
+import { Avatar, Box, CardContent, Link, Stack, styled, Tooltip } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import PopupState, { bindMenu } from 'material-ui-popup-state';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { useLongPress } from 'use-long-press';
 import { GridLayout, useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext';
 import { SpinnerImage } from '@/components/util/SpinnerImage';
@@ -94,6 +94,8 @@ const getMangaLinkTo = (
 export const MangaCard = (props: MangaCardProps) => {
     const { t } = useTranslation();
 
+    const optionButtonRef = useRef<HTMLButtonElement>(null);
+
     const { manga, gridLayout, inLibraryIndicator, selected, handleSelection, mode = 'default' } = props;
     const {
         id,
@@ -117,18 +119,36 @@ export const MangaCard = (props: MangaCardProps) => {
 
     const [isMigrateDialogOpen, setIsMigrateDialogOpen] = useState(false);
 
-    const handleClick = (e: React.MouseEvent | React.TouchEvent) => {
+    const handleClick = (event: React.MouseEvent | React.TouchEvent, openMenu?: () => void) => {
-        if (selected === null) {
+        const isDefaultMode = mode === 'default';
+        const isMigrateSelectMode = mode === 'migrate.select';
+        const isSelectionMode = selected !== null;
+
+        const shouldHandleClick = isMigrateSelectMode || isSelectionMode || (isDefaultMode && !!openMenu);
+        if (!shouldHandleClick) {
             return;
         }
 
-        e.preventDefault();
+        event.preventDefault();
-        handleSelection?.(id, !selected, { selectRange: e.shiftKey });
+
+        if (isSelectionMode) {
+            handleSelection?.(id, !selected, { selectRange: event.shiftKey });
+            return;
+        }
+
+        if (isDefaultMode) {
+            openMenu?.();
+            return;
+        }
+
+        if (isMigrateSelectMode) {
+            setIsMigrateDialogOpen(true);
+        }
     };
 
-    const longPressBind = useLongPress((e) => {
+    const longPressBind = useLongPress((e, { context }) => {
         e.shiftKey = true;
-        handleClick(e);
+        handleClick(e, context as () => {});
     });
 
     if (gridLayout !== GridLayout.List) {
@@ -141,27 +161,11 @@ export const MangaCard = (props: MangaCardProps) => {
                     {(popupState) => (
                         <>
                             <Link
-                                {...longPressBind()}
+                                component={RouterLink}
-                                onClick={(e) => {
+                                {...longPressBind(() => popupState.open(optionButtonRef.current))}
-                                    const isMigrateSelectMode = mode === 'migrate.select';
+                                onClick={handleClick}
-                                    const isSelectionMode = selected !== null;
-
-                                    const shouldHandleClick = isMigrateSelectMode || isSelectionMode;
-                                    if (!shouldHandleClick) {
-                                        return;
-                                    }
-
-                                    e.preventDefault();
-
-                                    if (isMigrateSelectMode) {
-                                        setIsMigrateDialogOpen(true);
-                                        return;
-                                    }
-
-                                    handleClick(e);
-                                }}
                                 to={mangaLinkTo}
-                                style={{ textDecoration: 'none' }}
+                                sx={{ textDecoration: 'none', touchCallout: 'none' }}
                             >
                                 <Box
                                     sx={{
@@ -228,6 +232,7 @@ export const MangaCard = (props: MangaCardProps) => {
                                                     )}
                                                 </BadgeContainer>
                                                 <MangaOptionButton
+                                                    ref={optionButtonRef}
                                                     popupState={popupState}
                                                     id={id}
                                                     selected={selected}
@@ -348,10 +353,11 @@ export const MangaCard = (props: MangaCardProps) => {
                     <>
                         <Card>
                             <CardActionArea
-                                component={Link}
+                                component={RouterLink}
                                 to={mangaLinkTo}
                                 onClick={handleClick}
                                 {...longPressBind()}
+                                sx={{ touchCallout: 'none' }}
                             >
                                 <CardContent
                                     sx={{
@@ -425,6 +431,7 @@ export const MangaCard = (props: MangaCardProps) => {
                                             mangaLinkTo={mangaLinkTo}
                                         />
                                         <MangaOptionButton
+                                            ref={optionButtonRef}
                                             popupState={popupState}
                                             id={id}
                                             selected={selected}

src/components/chapter/ChapterCard.tsx

@@ -14,7 +14,7 @@ import CardContent from '@mui/material/CardContent';
 import IconButton from '@mui/material/IconButton';
 import { useTheme } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
-import React, { MouseEvent, TouchEvent } from 'react';
+import React, { MouseEvent, TouchEvent, useRef } from 'react';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import PopupState, { bindMenu, bindTrigger } from 'material-ui-popup-state';
@@ -39,51 +39,51 @@ export const ChapterCard: React.FC<IProps> = (props: IProps) => {
     const { t } = useTranslation();
     const theme = useTheme();
 
+    const menuButtonRef = useRef<HTMLButtonElement>(null);
+
     const { chapter, allChapters, downloadChapter: dc, showChapterNumber, onSelect, selected } = props;
     const isSelecting = selected !== null;
 
     const { isDownloaded } = chapter;
 
-    const handleClick = (e: MouseEvent | TouchEvent) => {
+    const handleClick = (event: MouseEvent | TouchEvent) => {
         if (!isSelecting) return;
 
-        e.preventDefault();
+        event.preventDefault();
-        e.stopPropagation();
+        event.stopPropagation();
-        onSelect(!selected, e.shiftKey);
+        onSelect(!selected, event.shiftKey);
     };
 
-    const longPressBind = useLongPress((e) => {
+    const handleClickOpenMenu = (
-        e.shiftKey = true;
+        event: React.MouseEvent | React.TouchEvent,
-        handleClick(e);
+        openMenu: (e: React.SyntheticEvent) => void,
+    ) => {
+        event.stopPropagation();
+        event.preventDefault();
+        openMenu(event);
+    };
+
+    const longPressBind = useLongPress((event, { context: openMenu }) => {
+        if (!isSelecting && !!menuButtonRef.current) {
+            handleClickOpenMenu(event, () => (openMenu as (event: Element) => void)?.(menuButtonRef.current!));
+            return;
+        }
+
+        // eslint-disable-next-line no-param-reassign
+        event.shiftKey = true;
+        handleClick(event);
     });
 
     return (
         <li>
             <PopupState variant="popover" popupId="chapter-card-action-menu">
-                {(popupState) => {
+                {(popupState) => (
-                    const bindTriggerProps = bindTrigger(popupState);
-
-                    const preventDefaultAction = (e: React.BaseSyntheticEvent<unknown>) => {
-                        e.stopPropagation();
-                        e.preventDefault();
-                    };
-
-                    const handleClickOpenMenu = (e: React.BaseSyntheticEvent<unknown>) => {
-                        preventDefaultAction(e);
-                        bindTriggerProps.onClick(e as any);
-                    };
-
-                    const handleTouchStart = (e: React.BaseSyntheticEvent<unknown>) => {
-                        preventDefaultAction(e);
-                        bindTriggerProps.onTouchStart(e as TouchEvent);
-                    };
-
-                    return (
                     <>
                         <Card
                             sx={{
                                 position: 'relative',
                                 margin: 1,
+                                touchCallout: 'none',
                             }}
                         >
                             <CardActionArea
@@ -93,7 +93,7 @@ export const ChapterCard: React.FC<IProps> = (props: IProps) => {
                                     color: theme.palette.text[chapter.isRead ? 'disabled' : 'primary'],
                                 }}
                                 onClick={(e) => handleClick(e)}
-                                    {...longPressBind()}
+                                {...longPressBind(popupState.open)}
                             >
                                 <CardContent
                                     sx={{
@@ -128,9 +128,10 @@ export const ChapterCard: React.FC<IProps> = (props: IProps) => {
                                     {selected === null ? (
                                         <Tooltip title={t('global.button.options')}>
                                             <IconButton
-                                                    {...bindTriggerProps}
+                                                ref={menuButtonRef}
-                                                    onClick={handleClickOpenMenu}
+                                                {...bindTrigger(popupState)}
-                                                    onTouchStart={handleTouchStart}
+                                                onClick={(e) => handleClickOpenMenu(e, popupState.open)}
+                                                onTouchStart={(e) => handleClickOpenMenu(e, popupState.open)}
                                                 aria-label="more"
                                                 size="large"
                                             >
@@ -161,8 +162,7 @@ export const ChapterCard: React.FC<IProps> = (props: IProps) => {
                             </Menu>
                         )}
                     </>
-                    );
+                )}
-                }}
             </PopupState>
         </li>
     );

src/components/manga/MangaOptionButton.tsx

@@ -7,7 +7,7 @@
  */
 
 import { useTranslation } from 'react-i18next';
-import React, { TouchEvent, useMemo } from 'react';
+import { BaseSyntheticEvent, MouseEvent, TouchEvent, ChangeEvent, useMemo, forwardRef, ForwardedRef } from 'react';
 import { Button, Tooltip } from '@mui/material';
 import Checkbox from '@mui/material/Checkbox';
 import IconButton from '@mui/material/IconButton';
@@ -18,41 +18,43 @@ import { isMobile } from 'react-device-detect';
 import { SelectableCollectionReturnType } from '@/components/collection/useSelectableCollection.ts';
 import { TManga } from '@/typings.ts';
 
-export const MangaOptionButton = ({
+export const MangaOptionButton = forwardRef(
+    (
+        {
             id,
             selected,
             handleSelection,
             asCheckbox = false,
             popupState,
-}: {
+        }: {
             id: number;
             selected?: boolean | null;
             handleSelection?: SelectableCollectionReturnType<TManga['id']>['handleSelection'];
             asCheckbox?: boolean;
             popupState: PopupState;
-}) => {
+        },
+        ref: ForwardedRef<HTMLButtonElement | null>,
+    ) => {
         const { t } = useTranslation();
 
         const bindTriggerProps = useMemo(() => bindTrigger(popupState), [popupState]);
 
-    const preventDefaultAction = (e: React.BaseSyntheticEvent<unknown>) => {
+        const preventDefaultAction = (e: BaseSyntheticEvent) => {
             e.stopPropagation();
             e.preventDefault();
         };
 
-    const handleSelectionChange = (e: React.BaseSyntheticEvent<unknown>, isSelected: boolean) => {
+        const handleSelectionChange = (e: ChangeEvent, isSelected: boolean) => {
             preventDefaultAction(e);
             handleSelection?.(id, isSelected);
         };
 
-    const handleClick = (e: React.BaseSyntheticEvent<unknown>) => {
+        const handleClick = (e: MouseEvent | TouchEvent) => {
-        preventDefaultAction(e);
+            if (isMobile) return;
-        bindTriggerProps.onClick(e as any);
-    };
 
-    const handleTouchStart = (e: React.BaseSyntheticEvent<unknown>) => {
             preventDefaultAction(e);
-        bindTriggerProps.onTouchStart(e as TouchEvent);
+            popupState.open(e);
+            bindTriggerProps.onClick(e as any);
         };
 
         if (!handleSelection) {
@@ -78,7 +80,7 @@ export const MangaOptionButton = ({
                     <IconButton
                         {...bindTriggerProps}
                         onClick={handleClick}
-                    onTouchStart={handleTouchStart}
+                        onTouchStart={handleClick}
                         aria-label="more"
                         size="large"
                         onMouseDown={preventDefaultAction}
@@ -92,9 +94,10 @@ export const MangaOptionButton = ({
         return (
             <Tooltip title={t('global.button.options')}>
                 <Button
+                    ref={ref}
                     {...bindTriggerProps}
                     onClick={handleClick}
-                onTouchStart={handleTouchStart}
+                    onTouchStart={handleClick}
                     className="manga-option-button"
                     size="small"
                     variant="contained"
@@ -102,7 +105,7 @@ export const MangaOptionButton = ({
                         minWidth: 'unset',
                         paddingX: '0',
                         paddingY: '2.5px',
-                    visibility: popupState.isOpen || isMobile ? 'visible' : 'hidden',
+                        visibility: popupState.isOpen && !isMobile ? 'visible' : 'hidden',
                         pointerEvents: isMobile ? undefined : 'none',
                     }}
                     onMouseDown={(e) => e.stopPropagation()}
@@ -111,4 +114,5 @@ export const MangaOptionButton = ({
                 </Button>
             </Tooltip>
         );
-};
+    },
+);