{"version":3,"sources":["webpack:///./Scripts/Components/LightboxImages.js","webpack:///./Scripts/Containers/LightboxImages.container.js"],"names":["settings","infinite","slidesToShow","slidesToScroll","nextArrow","props","onClick","className","prevArrow","responsive","breakpoint","draggable","arrows","LightboxImages","sliderRef","useRef","useState","sliderHeight","setSliderHeight","useEffect","window","innerWidth","current","clientHeight","document","querySelector","style","marginBottom","images","length","data-src","src","itemProp","onClickThumbnail","thumbnails","ref","image","index","key","showThumbnails","showImageCount","connect","state","isOpen","lightboxImages","visible","currentImage","dispatch","onClose","show","onClickNext","next","onClickPrev","previous","setCurrentIndex"],"mappings":"wNAIMA,EAAW,CACbC,UAAU,EACVC,aAAc,EACdC,eAAgB,EAChBC,UAAW,mBAgBf,SAAmBC,GAAO,IACdC,EAAYD,EAAZC,QACR,OACI,yBACIC,UAAW,aACXD,QAASA,MArBN,MACXE,UAAW,mBAyBf,SAAmBH,GAAO,IACdC,EAAYD,EAAZC,QACR,OACI,yBACIC,UAAW,aACXD,QAASA,MA9BN,MACXG,WAAY,CACR,CACIC,WAAY,KACZV,SAAU,CACNE,aAAc,EACdC,eAAgB,EAChBF,UAAU,EACVU,WAAW,EACXC,QAAQ,MA0BxB,IAwDeC,EAxDQ,SAAAR,GAAS,QACxBS,EAAYC,mBADY,EAEUC,mBAAS,GAFnB,WAEvBC,EAFuB,KAETC,EAFS,KAS9B,OANAC,qBAAU,WACJC,OAAOC,WAAa,MACtBH,EAAgBJ,EAAUQ,QAAQC,cAClCC,SAASC,cAAc,uBAAuBC,MAAMC,aAApD,UAAsEb,EAAUQ,QAAQC,aAAxF,SAED,CAACT,KAEDT,EAAMuB,QAAUvB,EAAMuB,OAAOC,OAAS,EAAI,kBAAC,WAAD,MACvC,kBAAC,WAAD,KACI,yBAAKH,MAAO,CAAEC,aAAc,IAAF,OAAMV,EAAN,OAAyBV,UAAU,sBACzD,yBAAKA,UAAU,UACX,4BAAQA,UAAU,mCACd,uBAAGuB,WAAUzB,EAAMuB,OAAO,GAAGG,IAAKC,SAAS,MAAM1B,QAAS,kBAAMD,EAAM4B,iBAAiB,IAAI1B,UAAU,sBACjG,yBAAKA,UAAU,qCAAqCyB,SAAS,QAAQD,IAAK1B,EAAM6B,WAAW,GAAGH,SAI1G,yBAAKxB,UAAU,UACX,yBAAK4B,IAAKrB,EAAWP,UAAU,yEAC1BF,EAAMuB,OAAOC,OAAS,GACnB,kBAAC,IAAW7B,EACP,MAAAK,EAAMuB,QAAN,QAAiB,SAACQ,EAAOC,GAAR,OACdA,EAAQ,GACR,yBAAK9B,UAAU,kCAAkC+B,IAAKD,GAClD,uBAAGP,WAAUM,EAAML,IAAKC,SAAS,MAAM1B,QAAS,kBAAMD,EAAM4B,iBAAiBI,IAAQ9B,UAAU,8BAC3F,yBAAKA,UAAU,gCAAgCyB,SAAS,QAAQD,IAAK1B,EAAM6B,WAAWG,GAAON,YAMhH1B,EAAMuB,OAAOC,QAAU,GACpB,MAAAxB,EAAMuB,QAAN,QAAiB,SAACQ,EAAOC,GAAR,OACbA,EAAQ,GACR,yBAAK9B,UAAU,uCAAuC+B,IAAKD,GACvD,uBAAGP,WAAUM,EAAML,IAAKC,SAAS,MAAM1B,QAAS,kBAAMD,EAAM4B,iBAAiBI,IAAQ9B,UAAU,8BAC3F,yBAAKA,UAAU,gCAAgCyB,SAAS,QAAQD,IAAK1B,EAAM6B,WAAWG,GAAON,cAQzH,kBAAC,IAAD,KACIQ,gBAAgB,EAChBC,gBAAgB,GACZnC,M,SCpELoC,uBAnBS,SAACC,GACrB,MAAO,CACHC,OAAQD,EAAME,eAAeC,QAC7BC,aAAcJ,EAAME,eAAeP,UAIhB,SAAAU,GACvB,MAAO,CACHC,QAAS,kBAAMD,EAASE,aAAK,KAC7BC,YAAa,kBAAMH,EAASI,gBAC5BC,YAAa,kBAAML,EAASM,gBAC5BpB,iBAAkB,SAACI,GACfU,EAASE,aAAK,IACdF,EAASO,YAAgBjB,QAKtBI,EArBiB,SAAApC,GAAK,OAAI,kBAAC,EAAmBA","file":"12.d9a50d814eddd22d30df.js","sourcesContent":["import React, { Fragment, useEffect, useRef, useState } from 'react';\r\nimport Lightbox from 'react-images';\r\nimport Slider from \"react-slick\";\r\n\r\nconst settings = { // Slider settings\r\n    infinite: true,\r\n    slidesToShow: 4,\r\n    slidesToScroll: 1,\r\n    nextArrow: <NextArrow />,\r\n    prevArrow: <PrevArrow />,\r\n    responsive: [\r\n        {\r\n            breakpoint: 1024,\r\n            settings: {\r\n                slidesToShow: 3,\r\n                slidesToScroll: 3,\r\n                infinite: true,\r\n                draggable: true,\r\n                arrows: false,\r\n            }\r\n        },\r\n    ]\r\n}\r\n\r\nfunction NextArrow(props) {\r\n    const { onClick } = props;\r\n    return (\r\n        <div\r\n            className={\"slick-next\"}\r\n            onClick={onClick}\r\n        />\r\n    );\r\n}\r\n\r\nfunction PrevArrow(props) {\r\n    const { onClick } = props;\r\n    return (\r\n        <div\r\n            className={\"slick-prev\"}\r\n            onClick={onClick}\r\n        />\r\n    );\r\n}\r\n\r\nconst LightboxImages = props => {\r\n  const sliderRef = useRef();\r\n  const [sliderHeight, setSliderHeight] = useState(0);\r\n  useEffect(() => {\r\n    if (window.innerWidth > 768) {\r\n      setSliderHeight(sliderRef.current.clientHeight);\r\n      document.querySelector('.product-details-bg').style.marginBottom = `${sliderRef.current.clientHeight}px`;\r\n    }\r\n  }, [sliderRef]);\r\n  return(\r\n    !props.images || props.images.length < 1 ? <Fragment /> :\r\n        <Fragment>\r\n            <div style={{ marginBottom: `-${sliderHeight}px`}} className=\"row product-images\">\r\n                <div className=\"col-12\">\r\n                    <figure className=\"product-detail__image-container\">\r\n                        <a data-src={props.images[0].src} itemProp=\"url\" onClick={() => props.onClickThumbnail(0)} className=\"product-image-main\">\r\n                            <img className=\"rounded w-100 img-fluid main-image\" itemProp=\"image\" src={props.thumbnails[0].src} />\r\n                        </a>\r\n                    </figure>\r\n                </div>\r\n                <div className=\"col-12\">\r\n                    <div ref={sliderRef} className=\"d-flex align-items-center justify-content-start product-images-slider\">\r\n                        {props.images.length > 4 &&\r\n                            <Slider {...settings}>\r\n                                {props.images.map((image, index) => (\r\n                                    index > 0 &&\r\n                                    <div className=\"product-detail__image-container\" key={index}>\r\n                                        <a data-src={image.src} itemProp=\"url\" onClick={() => props.onClickThumbnail(index)} className=\"product-image cursor-hover\">\r\n                                            <img className=\"product-detail__image--alter \" itemProp=\"image\" src={props.thumbnails[index].src} />\r\n                                        </a>\r\n                                    </div>\r\n                                ))}\r\n                            </Slider>}\r\n\r\n                        {props.images.length <= 4 &&\r\n                            props.images.map((image, index) => (\r\n                                index > 0 &&\r\n                                <div className=\"product-detail__image-container me-4\" key={index}>\r\n                                    <a data-src={image.src} itemProp=\"url\" onClick={() => props.onClickThumbnail(index)} className=\"product-image cursor-hover\">\r\n                                        <img className=\"product-detail__image--alter \" itemProp=\"image\" src={props.thumbnails[index].src} />\r\n                                    </a>\r\n                                </div>\r\n                            ))\r\n                        }\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <Lightbox\r\n                showThumbnails={true}\r\n                showImageCount={false}\r\n                {...props}\r\n            />\r\n        </Fragment>\r\n  );\r\n}\r\n\r\nexport default LightboxImages;\r\n","import React from 'react';\r\nimport { connect } from 'react-redux';\r\nimport LightboxImages from '../Components/LightboxImages';\r\nimport { setCurrentIndex, show, previous, next } from '../Actions/LightboxImages.action';\r\n\r\nconst LightboxImagesContainer = props => <LightboxImages {...props} />;\r\n\r\nconst mapStateToProps = (state) => {\r\n    return {\r\n        isOpen: state.lightboxImages.visible,\r\n        currentImage: state.lightboxImages.index,\r\n    }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n    return {\r\n        onClose: () => dispatch(show(false)),\r\n        onClickNext: () => dispatch(next()),\r\n        onClickPrev: () => dispatch(previous()),\r\n        onClickThumbnail: (index) => {\r\n            dispatch(show(true));\r\n            dispatch(setCurrentIndex(index));\r\n        },\r\n    }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(LightboxImagesContainer);"],"sourceRoot":""}