You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

233 lines
6.7 KiB

import React, { useState } from "react";
import Modal from "./Modal/index";
import PhotoLibraryRoundedIcon from "@material-ui/icons/PhotoLibraryRounded";
import "./index.scss";
const maxMobileSize = 550;
const fontSize = {
mobile: {
span: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 10,
h3: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 25,
},
desktop: {
h3: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 80,
},
};
export default function QRImage(props) {
const list = props.data.fileIds.split(",");
const [open, setOpen] = useState(null);
const [selectedImage, setSelectedImage] = useState(list[0]);
const handleNavigation = (direction, item) => {
const position = list.indexOf(item);
const length = list.length;
if (direction === "left") {
if (position < length - 1) {
setSelectedImage(list[position + 1]);
}
} else {
if (position > 0) {
setSelectedImage(list[position - 1]);
}
}
};
const closeModal = (val) => {
setOpen(false);
};
const mobileImages = () => {
if (list.length === 1) {
return (
<div
className="mobile-qr-image d-flex"
// onClick={() => setOpen(true)}
>
<img
alt={list[0]}
className="mobile-qr-image__single"
src={`https://dnvn.ir/api/v1/file/${list[0]}`}
onClick={() => setOpen(true)}
/>
</div>
);
} else if (list.length === 2) {
return (
<div
className="mobile-qr-image d-flex"
// onClick={() => setOpen(true)}
>
<img
alt={list[0]}
className="mobile-qr-image__two"
src={`https://dnvn.ir/api/v1/file/${list[0]}`}
onClick={() => setOpen(true)}
/>
<img
alt={list[1]}
className="mobile-qr-image__two"
src={`https://dnvn.ir/api/v1/file/${list[1]}`}
onClick={() => setOpen(true)}
/>
</div>
);
} else {
return (
<div className="mobile-qr-image d-flex">
<div className="mobile-qr-image__two mobile-qr-image__more">
<img
alt={list[0]}
src={`https://dnvn.ir/api/v1/file/${list[0]}`}
onClick={() => setOpen(true)}
/>
</div>
<div className="mobile-qr-image__two mobile-qr-image__more d-flex justify-content-center align-items-center">
<span
style={{ fontSize: fontSize.mobile.span }}
className="d-flex justify-content-center align-items-center"
onClick={() => setOpen(true)}
>
+{list.length - 2}
</span>
<img
alt={list[1]}
className="mobile-qr-image__two"
src={`https://dnvn.ir/api/v1/file/${list[1]}`}
/>
</div>
{open ? (
<Modal
setOpen={closeModal}
handleNavigation={handleNavigation}
selectedImage={selectedImage}
/>
) : null}
</div>
);
}
};
const desktopImages = () => {
if (list.length === 1) {
return (
<div
className="qr-image d-flex"
// onClick={() => setOpen(true)}
>
<img
alt={list[0]}
className="qr-image__single"
src={`https://dnvn.ir/api/v1/file/${list[0]}`}
onClick={() => setOpen(true)}
/>
</div>
);
} else if (list.length === 2) {
return (
<div
className="qr-image d-flex"
// onClick={() => setOpen(true)}
>
<img
alt={list[0]}
className="qr-image__two"
src={`https://dnvn.ir/api/v1/file/${list[0]}`}
onClick={() => setOpen(true)}
/>
<img
alt={list[1]}
className="qr-image__two"
src={`https://dnvn.ir/api/v1/file/${list[1]}`}
onClick={() => setOpen(true)}
/>
</div>
);
} else if (list.length === 3) {
return (
<div
className="qr-image d-flex"
// onClick={() => setOpen(true)}
>
<img
alt={list[0]}
className="qr-image__three"
src={`https://dnvn.ir/api/v1/file/${list[0]}`}
onClick={() => setOpen(true)}
/>
<img
alt={list[1]}
className="qr-image__three"
src={`https://dnvn.ir/api/v1/file/${list[1]}`}
onClick={() => setOpen(true)}
/>
<img
alt={list[2]}
className="qr-image__three"
src={`https://dnvn.ir/api/v1/file/${list[2]}`}
onClick={() => setOpen(true)}
/>
</div>
);
} else {
return (
<div className="qr-image d-flex">
<div className="qr-image__three qr-image__more">
<img
alt={list[0]}
src={`https://dnvn.ir/api/v1/file/${list[0]}`}
onClick={() => setOpen(true)}
/>
</div>
<div className="qr-image__three qr-image__more">
<img
alt={list[1]}
src={`https://dnvn.ir/api/v1/file/${list[1]}`}
onClick={() => setOpen(true)}
/>
</div>
<div className="qr-image__three qr-image__more d-flex justify-content-center align-items-center">
<span
style={{ fontSize: fontSize.mobile.span }}
className="d-flex justify-content-center align-items-center"
onClick={() => setOpen(true)}
>
+{list.length - 3}
</span>
<img alt={list[2]} src={`https://dnvn.ir/api/v1/file/${list[2]}`} />
</div>
{open ? (
<Modal
setOpen={closeModal}
handleNavigation={handleNavigation}
selectedImage={selectedImage}
/>
) : null}
</div>
);
}
};
return (
<>
{window.innerWidth < 1000 ? (
<div className="d-flex flex-column" id="image">
<h3 style={{ fontSize: fontSize.mobile.h3 }}>
<PhotoLibraryRoundedIcon style={{ fontSize: 30 }} /> عکسها{" "}
</h3>
{mobileImages()}
</div>
) : null}
{window.innerWidth > 1000 ? (
<div className="d-flex flex-column" id="image">
<h3 style={{ fontSize: fontSize.desktop.h3 }}>
<PhotoLibraryRoundedIcon style={{ fontSize: 30 }} />
عکسها")}{" "}
</h3>
{desktopImages()}
</div>
) : null}
</>
);
}