Feature/utilize long press (#709)
* Open manga action menu on long press * Open chapter action menu on long press
This commit is contained in:
schroda
@@ -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 { Avatar, Box, CardContent, Stack, styled, Tooltip } from '@mui/material';
|
||||
import { Link as RouterLink } from 'react-router-dom';
|
||||
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) => {
|
||||
if (selected === null) {
|
||||
const handleClick = (event: React.MouseEvent | React.TouchEvent, openMenu?: () => void) => {
|
||||
const isDefaultMode = mode === 'default';
|
||||
const isMigrateSelectMode = mode === 'migrate.select';
|
||||
const isSelectionMode = selected !== null;
|
||||
|
||||
const shouldHandleClick = isMigrateSelectMode || isSelectionMode || (isDefaultMode && !!openMenu);
|
||||
if (!shouldHandleClick) {
|
||||
return;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
handleSelection?.(id, !selected, { selectRange: e.shiftKey });
|
||||
event.preventDefault();
|
||||
|
||||
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()}
|
||||
onClick={(e) => {
|
||||
const isMigrateSelectMode = mode === 'migrate.select';
|
||||
const isSelectionMode = selected !== null;
|
||||
|
||||
const shouldHandleClick = isMigrateSelectMode || isSelectionMode;
|
||||
if (!shouldHandleClick) {
|
||||
return;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
if (isMigrateSelectMode) {
|
||||
setIsMigrateDialogOpen(true);
|
||||
return;
|
||||
}
|
||||
|
||||
handleClick(e);
|
||||
}}
|
||||
component={RouterLink}
|
||||
{...longPressBind(() => popupState.open(optionButtonRef.current))}
|
||||
onClick={handleClick}
|
||||
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}
|
||||
|
||||
@@ -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,130 +39,130 @@ 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();
|
||||
e.stopPropagation();
|
||||
onSelect(!selected, e.shiftKey);
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
onSelect(!selected, event.shiftKey);
|
||||
};
|
||||
|
||||
const longPressBind = useLongPress((e) => {
|
||||
e.shiftKey = true;
|
||||
handleClick(e);
|
||||
const handleClickOpenMenu = (
|
||||
event: React.MouseEvent | React.TouchEvent,
|
||||
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) => {
|
||||
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,
|
||||
{(popupState) => (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
position: 'relative',
|
||||
margin: 1,
|
||||
touchCallout: 'none',
|
||||
}}
|
||||
>
|
||||
<CardActionArea
|
||||
component={Link}
|
||||
to={`/manga/${chapter.manga.id}/chapter/${chapter.sourceOrder}`}
|
||||
style={{
|
||||
color: theme.palette.text[chapter.isRead ? 'disabled' : 'primary'],
|
||||
}}
|
||||
onClick={(e) => handleClick(e)}
|
||||
{...longPressBind(popupState.open)}
|
||||
>
|
||||
<CardActionArea
|
||||
component={Link}
|
||||
to={`/manga/${chapter.manga.id}/chapter/${chapter.sourceOrder}`}
|
||||
style={{
|
||||
color: theme.palette.text[chapter.isRead ? 'disabled' : 'primary'],
|
||||
<CardContent
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
padding: 2,
|
||||
'&:last-child': { pb: 2 },
|
||||
}}
|
||||
onClick={(e) => handleClick(e)}
|
||||
{...longPressBind()}
|
||||
>
|
||||
<CardContent
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
padding: 2,
|
||||
'&:last-child': { pb: 2 },
|
||||
}}
|
||||
>
|
||||
<Stack direction="column" flex={1}>
|
||||
<Typography variant="h5" component="h2">
|
||||
{chapter.isBookmarked && (
|
||||
<BookmarkIcon
|
||||
color="primary"
|
||||
sx={{ mr: 0.5, position: 'relative', top: '0.15em' }}
|
||||
/>
|
||||
)}
|
||||
{showChapterNumber
|
||||
? `${t('chapter.title')} ${chapter.chapterNumber}`
|
||||
: chapter.name}
|
||||
</Typography>
|
||||
<Typography variant="caption">{chapter.scanlator}</Typography>
|
||||
<Typography variant="caption">
|
||||
{getUploadDateString(Number(chapter.uploadDate ?? 0))}
|
||||
{isDownloaded && ` • ${t('chapter.status.label.downloaded')}`}
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Stack direction="column" flex={1}>
|
||||
<Typography variant="h5" component="h2">
|
||||
{chapter.isBookmarked && (
|
||||
<BookmarkIcon
|
||||
color="primary"
|
||||
sx={{ mr: 0.5, position: 'relative', top: '0.15em' }}
|
||||
/>
|
||||
)}
|
||||
{showChapterNumber
|
||||
? `${t('chapter.title')} ${chapter.chapterNumber}`
|
||||
: chapter.name}
|
||||
</Typography>
|
||||
<Typography variant="caption">{chapter.scanlator}</Typography>
|
||||
<Typography variant="caption">
|
||||
{getUploadDateString(Number(chapter.uploadDate ?? 0))}
|
||||
{isDownloaded && ` • ${t('chapter.status.label.downloaded')}`}
|
||||
</Typography>
|
||||
</Stack>
|
||||
|
||||
{dc && <DownloadStateIndicator download={dc} />}
|
||||
{dc && <DownloadStateIndicator download={dc} />}
|
||||
|
||||
{selected === null ? (
|
||||
<Tooltip title={t('global.button.options')}>
|
||||
<IconButton
|
||||
{...bindTriggerProps}
|
||||
onClick={handleClickOpenMenu}
|
||||
onTouchStart={handleTouchStart}
|
||||
aria-label="more"
|
||||
size="large"
|
||||
>
|
||||
<MoreVertIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<Tooltip
|
||||
title={t(selected ? 'global.button.deselect' : 'global.button.select')}
|
||||
{selected === null ? (
|
||||
<Tooltip title={t('global.button.options')}>
|
||||
<IconButton
|
||||
ref={menuButtonRef}
|
||||
{...bindTrigger(popupState)}
|
||||
onClick={(e) => handleClickOpenMenu(e, popupState.open)}
|
||||
onTouchStart={(e) => handleClickOpenMenu(e, popupState.open)}
|
||||
aria-label="more"
|
||||
size="large"
|
||||
>
|
||||
<Checkbox checked={selected} />
|
||||
</Tooltip>
|
||||
)}
|
||||
</CardContent>
|
||||
</CardActionArea>
|
||||
</Card>
|
||||
{!isSelecting && popupState.isOpen && (
|
||||
<Menu {...bindMenu(popupState)}>
|
||||
{(onClose) => (
|
||||
<ChapterActionMenuItems
|
||||
onClose={onClose}
|
||||
chapter={chapter}
|
||||
allChapters={allChapters}
|
||||
handleSelection={() => onSelect(true)}
|
||||
canBeDownloaded={!chapter.isDownloaded && !dc}
|
||||
/>
|
||||
<MoreVertIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<Tooltip
|
||||
title={t(selected ? 'global.button.deselect' : 'global.button.select')}
|
||||
>
|
||||
<Checkbox checked={selected} />
|
||||
</Tooltip>
|
||||
)}
|
||||
</Menu>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</CardContent>
|
||||
</CardActionArea>
|
||||
</Card>
|
||||
{!isSelecting && popupState.isOpen && (
|
||||
<Menu {...bindMenu(popupState)}>
|
||||
{(onClose) => (
|
||||
<ChapterActionMenuItems
|
||||
onClose={onClose}
|
||||
chapter={chapter}
|
||||
allChapters={allChapters}
|
||||
handleSelection={() => onSelect(true)}
|
||||
canBeDownloaded={!chapter.isDownloaded && !dc}
|
||||
/>
|
||||
)}
|
||||
</Menu>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</PopupState>
|
||||
</li>
|
||||
);
|
||||
|
||||
@@ -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,97 +18,101 @@ import { isMobile } from 'react-device-detect';
|
||||
import { SelectableCollectionReturnType } from '@/components/collection/useSelectableCollection.ts';
|
||||
import { TManga } from '@/typings.ts';
|
||||
|
||||
export const MangaOptionButton = ({
|
||||
id,
|
||||
selected,
|
||||
handleSelection,
|
||||
asCheckbox = false,
|
||||
popupState,
|
||||
}: {
|
||||
id: number;
|
||||
selected?: boolean | null;
|
||||
handleSelection?: SelectableCollectionReturnType<TManga['id']>['handleSelection'];
|
||||
asCheckbox?: boolean;
|
||||
popupState: PopupState;
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
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 bindTriggerProps = useMemo(() => bindTrigger(popupState), [popupState]);
|
||||
|
||||
const preventDefaultAction = (e: React.BaseSyntheticEvent<unknown>) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
};
|
||||
const preventDefaultAction = (e: BaseSyntheticEvent) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
const handleSelectionChange = (e: React.BaseSyntheticEvent<unknown>, isSelected: boolean) => {
|
||||
preventDefaultAction(e);
|
||||
handleSelection?.(id, isSelected);
|
||||
};
|
||||
const handleSelectionChange = (e: ChangeEvent, isSelected: boolean) => {
|
||||
preventDefaultAction(e);
|
||||
handleSelection?.(id, isSelected);
|
||||
};
|
||||
|
||||
const handleClick = (e: React.BaseSyntheticEvent<unknown>) => {
|
||||
preventDefaultAction(e);
|
||||
bindTriggerProps.onClick(e as any);
|
||||
};
|
||||
const handleClick = (e: MouseEvent | TouchEvent) => {
|
||||
if (isMobile) return;
|
||||
|
||||
const handleTouchStart = (e: React.BaseSyntheticEvent<unknown>) => {
|
||||
preventDefaultAction(e);
|
||||
bindTriggerProps.onTouchStart(e as TouchEvent);
|
||||
};
|
||||
preventDefaultAction(e);
|
||||
popupState.open(e);
|
||||
bindTriggerProps.onClick(e as any);
|
||||
};
|
||||
|
||||
if (!handleSelection) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const isSelected = selected !== null;
|
||||
if (isSelected) {
|
||||
if (!asCheckbox) {
|
||||
if (!handleSelection) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Tooltip title={t(selected ? 'global.button.deselect' : 'global.button.select')}>
|
||||
<Checkbox checked={selected} onMouseDown={preventDefaultAction} onChange={handleSelectionChange} />
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
const isSelected = selected !== null;
|
||||
if (isSelected) {
|
||||
if (!asCheckbox) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Tooltip title={t(selected ? 'global.button.deselect' : 'global.button.select')}>
|
||||
<Checkbox checked={selected} onMouseDown={preventDefaultAction} onChange={handleSelectionChange} />
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
if (asCheckbox) {
|
||||
return (
|
||||
<Tooltip title={t('global.button.options')}>
|
||||
<IconButton
|
||||
{...bindTriggerProps}
|
||||
onClick={handleClick}
|
||||
onTouchStart={handleClick}
|
||||
aria-label="more"
|
||||
size="large"
|
||||
onMouseDown={preventDefaultAction}
|
||||
>
|
||||
<MoreVertIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
if (asCheckbox) {
|
||||
return (
|
||||
<Tooltip title={t('global.button.options')}>
|
||||
<IconButton
|
||||
<Button
|
||||
ref={ref}
|
||||
{...bindTriggerProps}
|
||||
onClick={handleClick}
|
||||
onTouchStart={handleTouchStart}
|
||||
aria-label="more"
|
||||
size="large"
|
||||
onMouseDown={preventDefaultAction}
|
||||
onTouchStart={handleClick}
|
||||
className="manga-option-button"
|
||||
size="small"
|
||||
variant="contained"
|
||||
sx={{
|
||||
minWidth: 'unset',
|
||||
paddingX: '0',
|
||||
paddingY: '2.5px',
|
||||
visibility: popupState.isOpen && !isMobile ? 'visible' : 'hidden',
|
||||
pointerEvents: isMobile ? undefined : 'none',
|
||||
}}
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
>
|
||||
<MoreVertIcon />
|
||||
</IconButton>
|
||||
</Button>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Tooltip title={t('global.button.options')}>
|
||||
<Button
|
||||
{...bindTriggerProps}
|
||||
onClick={handleClick}
|
||||
onTouchStart={handleTouchStart}
|
||||
className="manga-option-button"
|
||||
size="small"
|
||||
variant="contained"
|
||||
sx={{
|
||||
minWidth: 'unset',
|
||||
paddingX: '0',
|
||||
paddingY: '2.5px',
|
||||
visibility: popupState.isOpen || isMobile ? 'visible' : 'hidden',
|
||||
pointerEvents: isMobile ? undefined : 'none',
|
||||
}}
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
>
|
||||
<MoreVertIcon />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
},
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user