{"version":3,"sources":["webpack:///./Scripts/Components/LightboxImages.js"],"names":["customStyles","content","background","padding","border","overlay","zIndex","LightboxSettings","showStatus","showIndicators","useKeyboardArrows","thumbWidth","autoPlay","autoFocus","renderThumbnails","children","map","item","index","props","imageElement","find","ele","type","src","key","style","backgroundImage","className","dispatch","useDispatch","visible","useSelector","state","lightboxImages","onClose","useCallback","show","onClickThumbnail","setCurrentIndex","images","length","Fragment","data-src","itemProp","onClick","thumbnails","image","ariaHideApp","preventScroll","isOpen","onRequestClose","shouldCloseOnOverlayClick","selectedItem","renderThumbs","value"],"mappings":"yYAOA,MAAMA,EAAe,CACjBC,QAAS,CACLC,WAAY,OACZC,QAAS,EACTC,OAAQ,QAEZC,QAAS,CACLH,WAAY,qBACZI,OAAQ,OAGVC,EAAmB,CACrBC,YAAY,EACZC,gBAAgB,EAChBC,mBAAmB,EACnBC,WAAY,GACZC,UAAU,EACVC,WAAW,GAGTC,EAAoBC,GACPA,EAASC,KAAI,CAACC,EAAMC,KAC/B,IAAKD,IAASA,EAAKE,QAAUF,EAAKE,MAAMJ,SACpC,OAIJ,MAAMK,EAAeH,EAAKE,MAAMJ,SAASM,MACpCC,GAAqB,QAAbA,EAAIC,OAEjB,OAAKH,GAAiBA,EAAaD,OAAUC,EAAaD,MAAMK,IAK5D,uBACIC,IAAKP,EACLQ,MAAO,CACHC,gBAAiB,OAASP,EAAaD,MAAMK,IAAM,KAEvDI,UAAU,0BAVlB,KAiHR,EA/FwBT,IACpB,MAAMU,GAAWC,WACX,QAAEC,EAAF,MAAWb,IAAUc,SAAaC,GAAUA,EAAMC,iBAClDC,GAAUC,kBAAY,IAAMP,GAASQ,SAAK,KAAS,CAACR,IACpDS,EAAoBpB,IACtBW,GAASQ,SAAK,IACdR,GAASU,QAAgBrB,KAG7B,OAAQC,EAAMqB,QAAUrB,EAAMqB,OAAOC,OAAS,EAC1C,gBAAC,EAAAC,SAAD,MAEA,gBAAC,EAAAA,SAAD,KACI,uBAAKd,UAAU,sBACX,uBAAKA,UAAU,2CACX,0BAAQA,UAAU,mCACd,qBACIe,WAAUxB,EAAMqB,OAAO,GAAGhB,IAC1BoB,SAAS,MACTC,QAAS,IAAMP,EAAiB,GAChCV,UAAU,iBAEV,uBACIA,UAAU,8BACVgB,SAAS,QACTpB,IAAKL,EAAM2B,WAAW,GAAGtB,SAKzC,uBAAKI,UAAU,mDACX,uBAAKA,UAAU,OACVT,EAAMqB,OAAOxB,KACV,CAAC+B,EAAO7B,IACJA,EAAQ,GACJ,uBACIU,UAAU,mDACVH,IAAKP,GAEL,qBACIyB,WAAUI,EAAMvB,IAChBoB,SAAS,MACTC,QAAS,IACLP,EAAiBpB,GAErBU,UAAU,iBAEV,uBACIA,UAAU,+BACVgB,SAAS,QACTpB,IACIL,EAAM2B,WAAW5B,GAAOM,aAUhE,gBAAC,IAAD,CACIwB,aAAa,EACbC,eAAe,EACfC,OAAQnB,EACRoB,eAAgBhB,EAChBT,MAAO1B,EACPoD,2BAA2B,GAE3B,gBAAC,KAAD,KACQ7C,EADR,CAEI8C,aAAcnC,EACdU,UAAU,YACV0B,aAAcxC,IAEbK,EAAMqB,OAAOxB,KAAI,CAACuC,EAAOrC,IACtB,uBACIO,IAAM,SAAQP,IACdU,UAAU,wBAEV,0BACIiB,QAASV,EACTP,UAAU,wBAFd,KAMA,uBAAKJ,IAAK+B,EAAM/B,IAAKI,UAAU","file":"277.dcc3cbff2a65b2883b75.js","sourcesContent":["import React, { Fragment, useCallback } from 'react';\nimport Modal from 'react-modal';\nimport 'react-responsive-carousel/lib/styles/carousel.min.css';\nimport { Carousel as Lightbox } from 'react-responsive-carousel';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { show, setCurrentIndex } from '../Actions/LightboxImages.action';\n\nconst customStyles = {\n    content: {\n        background: 'none',\n        padding: 0,\n        border: 'none',\n    },\n    overlay: {\n        background: 'rgba(0, 0, 0, 0.8)',\n        zIndex: 2003,\n    },\n};\nconst LightboxSettings = {\n    showStatus: false,\n    showIndicators: false,\n    useKeyboardArrows: true,\n    thumbWidth: 50,\n    autoPlay: false,\n    autoFocus: true,\n};\n\nconst renderThumbnails = (children) => {\n    const images = children.map((item, index) => {\n        if (!item || !item.props || !item.props.children) {\n            return undefined;\n        }\n\n        // find img to get source\n        const imageElement = item.props.children.find(\n            (ele) => ele.type === 'img'\n        );\n        if (!imageElement || !imageElement.props || !imageElement.props.src) {\n            return undefined;\n        }\n\n        return (\n            <div\n                key={index}\n                style={{\n                    backgroundImage: 'url(' + imageElement.props.src + ')',\n                }}\n                className=\"thumbnail__image\"\n            />\n        );\n    });\n\n    return images;\n};\n\nconst LightboxImages = (props) => {\n    const dispatch = useDispatch();\n    const { visible, index } = useSelector((state) => state.lightboxImages);\n    const onClose = useCallback(() => dispatch(show(false)), [dispatch]);\n    const onClickThumbnail = (index) => {\n        dispatch(show(true));\n        dispatch(setCurrentIndex(index));\n    };\n\n    return !props.images || props.images.length < 1 ? (\n        <Fragment />\n    ) : (\n        <Fragment>\n            <div className=\"row product-images\">\n                <div className=\"small-12 large-10 columns large-order-1\">\n                    <figure className=\"product-detail__image-container\">\n                        <a\n                            data-src={props.images[0].src}\n                            itemProp=\"url\"\n                            onClick={() => onClickThumbnail(0)}\n                            className=\"product-image\"\n                        >\n                            <img\n                                className=\"product-detail__image--main\"\n                                itemProp=\"image\"\n                                src={props.thumbnails[0].src}\n                            />\n                        </a>\n                    </figure>\n                </div>\n                <div className=\"small-12 large-2 columns medium-flex-dir-column\">\n                    <div className=\"row\">\n                        {props.images.map(\n                            (image, index) =>\n                                index > 0 && (\n                                    <div\n                                        className=\"product-detail__image-container columns large-12\"\n                                        key={index}\n                                    >\n                                        <a\n                                            data-src={image.src}\n                                            itemProp=\"url\"\n                                            onClick={() =>\n                                                onClickThumbnail(index)\n                                            }\n                                            className=\"product-image\"\n                                        >\n                                            <img\n                                                className=\"product-detail__image--alter\"\n                                                itemProp=\"image\"\n                                                src={\n                                                    props.thumbnails[index].src\n                                                }\n                                            />\n                                        </a>\n                                    </div>\n                                )\n                        )}\n                    </div>\n                </div>\n            </div>\n            <Modal\n                ariaHideApp={false}\n                preventScroll={true}\n                isOpen={visible}\n                onRequestClose={onClose}\n                style={customStyles}\n                shouldCloseOnOverlayClick={false}\n            >\n                <Lightbox\n                    {...LightboxSettings}\n                    selectedItem={index}\n                    className=\"light-box\"\n                    renderThumbs={renderThumbnails}\n                >\n                    {props.images.map((value, index) => (\n                        <div\n                            key={`figure${index}`}\n                            className=\"light-box__container\"\n                        >\n                            <button\n                                onClick={onClose}\n                                className=\"light-box__close-btn\"\n                            >\n                                &times;\n                            </button>\n                            <img src={value.src} className=\"light-box__image\" />\n                        </div>\n                    ))}\n                </Lightbox>\n            </Modal>\n        </Fragment>\n    );\n};\n\nexport default LightboxImages;\n"],"sourceRoot":""}