react-datocms - npm Package Compare versions

Comparing version 1.1.3 to 1.2.0

dist/Image/index.js

@@ -54,3 +54,4 @@ "use strict";
         top: 0,
-        width: "100%"
+        bottom: 0,
+        right: 0
     };
@@ -73,22 +74,10 @@ const addImage = imageAddStrategy({
     const regularSource = data.srcSet && (react_1.default.createElement("source", { srcSet: data.srcSet, sizes: data.sizes }));
-    const placeholder = (react_1.default.createElement("div", { style: {
-            paddingTop: data.width && data.height
-                ? `${(data.height / data.width) * 100.0}%`
-                : `${100.0 / data.aspectRatio}%`,
-            backgroundImage: data.base64 ? `url(${data.base64})` : null,
-            backgroundColor: data.bgColor,
-            backgroundSize: "cover"
-        } }));
-    const width = explicitWidth
-        ? {
-            maxWidth: "100%",
-            width: `${data.width}px`
-        }
-        : {
-            width: "100%",
-            maxWidth: `${data.width}px`
-        };
-    return (react_1.default.createElement("div", { ref: ref, className: className, style: Object.assign(Object.assign(Object.assign({ display: "inline-block" }, width), style), { overflow: "hidden", position: "relative" }) },
+    const placeholder = (react_1.default.createElement("div", { style: Object.assign({ backgroundImage: data.base64 ? `url(${data.base64})` : null, backgroundColor: data.bgColor, backgroundSize: "cover" }, absolutePositioning) }));
+    const { width, aspectRatio } = data;
+    const height = data.height || width / aspectRatio;
+    const sizer = (react_1.default.createElement("svg", { className: pictureClassName, style: Object.assign({ width: explicitWidth ? `${width}px` : "100%", height: "auto", display: "block" }, pictureStyle), height: height, width: width }));
+    return (react_1.default.createElement("div", { ref: ref, className: className, style: Object.assign(Object.assign({ display: "inline-block", overflow: "hidden" }, style), { position: "relative" }) },
+        sizer,
         placeholder,
-        addImage && (react_1.default.createElement("picture", { className: pictureClassName, style: Object.assign(Object.assign(Object.assign({}, pictureStyle), absolutePositioning), { opacity: showImage ? 1 : 0, transition: !fadeInDuration || fadeInDuration > 0
+        addImage && (react_1.default.createElement("picture", { style: Object.assign(Object.assign({}, absolutePositioning), { opacity: showImage ? 1 : 0, transition: !fadeInDuration || fadeInDuration > 0
                     ? `opacity ${fadeInDuration || 500}ms`
@@ -100,3 +89,3 @@ : null }) },
         react_1.default.createElement("noscript", null,
-            react_1.default.createElement("picture", { className: pictureClassName, style: Object.assign(Object.assign({}, pictureStyle), absolutePositioning) },
+            react_1.default.createElement("picture", { className: pictureClassName, style: Object.assign({}, pictureStyle) },
                 webpSource,
@@ -103,0 +92,0 @@ regularSource,

package.json

 {
   "name": "react-datocms",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "types": "dist/index.d.ts",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

No alert changes

Worsened metrics

Total package byte prevSize

35723

decreased by-0.5%

Lines of code

288

decreased by-3.68%

No dependency changes