@sitecore/sc-contenthub-blok
Version:
A UI library for [Sitecore Content Hub](https://doc.sitecore.com/ch/).
45 lines • 1.82 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { css, cx } from "@emotion/css";
import { useCallback, useMemo, useState, } from "react";
import { BlokIcon } from "../BlokIcon/BlokIcon";
const classes = {
image: css({
width: "100%",
height: "100%",
}),
brokenImageIcon: css({
fontSize: "3.5rem !important",
"td &": {
fontSize: "1.5rem !important",
},
}),
icons: css({
width: "100%",
height: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
}),
};
export const BlokImage = ({ src, alt, style, width = "100%", height = "100%", fit = "cover", position = "relative", className, onClick, ...rest }) => {
const [hasError, setHasError] = useState(false);
const handleError = useCallback(() => {
setHasError(true);
}, []);
const styles = useMemo(() => ({
root: {
width,
height,
display: "flex",
justifyContent: "center",
alignItems: "center",
},
image: {
position,
objectFit: fit,
...style,
},
}), [width, height, position, fit, style]);
return (_jsxs("div", { style: styles.root, className: `mui-image-wrapper`, children: [!hasError && (_jsx("img", { src: src, alt: alt, style: styles.image, className: cx(`mui-image-img`, classes.image, className), onError: handleError, onClick: onClick, role: "img", ...rest })), hasError && (_jsx("div", { className: cx(`mui-image-iconWrapper`, classes.icons), children: hasError && (_jsx(BlokIcon, { icon: "m-icon-image-off-outline", iconColor: "gray", classes: [classes.brokenImageIcon], iconColorShade: 400 })) }))] }));
};
//# sourceMappingURL=BlokImage.js.map