wix-style-react
Version:
107 lines (89 loc) • 3.2 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { st, classes } from './Image.st.css';
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 = ({
dataHook,
src,
fit,
position,
style,
className,
borderRadius,
showBorder,
transparent,
...otherProps
}) => {
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 (
<img
{...otherProps}
className={st(
classes.root,
{ tiled: isTiled, showBorder, transparent },
className,
)}
data-hook={dataHook}
data-transparent={transparent}
src={source}
style={{ ...style, ...imgStyle, borderRadius }}
/>
);
};
Image.propTypes = {
/**
* Sets the border radius of the image box.
*/
borderRadius: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/** Applies a data-hook HTML attribute that can be used in the tests. */
dataHook: PropTypes.string,
/** Specifies a CSS class name to be appended to the component’s root element. */
className: PropTypes.string,
/**
* Specifies whether to display a border around an image.
*/
showBorder: PropTypes.bool,
/** Specifies an URL link to image source. If not provided, a default placeholder image will be displayed. */
src: PropTypes.string,
/** Sets the width of the image box. */
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/** Sets the height of the image box. */
height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/**
* Specifies image fit mode inside a box.
* Check [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) CSS property values for more info.
*/
fit: PropTypes.oneOf(['contain', 'cover', 'tile', 'none']),
/**
* Specifies source content position inside of an image box. Accepts any valid
* [CSS position](https://developer.mozilla.org/en-US/docs/Web/CSS/position_value) value.
*/
position: PropTypes.string,
/** Specifies whether background of Image is transparent */
transparent: PropTypes.bool,
};
Image.defaultProps = {
width: '100%',
fit: 'cover',
position: 'center',
showBorder: false,
borderRadius: '8px',
transparent: false,
};
Image.displayName = 'Image';
export default Image;