@trail-ui/react
Version:
55 lines (53 loc) • 1.44 kB
JavaScript
// src/image/base-image.tsx
import { shouldShowFallbackImage, useImage } from "@trail-ui/hooks";
import { dataAttr } from "@trail-ui/shared-utils";
import { forwardRef } from "react";
import { jsx } from "react/jsx-runtime";
function BaseImage(props, ref) {
const {
as,
src,
srcSet,
crossOrigin,
fallbackSrc,
fallback,
loading,
ignoreFallback,
fallbackStrategy = "beforeLoadOrError",
referrerPolicy,
...otherProps
} = props;
const Component = as || "img";
const providedFallback = fallbackSrc !== void 0 || fallback !== void 0;
const shouldIgnoreFallbackImage = loading != null || // use can opt out of fallback image
ignoreFallback || // if the user doesn't provide any kind of fallback we should ignore it
!providedFallback;
const status = useImage({
...props,
crossOrigin,
ignoreFallback: shouldIgnoreFallbackImage
});
const showFallbackImage = shouldShowFallbackImage(status, fallbackStrategy);
if (showFallbackImage) {
if (fallback)
return fallback;
return /* @__PURE__ */ jsx(Component, { ref, src: fallbackSrc, crossOrigin, ...otherProps });
}
return /* @__PURE__ */ jsx(
Component,
{
ref,
src,
srcSet,
crossOrigin,
loading,
referrerPolicy,
"data-loaded": dataAttr(status === "loaded"),
...otherProps
}
);
}
var _BaseImage = forwardRef(BaseImage);
export {
_BaseImage
};