Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | 1x 2x 1x 1x | import cx from 'classnames'
import PropTypes from 'prop-types'
import ImageCaption from './ImageCaption.js'
import {BASE_CLASS, LINK_CLASS, THUMBNAIL_RATIOS, THUMBNAIL_SHAPES, THUMBNAIL_SIZES} from './settings.js'
import ThumbnailLink from './ThumbnailLink.js'
const MoleculeThumbnail = ({
href,
size = THUMBNAIL_SIZES.MEDIUM,
ratio = THUMBNAIL_RATIOS['1:1'],
shape = THUMBNAIL_SHAPES.SQUARED,
target = '_blank',
captionText,
linkFactory: Link = ThumbnailLink,
...props
}) => {
return (
<figure className={cx(`${BASE_CLASS}`, `${BASE_CLASS}--${size}`, `${BASE_CLASS}--${shape}`)}>
{href ? (
<Link className={LINK_CLASS} href={href} target={target} rel={target === '_blank' ? 'noopener' : undefined}>
<ImageCaption {...props} ratio={ratio} />
</Link>
) : (
<ImageCaption {...props} ratio={ratio} />
)}
</figure>
)
}
MoleculeThumbnail.displayName = 'MoleculeThumbnail'
MoleculeThumbnail.propTypes = {
/** Image source */
src: PropTypes.string.isRequired,
/** Image alt */
alt: PropTypes.string.isRequired,
/** Text shown at the bottom of the component */
captionText: PropTypes.string,
/** Image displayed (blurred) while the final image is being loaded */
placeholder: PropTypes.string,
/** Image (wireframe, skeleton) displayed (not blurred) while the final image is being loaded */
skeleton: PropTypes.string,
/** Spinner (component) displayed while the final image is being loaded */
spinner: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
/** Icon (component) to be displayed in an Error Box when the image cannot be loaded */
errorIcon: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
/** Text to be displayed in an Error Box when the image cannot be loaded */
errorText: PropTypes.string,
/** Function to be called when the image cannot be loaded */
onError: PropTypes.func,
/** Function to be called when the image completed its loading */
onLoad: PropTypes.func,
/** Anchor link */
href: PropTypes.string,
/** Define the target attribute('_self', '_blank', '_parent' or '_top') */
target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
/** Define the size (LARGE, MEDIUM, SMALL or XSMALL) */
size: PropTypes.oneOf(Object.values(THUMBNAIL_SIZES)),
/** Define the shape (SQUARED or CIRCLED) */
shape: PropTypes.oneOf(Object.values(THUMBNAIL_SHAPES)),
/** Define the ratio ('1:1', '4:3', '16:9') */
ratio: PropTypes.oneOf(Object.values(THUMBNAIL_RATIOS)),
/** Factory used to create navigation links */
linkFactory: PropTypes.func
}
export default MoleculeThumbnail
export {
THUMBNAIL_RATIOS as moleculeThumbnailRatio,
THUMBNAIL_SHAPES as moleculeThumbnailShape,
THUMBNAIL_SIZES as moleculeThumbnailSize
}
|