eldav1d-marvel-ui/dist/cjs/atoms/ResponsiveLazyImage/ResponsiveLazyImage.cjs.map

UI library for (and from) Playing with Marvel API

{"version":3,"file":"ResponsiveLazyImage.cjs","sources":["../../../../lib/atoms/ResponsiveLazyImage/ResponsiveLazyImage.tsx"],"sourcesContent":["import { LazyLoadImage } from 'react-lazy-load-image-component';\nimport 'react-lazy-load-image-component/src/effects/blur.css';\nimport './ResponsiveLazyImage.css';\nimport { getParentSelectors } from '@/utils/helpers';\nimport { LAZYLOAD_THRESHOLD } from '@/utils/constants';\n\n/**\n * @interface IResponsiveLazyImageProps\n *\n */\nexport interface IResponsiveLazyImageProps {\n  /**\n   * @property {string}\n   * Image title\n   * appears on tooltip\n   */\n  title: string;\n  /**\n   * @property {string}\n   * Image alt text\n   * applies on screenreaders\n   */\n  alt: string;\n  /**\n   * @property {string}\n   * Single Image path\n   */\n  path: string | undefined;\n  /**\n   * @property {string}\n   * Fallback for Single Image path\n   */\n  fallback: string;\n  /**\n   * @property {string}\n   * Single Image path for lazy loading state\n   */\n  lazyFallback?: string;\n  /**\n   * @property {boolean}\n   * Flag to check if the image is available\n   */\n  isAvailable: boolean;\n  /**\n   * @property {number}\n   * Image height\n   * Guarantees parent container height for lazy loading\n   */\n  height?: number;\n  /**\n   * @property {string}\n   * Image srcSet\n   */\n  srcSet?: string;\n  /**\n   * @property {string}\n   * Image sizes\n   */\n  sizes?: string;\n  /**\n   * @property {string}\n   * Additional class name for <picture>.\n   */\n  classNameContainer?: string;\n  /**\n   * @property {string}\n   * Additional class name for <img>\n   */\n  classNameContent?: string;\n  /**\n   * @property {string}\n   * ID for accesibility purposes\n   * bound to external tag on parent component\n   * aria-labelledby attribute\n   */\n  ariaId?: string;\n}\n\nconst ResponsiveLazyImage = ({\n  title,\n  alt,\n  path,\n  fallback,\n  lazyFallback,\n  isAvailable,\n  height,\n  srcSet,\n  sizes,\n  classNameContainer,\n  classNameContent,\n  ariaId,\n}: IResponsiveLazyImageProps) => {\n  const imagePath = path || fallback;\n\n  const getAltText = () => {\n    if (isAvailable && path) {\n      return alt;\n    } else {\n      return `${alt} is not available`;\n    }\n  };\n\n  const getSizes = () => {\n    if (srcSet && sizes) {\n      return sizes;\n    } else {\n      return undefined;\n    }\n  };\n\n  return (\n    <picture className={getParentSelectors(classNameContainer)}>\n      <LazyLoadImage\n        wrapperClassName='bg-stone-500 w-full h-inherit'\n        className={`w-full ${getParentSelectors(classNameContent)}`}\n        srcSet={srcSet ? srcSet : undefined}\n        sizes={getSizes()}\n        src={imagePath}\n        title={title}\n        alt={getAltText()}\n        id={ariaId ? ariaId : undefined}\n        placeholderSrc={lazyFallback ? lazyFallback : imagePath}\n        threshold={LAZYLOAD_THRESHOLD}\n        effect='blur'\n        height={height}\n      />\n    </picture>\n  );\n};\n\nexport default ResponsiveLazyImage;\n"],"names":["ResponsiveLazyImage","title","alt","path","fallback","lazyFallback","isAvailable","height","srcSet","sizes","classNameContainer","classNameContent","ariaId","imagePath","getAltText","getSizes","_jsx","getParentSelectors","LazyLoadImage","LAZYLOAD_THRESHOLD"],"mappings":"sRA8EMA,EAAsB,CAAC,CAC3B,MAAAC,EACA,IAAAC,EACA,KAAAC,EACA,SAAAC,EACA,aAAAC,EACA,YAAAC,EACA,OAAAC,EACA,OAAAC,EACA,MAAAC,EACA,mBAAAC,EACA,iBAAAC,EACA,OAAAC,KAC8B,CAC9B,MAAMC,EAAYV,GAAQC,EAEpBU,EAAa,IACbR,GAAeH,EACVD,EAEA,GAAGA,CAAG,oBAIXa,EAAW,IAAK,CACpB,GAAIP,GAAUC,EACL,OAAAA,CAGT,EAIA,OAAAO,EAAA,eAAS,UAAWC,EAAAA,mBAAmBP,CAAkB,EACvD,SAAAM,MAACE,EAAAA,cACC,CAAA,iBAAiB,gCACjB,UAAW,UAAUD,EAAAA,mBAAmBN,CAAgB,CAAC,GACzD,OAAQH,GAAkB,OAC1B,MAAOO,IACP,IAAKF,EACL,MAAAZ,EACA,IAAKa,EAAY,EACjB,GAAIF,GAAkB,OACtB,eAAgBP,GAA8BQ,EAC9C,UAAWM,EAAAA,mBACX,OAAO,OACP,OAAAZ,EAAc,CAAA,CAER,CAEd"}