diff options
author | eug-vs <eug-vs@keemail.me> | 2020-08-10 11:19:53 +0300 |
---|---|---|
committer | eug-vs <eug-vs@keemail.me> | 2020-08-10 11:19:53 +0300 |
commit | f97989967ee0b88a8c64f226a4b28a79eeef5fd2 (patch) | |
tree | 9311246c260705c3c89fded54fb0bb688c98beec /src/containers/FeedPage/PollSubmissionImage.tsx | |
parent | cab8de5c6b246e1aa1376fa2b8666f09b44b6469 (diff) | |
download | which-ui-f97989967ee0b88a8c64f226a4b28a79eeef5fd2.tar.gz |
refactor: remove "Page" from container names
Diffstat (limited to 'src/containers/FeedPage/PollSubmissionImage.tsx')
-rw-r--r-- | src/containers/FeedPage/PollSubmissionImage.tsx | 87 |
1 files changed, 0 insertions, 87 deletions
diff --git a/src/containers/FeedPage/PollSubmissionImage.tsx b/src/containers/FeedPage/PollSubmissionImage.tsx deleted file mode 100644 index 8835989..0000000 --- a/src/containers/FeedPage/PollSubmissionImage.tsx +++ /dev/null @@ -1,87 +0,0 @@ -import React, { useState } from 'react'; -import { makeStyles } from '@material-ui/core/styles'; -import CloudUploadIcon from '@material-ui/icons/CloudUpload'; -import { CardActionArea, CardMedia, Typography } from '@material-ui/core'; -import CancelOutlinedIcon from '@material-ui/icons/CancelOutlined'; - -import UploadImage from '../../components/UploadImage/UploadImage'; - -interface PropTypes { - url: string; - setUrl: (url: string) => void; -} - -const useStyles = makeStyles({ - root: { - display: 'flex', - justifyContent: 'center', - flexDirection: 'column', - alignItems: 'center' - }, - clearIcon: { - opacity: '.5', - fontSize: 50 - }, - media: { - height: '100%', - width: '100%', - display: 'flex', - justifyContent: 'center', - alignItems: 'center' - }, - text: { - textAlign: 'center' - } -}); - - -const PollSubmissionImage: React.FC<PropTypes> = ({ url, setUrl }) => { - const classes = useStyles(); - const [isModalOpen, setIsModalOpen] = useState(false); - const [isMediaHover, setIsMediaHover] = useState(false); - - const handleClick = (): void => { - if (!isModalOpen) { - if (url) setUrl(''); - else setIsModalOpen(!isModalOpen); - } - }; - - const handleMouseEnter = (): void => { - setIsMediaHover(true); - }; - - const handleMouseLeave = (): void => { - setIsMediaHover(false); - }; - - - const Upload = ( - <> - <CloudUploadIcon fontSize="large" color="primary" /> - <Typography variant="h5" className={classes.text}> Upload an image </Typography> - </> - ); - - const Media = ( - <CardMedia - image={url} - className={classes.media} - onMouseEnter={handleMouseEnter} - onMouseLeave={handleMouseLeave} - > - {isMediaHover && <CancelOutlinedIcon className={classes.clearIcon} />} - </CardMedia> - ); - - return ( - <> - <CardActionArea onClick={handleClick} className={classes.root}> - {url ? Media : Upload} - </CardActionArea> - <UploadImage isOpen={isModalOpen} setIsOpen={setIsModalOpen} callback={setUrl} /> - </> - ); -}; - -export default PollSubmissionImage; |