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