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

Feature/utilize long press (#709)

Browse Source 
* Open manga action menu on long press

* Open chapter action menu on long press
This commit is contained in:
schroda
2024-04-07 15:21:25 +02:00
committed by GitHub
parent ecd9b7478b
commit 41d876e156
3 changed files with 221 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/MangaCard.tsx
View File

@@ -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}

66
src/components/chapter/ChapterCard.tsx
View File

@@ -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();
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 (
{(popupState) => (
<>
<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}
onClick={handleClickOpenMenu}
onTouchStart={handleTouchStart}
ref={menuButtonRef}
{...bindTrigger(popupState)}
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>
);

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

@@ -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,7 +18,9 @@ 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,
@@ -30,29 +32,29 @@ export const MangaOptionButton = ({
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>) => {
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);
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>
);
};
},
);