lightbox.js-react/dist/chunk-WHBJLYYE.mjs.map

React lightbox with animation and customization options

{"version":3,"sources":["../lib/components/Image/Image.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef, ReactNode } from 'react'\r\nimport { SlideshowLightbox } from '../SlideshowLightbox/SlideshowLightbox';\r\n\r\nconst themes: any = {\r\n  day: {\r\n    background: 'white',\r\n    iconColor: 'black',\r\n    thumbnailBorder: 'solid transparent 2px',\r\n    textColor: 'black'\r\n  },\r\n  night: {\r\n    background: '#151515',\r\n    iconColor: 'silver',\r\n    thumbnailBorder: 'solid rgb(107, 133, 206)  2px',\r\n    textColor: 'silver'\r\n  },\r\n  lightbox: {\r\n    background: 'rgba(12, 12, 12, 0.93)',\r\n    iconColor: 'silver',\r\n    thumbnailBorder: 'solid rgb(107, 133, 206) 2px',\r\n    textColor: 'silver'\r\n  }\r\n}\r\nconst defaultTheme = \"lightbox\";\r\n\r\n\r\nexport interface ImageProps {\r\n  children?: ReactNode;\r\n  ref?: any;\r\n  fullScreen?: boolean;\r\n  backgroundColor?: string;\r\n  theme?: string;\r\n  iconColor?: any;\r\n  modalClose?: string;\r\n  image?: any;\r\n  roundedImages?: boolean;\r\n  disableImageZoom?: boolean;\r\n  showFullScreenIcon?: boolean;\r\n  showMagnificationIcons?: boolean;\r\n  showControls?: boolean;\r\n  downloadImages?: boolean;\r\n  rtl?: boolean;\r\n  width?: number | null;\r\n  height?: number | null;\r\n  framework?: string;\r\n  lightboxIdentifier?: string;\r\n  images?: any;\r\n  lightboxImgClass?: string;\r\n  wrapperClassName?: string;\r\n  className?: string;\r\n}\r\n\r\n\r\nexport const Image: React.FC<ImageProps> = (props) => {\r\n  const [backgroundColor, setBackgroundColor] = useState(props.backgroundColor ? props.backgroundColor : themes[defaultTheme].background);\r\n\r\n  const [iconColor, setIconColor] = useState(props.iconColor ? props.iconColor : themes[defaultTheme].iconColor);\r\n\r\n  const [fullScreen, setFullScreen] = useState(props.fullScreen ? props.fullScreen : false);\r\n\r\n  const [modalCloseOption, setModalCloseOption] = useState(props.modalClose ? props.modalClose : \"default\");\r\n\r\n  const [disableZoom, setDisableZoom] = useState(\r\n    props.disableImageZoom ? props.disableImageZoom : false\r\n  )\r\n\r\n  const [imageRoundedBorder, setImageRoundedBorder] = useState(\r\n    props.roundedImages ? props.roundedImages : false\r\n  )\r\n\r\n  const [displayFullScreenIcon, setDisplayFullScreenIcon] = useState(\r\n    props.showFullScreenIcon ? props.showFullScreenIcon : true\r\n  )\r\n\r\n  const [className, setClassName] = useState(\r\n    props.className ? props.className : \"\"\r\n  )\r\n\r\n  const [imgWrapperClass, setImgWrapperClass] = useState(\r\n    props.wrapperClassName ? props.wrapperClassName : \"\"\r\n  )\r\n\r\n  const [width, setWidth] = useState(\r\n    props.width ? props.width : null\r\n  )\r\n\r\n  const [height, setHeight] = useState(\r\n    props.height ? props.height : null\r\n  )\r\n\r\n  const [lightboxImgClassName, setLightboxImgClassName] = useState(\r\n    props.lightboxImgClass ? props.lightboxImgClass : \"\"\r\n  )\r\n  \r\n  const [imgClass, setImgClass] = useState(\r\n    props.className ? props.className : \"\"\r\n  )\r\n\r\n  const [displayMagnificationIcons, setDisplayMagnificationIcons] = useState<boolean>(\r\n    props.showMagnificationIcons ? props.showMagnificationIcons : true\r\n  )\r\n\r\n  const [displayControls, setDisplayControls] = useState<boolean>(\r\n    props.showControls ? props.showControls : true\r\n  )\r\n\r\n  const [showDownloadBtn, setShowDownloadBtn] = useState(\r\n    props.downloadImages ? props.downloadImages : false\r\n  )\r\n\r\n  const [isRTL, setIsRTL] = useState(props.rtl ? props.rtl : false)\r\n\r\n  const [lightboxIdentifier, setLightboxIdentifier] = useState(\r\n    props.lightboxIdentifier ? props.lightboxIdentifier : \"\"\r\n  )\r\n\r\n  const [frameworkID, setFrameworkID] = useState(\r\n    props.framework ? props.framework : ''\r\n  )\r\n\r\n  const [images, setImages] = useState<any>([])\r\n\r\n  // const [displayLoader, setDisplayLoader] = useState(\r\n  //   props.showLoader ? props.showLoader : false\r\n  // )\r\n\r\n  // const [textColor, setTextColor] = useState(\r\n  //   props.textColor ? props.textColor : themes[defaultTheme].textColor\r\n  // )\r\n\r\n\r\n  const [state, setState] = React.useState();\r\n\r\n  const initProps = () => {\r\n    if (props.showControls != undefined) {\r\n      setDisplayControls(props.showControls)\r\n      setDisableZoom(props.showControls)\r\n      \r\n      if (props.showControls == false) {\r\n          setDisplayMagnificationIcons(false)\r\n      }\r\n    }\r\n  }\r\n\r\n  useEffect(() => {\r\n    if (props.theme) {\r\n      if (themes[props.theme]) {\r\n        setBackgroundColor(themes[props.theme].background);\r\n        setIconColor(themes[props.theme].iconColor);\r\n      }\r\n    }\r\n\r\n    if (props.image && images && images.length == 0 && frameworkID == \"next\") {\r\n      let imgs: any = [];\r\n      imgs.push(props.image) \r\n      setImages(imgs);\r\n    }\r\n    else {\r\n      setImages(null)\r\n    }\r\n\r\n    return () => {\r\n    };\r\n\r\n  }, [state]);\r\n\r\n  const getImage = () => {\r\n    if (frameworkID == \"next\" && props.children != undefined) {\r\n      return props.children\r\n    }\r\n    else if (frameworkID != \"next\") {\r\n      return (\r\n        <img src={props.image? props.image.src : \"\"} \r\n        alt={props.image.title} \r\n        width={width != null ? width : \"100%\"} \r\n        height={height != null ? height : \"100%\"} \r\n        className={`${className}`} />\r\n      )\r\n    }\r\n  }\r\n\r\n  useEffect(() => {\r\n    let isMounted = true\r\n    if (isMounted) initProps()\r\n\r\n    return () => {\r\n      isMounted = false\r\n    }\r\n  }, [])\r\n\r\n  return (\r\n    <SlideshowLightbox\r\n      showSlideshowIcon={false} \r\n      showThumbnails={false}\r\n      backgroundColor={backgroundColor} \r\n      iconColor={iconColor} \r\n      theme={props.theme} \r\n      lightboxIdentifier={lightboxIdentifier}\r\n      fullScreen={fullScreen} \r\n      showMagnificationIcons={displayMagnificationIcons}\r\n      showFullScreenIcon={displayFullScreenIcon} \r\n      downloadImages={showDownloadBtn}\r\n      roundedImages={imageRoundedBorder} \r\n      disableImageZoom={disableZoom}\r\n      showArrows={false} \r\n      showThumbnailIcon={false} \r\n      showControls={displayControls}\r\n      modalClose={modalCloseOption}\r\n      lightboxImgClass={lightboxImgClassName}\r\n      imgClassName={imgClass}\r\n      imageComponent={true}\r\n      framework={frameworkID}\r\n      // className={className}\r\n      imgWrapperClassName={imgWrapperClass}\r\n      images={images}>\r\n\r\n      {getImage()}\r\n    \r\n    </SlideshowLightbox>\r\n  );\r\n\r\n}"],"mappings":"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","names":[]}