@wix/design-system/dist/esm/Image/Image.js

@wix/design-system

import React from 'react';
import PropTypes from 'prop-types';
import { st, classes } from './Image.st.css.js';
const placeholderSource = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='164' height='120' viewBox='0 0 164 120'%3E%3Cg fill='none'%3E%3Crect width='164' height='120' fill='%23DAEFFE'/%3E%3Cpath fill='%23B9E3FF' d='M-8.52651283e-14,120 L49.0917544,74.9616932 C52.151039,72.1550101 56.848961,72.1550101 59.9082456,74.9616932 L71.293,85.4057534 L96.9019846,59.8591624 C100.0299,56.7386931 105.095216,56.744729 108.215685,59.8726439 C108.284098,59.9412201 108.35126,60.0110332 108.417137,60.0820486 L164,120 L-8.52651283e-14,120 Z'/%3E%3Ccircle cx='67.5' cy='43.5' r='10.5' fill='%23F5FBFF'/%3E%3C/g%3E%3C/svg%3E%0A`;
const placeholderStyle = {
    objectFit: 'cover',
};
const Image = ({ width = '100%', fit = 'cover', position = 'center', showBorder = false, borderRadius, transparent = false, alt = '', ...propsWithNoDefaults }) => {
    const { dataHook, src, style, className, ...otherProps } = {
        width,
        ...propsWithNoDefaults,
    };
    const source = src || placeholderSource;
    const isTiled = !!src && fit === 'tile';
    const imgStyle = !src
        ? placeholderStyle
        : isTiled
            ? {
                backgroundPosition: position,
                backgroundImage: source ? `url("${source}")` : undefined,
            }
            : {
                objectFit: fit,
                objectPosition: position,
            };
    return (React.createElement("img", { ...otherProps, className: st(classes.root, {
            tiled: isTiled,
            showBorder,
            transparent,
        }, className), "data-hook": dataHook, "data-transparent": transparent, src: source, alt: alt, style: {
            ...style,
            ...imgStyle,
            borderRadius,
        } }));
};
Image.propTypes = {
    borderRadius: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    dataHook: PropTypes.string,
    className: PropTypes.string,
    showBorder: PropTypes.bool,
    src: PropTypes.string,
    alt: PropTypes.string,
    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    fit: PropTypes.oneOf(['contain', 'cover', 'tile', 'none']),
    position: PropTypes.string,
};
Image.displayName = 'Image';
export default Image;
//# sourceMappingURL=Image.js.map