@builder.io/sdk-react-native 0.4.5 → 0.5.0

package/dist/blocks/button/button.js

@@ -1,5 +1,4 @@
 "use strict";
-'use client';
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -28,13 +27,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const BaseText_1 = __importDefault(require("../BaseText"));
+("use client");
 const React = __importStar(require("react"));
 const react_native_1 = require("react-native");
+const helpers_js_1 = require("../helpers.js");
 function Button(props) {
     return (React.createElement(React.Fragment, null, props.link ? (React.createElement(React.Fragment, null,
         React.createElement(react_native_1.View, { role: "button", ...props.attributes, href: props.link, target: props.openLinkInNewTab ? "_blank" : undefined },
             React.createElement(BaseText_1.default, null, props.text)))) : (React.createElement(React.Fragment, null,
-        React.createElement(react_native_1.View, { ...props.attributes, style: styles.view1 },
+        React.createElement(react_native_1.View, { ...props.attributes, style: {
+                ...styles.view1,
+                ...props.attributes.style,
+            } },
             React.createElement(BaseText_1.default, null, props.text))))));
 }
 const styles = react_native_1.StyleSheet.create({ view1: { all: "unset" } });

package/dist/blocks/button/component-info.js

@@ -16,25 +16,21 @@ const componentInfo = {
         textAlign: "center",
         cursor: "pointer"
     },
-    inputs: [
-        {
+    inputs: [{
             name: "text",
             type: "text",
             defaultValue: "Click me!",
             bubble: true
-        },
-        {
+        }, {
             name: "link",
             type: "url",
             bubble: true
-        },
-        {
+        }, {
             name: "openLinkInNewTab",
             type: "boolean",
             defaultValue: false,
             friendlyName: "Open link in new tab"
-        }
-    ],
+        }],
     static: true,
     noWrap: true
 };

package/dist/blocks/columns/columns.js

@@ -1,5 +1,5 @@
 "use strict";
-'use client';
+"use client";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -30,11 +30,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const React = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const react_1 = require("react");
-const render_blocks_1 = __importDefault(require("../../components/render-blocks"));
-const device_sizes_1 = require("../../constants/device-sizes");
+const blocks_1 = __importDefault(require("../../components/blocks/blocks"));
+const device_sizes_js_1 = require("../../constants/device-sizes.js");
 const inlined_styles_1 = __importDefault(require("../../components/inlined-styles"));
 const target_js_1 = require("../../constants/target.js");
-const builder_context_js_1 = __importDefault(require("../../context/builder.context.js"));
 function Columns(props) {
     var _a;
     const [gutterSize, setGutterSize] = (0, react_1.useState)(() => typeof props.space === "number" ? props.space || 0 : 20);
@@ -60,17 +59,8 @@ function Columns(props) {
             ? "column-reverse"
             : "column");
     function columnsCssVars() {
-        if (target_js_1.TARGET === "reactNative") {
-            return {
-                flexDirection: flexDir,
-            };
-        }
         return {
-            "--flex-dir": flexDir,
-            "--flex-dir-tablet": getTabletStyle({
-                stackedStyle: flexDir,
-                desktopStyle: "row",
-            }),
+            flexDirection: flexDir,
         };
     }
     function columnCssVars(index) {
@@ -84,9 +74,10 @@ function Columns(props) {
         const gutterPixels = `${gutter}px`;
         const mobileWidth = "100%";
         const mobileMarginLeft = 0;
+        const marginLeftKey = "margin-left";
         return {
             width,
-            "margin-left": gutterPixels,
+            [marginLeftKey]: gutterPixels,
             "--column-width-mobile": getMobileStyle({
                 stackedStyle: mobileWidth,
                 desktopStyle: width,
@@ -107,7 +98,7 @@ function Columns(props) {
     }
     function getWidthForBreakpointSize(size) {
         var _a, _b;
-        const breakpointSizes = (0, device_sizes_1.getSizesForBreakpoints)(((_b = (_a = builderContext.content) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.breakpoints) || {});
+        const breakpointSizes = (0, device_sizes_js_1.getSizesForBreakpoints)(((_b = (_a = props.builderContext.content) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.breakpoints) || {});
         return breakpointSizes[size].max;
     }
     function columnsStyles() {
@@ -137,18 +128,23 @@ function Columns(props) {
         },
       `;
     }
-    const builderContext = (0, react_1.useContext)(builder_context_js_1.default);
-    return (React.createElement(react_native_1.View, { style: columnsCssVars(), dataSet: {
+    return (React.createElement(react_native_1.View, { style: {
+            ...styles.view1,
+            ...columnsCssVars(),
+        }, dataSet: {
             "builder-block-name": "builder-columns",
         } },
         target_js_1.TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
             React.createElement(inlined_styles_1.default, { styles: columnsStyles() }))) : null, (_a = props.columns) === null || _a === void 0 ? void 0 :
-        _a.map((column, index) => (React.createElement(react_native_1.View, { style: columnCssVars(index), dataSet: {
+        _a.map((column, index) => (React.createElement(react_native_1.View, { style: {
+                ...styles.view2,
+                ...columnCssVars(index),
+            }, dataSet: {
                 "builder-block-name": "builder-column",
             }, key: index },
-            React.createElement(render_blocks_1.default, { blocks: column.blocks, path: `component.options.columns.${index}.blocks`, parent: props.builderBlock.id, styleProp: {
+            React.createElement(blocks_1.default, { blocks: column.blocks, path: `component.options.columns.${index}.blocks`, parent: props.builderBlock.id, styleProp: {
                     flexGrow: "1",
-                } }))))));
+                }, context: props.builderContext, registeredComponents: props.builderComponents }))))));
 }
 const styles = react_native_1.StyleSheet.create({
     view1: { display: "flex" },

package/dist/blocks/columns/component-info.js

@@ -1,21 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentInfo = void 0;
-const util_js_1 = require("../util.js");
 const componentInfo = {
     name: "Columns",
-    inputs: [
-        {
+    isRSC: true,
+    inputs: [{
             name: "columns",
             type: "array",
             broadcast: true,
-            subFields: [
-                {
+            subFields: [{
                     name: "blocks",
                     type: "array",
                     hideFromUI: true,
-                    defaultValue: [
-                        {
+                    defaultValue: [{
                             "@type": "@builder.io/sdk:Element",
                             responsiveStyles: {
                                 large: {
@@ -42,8 +39,7 @@ const componentInfo = {
                                     aspectRatio: 0.7004048582995948
                                 }
                             }
-                        },
-                        {
+                        }, {
                             "@type": "@builder.io/sdk:Element",
                             responsiveStyles: {
                                 large: {
@@ -64,25 +60,19 @@ const componentInfo = {
                                     text: "<p>Enter some text...</p>"
                                 }
                             }
-                        }
-                    ]
-                },
-                {
+                        }]
+                }, {
                     name: "width",
                     type: "number",
                     hideFromUI: true,
                     helperText: "Width %, e.g. set to 50 to fill half of the space"
-                },
-                {
+                }, {
                     name: "link",
                     type: "url",
                     helperText: "Optionally set a url that clicking this column will link to"
-                }
-            ],
-            defaultValue: [
-                {
-                    blocks: [
-                        {
+                }],
+            defaultValue: [{
+                    blocks: [{
                             "@type": "@builder.io/sdk:Element",
                             responsiveStyles: {
                                 large: {
@@ -109,8 +99,7 @@ const componentInfo = {
                                     aspectRatio: 0.7004048582995948
                                 }
                             }
-                        },
-                        {
+                        }, {
                             "@type": "@builder.io/sdk:Element",
                             responsiveStyles: {
                                 large: {
@@ -131,12 +120,9 @@ const componentInfo = {
                                     text: "<p>Enter some text...</p>"
                                 }
                             }
-                        }
-                    ]
-                },
-                {
-                    blocks: [
-                        {
+                        }]
+                }, {
+                    blocks: [{
                             "@type": "@builder.io/sdk:Element",
                             responsiveStyles: {
                                 large: {
@@ -163,8 +149,7 @@ const componentInfo = {
                                     aspectRatio: 0.7004048582995948
                                 }
                             }
-                        },
-                        {
+                        }, {
                             "@type": "@builder.io/sdk:Element",
                             responsiveStyles: {
                                 large: {
@@ -185,21 +170,19 @@ const componentInfo = {
                                     text: "<p>Enter some text...</p>"
                                 }
                             }
-                        }
-                    ]
-                }
-            ],
-            onChange: (0, util_js_1.serializeFn)((options) => {
+                        }]
+                }],
+            onChange: options => {
                 function clearWidths() {
-                    columns.forEach((col) => {
+                    columns.forEach(col => {
                         col.delete("width");
                     });
                 }
                 const columns = options.get("columns");
                 if (Array.isArray(columns)) {
-                    const containsColumnWithWidth = !!columns.find((col) => col.get("width"));
+                    const containsColumnWithWidth = !!columns.find(col => col.get("width"));
                     if (containsColumnWithWidth) {
-                        const containsColumnWithoutWidth = !!columns.find((col) => !col.get("width"));
+                        const containsColumnWithoutWidth = !!columns.find(col => !col.get("width"));
                         if (containsColumnWithoutWidth) {
                             clearWidths();
                         }
@@ -214,30 +197,26 @@ const componentInfo = {
                         }
                     }
                 }
-            })
-        },
-        {
+            }
+        }, {
             name: "space",
             type: "number",
             defaultValue: 20,
             helperText: "Size of gap between columns",
             advanced: true
-        },
-        {
+        }, {
             name: "stackColumnsAt",
             type: "string",
             defaultValue: "tablet",
             helperText: "Convert horizontal columns to vertical at what device size",
             enum: ["tablet", "mobile", "never"],
             advanced: true
-        },
-        {
+        }, {
             name: "reverseColumnsWhenStacked",
             type: "boolean",
             defaultValue: false,
             helperText: "When stacking columns for mobile devices, reverse the ordering",
             advanced: true
-        }
-    ]
+        }]
 };
 exports.componentInfo = componentInfo;

package/dist/blocks/custom-code/component-info.js

@@ -5,27 +5,23 @@ const componentInfo = {
     name: "Custom Code",
     static: true,
     requiredPermissions: ["editCode"],
-    inputs: [
-        {
+    inputs: [{
             name: "code",
             type: "html",
             required: true,
             defaultValue: "<p>Hello there, I am custom HTML code!</p>",
             code: true
-        },
-        {
+        }, {
             name: "replaceNodes",
             type: "boolean",
             helperText: "Preserve server rendered dom nodes",
             advanced: true
-        },
-        {
+        }, {
             name: "scriptsClientOnly",
             type: "boolean",
             defaultValue: false,
             helperText: "Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads",
             advanced: true
-        }
-    ]
+        }]
 };
 exports.componentInfo = componentInfo;

package/dist/blocks/custom-code/custom-code.js

@@ -1,5 +1,5 @@
 "use strict";
-'use client';
+"use client";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);

package/dist/blocks/embed/component-info.js

@@ -1,23 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentInfo = void 0;
-const util_js_1 = require("../util.js");
 const componentInfo = {
     name: "Embed",
     static: true,
-    inputs: [
-        {
+    inputs: [{
             name: "url",
             type: "url",
             required: true,
             defaultValue: "",
             helperText: "e.g. enter a youtube url, google map, etc",
-            onChange: (0, util_js_1.serializeFn)((options) => {
+            onChange: options => {
                 const url = options.get("url");
                 if (url) {
                     options.set("content", "Loading...");
                     const apiKey = "ae0e60e78201a3f2b0de4b";
-                    return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then((res) => res.json()).then((data) => {
+                    return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then(res => res.json()).then(data => {
                         if (options.get("url") === url) {
                             if (data.html) {
                                 options.set("content", data.html);
@@ -26,21 +24,19 @@ const componentInfo = {
                                 options.set("content", "Invalid url, please try another");
                             }
                         }
-                    }).catch((_err) => {
+                    }).catch(_err => {
                         options.set("content", "There was an error embedding this URL, please try again or another URL");
                     });
                 }
                 else {
                     options.delete("content");
                 }
-            })
-        },
-        {
+            }
+        }, {
             name: "content",
             type: "html",
             defaultValue: '<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',
             hideFromUI: true
-        }
-    ]
+        }]
 };
 exports.componentInfo = componentInfo;

package/dist/blocks/embed/embed.js

@@ -1,5 +1,5 @@
 "use strict";
-'use client';
+"use client";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);

package/dist/blocks/embed/helpers.js

@@ -1,10 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isJsScript = void 0;
-const SCRIPT_MIME_TYPES = [
-    "text/javascript",
-    "application/javascript",
-    "application/ecmascript"
-];
-const isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);
+const SCRIPT_MIME_TYPES = ["text/javascript", "application/javascript", "application/ecmascript"];
+const isJsScript = script => SCRIPT_MIME_TYPES.includes(script.type);
 exports.isJsScript = isJsScript;

package/dist/blocks/form/component-info.js

@@ -12,94 +12,75 @@ const componentInfo = {
         }
     },
     image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fef36d2a846134910b64b88e6d18c5ca5",
-    inputs: [
-        {
+    inputs: [{
             name: "sendSubmissionsTo",
             type: "string",
-            enum: [
-                {
+            enum: [{
                     label: "Send to email",
                     value: "email",
                     helperText: "Send form submissions to the email address of your choosing"
-                },
-                {
+                }, {
                     label: "Custom",
                     value: "custom",
                     helperText: "Handle where the form requests go manually with a little code, e.g. to your own custom backend"
-                }
-            ],
+                }],
             defaultValue: "email"
-        },
-        {
+        }, {
             name: "sendSubmissionsToEmail",
             type: "string",
             required: true,
             defaultValue: "your@email.com",
             showIf: 'options.get("sendSubmissionsTo") === "email"'
-        },
-        {
+        }, {
             name: "sendWithJs",
             type: "boolean",
             helperText: "Set to false to use basic html form action",
             defaultValue: true,
             showIf: 'options.get("sendSubmissionsTo") === "custom"'
-        },
-        {
+        }, {
             name: "name",
             type: "string",
             defaultValue: "My form"
-        },
-        {
+        }, {
             name: "action",
             type: "string",
             helperText: "URL to send the form data to",
             showIf: 'options.get("sendSubmissionsTo") === "custom"'
-        },
-        {
+        }, {
             name: "contentType",
             type: "string",
             defaultValue: "application/json",
             advanced: true,
-            enum: [
-                "application/json",
-                "multipart/form-data",
-                "application/x-www-form-urlencoded"
-            ],
+            enum: ["application/json", "multipart/form-data", "application/x-www-form-urlencoded"],
             showIf: 'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true'
-        },
-        {
+        }, {
             name: "method",
             type: "string",
             showIf: 'options.get("sendSubmissionsTo") === "custom"',
             defaultValue: "POST",
             advanced: true
-        },
-        {
+        }, {
             name: "previewState",
             type: "string",
             enum: ["unsubmitted", "sending", "success", "error"],
             defaultValue: "unsubmitted",
             helperText: 'Choose a state to edit, e.g. choose "success" to show what users see on success and edit the message',
             showIf: 'options.get("sendSubmissionsTo") !== "zapier" && options.get("sendWithJs") === true'
-        },
-        {
+        }, {
             name: "successUrl",
             type: "url",
             helperText: "Optional URL to redirect the user to on form submission success",
             showIf: 'options.get("sendSubmissionsTo") !== "zapier" && options.get("sendWithJs") === true'
-        },
-        {
+        }, {
             name: "resetFormOnSubmit",
             type: "boolean",
             showIf: "options.get('sendSubmissionsTo') === 'custom' && options.get('sendWithJs') === true",
             advanced: true
-        },
-        {
+        }, {
             name: "successMessage",
             type: "uiBlocks",
             hideFromUI: true,
-            defaultValue: [
-                {
+            defaultValue: [{
                     "@type": "@builder.io/sdk:Element",
                     responsiveStyles: {
                         large: {
@@ -112,27 +93,22 @@ const componentInfo = {
                             text: "<span>Thanks!</span>"
                         }
                     }
-                }
-            ]
-        },
-        {
+                }]
+        }, {
             name: "validate",
             type: "boolean",
             defaultValue: true,
             advanced: true
-        },
-        {
+        }, {
             name: "errorMessagePath",
             type: "text",
             advanced: true,
             helperText: 'Path to where to get the error message from in a JSON response to display to the user, e.g. "error.message" for a response like { "error": { "message": "this username is taken" }}'
-        },
-        {
+        }, {
             name: "errorMessage",
             type: "uiBlocks",
             hideFromUI: true,
-            defaultValue: [
-                {
+            defaultValue: [{
                     "@type": "@builder.io/sdk:Element",
                     responsiveStyles: {
                         large: {
@@ -148,15 +124,12 @@ const componentInfo = {
                             text: "<span>Form submission error :( Please check your answers and try again</span>"
                         }
                     }
-                }
-            ]
-        },
-        {
+                }]
+        }, {
             name: "sendingMessage",
             type: "uiBlocks",
             hideFromUI: true,
-            defaultValue: [
-                {
+            defaultValue: [{
                     "@type": "@builder.io/sdk:Element",
                     responsiveStyles: {
                         large: {
@@ -169,10 +142,8 @@ const componentInfo = {
                             text: "<span>Sending...</span>"
                         }
                     }
-                }
-            ]
-        },
-        {
+                }]
+        }, {
             name: "customHeaders",
             type: "map",
             valueType: {
@@ -180,12 +151,10 @@ const componentInfo = {
             },
             advanced: true,
             showIf: 'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true'
-        }
-    ],
+        }],
     noWrap: true,
     canHaveChildren: true,
-    defaultChildren: [
-        {
+    defaultChildren: [{
             "@type": "@builder.io/sdk:Element",
             responsiveStyles: {
                 large: {
@@ -198,8 +167,7 @@ const componentInfo = {
                     text: "<span>Enter your name</span>"
                 }
             }
-        },
-        {
+        }, {
             "@type": "@builder.io/sdk:Element",
             responsiveStyles: {
                 large: {
@@ -213,8 +181,7 @@ const componentInfo = {
                     placeholder: "Jane Doe"
                 }
             }
-        },
-        {
+        }, {
             "@type": "@builder.io/sdk:Element",
             responsiveStyles: {
                 large: {
@@ -227,8 +194,7 @@ const componentInfo = {
                     text: "<span>Enter your email</span>"
                 }
             }
-        },
-        {
+        }, {
             "@type": "@builder.io/sdk:Element",
             responsiveStyles: {
                 large: {
@@ -242,8 +208,7 @@ const componentInfo = {
                     placeholder: "jane@doe.com"
                 }
             }
-        },
-        {
+        }, {
             "@type": "@builder.io/sdk:Element",
             responsiveStyles: {
                 large: {
@@ -256,7 +221,6 @@ const componentInfo = {
                     text: "Submit"
                 }
             }
-        }
-    ]
+        }]
 };
 exports.componentInfo = componentInfo;