FloatingDownloadButton.js

/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
Departamento de Informatica - Universidade Federal do Parana

This file is part of Plataforma Integrada MEC.

Plataforma Integrada MEC is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

Plataforma Integrada MEC is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/

import React, { useState } from 'react';
import styled from 'styled-components';
import GetAppIcon from '@material-ui/icons/GetApp';
import Fab from '@material-ui/core/Fab';
import Snackbar from '@material-ui/core/Snackbar';
import MuiAlert from '@material-ui/lab/Alert';

function Alert(props) {
  return <MuiAlert elevation={6} variant="filled" {...props} />;
}

export default function FloatingDownloadButton (props) {
	const [snackbar, setSnackbar] = useState(false);

	const handleClickDownload = () => {
		if (props.empty_selection)
			setSnackbar(true);
	}

	const handleClose = () => {
		setSnackbar(false);
	}

	return (
		<div>
			<DownloadAnchor href={props.url} alt="Baixar recursos selecionados">
				<FloatingDownload
					color="primary"
					aria-label="download"
					onClick={handleClickDownload}
				>
					<GetAppIcon />	
				</FloatingDownload>
			</DownloadAnchor>
			<Snackbar open={snackbar} autoHideDuration={6000} onClose={handleClose}>
				<Alert onClose={handleClose} severity="alert">
					Selecione recursos para poder baixar
				</Alert>
			</Snackbar>
		</div>
	);
}

const DownloadAnchor=styled.a`
	text-decoration: none !important;
`

const FloatingDownload=styled(Fab)`
	position: fixed !important;
	right: 15px !important;
	bottom: 25px !important;
`