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
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} |
|
</> |
|
); |
|
}
|
|
|