{"version":3,"sources":["webpack:///./Scripts/Actions/LightboxImages.action.js","webpack:///./Scripts/_Solution/Components/LightboxImages.js"],"names":["show","visible","type","LIGHTBOX_IMAGES_SHOW","payload","customStyles","content","background","padding","border","overlay","zIndex","LightboxSettings","showStatus","showIndicators","useKeyboardArrows","thumbWidth","autoPlay","autoFocus","renderThumbnails","children","map","item","index","props","imageElement","find","ele","src","React","key","style","backgroundImage","className","dispatch","useDispatch","useSelector","state","lightboxImages","onClose","useCallback","onClickThumbnail","LIGHTBOX_IMAGES_SET_CURRENT_IMAGE","setCurrentIndex","images","length","Fragment","href","itemProp","onClick","e","preventDefault","rel","dangerouslySetInnerHTML","__html","html","image","Modal","ariaHideApp","preventScroll","isOpen","onRequestClose","shouldCloseOnOverlayClick","Lightbox","_extends","selectedItem","renderThumbs","value"],"mappings":"0LAKO,MAOMA,EAAQC,IAAO,CACxBC,KAAMC,KACNC,QAAS,CACLH,a,wNCRR,MAAMI,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,EAAIzB,OAEjB,OAAKuB,GAAiBA,EAAaD,OAAUC,EAAaD,MAAMI,IAK5DC,gBAAA,OACIC,IAAKP,EACLQ,MAAO,CACHC,gBAAiB,OAASP,EAAaD,MAAMI,IAAM,KAEvDK,UAAU,0BAVlB,CAWM,IAyGd,EAlGwBT,IACpB,MAAMU,GAAWC,WACX,QAAElC,EAAO,MAAEsB,IAAUa,SAAaC,GAAUA,EAAMC,iBAClDC,GAAUC,kBAAY,IAAMN,EAASlC,GAAK,KAAS,CAACkC,IACpDO,EAAoBlB,IACtBW,EAASlC,GAAK,IACdkC,EDxDwBX,KAAK,CACjCrB,KAAMwC,KACNtC,QAAS,CACLmB,WCqDSoB,CAAgBpB,GAAO,EAGpC,OAAQC,EAAMoB,QAAUpB,EAAMoB,OAAOC,OAAS,EAC1ChB,gBAACiB,WAAQ,MAETjB,gBAACiB,WAAQ,KACDjB,gBAAA,OAAKI,UAAU,sBACXJ,gBAAA,OAAKI,UAAU,oBACXJ,gBAAA,UAAQI,UAAU,mCACdJ,gBAAA,KACI,WAAUL,EAAMoB,OAAO,GAAGhB,IAC1BmB,KAAK,IACLC,SAAS,MACTC,QAAUC,IACNA,EAAEC,iBACFV,EAAiB,EAAE,EAEvBR,UAAU,gBACVmB,IAAI,WACJC,wBAAyB,CACrBC,OAAQ9B,EAAMoB,OAAO,GAAGW,UAKxC1B,gBAAA,OAAKI,UAAU,oBACXJ,gBAAA,OAAKI,UAAU,OACVT,EAAMoB,OAAOvB,KACV,CAACmC,EAAOjC,IACJA,EAAQ,GACJM,gBAAA,OACII,UAAU,kDACVH,IAAKP,GAELM,gBAAA,KACI,WAAU2B,EAAM5B,IAChBmB,KAAK,IACLC,SAAS,MACTC,QAAUC,IACNA,EAAEC,iBACFV,EAAiBlB,EAAM,EAE3BU,UAAU,gBACVmB,IAAI,WACJC,wBAAyB,CACrBC,OACI9B,EAAMoB,OAAOrB,GAAOgC,cAWhE1B,gBAAC4B,IAAK,CACFC,aAAa,EACbC,eAAe,EACfC,OAAQ3D,EACR4D,eAAgBtB,EAChBR,MAAO1B,EACPyD,2BAA2B,GAE3BjC,gBAACkC,KAAQC,EAAA,GACDpD,EAAgB,CACpBqD,aAAc1C,EACdU,UAAU,YACViC,aAAc/C,IAEbK,EAAMoB,OAAOvB,KAAI,CAAC8C,EAAO5C,IACtBM,gBAAA,OACIC,IAAK,SAASP,IACdU,UAAU,wBAEVJ,gBAAA,UACIoB,QAASV,EACTN,UAAU,wBACb,KAGDJ,gBAAA,OAAKD,IAAKuC,EAAMvC,IAAKK,UAAU,0BAMtD,C","file":"536.3c51fef887bf1bbf8d94.js","sourcesContent":["import {\r\n    LIGHTBOX_IMAGES_SET_CURRENT_IMAGE,\r\n    LIGHTBOX_IMAGES_SHOW,\r\n} from '../constants';\r\n\r\nexport const setCurrentIndex = (index) => ({\r\n    type: LIGHTBOX_IMAGES_SET_CURRENT_IMAGE,\r\n    payload: {\r\n        index,\r\n    },\r\n});\r\n\r\nexport const show = (visible) => ({\r\n    type: LIGHTBOX_IMAGES_SHOW,\r\n    payload: {\r\n        visible,\r\n    },\r\n});\r\n","import React, { Fragment, useCallback } from 'react';\r\nimport Modal from 'react-modal';\r\nimport 'react-responsive-carousel/lib/styles/carousel.min.css';\r\nimport { Carousel as Lightbox } from 'react-responsive-carousel';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { show, setCurrentIndex } from '../../Actions/LightboxImages.action';\r\n\r\nconst customStyles = {\r\n    content: {\r\n        background: 'none',\r\n        padding: 0,\r\n        border: 'none',\r\n    },\r\n    overlay: {\r\n        background: 'rgba(0, 0, 0, 0.8)',\r\n        zIndex: 2003,\r\n    },\r\n};\r\nconst LightboxSettings = {\r\n    showStatus: false,\r\n    showIndicators: false,\r\n    useKeyboardArrows: true,\r\n    thumbWidth: 50,\r\n    autoPlay: false,\r\n    autoFocus: true,\r\n};\r\n\r\nconst renderThumbnails = (children) => {\r\n    const images = children.map((item, index) => {\r\n        if (!item || !item.props || !item.props.children) {\r\n            return undefined;\r\n        }\r\n\r\n        // find img to get source\r\n        const imageElement = item.props.children.find(\r\n            (ele) => ele.type === 'img'\r\n        );\r\n        if (!imageElement || !imageElement.props || !imageElement.props.src) {\r\n            return undefined;\r\n        }\r\n\r\n        return (\r\n            <div\r\n                key={index}\r\n                style={{\r\n                    backgroundImage: 'url(' + imageElement.props.src + ')',\r\n                }}\r\n                className=\"thumbnail__image\"\r\n            />\r\n        );\r\n    });\r\n\r\n    return images;\r\n};\r\n\r\nconst LightboxImages = (props) => {\r\n    const dispatch = useDispatch();\r\n    const { visible, index } = useSelector((state) => state.lightboxImages);\r\n    const onClose = useCallback(() => dispatch(show(false)), [dispatch]);\r\n    const onClickThumbnail = (index) => {\r\n        dispatch(show(true));\r\n        dispatch(setCurrentIndex(index));\r\n    };\r\n\r\n    return !props.images || props.images.length < 1 ? (\r\n        <Fragment />\r\n    ) : (\r\n        <Fragment>\r\n                <div className=\"row product-images\">\r\n                    <div className=\"small-12 columns\">\r\n                        <figure className=\"product-detail__image-container\">\r\n                            <a\r\n                                data-src={props.images[0].src}\r\n                                href=\"#\"\r\n                                itemProp=\"url\"\r\n                                onClick={(e) => {\r\n                                    e.preventDefault();\r\n                                    onClickThumbnail(0);\r\n                                }}\r\n                                className=\"product-image\"\r\n                                rel=\"nofollow\"\r\n                                dangerouslySetInnerHTML={{\r\n                                    __html: props.images[0].html,\r\n                                }}\r\n                            ></a>\r\n                        </figure>\r\n                    </div>\r\n                    <div className=\"small-12 columns\">\r\n                        <div className=\"row\">\r\n                            {props.images.map(\r\n                                (image, index) =>\r\n                                    index > 0 && (\r\n                                        <div\r\n                                            className=\"product-detail__image-container columns large-2\"\r\n                                            key={index}\r\n                                        >\r\n                                            <a\r\n                                                data-src={image.src}\r\n                                                href=\"#\"\r\n                                                itemProp=\"url\"\r\n                                                onClick={(e) => {\r\n                                                    e.preventDefault();\r\n                                                    onClickThumbnail(index);\r\n                                                }}\r\n                                                className=\"product-image\"\r\n                                                rel=\"nofollow\"\r\n                                                dangerouslySetInnerHTML={{\r\n                                                    __html:\r\n                                                        props.images[index].html,\r\n                                                }}\r\n                                            ></a>\r\n                                        </div>\r\n                                    )\r\n                            )}\r\n                        </div>\r\n                    </div>\r\n                \r\n               \r\n            </div>\r\n            <Modal\r\n                ariaHideApp={false}\r\n                preventScroll={true}\r\n                isOpen={visible}\r\n                onRequestClose={onClose}\r\n                style={customStyles}\r\n                shouldCloseOnOverlayClick={false}\r\n            >\r\n                <Lightbox\r\n                    {...LightboxSettings}\r\n                    selectedItem={index}\r\n                    className=\"light-box\"\r\n                    renderThumbs={renderThumbnails}\r\n                >\r\n                    {props.images.map((value, index) => (\r\n                        <div\r\n                            key={`figure${index}`}\r\n                            className=\"light-box__container\"\r\n                        >\r\n                            <button\r\n                                onClick={onClose}\r\n                                className=\"light-box__close-btn\"\r\n                            >\r\n                                &times;\r\n                            </button>\r\n                            <img src={value.src} className=\"light-box__image\" />\r\n                        </div>\r\n                    ))}\r\n                </Lightbox>\r\n            </Modal>\r\n        </Fragment>\r\n    );\r\n};\r\n\r\nexport default LightboxImages;\r\n"],"sourceRoot":""}