{"version":3,"file":"567.72f04f3768b6e99a54d4.min.js","mappings":"0MAGe,SAASA,IAEpB,OAAwBC,EAAAA,EAAAA,WAAS,GAAjC,eAAOC,EAAP,KAAaC,EAAb,KACA,GAAoCF,EAAAA,EAAAA,UAAS,GAA7C,eAAOG,EAAP,KAAmBC,EAAnB,KASMC,EAAqB,SAACC,GACxBA,EAAEC,iBAEF,IADA,IAAIC,EAASF,EAAEE,QACPA,EAAOC,MACXD,EAASA,EAAOE,cAEpB,IAAMC,EAAQC,EAAaC,WAAU,SAAAC,GACjC,OAAOA,EAAKC,MAAQP,EAAOC,QAE/BL,EAAcO,GACdT,GAAQ,IAINU,GAAeI,EAAAA,EAAAA,UACjB,WAEI,OADiB,OAAIC,SAASC,iBAAiB,gBAC/BC,KAAI,SAAAC,GAChB,MAAO,CACHC,KAAM,QACNN,IAAKK,EAAEX,WAInB,KAGJa,EAAAA,EAAAA,YACI,WACI,IAAMC,GAAW,OAAIN,SAASC,iBAAiB,gBAI/C,OAHAK,EAASC,SAAQ,SAAAV,GACbA,EAAKW,iBAAiB,QAASpB,MAE5B,WACHkB,EAASC,SAAQ,SAAAV,GACbA,EAAKY,oBAAoB,QAASrB,SAI9C,IAIJ,IAAMsB,EAAY,kCAAQC,UAAU,kBAAkBP,KAAK,SAASQ,QAjDhD,SAACvB,GACjBJ,GAAQ,KAiDR,+BAAK4B,MAAM,oBAAmB,+BAAKC,UAAU,kBAC7C,gCAAMH,UAAU,WAAhB,qBAGJ,OACI,wBAAC,IAAD,CAAUD,UAAWA,EAAWK,MAAOpB,EAAcX,KAAMA,EAAMgC,QApDjD,SAAC3B,GACjBJ,GAAQ,IAmD+ES,MAAOR","sources":["webpack://Vollrath.Kentico.Web/./js/shared/react/components/product-drawing-modal.jsx"],"sourcesContent":["import React, { useState, useMemo, useEffect } from \"react\";\r\nimport Magnific from './magnific.jsx';\r\n\r\nexport default function ProductDrawingModal() {\r\n    // state\r\n    const [show, setShow] = useState(false);\r\n    const [modalIndex, setModalIndex] = useState(0);\r\n\r\n    // handlers\r\n    const handleClick = (e) => {\r\n        setShow(true);\r\n    };\r\n    const handleClose = (e) => {\r\n        setShow(false);\r\n    };\r\n    const handleDrawingClick = (e) => {\r\n        e.preventDefault();\r\n        let target = e.target;\r\n        while (!target.href) {\r\n            target = target.parentElement;\r\n        }\r\n        const index = galleryItems.findIndex(item => {\r\n            return item.src === target.href;\r\n        });\r\n        setModalIndex(index);\r\n        setShow(true);\r\n    };\r\n\r\n    // generate drawings gallery array\r\n    const galleryItems = useMemo(\r\n        () => {\r\n            const drawings = [...document.querySelectorAll('.js-drawing')];\r\n            return drawings.map(i => {\r\n                return {\r\n                    type: 'image',\r\n                    src: i.href\r\n                };\r\n            });\r\n        },\r\n        []\r\n    );\r\n    // add listeners to drawings\r\n    useEffect(\r\n        () => {\r\n            const drawings = [...document.querySelectorAll('.js-drawing')];\r\n            drawings.forEach(item => {\r\n                item.addEventListener('click', handleDrawingClick);\r\n            });\r\n            return () => {\r\n                drawings.forEach(item => {\r\n                    item.removeEventListener('click', handleDrawingClick);\r\n                });\r\n            };\r\n        },\r\n        []\r\n    );\r\n\r\n    // template\r\n    const activator = <button className=\"panel-media-btn\" type=\"button\" onClick={handleClick}>\r\n        <svg class=\"icon icon-expand\"><use xlinkHref=\"#icon-expand\"></use></svg>\r\n        <span className=\"sr-only\">Enlarge Drawings</span>\r\n    </button>;\r\n\r\n    return (\r\n        <Magnific activator={activator} items={galleryItems} show={show} onClose={handleClose} index={modalIndex}/>    \r\n    )\r\n}"],"names":["ProductDrawingModal","useState","show","setShow","modalIndex","setModalIndex","handleDrawingClick","e","preventDefault","target","href","parentElement","index","galleryItems","findIndex","item","src","useMemo","document","querySelectorAll","map","i","type","useEffect","drawings","forEach","addEventListener","removeEventListener","activator","className","onClick","class","xlinkHref","items","onClose"],"sourceRoot":""}