@builder.io/sdk-react-native 0.1.2 → 0.1.3

package/dist/blocks/BaseText.js

@@ -0,0 +1,40 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const builder_context_1 = __importDefault(require("../context/builder.context"));
+/**
+ * Implements CSS-like inheritance for `Text` by replacing all calls to `Text` with a custom `BaseText` component that
+ * applies the `inheritedStyles` context styles, which contain all styles from all parents that might apply to a `Text`.
+ */
+function BaseText(props) {
+    const builderContext = React.useContext(builder_context_1.default);
+    return (React.createElement(react_native_1.Text, { ...props, style: { ...builderContext.inheritedStyles, ...props.style } }));
+}
+exports.default = BaseText;

package/dist/blocks/button/button.js

@@ -0,0 +1,39 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const BaseText_1 = __importDefault(require("../BaseText"));
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+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_native_1.View, { ...props.attributes, style: styles.view1 },
+        React.createElement(BaseText_1.default, null, props.text)))));
+}
+exports.default = Button;
+const styles = react_native_1.StyleSheet.create({ view1: { all: "unset" } });

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

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentInfo = void 0;
+const componentInfo = {
+    name: "Core:Button",
+    builtIn: true,
+    image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
+    defaultStyles: {
+        appearance: "none",
+        paddingTop: "15px",
+        paddingBottom: "15px",
+        paddingLeft: "25px",
+        paddingRight: "25px",
+        backgroundColor: "#000000",
+        color: "white",
+        borderRadius: "4px",
+        textAlign: "center",
+        cursor: "pointer"
+    },
+    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
+};
+exports.componentInfo = componentInfo;

package/dist/blocks/columns/columns.js

@@ -0,0 +1,149 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const render_blocks_js_1 = __importDefault(require("../../components/render-blocks.js"));
+const device_sizes_1 = require("../../constants/device-sizes");
+const render_inlined_styles_js_1 = __importDefault(require("../../components/render-inlined-styles.js"));
+const target_js_1 = require("../../constants/target.js");
+const css_1 = require("../../helpers/css");
+function Columns(props) {
+    var _a;
+    function getGutterSize() {
+        return typeof props.space === "number" ? props.space || 0 : 20;
+    }
+    function getColumns() {
+        return props.columns || [];
+    }
+    function getWidth(index) {
+        var _a;
+        const columns = getColumns();
+        return ((_a = columns[index]) === null || _a === void 0 ? void 0 : _a.width) || 100 / columns.length;
+    }
+    function getColumnCssWidth(index) {
+        const columns = getColumns();
+        const gutterSize = getGutterSize();
+        const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
+        return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
+    }
+    function maybeApplyForTablet(prop) {
+        const _stackColumnsAt = props.stackColumnsAt || "tablet";
+        return _stackColumnsAt === "tablet" ? prop : "inherit";
+    }
+    function columnsCssVars() {
+        const flexDir = props.stackColumnsAt === "never"
+            ? "inherit"
+            : props.reverseColumnsWhenStacked
+                ? "column-reverse"
+                : "column";
+        return {
+            "--flex-dir": flexDir,
+            "--flex-dir-tablet": maybeApplyForTablet(flexDir),
+        };
+    }
+    function columnCssVars() {
+        const width = "100%";
+        const marginLeft = "0";
+        return {
+            "--column-width": width,
+            "--column-margin-left": marginLeft,
+            "--column-width-tablet": maybeApplyForTablet(width),
+            "--column-margin-left-tablet": maybeApplyForTablet(marginLeft),
+        };
+    }
+    function getWidthForBreakpointSize(size) {
+        const breakpointSizes = (0, device_sizes_1.getSizesForBreakpoints)(props.customBreakpoints || {});
+        return breakpointSizes[size].max;
+    }
+    function columnStyleObjects() {
+        return {
+            columns: {
+                small: {
+                    flexDirection: "var(--flex-dir)",
+                    alignItems: "stretch",
+                },
+                medium: {
+                    flexDirection: "var(--flex-dir-tablet)",
+                    alignItems: "stretch",
+                },
+            },
+            column: {
+                small: {
+                    width: "var(--column-width) !important",
+                    marginLeft: "var(--column-margin-left) !important",
+                },
+                medium: {
+                    width: "var(--column-width-tablet) !important",
+                    marginLeft: "var(--column-margin-left-tablet) !important",
+                },
+            },
+        };
+    }
+    function columnsStyles() {
+        return `
+      @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
+        .${props.builderBlock.id}-breakpoints {
+          ${(0, css_1.convertStyleMapToCSS)(columnStyleObjects().columns.medium)}
+        }
+
+        .${props.builderBlock.id}-breakpoints > .builder-column {
+          ${(0, css_1.convertStyleMapToCSS)(columnStyleObjects().column.medium)}
+        }
+      }
+
+      @media (max-width: ${getWidthForBreakpointSize("small")}px) {
+        .${props.builderBlock.id}-breakpoints {
+          ${(0, css_1.convertStyleMapToCSS)(columnStyleObjects().columns.small)}
+        }
+
+        .${props.builderBlock.id}-breakpoints > .builder-column {
+          ${(0, css_1.convertStyleMapToCSS)(columnStyleObjects().column.small)}
+        }
+      },
+    `;
+    }
+    function reactNativeColumnsStyles() {
+        return columnStyleObjects.columns.small;
+    }
+    function reactNativeColumnStyles() {
+        return columnStyleObjects.column.small;
+    }
+    return (React.createElement(react_native_1.View, { style: styles.view1 },
+        target_js_1.TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
+            React.createElement(render_inlined_styles_js_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: styles.view2, key: index },
+            React.createElement(render_blocks_js_1.default, { blocks: column.blocks, path: `component.options.columns.${index}.blocks`, parent: props.builderBlock.id, styleProp: {
+                    flexGrow: "1",
+                } }))))));
+}
+exports.default = Columns;
+const styles = react_native_1.StyleSheet.create({
+    view1: { display: "flex" },
+    view2: { display: "flex", flexDirection: "column", alignItems: "stretch" },
+});

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

@@ -0,0 +1,244 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentInfo = void 0;
+const util_js_1 = require("../util.js");
+const componentInfo = {
+    name: "Columns",
+    builtIn: true,
+    inputs: [
+        {
+            name: "columns",
+            type: "array",
+            broadcast: true,
+            subFields: [
+                {
+                    name: "blocks",
+                    type: "array",
+                    hideFromUI: true,
+                    defaultValue: [
+                        {
+                            "@type": "@builder.io/sdk:Element",
+                            responsiveStyles: {
+                                large: {
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    alignItems: "stretch",
+                                    flexShrink: "0",
+                                    position: "relative",
+                                    marginTop: "30px",
+                                    textAlign: "center",
+                                    lineHeight: "normal",
+                                    height: "auto",
+                                    minHeight: "20px",
+                                    minWidth: "20px",
+                                    overflow: "hidden"
+                                }
+                            },
+                            component: {
+                                name: "Image",
+                                options: {
+                                    image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
+                                    backgroundPosition: "center",
+                                    backgroundSize: "cover",
+                                    aspectRatio: 0.7004048582995948
+                                }
+                            }
+                        },
+                        {
+                            "@type": "@builder.io/sdk:Element",
+                            responsiveStyles: {
+                                large: {
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    alignItems: "stretch",
+                                    flexShrink: "0",
+                                    position: "relative",
+                                    marginTop: "30px",
+                                    textAlign: "center",
+                                    lineHeight: "normal",
+                                    height: "auto"
+                                }
+                            },
+                            component: {
+                                name: "Text",
+                                options: {
+                                    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: [
+                        {
+                            "@type": "@builder.io/sdk:Element",
+                            responsiveStyles: {
+                                large: {
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    alignItems: "stretch",
+                                    flexShrink: "0",
+                                    position: "relative",
+                                    marginTop: "30px",
+                                    textAlign: "center",
+                                    lineHeight: "normal",
+                                    height: "auto",
+                                    minHeight: "20px",
+                                    minWidth: "20px",
+                                    overflow: "hidden"
+                                }
+                            },
+                            component: {
+                                name: "Image",
+                                options: {
+                                    image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
+                                    backgroundPosition: "center",
+                                    backgroundSize: "cover",
+                                    aspectRatio: 0.7004048582995948
+                                }
+                            }
+                        },
+                        {
+                            "@type": "@builder.io/sdk:Element",
+                            responsiveStyles: {
+                                large: {
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    alignItems: "stretch",
+                                    flexShrink: "0",
+                                    position: "relative",
+                                    marginTop: "30px",
+                                    textAlign: "center",
+                                    lineHeight: "normal",
+                                    height: "auto"
+                                }
+                            },
+                            component: {
+                                name: "Text",
+                                options: {
+                                    text: "<p>Enter some text...</p>"
+                                }
+                            }
+                        }
+                    ]
+                },
+                {
+                    blocks: [
+                        {
+                            "@type": "@builder.io/sdk:Element",
+                            responsiveStyles: {
+                                large: {
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    alignItems: "stretch",
+                                    flexShrink: "0",
+                                    position: "relative",
+                                    marginTop: "30px",
+                                    textAlign: "center",
+                                    lineHeight: "normal",
+                                    height: "auto",
+                                    minHeight: "20px",
+                                    minWidth: "20px",
+                                    overflow: "hidden"
+                                }
+                            },
+                            component: {
+                                name: "Image",
+                                options: {
+                                    image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
+                                    backgroundPosition: "center",
+                                    backgroundSize: "cover",
+                                    aspectRatio: 0.7004048582995948
+                                }
+                            }
+                        },
+                        {
+                            "@type": "@builder.io/sdk:Element",
+                            responsiveStyles: {
+                                large: {
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    alignItems: "stretch",
+                                    flexShrink: "0",
+                                    position: "relative",
+                                    marginTop: "30px",
+                                    textAlign: "center",
+                                    lineHeight: "normal",
+                                    height: "auto"
+                                }
+                            },
+                            component: {
+                                name: "Text",
+                                options: {
+                                    text: "<p>Enter some text...</p>"
+                                }
+                            }
+                        }
+                    ]
+                }
+            ],
+            onChange: (0, util_js_1.serializeFn)((options) => {
+                function clearWidths() {
+                    columns.forEach((col) => {
+                        col.delete("width");
+                    });
+                }
+                const columns = options.get("columns");
+                if (Array.isArray(columns)) {
+                    const containsColumnWithWidth = !!columns.find((col) => col.get("width"));
+                    if (containsColumnWithWidth) {
+                        const containsColumnWithoutWidth = !!columns.find((col) => !col.get("width"));
+                        if (containsColumnWithoutWidth) {
+                            clearWidths();
+                        }
+                        else {
+                            const sumWidths = columns.reduce((memo, col) => {
+                                return memo + col.get("width");
+                            }, 0);
+                            const widthsDontAddUp = sumWidths !== 100;
+                            if (widthsDontAddUp) {
+                                clearWidths();
+                            }
+                        }
+                    }
+                }
+            })
+        },
+        {
+            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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentInfo = void 0;
+const componentInfo = {
+    name: "Custom Code",
+    static: true,
+    builtIn: true,
+    requiredPermissions: ["editCode"],
+    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

@@ -0,0 +1,76 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_1 = require("react");
+function CustomCode(props) {
+    const elem = (0, react_1.useRef)(null);
+    const [scriptsInserted, setScriptsInserted] = (0, react_1.useState)(() => []);
+    const [scriptsRun, setScriptsRun] = (0, react_1.useState)(() => []);
+    function findAndRunScripts() {
+        // TODO: Move this function to standalone one in '@builder.io/utils'
+        if (elem.current &&
+            elem.current.getElementsByTagName &&
+            typeof window !== "undefined") {
+            const scripts = elem.current.getElementsByTagName("script");
+            for (let i = 0; i < scripts.length; i++) {
+                const script = scripts[i];
+                if (script.src) {
+                    if (scriptsInserted.includes(script.src)) {
+                        continue;
+                    }
+                    scriptsInserted.push(script.src);
+                    const newScript = document.createElement("script");
+                    newScript.async = true;
+                    newScript.src = script.src;
+                    document.head.appendChild(newScript);
+                }
+                else if (!script.type ||
+                    [
+                        "text/javascript",
+                        "application/javascript",
+                        "application/ecmascript",
+                    ].includes(script.type)) {
+                    if (scriptsRun.includes(script.innerText)) {
+                        continue;
+                    }
+                    try {
+                        scriptsRun.push(script.innerText);
+                        new Function(script.innerText)();
+                    }
+                    catch (error) {
+                        console.warn("`CustomCode`: Error running script:", error);
+                    }
+                }
+            }
+        }
+    }
+    (0, react_1.useEffect)(() => {
+        findAndRunScripts();
+    }, []);
+    return React.createElement(react_native_1.View, { ref: elem, dangerouslySetInnerHTML: { __html: props.code } });
+}
+exports.default = CustomCode;

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

@@ -0,0 +1,47 @@
+"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,
+    builtIn: true,
+    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) => {
+                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) => {
+                        if (options.get("url") === url) {
+                            if (data.html) {
+                                options.set("content", data.html);
+                            }
+                            else {
+                                options.set("content", "Invalid url, please try another");
+                            }
+                        }
+                    }).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;