@builder.io/react 8.2.4 → 8.2.6

package/dist/lib/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@builder.io/react",
-    "version": "8.2.4",
+    "version": "8.2.6",
     "description": "",
     "keywords": [],
     "main": "dist/builder-react.cjs.js",

package/dist/lib/src/blocks/raw/Img.js

@@ -26,6 +26,17 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -55,12 +66,18 @@ var ImgComponent = /** @class */ (function (_super) {
     ImgComponent.prototype.render = function () {
         var attributes = this.props.attributes || {};
         var srcset = this.getSrcSet();
-        return (react_1.default.createElement("img", __assign({ loading: "lazy" }, this.props.attributes, { src: this.props.image || attributes.src, srcSet: srcset })));
+        var userStyle = attributes.style, restAttributes = __rest(attributes, ["style"]);
+        var defaultStyle = {
+            objectFit: this.props.backgroundSize,
+            objectPosition: this.props.backgroundPosition,
+            aspectRatio: this.props.aspectRatio,
+        };
+        var mergedStyle = __assign(__assign({}, defaultStyle), userStyle);
+        return (react_1.default.createElement("img", __assign({ loading: "lazy" }, restAttributes, { src: this.props.image || attributes.src, srcSet: srcset, alt: this.props.altText, title: this.props.title, style: mergedStyle, className: "builder-raw-img" })));
     };
     return ImgComponent;
 }(react_1.default.Component));
 exports.Img = (0, with_builder_1.withBuilder)(ImgComponent, {
-    // friendlyName?
     name: 'Raw:Img',
     hideFromInsertMenu: true,
     image: 'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4',
@@ -72,8 +89,57 @@ exports.Img = (0, with_builder_1.withBuilder)(ImgComponent, {
             allowedFileTypes: file_types_constant_1.IMAGE_FILE_TYPES,
             required: true,
         },
+        {
+            name: 'backgroundSize',
+            type: 'text',
+            defaultValue: 'cover',
+            enum: [
+                {
+                    label: 'contain',
+                    value: 'contain',
+                    helperText: 'The image should never get cropped',
+                },
+                {
+                    label: 'cover',
+                    value: 'cover',
+                    helperText: "The image should fill it's box, cropping when needed",
+                },
+            ],
+        },
+        {
+            name: 'backgroundPosition',
+            type: 'text',
+            defaultValue: 'center',
+            enum: [
+                'center',
+                'top',
+                'left',
+                'right',
+                'bottom',
+                'top left',
+                'top right',
+                'bottom left',
+                'bottom right',
+            ],
+        },
+        {
+            name: 'altText',
+            type: 'string',
+            helperText: 'Text to display when the user has images off',
+        },
+        {
+            name: 'title',
+            type: 'string',
+            helperText: 'Text to display when hovering over the asset',
+        },
+        {
+            name: 'aspectRatio',
+            type: 'number',
+            helperText: "This is the ratio of height/width, e.g. set to 1.5 for a 300px wide and 200px tall photo. Set to 0 to not force the image to maintain it's aspect ratio",
+            advanced: true,
+            defaultValue: 0.7041,
+        },
     ],
     noWrap: true,
-    static: true,
 });
 //# sourceMappingURL=Img.js.map

package/dist/lib/src/blocks/raw/Img.js.map

@@ -1 +1 @@
-{"version":3,"file":"Img.js","sourceRoot":"","sources":["../../../../../src/blocks/raw/Img.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACb,gDAA0B;AAE1B,6DAA2D;AAC3D,yEAAqE;AACrE,kCAAqC;AAQrC,gEAAgE;AAEhE;IAA2B,gCAAyB;IAApD;;IA2BA,CAAC;IA1BC,gCAAS,GAAT;QACE,IAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;QAC7B,IAAI,CAAC,GAAG,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;YACnC,OAAO;SACR;QAED,mDAAmD;QACnD,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,aAAa,CAAC,EAAE;YAC7B,OAAO;SACR;QAED,OAAO,IAAA,iBAAS,EAAC,GAAG,CAAC,CAAC;IACxB,CAAC;IAED,6BAAM,GAAN;QACE,IAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,EAAE,CAAC;QAC/C,IAAM,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;QAChC,OAAO,CACL,gDACE,OAAO,EAAC,MAAM,IACV,IAAI,CAAC,KAAK,CAAC,UAAU,IACzB,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,UAAU,CAAC,GAAG,EACvC,MAAM,EAAE,MAAM,IACd,CACH,CAAC;IACJ,CAAC;IACH,mBAAC;AAAD,CAAC,AA3BD,CAA2B,eAAK,CAAC,SAAS,GA2BzC;AAEY,QAAA,GAAG,GAAG,IAAA,0BAAW,EAAC,YAAY,EAAE;IAC3C,gBAAgB;IAChB,IAAI,EAAE,SAAS;IACf,kBAAkB,EAAE,IAAI;IACxB,KAAK,EACH,sKAAsK;IACxK,MAAM,EAAE;QACN;YACE,IAAI,EAAE,OAAO;YACb,MAAM,EAAE,IAAI;YACZ,IAAI,EAAE,MAAM;YACZ,gBAAgB,EAAE,sCAAgB;YAClC,QAAQ,EAAE,IAAI;SACf;KACF;IACD,MAAM,EAAE,IAAI;IACZ,MAAM,EAAE,IAAI;CACb,CAAC,CAAC"}
+{"version":3,"file":"Img.js","sourceRoot":"","sources":["../../../../../src/blocks/raw/Img.tsx"],"names":[],"mappings":"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"}

package/dist/lib/src/sdk-version.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SDK_VERSION = void 0;
-exports.SDK_VERSION = '8.2.4';
+exports.SDK_VERSION = '8.2.6';
 //# sourceMappingURL=sdk-version.js.map

package/dist/types/src/blocks/raw/Img.d.ts

@@ -3,5 +3,10 @@ export interface ImgProps {
     attributes?: any;
     image?: string;
     builderBlock?: BuilderElement;
+    aspectRatio?: number;
+    backgroundSize?: string;
+    backgroundPosition?: string;
+    altText?: string;
+    title?: string;
 }
 export declare const Img: Function;

package/dist/types/src/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "8.2.4";
+export declare const SDK_VERSION = "8.2.6";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/react",
-  "version": "8.2.4",
+  "version": "8.2.6",
   "description": "",
   "keywords": [],
   "main": "dist/builder-react.cjs.js",
@@ -97,7 +97,7 @@
     "react-dom": ">=16.8.0 || ^19.0.0-rc"
   },
   "dependencies": {
-    "@builder.io/sdk": "6.1.0",
+    "@builder.io/sdk": "6.1.2",
     "@emotion/core": "^10.0.17",
     "hash-sum": "^2.0.0",
     "isolated-vm": "^5.0.0",

package/src/blocks/raw/Img.tsx

@@ -9,6 +9,11 @@ export interface ImgProps {
   attributes?: any;
   image?: string;
   builderBlock?: BuilderElement;
+  aspectRatio?: number;
+  backgroundSize?: string;
+  backgroundPosition?: string;
+  altText?: string;
+  title?: string;
 }
 
 // TODO: srcset, alt text input, object size/position input, etc
@@ -31,21 +36,39 @@ class ImgComponent extends React.Component<ImgProps> {
   render() {
     const attributes = this.props.attributes || {};
     const srcset = this.getSrcSet();
+
+    const { style: userStyle, ...restAttributes } = attributes;
+
+    const defaultStyle: React.CSSProperties = {
+      objectFit: this.props.backgroundSize as React.CSSProperties['objectFit'],
+      objectPosition: this.props.backgroundPosition as React.CSSProperties['objectPosition'],
+      aspectRatio: this.props.aspectRatio as unknown as React.CSSProperties['aspectRatio'],
+    };
+
+    const mergedStyle = {
+      ...defaultStyle,
+      ...(userStyle as React.CSSProperties),
+    };
+
     return (
       <img
         loading="lazy"
-        {...this.props.attributes}
+        {...restAttributes}
         src={this.props.image || attributes.src}
         srcSet={srcset}
+        alt={this.props.altText}
+        title={this.props.title}
+        style={mergedStyle}
+        className="builder-raw-img"
       />
     );
   }
 }
 
 export const Img = withBuilder(ImgComponent, {
-  // friendlyName?
   name: 'Raw:Img',
   hideFromInsertMenu: true,
+
   image:
     'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4',
   inputs: [
@@ -56,7 +79,58 @@ export const Img = withBuilder(ImgComponent, {
       allowedFileTypes: IMAGE_FILE_TYPES,
       required: true,
     },
+    {
+      name: 'backgroundSize',
+      type: 'text',
+      defaultValue: 'cover',
+      enum: [
+        {
+          label: 'contain',
+          value: 'contain',
+          helperText: 'The image should never get cropped',
+        },
+        {
+          label: 'cover',
+          value: 'cover',
+          helperText: "The image should fill it's box, cropping when needed",
+        },
+      ],
+    },
+    {
+      name: 'backgroundPosition',
+      type: 'text',
+      defaultValue: 'center',
+      enum: [
+        'center',
+        'top',
+        'left',
+        'right',
+        'bottom',
+        'top left',
+        'top right',
+        'bottom left',
+        'bottom right',
+      ],
+    },
+    {
+      name: 'altText',
+      type: 'string',
+      helperText: 'Text to display when the user has images off',
+    },
+    {
+      name: 'title',
+      type: 'string',
+      helperText: 'Text to display when hovering over the asset',
+    },
+    {
+      name: 'aspectRatio',
+      type: 'number',
+      helperText:
+        "This is the ratio of height/width, e.g. set to 1.5 for a 300px wide and 200px tall photo. Set to 0 to not force the image to maintain it's aspect ratio",
+      advanced: true,
+      defaultValue: 0.7041,
+    },
   ],
+
   noWrap: true,
-  static: true,
 });