81 lines
2.7 KiB
TypeScript
81 lines
2.7 KiB
TypeScript
|
/*
|
||
|
|
* 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 Download from '@mui/icons-material/Download';
|
||
|
|
import MoreHoriz from '@mui/icons-material/MoreHoriz';
|
||
|
|
import {
|
||
|
|
Fab, ListItemIcon, ListItemText, Menu, MenuItem,
|
||
|
|
} from '@mui/material';
|
||
|
|
import { Box } from '@mui/system';
|
||
|
|
import { pluralize } from 'components/util/helpers';
|
||
|
|
import React, { useRef, useState } from 'react';
|
||
|
|
|
||
|
|
interface SelectionFABProps{
|
||
|
|
selectedChapters: IChapter[]
|
||
|
|
onAction: (action: 'download') => void
|
||
|
|
}
|
||
|
|
|
||
|
|
const SelectionFAB: React.FC<SelectionFABProps> = (props) => {
|
||
|
|
const { selectedChapters, onAction } = props;
|
||
|
|
const count = selectedChapters.length;
|
||
|
|
|
||
|
|
const anchorEl = useRef<HTMLElement>();
|
||
|
|
const [open, setOpen] = useState(false);
|
||
|
|
const handleClose = () => setOpen(false);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
position: 'fixed', bottom: '2em', right: '3em', pt: 1,
|
||
|
|
}}
|
||
|
|
ref={anchorEl}
|
||
|
|
>
|
||
|
|
<Fab
|
||
|
|
variant="extended"
|
||
|
|
color="primary"
|
||
|
|
id="selectionMenuButton"
|
||
|
|
onClick={() => setOpen(true)}
|
||
|
|
>
|
||
|
|
{`${count} ${pluralize(count, 'chapter')}`}
|
||
|
|
<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',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<MenuItem
|
||
|
|
onClick={() => { onAction('download'); handleClose(); }}
|
||
|
|
>
|
||
|
|
<ListItemIcon>
|
||
|
|
<Download fontSize="small" />
|
||
|
|
</ListItemIcon>
|
||
|
|
<ListItemText>
|
||
|
|
Download selected
|
||
|
|
</ListItemText>
|
||
|
|
</MenuItem>
|
||
|
|
{/* <MenuItem onClick={() => { onClearSelection(); handleClose(); }}>
|
||
|
|
<ListItemIcon>
|
||
|
|
<Clear fontSize="small" />
|
||
|
|
</ListItemIcon>
|
||
|
|
<ListItemText>
|
||
|
|
ClearSelection
|
||
|
|
</ListItemText>
|
||
|
|
</MenuItem> */}
|
||
|
|
</Menu>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default SelectionFAB;
|