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 (
setOpen(true)} > {list[0]} setOpen(true)} />
); } else if (list.length === 2) { return (
setOpen(true)} > {list[0]} setOpen(true)} /> {list[1]} setOpen(true)} />
); } else { return (
{list[0]} setOpen(true)} />
setOpen(true)} > +{list.length - 2} {list[1]}
{open ? ( ) : null}
); } }; const desktopImages = () => { if (list.length === 1) { return (
setOpen(true)} > {list[0]} setOpen(true)} />
); } else if (list.length === 2) { return (
setOpen(true)} > {list[0]} setOpen(true)} /> {list[1]} setOpen(true)} />
); } else if (list.length === 3) { return (
setOpen(true)} > {list[0]} setOpen(true)} /> {list[1]} setOpen(true)} /> {list[2]} setOpen(true)} />
); } else { return (
{list[0]} setOpen(true)} />
{list[1]} setOpen(true)} />
setOpen(true)} > +{list.length - 3} {list[2]}
{open ? ( ) : null}
); } }; return ( <> {window.innerWidth < 1000 ? (

عکس‌ها{" "}

{mobileImages()}
) : null} {window.innerWidth > 1000 ? (

عکس‌ها")}{" "}

{desktopImages()}
) : null} ); }