@brizy/ui
Version:
React elements in Brizy style
28 lines (27 loc) • 1.72 kB
JavaScript
import React, { useCallback } from "react";
import { classNames } from "../classNamesFn";
import { isEmpty } from "ramda";
import { TypographyParagraph } from "../Typography";
import { getCaption, getCaptionSizeProperties, getSizeProperties } from "./utils";
import { useTranslation } from "../utils/localization/useTranslation";
export const ImageWithCaption = (props) => {
const { t } = useTranslation();
const { src, alt, onError, height, width, fit = "contain", caption, placeholder, type, rounded } = props;
const { align = "center", alignY = "middle", width: captionWidth, height: captionHeight, content: captionContent, } = getCaption(caption);
const className = classNames()("image-with-capture", {
[`image-with-capture--${type}`]: type,
[`image-with-capture--fit-${fit}`]: fit,
"image-with-capture--rounded": rounded,
});
const captionClassName = classNames()({
[`image-with-capture__caption--${align}`]: align,
[`image-with-capture__caption--${alignY}`]: alignY,
});
const _onError = useCallback(() => {
onError === null || onError === void 0 ? void 0 : onError();
}, [onError]);
const _placeholder = placeholder ? placeholder : React.createElement(TypographyParagraph, null, t("Image load fail"));
return (React.createElement("div", { className: className, style: getSizeProperties({ width, height }) }, isEmpty(src) || !src ? (_placeholder) : (React.createElement("figure", null,
React.createElement("img", { src: src, alt: alt, onError: _onError }),
React.createElement("figcaption", { className: captionClassName, style: getCaptionSizeProperties(captionWidth, captionHeight) }, captionContent)))));
};