{"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","src","key","style","backgroundImage","className","dispatch","useDispatch","useSelector","state","lightboxImages","onClose","useCallback","onClickThumbnail","LIGHTBOX_IMAGES_SET_CURRENT_IMAGE","setCurrentIndex","scrollContainerRef","handleScroll","scrollTo","isAtStart","isAtEnd","useSmoothHorizontalScroll","images","length","Fragment","data-src","href","itemProp","onClick","e","preventDefault","rel","dangerouslySetInnerHTML","__html","html","disabled","ref","onScroll","overflowX","image","ariaHideApp","preventScroll","isOpen","onRequestClose","shouldCloseOnOverlayClick","translate","selectedItem","renderThumbs","value"],"mappings":"0LAKO,MAOMA,EAAQC,IAAD,CAChBC,KAAMC,KACNC,QAAS,CACLH,a,uOCNR,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,SAChC,OAAKK,GAAiBA,EAAaD,OAAUC,EAAaD,MAAME,IAK5D,uBACIC,IAAKJ,EACLK,MAAO,CACHC,gBAAiB,OAASJ,EAAaD,MAAME,IAAM,KAEvDI,UAAU,0BAVlB,KA8HR,EA5GwBN,IACpB,MAAMO,GAAWC,WACX,QAAE/B,EAAF,MAAWsB,IAAUU,SAAaC,GAAUA,EAAMC,iBAClDC,GAAUC,kBAAY,IAAMN,EAAS/B,GAAK,KAAS,CAAC+B,IACpDO,EAAoBf,IACtBQ,EAAS/B,GAAK,IACd+B,EDxDwBR,KAAD,CAC3BrB,KAAMqC,KACNnC,QAAS,CACLmB,WCqDSiB,CAAgBjB,MAEvB,mBAAEkB,EAAF,aAAsBC,EAAtB,SAAoCC,EAApC,UAA8CC,EAA9C,QAAyDC,IAAYC,SAE3E,OAAQtB,EAAMuB,QAAUvB,EAAMuB,OAAOC,OAAS,EAC1C,gBAAC,EAAAC,SAAD,MAEA,gBAAC,EAAAA,SAAD,KACI,uBAAKnB,UAAU,sBACX,uBAAKA,UAAU,oBACX,0BAAQA,UAAU,mCACd,qBACIoB,WAAU1B,EAAMuB,OAAO,GAAGrB,IAC1ByB,KAAK,IACLC,SAAS,MACTC,QAAUC,IACNA,EAAEC,iBACFjB,EAAiB,IAErBR,UAAU,gBACV0B,IAAI,WACJC,wBAAyB,CACrBC,OAAQlC,EAAMuB,OAAO,GAAGY,UAKvCnC,EAAMuB,QAAQC,OAAS,GACpB,uBAAKlB,UAAU,sDACX,0BAAQA,UAAU,mDAAmDuB,QAAS,IAAMV,GAAU,KAAMiB,SAAUhB,GACzG,KAEL,uBAAKd,UAAU,0CAA0C+B,IAAKpB,EAAoBqB,SAAUpB,EAAcd,MAAO,CAAEmC,UAAW,WACzHvC,EAAMuB,OAAO1B,KACV,CAAC2C,EAAOzC,IACJA,EAAQ,GACJ,uBACIO,UAAU,mCACVH,IAAKJ,GAEL,uBAAKO,UAAU,0CACX,qBACIoB,WAAUc,EAAMtC,IAChByB,KAAK,IACLC,SAAS,MACTC,QAAUC,IACNA,EAAEC,iBACFjB,EAAiBf,IAErBO,UAAU,gBACV0B,IAAI,WACJC,wBAAyB,CACrBC,OACIlC,EAAMuB,OAAOxB,GAAOoC,aAOxD,0BAAQ7B,UAAU,oDAAoDuB,QAAS,IAAMV,EAAS,KAAMiB,SAAUf,GACzG,OAOjB,gBAAC,IAAD,CACIoB,aAAa,EACbC,eAAe,EACfC,OAAQlE,EACRmE,eAAgBhC,EAChBR,MAAOvB,EACPgE,2BAA2B,GAE3B,0BACIhB,QAASjB,EACTN,UAAU,yBAETwC,OAAU,wBAEf,gBAAC,KAAD,KACQ1D,EADR,CAEI2D,aAAchD,EACdO,UAAU,YACV0C,aAAcrD,IAEbK,EAAMuB,OAAO1B,KAAI,CAACoD,EAAOlD,IACtB,uBACII,IAAM,SAAQJ,IACdO,UAAU,wBAEV,uBAAKJ,IAAK+C,EAAM/C,IAAKI,UAAU","file":"536.9df06fb73271bd05fd3c.js","sourcesContent":["import {\n    LIGHTBOX_IMAGES_SET_CURRENT_IMAGE,\n    LIGHTBOX_IMAGES_SHOW,\n} from '../constants';\n\nexport const setCurrentIndex = (index) => ({\n    type: LIGHTBOX_IMAGES_SET_CURRENT_IMAGE,\n    payload: {\n        index,\n    },\n});\n\nexport const show = (visible) => ({\n    type: LIGHTBOX_IMAGES_SHOW,\n    payload: {\n        visible,\n    },\n});\n","import React, { Fragment, useCallback, useRef } 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';\nimport { translate } from '../../Services/translation';\nimport useSmoothHorizontalScroll from 'use-smooth-horizontal-scroll';\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;\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    const { scrollContainerRef, handleScroll, scrollTo, isAtStart, isAtEnd } = useSmoothHorizontalScroll();\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 columns\">\n                    <figure className=\"product-detail__image-container\">\n                        <a\n                            data-src={props.images[0].src}\n                            href=\"#\"\n                            itemProp=\"url\"\n                            onClick={(e) => {\n                                e.preventDefault();\n                                onClickThumbnail(0);\n                            }}\n                            className=\"product-image\"\n                            rel=\"nofollow\"\n                            dangerouslySetInnerHTML={{\n                                __html: props.images[0].html,\n                            }}\n                        ></a>\n                    </figure>\n                </div>\n                {props.images?.length > 1 &&\n                    <div className=\"small-12 columns product-detail__thumbnail-wrapper\">\n                        <button className=\"product-detail__thumbnail-container-scroll--left\" onClick={() => scrollTo(-260)} disabled={isAtStart}>\n                            {'<'}\n                        </button>\n                        <div className=\"row product-detail__thumbnail-container\" ref={scrollContainerRef} onScroll={handleScroll} style={{ overflowX: \"scroll\" }}>\n                            {props.images.map(\n                                (image, index) =>\n                                    index > 0 && (\n                                        <div\n                                            className=\"columns small-4 medium-3 large-2\"\n                                            key={index}\n                                        >\n                                            <div className=\"product-detail__image-container thumbs\">\n                                                <a\n                                                    data-src={image.src}\n                                                    href=\"#\"\n                                                    itemProp=\"url\"\n                                                    onClick={(e) => {\n                                                        e.preventDefault();\n                                                        onClickThumbnail(index);\n                                                    }}\n                                                    className=\"product-image\"\n                                                    rel=\"nofollow\"\n                                                    dangerouslySetInnerHTML={{\n                                                        __html:\n                                                            props.images[index].html,\n                                                    }}\n                                                ></a></div>\n                                        </div>\n                                    )\n                            )}\n                        </div>\n                        <button className=\"product-detail__thumbnail-container-scroll--right\" onClick={() => scrollTo(260)} disabled={isAtEnd}>\n                            {'>'}\n                        </button>\n\n                    </div>\n                }\n\n            </div>\n            <Modal\n                ariaHideApp={false}\n                preventScroll={true}\n                isOpen={visible}\n                onRequestClose={onClose}\n                style={customStyles}\n                shouldCloseOnOverlayClick={false}\n            >\n                <button\n                    onClick={onClose}\n                    className=\"light-box__close-btn\"\n                >\n                    {translate('common.button.close')}\n                </button>\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                            <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":""}