koval-ui
Version:
React components collection with minimalistic design. Supports theming, layout, and input validation.
1 lines • 7.42 kB
Source Map (JSON)
{"version":3,"file":"Picture.cjs","sources":["../../../../src/lib/Picture/Picture.tsx"],"sourcesContent":["import type {DetailedHTMLProps, ImgHTMLAttributes} from 'react';\nimport {useCallback, forwardRef, useState} from 'react';\nimport classNames from 'classnames';\n\nimport type {DataAttributes, LibraryProps} from '@/internal/LibraryAPI';\nimport {SkeletonShape} from '@/lib/Skeleton';\n\nimport classes from './Picture.module.css';\n\ntype IntrinsicWidth = `${number}w`;\ntype DensityDescriptor = `${number}x`;\n\ntype Source = {\n /**\n * Provide the source image url\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/src\n * @see https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types\n */\n src: string;\n /**\n * Provide the source image MIME type\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#type\n */\n type?: string;\n /**\n * Provide media condition for the source image\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#media\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries\n */\n mediaCondition?: string;\n /**\n * Provide width of the slot the image will fill when the media condition is true\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#sizes\n */\n slotWidth?: string;\n /**\n * Provide the source image display height in pixels\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#height\n */\n width?: number;\n /**\n * Provide the source image display width in pixels\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#width\n */\n height?: number;\n} & (\n | {\n /**\n * Provide the source image width descriptor. Has to be a positive integer directly followed by w. E.g. 480w\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#srcset\n * @see https://developer.mozilla.org/en-US/docs/Glossary/Intrinsic_Size\n */\n intrinsicWidth?: IntrinsicWidth;\n density?: never;\n }\n | {\n intrinsicWidth?: never;\n /**\n * Provide the source image pixel density descriptor. Has to be a positive floating point number directly followed by x. E.g. 2x\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#srcset\n * @see https://developer.mozilla.org/en-US/docs/Glossary/Intrinsic_Size\n */\n density?: DensityDescriptor;\n }\n);\n\nexport type Props = DataAttributes &\n LibraryProps & {\n /**\n * Provide default image url\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/src\n */\n src: string;\n /**\n * Set default image width\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/width\n */\n width?: number;\n /**\n * Set default image height\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/height\n */\n height?: number;\n /**\n * Provide alternate text to display when the image is not loaded or for use by assistive devices\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt\n */\n alt?: string;\n /**\n * Provide alternative sources configs array\n * @see SourceDensity\n * @see SourceWidth\n */\n sources?: Source[];\n /**\n * Set image loading behavior\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading\n */\n loading?: DetailedHTMLProps<\n ImgHTMLAttributes<HTMLImageElement>,\n HTMLImageElement\n >['loading'];\n };\n\nexport const Picture = forwardRef<HTMLDivElement, Props>(\n ({className, alt, src, sources, width, height, loading = 'lazy', ...nativeProps}, ref) => {\n const [isLoaded, setLoaded] = useState(false);\n const handleLoad = useCallback(() => {\n setLoaded(true);\n }, []);\n return (\n <div className={classes.wrapper}>\n <picture\n {...nativeProps}\n className={classNames(\n classes.picture,\n {[classes.loading]: !isLoaded},\n className\n )}\n ref={ref}\n onLoad={handleLoad}>\n {sources?.map(\n ({\n src,\n mediaCondition,\n density = '1x',\n intrinsicWidth,\n slotWidth = '',\n type,\n width: srcWidth,\n height: srcHeight,\n }) => {\n const srcParam = intrinsicWidth ?? density;\n return (\n <source\n type={type}\n srcSet={`${src} ${srcParam}`}\n media={`${mediaCondition} ${slotWidth}`}\n width={srcWidth}\n height={srcHeight}\n key={src}\n />\n );\n }\n )}\n <img width={width} height={height} loading={loading} src={src} alt={alt} />\n </picture>\n {!isLoaded && (\n <SkeletonShape width={width} height={height} className={classes.skeleton} />\n )}\n </div>\n );\n }\n);\n\nPicture.displayName = 'Picture';\n"],"names":["Picture","forwardRef","className","alt","src","sources","width","height","loading","nativeProps","ref","isLoaded","setLoaded","useState","handleLoad","useCallback","jsxs","classes","classNames","mediaCondition","density","intrinsicWidth","slotWidth","type","srcWidth","srcHeight","srcParam","jsx","SkeletonShape"],"mappings":"8PAwGaA,EAAUC,EAAA,WACnB,CAAC,CAAC,UAAAC,EAAW,IAAAC,EAAK,IAAAC,EAAK,QAAAC,EAAS,MAAAC,EAAO,OAAAC,EAAQ,QAAAC,EAAU,OAAQ,GAAGC,CAAA,EAAcC,IAAQ,CACtF,KAAM,CAACC,EAAUC,CAAS,EAAIC,EAAAA,SAAS,EAAK,EACtCC,EAAaC,EAAAA,YAAY,IAAM,CACjCH,EAAU,EAAI,CAClB,EAAG,EAAE,EACL,OACKI,EAAAA,KAAA,MAAA,CAAI,UAAWC,EAAA,QAAQ,QACpB,SAAA,CAAAD,EAAA,KAAC,UAAA,CACI,GAAGP,EACJ,UAAWS,EACPD,EAAAA,QAAQ,QACR,CAAC,CAACA,EAAA,QAAQ,OAAO,EAAG,CAACN,CAAQ,EAC7BT,CACJ,EACA,IAAAQ,EACA,OAAQI,EACP,SAAA,CAAST,GAAA,YAAAA,EAAA,IACN,CAAC,CACG,IAAAD,EACA,eAAAe,EACA,QAAAC,EAAU,KACV,eAAAC,EACA,UAAAC,EAAY,GACZ,KAAAC,EACA,MAAOC,EACP,OAAQC,CAAA,IACN,CACF,MAAMC,EAAWL,GAAkBD,EAE/B,OAAAO,EAAA,IAAC,SAAA,CACG,KAAAJ,EACA,OAAQ,GAAGnB,CAAG,IAAIsB,CAAQ,GAC1B,MAAO,GAAGP,CAAc,IAAIG,CAAS,GACrC,MAAOE,EACP,OAAQC,CAAA,EACHrB,CACT,CAAA,SAIX,MAAI,CAAA,MAAAE,EAAc,OAAAC,EAAgB,QAAAC,EAAkB,IAAAJ,EAAU,IAAAD,CAAU,CAAA,CAAA,CAAA,CAC7E,EACC,CAACQ,GACGgB,EAAA,IAAAC,gBAAA,CAAc,MAAAtB,EAAc,OAAAC,EAAgB,UAAWU,UAAQ,QAAU,CAAA,CAAA,EAElF,CAAA,CAGZ,EAEAjB,EAAQ,YAAc"}