{"version":3,"sources":["webpack:///./Scripts/Actions/LightboxImages.action.js","webpack:///./Scripts/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","interval","emulateTouch","renderThumbnails","children","map","item","index","props","imageElement","find","ele","src","key","style","backgroundImage","className","dispatch","useDispatch","useSelector","state","lightboxImages","onClose","useCallback","onClickThumbnail","LIGHTBOX_IMAGES_SET_CURRENT_IMAGE","setCurrentIndex","images","length","Fragment","data-src","href","itemProp","onClick","e","preventDefault","rel","dangerouslySetInnerHTML","__html","html","image","ariaHideApp","preventScroll","isOpen","onRequestClose","shouldCloseOnOverlayClick","selectedItem","renderThumbs","value"],"mappings":"yLAKO,MAOMA,EAAQC,IAAD,CAChBC,KAAMC,KACNC,QAAS,CACLH,a,+MCRR,MAAMI,EAAe,CACnBC,QAAS,CACPC,WAAY,OACZC,QAAS,EACTC,OAAQ,QAEVC,QAAS,CACPH,WAAY,qBACZI,OAAQ,OAGNC,EAAmB,CACvBC,YAAY,EACZC,gBAAgB,EAChBC,mBAAmB,EACnBC,WAAY,GACZC,UAAU,EACVC,WAAW,EACXC,SAAU,IACVC,cAAc,GAGVC,EAAoBC,GACTA,EAASC,KAAI,CAACC,EAAMC,KACjC,IAAKD,IAASA,EAAKE,QAAUF,EAAKE,MAAMJ,SACtC,OAIF,MAAMK,EAAeH,EAAKE,MAAMJ,SAASM,MAAMC,GAAqB,QAAbA,EAAI3B,OAC3D,OAAKyB,GAAiBA,EAAaD,OAAUC,EAAaD,MAAMI,IAK9D,uBACEC,IAAKN,EACLO,MAAO,CACLC,gBAAiB,OAASN,EAAaD,MAAMI,IAAM,KAErDI,UAAU,0BAVd,KA2GJ,EAzFwBR,IACtB,MAAMS,GAAWC,WACX,QAAEnC,EAAF,MAAWwB,IAAUY,SAAaC,GAAUA,EAAMC,iBAClDC,GAAUC,kBAAY,IAAMN,EAASnC,GAAK,KAAS,CAACmC,IACpDO,EAAoBjB,IACxBU,EAASnC,GAAK,IACdmC,EDxD4BV,KAAD,CAC3BvB,KAAMyC,KACNvC,QAAS,CACLqB,WCqDKmB,CAAgBnB,KAG3B,OAAQC,EAAMmB,QAAUnB,EAAMmB,OAAOC,OAAS,EAC5C,gBAAC,EAAAC,SAAD,MAEA,gBAAC,EAAAA,SAAD,KACE,uBAAKb,UAAU,sBACb,uBAAKA,UAAU,oBACb,0BAAQA,UAAU,mCAChB,qBACEc,WAAUtB,EAAMmB,OAAO,GAAGf,IAC1BmB,KAAK,IACLC,SAAS,MACTC,QAAUC,IACRA,EAAEC,iBACFX,EAAiB,IAEnBR,UAAU,gBACVoB,IAAI,WACJC,wBAAyB,CACvBC,OAAQ9B,EAAMmB,OAAO,GAAGY,UAKhC,uBAAKvB,UAAU,oBACb,uBAAKA,UAAU,OACZR,EAAMmB,OAAOtB,KACZ,CAACmC,EAAOjC,IACNA,EAAQ,GACN,uBACES,UAAU,mEACVH,IAAKN,GAEL,qBACEuB,WAAUU,EAAM5B,IAChBmB,KAAK,IACLC,SAAS,MACTC,QAAUC,IACRA,EAAEC,iBACFX,EAAiBjB,IAEnBS,UAAU,gBACVoB,IAAI,WACJC,wBAAyB,CACvBC,OAAQ9B,EAAMmB,OAAOpB,GAAOgC,cAS9C,gBAAC,IAAD,CACEE,aAAa,EACbC,eAAe,EACfC,OAAQ5D,EACR6D,eAAgBtB,EAChBR,MAAO3B,EACP0D,2BAA2B,GAE3B,gBAAC,KAAD,KACMnD,EADN,CAEEoD,aAAcvC,EACdS,UAAU,YACV+B,aAAc5C,IAEbK,EAAMmB,OAAOtB,KAAI,CAAC2C,EAAOzC,IACxB,uBAAKM,IAAM,SAAQN,IAASS,UAAU,wBACpC,0BAAQiB,QAASX,EAASN,UAAU,wBAApC,KAGA,uBAAKJ,IAAKoC,EAAMpC,IAAKI,UAAU","file":"496.f1247b99f5d555ce295f.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 } 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: true,\n  autoFocus: true,\n  interval: 3000,\n  emulateTouch: 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((ele) => ele.type === 'img');\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 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        <div className=\"small-12 columns\">\n          <div className=\"row\">\n            {props.images.map(\n              (image, index) =>\n                index > 0 && (\n                  <div\n                    className=\"product-detail__image-container columns small-4 medium-3 large-2\"\n                    key={index}\n                  >\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: props.images[index].html,\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 key={`figure${index}`} className=\"light-box__container\">\n              <button onClick={onClose} className=\"light-box__close-btn\">\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":""}