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

Feature/cleanup chapter actions (#525)

Browse Source 
* Extract chapter actions into "Chapters"

* Extract chapter action menu into component

* Rename "SelectionFABActionItem" to "MenuItem"

* Decouple "MenuItem" from "SelectionFAB"

* Use "MenuItem" in "ActionMenus"

* Merge chapter action menus

* Simplify chapter "mark as read" action
This commit is contained in:
schroda
2023-12-30 04:04:59 +01:00
committed by GitHub
parent d15be603b1
commit a3a52064cc
14 changed files with 799 additions and 587 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/manga/SelectionFAB.tsx
View File

@@ -7,14 +7,16 @@
*/
import MoreHoriz from '@mui/icons-material/MoreHoriz';
import { Fab, Menu, Box, styled } from '@mui/material';
import React, { useRef, useState } from 'react';
import { Fab, Box, styled } from '@mui/material';
import React from 'react';
import { useTranslation } from 'react-i18next';
import PopupState, { bindMenu, bindTrigger } from 'material-ui-popup-state';
import { DEFAULT_FAB_STYLE } from '@/components/util/StyledFab';
import { TranslationKey } from '@/typings.ts';
import { Menu } from '@/components/manga/Menu.tsx';
interface SelectionFABProps {
children: (handleClose: () => void) => React.ReactNode;
children: (handleClose: () => void) => JSX.Element;
selectedItemsCount: number;
title: TranslationKey;
}
@@ -32,29 +34,29 @@ const FabContainer = styled(Box)(({ theme }) => ({
export const SelectionFAB: React.FC<SelectionFABProps> = ({ children, selectedItemsCount, title }) => {
const { t } = useTranslation();
const anchorEl = useRef<HTMLElement>();
const [open, setOpen] = useState(false);
const handleClose = () => setOpen(false);
return (
<FabContainer ref={anchorEl}>
<Fab variant="extended" color="primary" id="selectionMenuButton" onClick={() => setOpen(true)}>
{`${selectedItemsCount} ${t(title, { count: selectedItemsCount })}`}
<MoreHoriz sx={{ ml: 1 }} />
</Fab>
<Menu
id="selectionMenu"
anchorEl={anchorEl.current}
open={open}
onClose={handleClose}
anchorOrigin={{ horizontal: 'right', vertical: 'top' }}
transformOrigin={{ horizontal: 'right', vertical: 'bottom' }}
MenuListProps={{
'aria-labelledby': 'selectionMenuButton',
}}
>
{children(handleClose)}
</Menu>
</FabContainer>
<PopupState variant="popover" popupId="selection-fab-menu">
{(popupState) => (
<>
<FabContainer {...bindTrigger(popupState)}>
<Fab variant="extended" color="primary" id="selectionMenuButton">
{`${selectedItemsCount} ${t(title, { count: selectedItemsCount })}`}
<MoreHoriz sx={{ ml: 1 }} />
</Fab>
</FabContainer>
<Menu
{...bindMenu(popupState)}
id="selectionMenu"
anchorOrigin={{ horizontal: 'right', vertical: 'top' }}
transformOrigin={{ horizontal: 'right', vertical: 'bottom' }}
MenuListProps={{
'aria-labelledby': 'selectionMenuButton',
}}
>
{(onClose) => children(onClose)}
</Menu>
</>
)}
</PopupState>
);
};