{"version":3,"file":"Scripts_Components_LightboxImages_js.js","mappings":"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","sources":["webpack:///./Scripts/Components/LightboxImages.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-9 columns\">\n                    <figure className=\"product-detail__image-container product-detail__image-container--large\">\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-3 columns medium-flex-dir-column thumbnails-list\">\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"],"names":["React","Fragment","useCallback","Modal","Carousel","Lightbox","useSelector","useDispatch","show","setCurrentIndex","customStyles","content","background","padding","border","overlay","zIndex","LightboxSettings","showStatus","showIndicators","useKeyboardArrows","thumbWidth","autoPlay","autoFocus","renderThumbnails","children","images","map","item","index","props","undefined","imageElement","find","ele","type","src","createElement","key","style","backgroundImage","className","LightboxImages","dispatch","visible","state","lightboxImages","onClose","onClickThumbnail","length","itemProp","onClick","thumbnails","image","ariaHideApp","preventScroll","isOpen","onRequestClose","shouldCloseOnOverlayClick","_extends","selectedItem","renderThumbs","value"],"sourceRoot":""}