@plasmicapp/react-web 0.2.82 → 0.2.83

package/dist/all.d.ts

@@ -123,6 +123,22 @@ interface PlasmicImgProps extends ImgTagProps {
      * css height
      */
     displayHeight?: number | string;
+    /**
+     * css min-width
+     */
+    displayMinWidth?: number | string;
+    /**
+    * css min-height
+    */
+    displayMinHeight?: number | string;
+    /**
+     * css max-width
+     */
+    displayMaxWidth?: number | string;
+    /**
+    * css max-height
+    */
+    displayMaxHeight?: number | string;
     /**
      * For variable quality formats like jpg, the quality from 0 to 100
      */

package/dist/react-web.cjs.development.js

@@ -812,11 +812,15 @@ var PlasmicImg = /*#__PURE__*/React__default.forwardRef(function PlasmicImg(prop
       className = props.className,
       displayWidth = props.displayWidth,
       displayHeight = props.displayHeight,
+      displayMinWidth = props.displayMinWidth,
+      displayMinHeight = props.displayMinHeight,
+      displayMaxWidth = props.displayMaxWidth,
+      displayMaxHeight = props.displayMaxHeight,
       quality = props.quality,
       loader = props.loader,
       containerRef = props.containerRef,
       style = props.style,
-      rest = _objectWithoutPropertiesLoose(props, ["src", "className", "displayWidth", "displayHeight", "quality", "loader", "containerRef", "style"]);
+      rest = _objectWithoutPropertiesLoose(props, ["src", "className", "displayWidth", "displayHeight", "displayMinWidth", "displayMinHeight", "displayMaxWidth", "displayMaxHeight", "quality", "loader", "containerRef", "style"]);
 
   var _ref = typeof src === "string" || !src ? {
     fullWidth: undefined,
@@ -826,9 +830,8 @@ var PlasmicImg = /*#__PURE__*/React__default.forwardRef(function PlasmicImg(prop
       fullHeight = _ref.fullHeight;
 
   var srcStr = src ? typeof src === "string" ? src : src.src : ""; // Assume external image if either dimension is null and use usual <img>
-  // (or if the image is an SVG)
 
-  if (fullHeight == null || fullWidth == null || srcStr.endsWith(".svg")) {
+  if (fullHeight == null || fullWidth == null) {
     return React__default.createElement("img", Object.assign({
       src: srcStr,
       className: className,
@@ -838,6 +841,10 @@ var PlasmicImg = /*#__PURE__*/React__default.forwardRef(function PlasmicImg(prop
     }));
   }
 
+  if (isSvg(srcStr) && (displayHeight == null || displayHeight === "auto") && (displayWidth == null || displayWidth === "auto")) {
+    displayWidth = "100%";
+  }
+
   if (fullWidth && fullHeight && (!displayWidth || displayWidth === "auto") && !!getPixelLength(displayHeight)) {
     // If there's a pixel length specified for displayHeight but not displayWidth,
     // then we can derive the pixel length for displayWidth.  Having an explicit
@@ -846,29 +853,79 @@ var PlasmicImg = /*#__PURE__*/React__default.forwardRef(function PlasmicImg(prop
     displayWidth = getPixelLength(displayHeight) * fullWidth / fullHeight;
   }
 
-  var _getWidths = getWidths(displayWidth, fullWidth),
+  var _getWidths = getWidths(displayWidth, fullWidth, {
+    minWidth: displayMinWidth
+  }),
       sizes = _getWidths.sizes,
       widthDescs = _getWidths.widthDescs;
 
   var imageLoader = getImageLoader(loader);
   var spacerSvg = "<svg width=\"" + fullWidth + "\" height=\"" + fullHeight + "\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\"/>";
   var spacerSvgBase64 = typeof window === "undefined" ? Buffer.from(spacerSvg).toString("base64") : window.btoa(spacerSvg);
+
+  var wrapperStyle = _extends({}, style || {});
+
+  var spacerStyle = pick(style || {}, "objectFit", "objectPosition");
+
+  if (displayWidth != null && displayWidth !== "auto") {
+    // If width is set, set it on the wrapper along with min/max width
+    // and just use `width: 100%` on the spacer
+    spacerStyle.width = "100%";
+    wrapperStyle.width = displayWidth;
+    wrapperStyle.minWidth = displayMinWidth;
+    wrapperStyle.maxWidth = displayMaxWidth;
+  } else {
+    // Otherwise, we want auto sizing from the spacer, so set width there.
+    //
+    // But if we have min/max width, it should be set in the wrapper and it
+    // can be percentage values (and we add corresponding min/max width to
+    // 100% in the spacer). In general it ends up with the correct effect,
+    // but some edge cases might make `min-width: 100%` shrink the image more
+    // than it should.
+    spacerStyle.width = displayWidth;
+    wrapperStyle.width = "auto";
+
+    if (displayMinWidth) {
+      spacerStyle.minWidth = "100%";
+      wrapperStyle.minWidth = displayMinWidth;
+    }
+
+    if (displayMaxWidth != null && displayMaxWidth !== "none") {
+      spacerStyle.maxWidth = "100%";
+      wrapperStyle.maxWidth = displayMaxWidth;
+    }
+  }
+
+  if (displayHeight != null && displayHeight !== "auto") {
+    spacerStyle.height = "100%";
+    wrapperStyle.height = displayHeight;
+    wrapperStyle.minHeight = displayMinHeight;
+    wrapperStyle.maxHeight = displayMaxHeight;
+  } else {
+    spacerStyle.height = displayHeight;
+    wrapperStyle.height = "auto";
+
+    if (displayMinHeight) {
+      spacerStyle.minHeight = "100%";
+      wrapperStyle.minHeight = displayMinHeight;
+    }
+
+    if (displayMaxHeight != null && displayMaxHeight !== "none") {
+      spacerStyle.maxHeight = "100%";
+      wrapperStyle.maxHeight = displayMaxHeight;
+    }
+  }
+
   return React__default.createElement("div", {
     className: classNames$1(className, "__wab_img-wrapper"),
     ref: containerRef,
-    style: _extends({}, style, {
-      width: isPercentage(displayWidth) ? displayWidth : undefined,
-      height: isPercentage(displayHeight) ? displayHeight : undefined
-    })
+    style: wrapperStyle
   }, React__default.createElement("img", {
     alt: "",
     "aria-hidden": true,
     className: "__wab_img-spacer-svg",
     src: "data:image/svg+xml;base64," + spacerSvgBase64,
-    style: _extends({
-      width: isPercentage(displayWidth) ? "100%" : displayWidth,
-      height: isPercentage(displayHeight) ? "100%" : displayHeight
-    }, style ? pick(style, "objectFit", "objectPosition") : {})
+    style: spacerStyle
   }), makePicture({
     imageLoader: imageLoader,
     widthDescs: widthDescs,
@@ -923,7 +980,7 @@ function makePicture(opts) {
         width: wd.width
       }) + " " + wd.desc;
     }).join(", ") : undefined,
-    sizes: imageLoader ? sizes : undefined,
+    sizes: imageLoader && imageLoader.supportsUrl(src) ? sizes : undefined,
     style: _extends({}, style ? pick(style, "objectFit", "objectPosition") : {}, {
       width: 0,
       height: 0
@@ -931,6 +988,10 @@ function makePicture(opts) {
   })));
 }
 
+function isSvg(src) {
+  return src.endsWith(".svg") || src.startsWith("data:image/svg");
+}
+
 function getClosestPresetSize(width, fullWidth) {
   var _ALL_SIZES$findIndex;
 
@@ -959,17 +1020,19 @@ function getClosestPresetSize(width, fullWidth) {
  */
 
 
-function getWidths(width, fullWidth) {
+function getWidths(width, fullWidth, extra) {
+  var minWidth = extra == null ? void 0 : extra.minWidth;
   var pixelWidth = getPixelLength(width);
+  var pixelMinWidth = getPixelLength(minWidth);
 
-  if (pixelWidth != null) {
+  if (pixelWidth != null && (!minWidth || pixelMinWidth != null)) {
     // If there's an exact width, then we just need to display it at 1x and 2x density
     return {
       widthDescs: [{
-        width: getClosestPresetSize(pixelWidth, fullWidth),
+        width: getClosestPresetSize(Math.max(pixelWidth, pixelMinWidth != null ? pixelMinWidth : 0), fullWidth),
         desc: "1x"
       }, {
-        width: getClosestPresetSize(pixelWidth * 2, fullWidth),
+        width: getClosestPresetSize(Math.max(pixelWidth, pixelMinWidth != null ? pixelMinWidth : 0) * 2, fullWidth),
         desc: "2x"
       }],
       sizes: undefined
@@ -1015,16 +1078,6 @@ function getWidths(width, fullWidth) {
   };
 }
 
-function isPercentage(width) {
-  var _parseNumeric;
-
-  if (typeof width !== "string") {
-    return false;
-  }
-
-  return ((_parseNumeric = parseNumeric(width)) == null ? void 0 : _parseNumeric.units) === "%";
-}
-
 function getPixelLength(length) {
   if (length == null || length == "") {
     return undefined;
@@ -1071,7 +1124,7 @@ function getImageLoader(loader) {
 
 var PLASMIC_IMAGE_LOADER = {
   supportsUrl: function supportsUrl(src) {
-    return src.startsWith("https://img.plasmic.app");
+    return src.startsWith("https://img.plasmic.app") && !isSvg(src);
   },
   transformUrl: function transformUrl(opts) {
     var _opts$quality;