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.
 
 
 

201 lines
5.6 KiB

import React, { Component, useState } from "react";
import Modal from "./Modal/index";
import "./index.scss";
const maxMobileSize = 550;
const fontSize = {
mobile: {
span: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 10,
},
};
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) => {
console.log(val);
setOpen(false);
};
const mobileImages = () => {
if (list.length === 1) {
return (
<div
className="mobile-qr-image d-flex"
// onClick={() => setOpen(true)}
>
<img
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
className="mobile-qr-image__two"
src={`https://dnvn.ir/api/v1/file/${list[0]}`}
onClick={() => setOpen(true)}
/>
<img
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
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
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
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
className="qr-image__two"
src={`https://dnvn.ir/api/v1/file/${list[0]}`}
onClick={() => setOpen(true)}
/>
<img
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
className="qr-image__three"
src={`https://dnvn.ir/api/v1/file/${list[0]}`}
onClick={() => setOpen(true)}
/>
<img
className="qr-image__three"
src={`https://dnvn.ir/api/v1/file/${list[1]}`}
onClick={() => setOpen(true)}
/>
<img
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
src={`https://dnvn.ir/api/v1/file/${list[0]}`}
onClick={() => setOpen(true)}
/>
</div>
<div className="qr-image__three qr-image__more">
<img
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 src={`https://dnvn.ir/api/v1/file/${list[2]}`} />
</div>
{open ? (
<Modal
setOpen={closeModal}
handleNavigation={handleNavigation}
selectedImage={selectedImage}
/>
) : null}
</div>
);
}
};
return (
<>
{window.innerWidth < 1000 ? mobileImages() : null}
{window.innerWidth > 1000 ? desktopImages() : null}
</>
);
}