Skip to content

Commit

Permalink
full screen img on the point view (#154)
Browse files Browse the repository at this point in the history
  • Loading branch information
trean authored Feb 6, 2024
1 parent 482228a commit af0aa21
Showing 1 changed file with 52 additions and 2 deletions.
54 changes: 52 additions & 2 deletions src/components/Points/PointImage.jsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import React from 'react';
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { CardMedia, Grid } from '@mui/material';
import { Box, CardMedia, Grid, Modal, Typography } from '@mui/material';

function PointImage({ data, sx }) {
const [fullScreenImg, setFullScreenImg] = useState(null);
const renderImages = () => {
const images = [];

Expand Down Expand Up @@ -40,6 +41,7 @@ function PointImage({ data, sx }) {
key={key}
image={data[key]}
alt={data[key]}
onClick={() => setFullScreenImg(data[key])}
/>
);
}
Expand All @@ -58,6 +60,54 @@ function PointImage({ data, sx }) {
return (
<Grid item xs={3} display="grid" justifyContent={'center'}>
{images}
<Modal
open={!!fullScreenImg}
onClose={() => setFullScreenImg(null)}
componentsProps={{
backdrop: {
sx: { cursor: 'pointer' },
title: 'Click to close',
},
}}
>
<Box
sx={{
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%,-50%)',
maxWidth: '100%',
maxHeight: '100%',
'&:focus': { outline: 'none' },
}}
>
<Typography
variant="h6"
component="p"
onClick={() => setFullScreenImg(null)}
sx={{
position: 'absolute',
top: '-60px',
right: 0,
padding: 1,
cursor: 'pointer',
color: 'white',
backgroundColor: 'rgba(0,0,0,0.5)',
borderRadius: '5px',
}}
>
Close [ESC]
</Typography>
<img
src={fullScreenImg}
alt={fullScreenImg}
style={{
maxWidth: '100%',
maxHeight: '100%',
}}
/>
</Box>
</Modal>
</Grid>
);
}
Expand Down

0 comments on commit af0aa21

Please sign in to comment.