@trafilea/afrodita-components 6.56.1 → 6.56.2

package/build/index.d.ts

@@ -216,6 +216,7 @@ declare type ImageProps = ImageStyleProps & {
     quality?: number;
     loading?: ImgAttributes['loading'];
     decoding?: ImgAttributes['decoding'];
+    fallbackImg?: string;
 };
 declare const Image: React.FC<ImageProps>;
 

package/build/index.esm.js

@@ -3974,12 +3974,25 @@ var buildImageUrl = function (_a) {
 
 var Img$1 = newStyled.img(templateObject_1$2u || (templateObject_1$2u = __makeTemplateObject(["\n  height: ", ";\n  width: ", ";\n  border-radius: ", ";\n  object-fit: ", ";\n  object-position: ", ";\n"], ["\n  height: ", ";\n  width: ", ";\n  border-radius: ", ";\n  object-fit: ", ";\n  object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
 var Image$3 = function (_a) {
-    var src = _a.src, srcSet = _a.srcSet, _b = _a.sizes, sizes = _b === void 0 ? '100vw' : _b, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, _d = _a.decoding, decoding = _d === void 0 ? 'async' : _d, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, quality = _a.quality, rest = __rest(_a, ["src", "srcSet", "sizes", "loading", "decoding", "alt", "height", "width", "borderRadius", "objectFit", "objectPosition", "quality"]);
-    var config = useTheme().config;
+    var src = _a.src, srcSet = _a.srcSet, _b = _a.sizes, sizes = _b === void 0 ? '100vw' : _b, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, _d = _a.decoding, decoding = _d === void 0 ? 'async' : _d, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, quality = _a.quality, fallbackImg = _a.fallbackImg, rest = __rest(_a, ["src", "srcSet", "sizes", "loading", "decoding", "alt", "height", "width", "borderRadius", "objectFit", "objectPosition", "quality", "fallbackImg"]);
+    var _e = useTheme(), config = _e.config, assets = _e.assets;
+    var _f = useState(0), errorStage = _f[0], setErrorStage = _f[1];
     var source = (config === null || config === void 0 ? void 0 : config.useTrafileaImages)
         ? buildImageUrl({ cdn: config.cdn, src: src, height: height, width: width, quality: quality })
         : src;
-    return (jsx$1(Img$1, __assign$1({ src: source, srcSet: srcSet, sizes: sizes, loading: loading, decoding: decoding, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, rest), void 0));
+    var handleError = function (e) {
+        var fallbackCdn = "".concat(assets.cdn, "/images/fallback_img.svg");
+        var imgElement = e.target;
+        if (errorStage === 0 && fallbackImg) {
+            imgElement.src = fallbackImg;
+            setErrorStage(1);
+        }
+        else if (errorStage <= 1) {
+            imgElement.src = fallbackCdn;
+            setErrorStage(2);
+        }
+    };
+    return (jsx$1(Img$1, __assign$1({ onError: handleError, src: source, srcSet: srcSet, sizes: sizes, loading: loading, decoding: decoding, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, rest), void 0));
 };
 var templateObject_1$2u;