Move manga files into new folder

2024-10-05 19:21:26 +02:00
parent cb731cefc0
commit 18fc225d6c
42 changed files with 66 additions and 59 deletions
--- a/src/modules/manga/components/MangaOptionButton.tsx
+++ b/src/modules/manga/components/MangaOptionButton.tsx
@@ -0,0 +1,126 @@
+/*
+ * 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 { useTranslation } from 'react-i18next';
+import { BaseSyntheticEvent, MouseEvent, TouchEvent, ChangeEvent, useMemo, forwardRef, ForwardedRef } from 'react';
+import Button from '@mui/material/Button';
+import Tooltip from '@mui/material/Tooltip';
+import Checkbox from '@mui/material/Checkbox';
+import IconButton from '@mui/material/IconButton';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import { PopupState } from 'material-ui-popup-state/hooks';
+import { bindTrigger } from 'material-ui-popup-state';
+import { SelectableCollectionReturnType } from '@/components/collection/useSelectableCollection.ts';
+import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
+import { MangaType } from '@/lib/graphql/generated/graphql.ts';
+
+export const MangaOptionButton = forwardRef(
+    (
+        {
+            id,
+            selected,
+            handleSelection,
+            asCheckbox = false,
+            popupState,
+        }: {
+            id: number;
+            selected?: boolean | null;
+            handleSelection?: SelectableCollectionReturnType<MangaType['id']>['handleSelection'];
+            asCheckbox?: boolean;
+            popupState: PopupState;
+        },
+        ref: ForwardedRef<HTMLButtonElement | null>,
+    ) => {
+        const { t } = useTranslation();
+
+        const isTouchDevice = MediaQuery.useIsTouchDevice();
+
+        const bindTriggerProps = useMemo(() => bindTrigger(popupState), [popupState]);
+
+        const preventDefaultAction = (e: BaseSyntheticEvent) => {
+            e.stopPropagation();
+            e.preventDefault();
+        };
+
+        const handleSelectionChange = (e: ChangeEvent, isSelected: boolean) => {
+            preventDefaultAction(e);
+            handleSelection?.(id, isSelected);
+        };
+
+        const handleClick = (e: MouseEvent | TouchEvent) => {
+            if (isTouchDevice) return;
+
+            preventDefaultAction(e);
+            popupState.open(e);
+            bindTriggerProps.onClick(e as any);
+        };
+
+        if (!handleSelection) {
+            return null;
+        }
+
+        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
+                        ref={ref}
+                        {...bindTriggerProps}
+                        onClick={handleClick}
+                        onTouchStart={handleClick}
+                        aria-label="more"
+                        size="large"
+                        onMouseDown={preventDefaultAction}
+                    >
+                        <MoreVertIcon />
+                    </IconButton>
+                </Tooltip>
+            );
+        }
+
+        return (
+            <Tooltip title={t('global.button.options')}>
+                <Button
+                    ref={ref}
+                    {...bindTriggerProps}
+                    onClick={handleClick}
+                    onTouchStart={handleClick}
+                    className="manga-option-button"
+                    size="small"
+                    variant="contained"
+                    sx={{
+                        minWidth: 'unset',
+                        paddingX: '0',
+                        paddingY: '2.5px',
+                        visibility: popupState.isOpen ? 'visible' : 'hidden',
+                        pointerEvents: 'none',
+                        '@media not (pointer: fine)': {
+                            visibility: 'hidden',
+                            pointerEvents: undefined,
+                        },
+                    }}
+                    onMouseDown={(e) => e.stopPropagation()}
+                >
+                    <MoreVertIcon />
+                </Button>
+            </Tooltip>
+        );
+    },
+);