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