import React from 'react'; import styled from 'styled-components'; import { FacebookShareButton, TwitterShareButton, } from 'react-share'; // TODO Change Icon // import facebookIcon from '../../static/img/shareIcon/facebook.svg'; // import twitterIcon from '../../static/img/shareIcon/twitter.svg'; // import copyIcon from '../../static/img/shareIcon/copy.svg'; import Button from '@material-ui/core/Button'; import Dialog from '@material-ui/core/Dialog'; import DialogActions from '@material-ui/core/DialogActions'; import DialogContent from '@material-ui/core/DialogContent'; import DialogContentText from '@material-ui/core/DialogContentText'; import DialogTitle from '@material-ui/core/DialogTitle'; import { CopyToClipboard } from 'react-copy-to-clipboard'; const Wrapper = styled.div` display: table; border-spacing: 30px 6px; margin: 10px auto; margin-bottom: 30px; `; const Row = styled.div` cursor: pointer; display: table-cell; vertical-align: middle; align: center; `; const Icon = styled.img` vertical-align: middle; `; class ShareLink extends React.Component { constructor() { super(); this.state = { clicked: false, href: '', }; } componentDidMount = () => { this.setState({ href: window.location.href }); } handleClickOpen = () => { this.setState({ clicked: true }); }; handleClose = () => { this.setState({ clicked: false }); }; render(){ const { href } = this.state; return( <Wrapper> {/* TODO ADD URL */} <Row> <FacebookShareButton url={href}> <Icon src={'../../static/img/shareIcon/facebook.svg'} /> </FacebookShareButton> </Row> <Row> <TwitterShareButton url={href}> <Icon src={'../../static/img/shareIcon/twitter.svg'} /> </TwitterShareButton> </Row> <CopyToClipboard text={href}> <Row onClick={this.handleClickOpen}> <Icon src={'../../static/img/shareIcon/copy.svg'} /> </Row> </CopyToClipboard> <Dialog open={this.state.clicked} onClose={this.handleClose} aria-labelledby='alert-dialog-title' aria-describedby='alert-dialog-description'> <DialogTitle id='alert-dialog-title'> {'URL copied to clipboard'} </DialogTitle> <DialogContent> <DialogContentText id='alert-dialog-description' style={{overflow: "hidden", textOverflow: "ellipsis"}}> {href} </DialogContentText> </DialogContent> <DialogActions> <Button onClick={this.handleClose} variant='contained' color='primary'> {'Ok'} </Button> </DialogActions> </Dialog> </Wrapper> ) }; } export default ShareLink;