@builder.io/sdk-react-native 0.0.1-31 → 0.0.1-35

package/src/components/render-block.js

@@ -4,31 +4,31 @@ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) =>
-  key in obj
-    ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value })
-    : (obj[key] = value);
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {})) if (__hasOwnProp.call(b, prop)) __defNormalProp(a, prop, b[prop]);
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
   if (__getOwnPropSymbols)
     for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop)) __defNormalProp(a, prop, b[prop]);
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
     }
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import * as React from 'react';
-import { useContext } from 'react';
-import { getBlockComponentOptions } from '../functions/get-block-component-options';
-import { getBlockProperties } from '../functions/get-block-properties';
-import { getBlockStyles } from '../functions/get-block-styles';
-import { getBlockTag } from '../functions/get-block-tag';
-import { components } from '../functions/register-component';
-import BuilderContext from '../context/builder.context';
-import { getBlockActions } from '../functions/get-block-actions';
-import { getProcessedBlock } from '../functions/get-processed-block';
-import BlockStyles from './block-styles';
-import RenderBlocks from './render-blocks';
+import * as React from "react";
+import { useContext } from "react";
+import { getBlockComponentOptions } from "../functions/get-block-component-options";
+import { getBlockProperties } from "../functions/get-block-properties";
+import { getBlockStyles } from "../functions/get-block-styles";
+import { getBlockTag } from "../functions/get-block-tag";
+import { components } from "../functions/register-component";
+import BuilderContext from "../context/builder.context";
+import { getBlockActions } from "../functions/get-block-actions";
+import { getProcessedBlock } from "../functions/get-processed-block";
+import BlockStyles from "./block-styles";
+import RenderBlocks from "./render-blocks";
 function RenderBlock(props) {
   var _a, _b, _c;
   function component() {
@@ -63,14 +63,14 @@ function RenderBlock(props) {
     return getProcessedBlock({
       block: props.block,
       state: builderContext.state,
-      context: builderContext.context,
+      context: builderContext.context
     });
   }
   function actions() {
     return getBlockActions({
       block: useBlock(),
       state: builderContext.state,
-      context: builderContext.context,
+      context: builderContext.context
     });
   }
   function css() {
@@ -82,69 +82,24 @@ function RenderBlock(props) {
   const builderContext = useContext(BuilderContext);
   const ComponentRefRef = componentRef();
   const TagNameRef = tagName();
-  return /* @__PURE__ */ React.createElement(
-    React.Fragment,
-    null,
-    !((_a = componentInfo == null ? void 0 : componentInfo()) == null ? void 0 : _a.noWrap)
-      ? /* @__PURE__ */ React.createElement(
-          React.Fragment,
-          null,
-          /* @__PURE__ */ React.createElement(
-            TagNameRef,
-            __spreadProps(__spreadValues({}, properties()), {
-              style: css(),
-            }),
-            /* @__PURE__ */ React.createElement(BlockStyles, {
-              block: useBlock(),
-            }),
-            componentRef()
-              ? /* @__PURE__ */ React.createElement(
-                  ComponentRefRef,
-                  __spreadProps(__spreadValues({}, componentOptions()), {
-                    builderBlock: useBlock(),
-                  }),
-                  useBlock().children
-                    ? /* @__PURE__ */ React.createElement(
-                        React.Fragment,
-                        null,
-                        /* @__PURE__ */ React.createElement(RenderBlocks, {
-                          path: 'children',
-                          blocks: useBlock().children,
-                        })
-                      )
-                    : null
-                )
-              : null,
-            !componentRef() && useBlock().children && useBlock().children.length
-              ? /* @__PURE__ */ React.createElement(
-                  React.Fragment,
-                  null,
-                  (_b = useBlock().children) == null
-                    ? void 0
-                    : _b.map(child =>
-                        /* @__PURE__ */ React.createElement(RenderBlock, {
-                          block: child,
-                        })
-                      )
-                )
-              : null
-          )
-        )
-      : /* @__PURE__ */ React.createElement(
-          ComponentRefRef,
-          __spreadProps(
-            __spreadValues(
-              {},
-              (_c = componentInfo == null ? void 0 : componentInfo()) == null ? void 0 : _c.options
-            ),
-            {
-              attributes: properties(),
-              builderBlock: useBlock(),
-              style: css(),
-              children: useBlock().children,
-            }
-          )
-        )
-  );
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, !((_a = componentInfo == null ? void 0 : componentInfo()) == null ? void 0 : _a.noWrap) ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TagNameRef, __spreadProps(__spreadValues({}, properties()), {
+    style: css()
+  }), /* @__PURE__ */ React.createElement(BlockStyles, {
+    block: useBlock()
+  }), componentRef() ? /* @__PURE__ */ React.createElement(ComponentRefRef, __spreadProps(__spreadValues({}, componentOptions()), {
+    builderBlock: useBlock()
+  }), useBlock().children ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(RenderBlocks, {
+    path: "children",
+    blocks: useBlock().children
+  })) : null) : null, !componentRef() && useBlock().children && useBlock().children.length ? /* @__PURE__ */ React.createElement(React.Fragment, null, (_b = useBlock().children) == null ? void 0 : _b.map((child) => /* @__PURE__ */ React.createElement(RenderBlock, {
+    block: child
+  }))) : null)) : /* @__PURE__ */ React.createElement(ComponentRefRef, __spreadProps(__spreadValues({}, (_c = componentInfo == null ? void 0 : componentInfo()) == null ? void 0 : _c.options), {
+    attributes: properties(),
+    builderBlock: useBlock(),
+    style: css(),
+    children: useBlock().children
+  })));
 }
-export { RenderBlock as default };
+export {
+  RenderBlock as default
+};

package/src/components/render-block.lite.tsx

@@ -1,16 +1,16 @@
-import * as React from 'react';
-import { View, StyleSheet, Image, Text } from 'react-native';
-import { useState, useContext } from 'react';
-import { getBlockComponentOptions } from '../functions/get-block-component-options';
-import { getBlockProperties } from '../functions/get-block-properties';
-import { getBlockStyles } from '../functions/get-block-styles';
-import { getBlockTag } from '../functions/get-block-tag';
-import { components } from '../functions/register-component';
-import BuilderContext from '../context/builder.context.lite';
-import { getBlockActions } from '../functions/get-block-actions';
-import { getProcessedBlock } from '../functions/get-processed-block';
-import BlockStyles from './block-styles.lite';
-import RenderBlocks from './render-blocks.lite';
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+import { useState, useContext } from "react";
+import { getBlockComponentOptions } from "../functions/get-block-component-options";
+import { getBlockProperties } from "../functions/get-block-properties";
+import { getBlockStyles } from "../functions/get-block-styles";
+import { getBlockTag } from "../functions/get-block-tag";
+import { components } from "../functions/register-component";
+import BuilderContext from "../context/builder.context.lite";
+import { getBlockActions } from "../functions/get-block-actions";
+import { getProcessedBlock } from "../functions/get-processed-block";
+import BlockStyles from "./block-styles.lite";
+import RenderBlocks from "./render-blocks.lite";
 
 export default function RenderBlock(props) {
   function component() {
@@ -85,18 +85,26 @@ export default function RenderBlock(props) {
             <BlockStyles block={useBlock()} />
 
             {componentRef() ? (
-              <ComponentRefRef {...componentOptions()} builderBlock={useBlock()}>
+              <ComponentRefRef
+                {...componentOptions()}
+                builderBlock={useBlock()}
+              >
                 {useBlock().children ? (
                   <>
-                    <RenderBlocks path="children" blocks={useBlock().children} />
+                    <RenderBlocks
+                      path="children"
+                      blocks={useBlock().children}
+                    />
                   </>
                 ) : null}
               </ComponentRefRef>
             ) : null}
 
-            {!componentRef() && useBlock().children && useBlock().children.length ? (
+            {!componentRef() &&
+            useBlock().children &&
+            useBlock().children.length ? (
               <>
-                {useBlock().children?.map(child => (
+                {useBlock().children?.map((child) => (
                   <RenderBlock block={child} />
                 ))}
               </>

package/src/components/render-blocks.js

@@ -1,71 +1,47 @@
-import * as React from 'react';
-import { View, StyleSheet } from 'react-native';
-import { isEditing } from '../functions/is-editing';
-import RenderBlock from './render-block';
+import * as React from "react";
+import { View, StyleSheet } from "react-native";
+import { isEditing } from "../functions/is-editing";
+import RenderBlock from "./render-block";
 function RenderBlocks(props) {
   var _a, _b;
   function onClick() {
     var _a2, _b2;
     if (isEditing() && !((_a2 = props.blocks) == null ? void 0 : _a2.length)) {
-      (_b2 = window.parent) == null
-        ? void 0
-        : _b2.postMessage(
-            {
-              type: 'builder.clickEmptyBlocks',
-              data: {
-                parentElementId: props.parent,
-                dataPath: props.path,
-              },
-            },
-            '*'
-          );
+      (_b2 = window.parent) == null ? void 0 : _b2.postMessage({
+        type: "builder.clickEmptyBlocks",
+        data: {
+          parentElementId: props.parent,
+          dataPath: props.path
+        }
+      }, "*");
     }
   }
   function onMouseEnter() {
     var _a2, _b2;
     if (isEditing() && !((_a2 = props.blocks) == null ? void 0 : _a2.length)) {
-      (_b2 = window.parent) == null
-        ? void 0
-        : _b2.postMessage(
-            {
-              type: 'builder.hoverEmptyBlocks',
-              data: {
-                parentElementId: props.parent,
-                dataPath: props.path,
-              },
-            },
-            '*'
-          );
+      (_b2 = window.parent) == null ? void 0 : _b2.postMessage({
+        type: "builder.hoverEmptyBlocks",
+        data: {
+          parentElementId: props.parent,
+          dataPath: props.path
+        }
+      }, "*");
     }
   }
-  return /* @__PURE__ */ React.createElement(
-    View,
-    {
-      'builder-path': props.path,
-      'builder-parent-id': props.parent,
-      onClick: event => onClick,
-      onMouseEnter: event => onMouseEnter,
-      className:
-        'builder-blocks' +
-        (!((_a = props.blocks) == null ? void 0 : _a.length) ? ' no-blocks' : ''),
-      style: styles.view1,
-    },
-    props.blocks
-      ? /* @__PURE__ */ React.createElement(
-          React.Fragment,
-          null,
-          (_b = props.blocks) == null
-            ? void 0
-            : _b.map(block =>
-                /* @__PURE__ */ React.createElement(RenderBlock, {
-                  block,
-                })
-              )
-        )
-      : null
-  );
+  return /* @__PURE__ */ React.createElement(View, {
+    "builder-path": props.path,
+    "builder-parent-id": props.parent,
+    onClick: (event) => onClick,
+    onMouseEnter: (event) => onMouseEnter,
+    className: "builder-blocks" + (!((_a = props.blocks) == null ? void 0 : _a.length) ? " no-blocks" : ""),
+    style: styles.view1
+  }, props.blocks ? /* @__PURE__ */ React.createElement(React.Fragment, null, (_b = props.blocks) == null ? void 0 : _b.map((block) => /* @__PURE__ */ React.createElement(RenderBlock, {
+    block
+  }))) : null);
 }
 const styles = StyleSheet.create({
-  view1: { display: 'flex', flexDirection: 'column', alignItems: 'stretch' },
+  view1: { display: "flex", flexDirection: "column", alignItems: "stretch" }
 });
-export { RenderBlocks as default };
+export {
+  RenderBlocks as default
+};

package/src/components/render-blocks.lite.tsx

@@ -1,21 +1,21 @@
-import * as React from 'react';
-import { View, StyleSheet, Image, Text } from 'react-native';
-import { useState, useContext } from 'react';
-import { isEditing } from '../functions/is-editing';
-import RenderBlock from './render-block.lite';
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+import { useState, useContext } from "react";
+import { isEditing } from "../functions/is-editing";
+import RenderBlock from "./render-block.lite";
 
 export default function RenderBlocks(props) {
   function onClick() {
     if (isEditing() && !props.blocks?.length) {
       window.parent?.postMessage(
         {
-          type: 'builder.clickEmptyBlocks',
+          type: "builder.clickEmptyBlocks",
           data: {
             parentElementId: props.parent,
             dataPath: props.path,
           },
         },
-        '*'
+        "*"
       );
     }
   }
@@ -24,13 +24,13 @@ export default function RenderBlocks(props) {
     if (isEditing() && !props.blocks?.length) {
       window.parent?.postMessage(
         {
-          type: 'builder.hoverEmptyBlocks',
+          type: "builder.hoverEmptyBlocks",
           data: {
             parentElementId: props.parent,
             dataPath: props.path,
           },
         },
-        '*'
+        "*"
       );
     }
   }
@@ -39,14 +39,14 @@ export default function RenderBlocks(props) {
     <View
       builder-path={props.path}
       builder-parent-id={props.parent}
-      onClick={event => onClick}
-      onMouseEnter={event => onMouseEnter}
-      className={'builder-blocks' + (!props.blocks?.length ? ' no-blocks' : '')}
+      onClick={(event) => onClick}
+      onMouseEnter={(event) => onMouseEnter}
+      className={"builder-blocks" + (!props.blocks?.length ? " no-blocks" : "")}
       style={styles.view1}
     >
       {props.blocks ? (
         <>
-          {props.blocks?.map(block => (
+          {props.blocks?.map((block) => (
             <RenderBlock block={block} />
           ))}
         </>
@@ -56,5 +56,5 @@ export default function RenderBlocks(props) {
 }
 
 const styles = StyleSheet.create({
-  view1: { display: 'flex', flexDirection: 'column', alignItems: 'stretch' },
+  view1: { display: "flex", flexDirection: "column", alignItems: "stretch" },
 });

package/src/components/render-content.js

@@ -1,15 +1,15 @@
-import * as React from 'react';
-import { View, Text } from 'react-native';
-import { useState, useEffect } from 'react';
-import { isBrowser } from '../functions/is-browser';
-import RenderBlock from './render-block';
-import BuilderContext from '../context/builder.context';
-import { track } from '../functions/track';
-import { isReactNative } from '../functions/is-react-native';
-import { isEditing } from '../functions/is-editing';
-import { isPreviewing } from '../functions/is-previewing';
-import { previewingModelName } from '../functions/previewing-model-name';
-import { getContent } from '../functions/get-content';
+import * as React from "react";
+import { View, Text } from "react-native";
+import { useState, useEffect } from "react";
+import { isBrowser } from "../functions/is-browser";
+import RenderBlock from "./render-block";
+import BuilderContext from "../context/builder.context";
+import { track } from "../functions/track";
+import { isReactNative } from "../functions/is-react-native";
+import { isEditing } from "../functions/is-editing";
+import { isPreviewing } from "../functions/is-previewing";
+import { previewingModelName } from "../functions/previewing-model-name";
+import { getContent } from "../functions/get-content";
 function RenderContent(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
   function useContent() {
@@ -20,10 +20,10 @@ function RenderContent(props) {
   const [context, setContext] = useState(() => ({}));
   const [overrideContent, setOverrideContent] = useState(() => null);
   function getCssFromFont(font, data) {
-    const family = font.family + (font.kind && !font.kind.includes('#') ? ', ' + font.kind : '');
-    const name = family.split(',')[0];
+    const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
+    const name = family.split(",")[0];
     const url = font.fileUrl ? font.fileUrl : font.files && font.files.regular;
-    let str = '';
+    let str = "";
     if (url && family && name) {
       str += `
  @font-face {
@@ -56,18 +56,13 @@ function RenderContent(props) {
     return str;
   }
   function getFontCss(data) {
-    return (
-      ((data == null ? void 0 : data.customFonts) &&
-        data.customFonts.length &&
-        data.customFonts.map(font => this.getCssFromFont(font, data)).join(' ')) ||
-      ''
-    );
+    return (data == null ? void 0 : data.customFonts) && data.customFonts.length && data.customFonts.map((font) => this.getCssFromFont(font, data)).join(" ") || "";
   }
   function processMessage(event) {
     const { data } = event;
     if (data) {
       switch (data.type) {
-        case 'builder.contentUpdate': {
+        case "builder.contentUpdate": {
           const key = data.data.key || data.data.alias || data.data.entry || data.data.modelName;
           const contentData = data.data.data;
           if (key === props.model) {
@@ -75,7 +70,7 @@ function RenderContent(props) {
           }
           break;
         }
-        case 'builder.patchUpdates': {
+        case "builder.patchUpdates": {
           break;
         }
       }
@@ -84,30 +79,30 @@ function RenderContent(props) {
   useEffect(() => {
     if (isBrowser()) {
       if (isEditing()) {
-        window.addEventListener('message', processMessage);
+        window.addEventListener("message", processMessage);
       }
       if (useContent() && !isEditing()) {
-        track('impression', {
-          contentId: useContent().id,
+        track("impression", {
+          contentId: useContent().id
         });
       }
       if (isPreviewing()) {
         if (props.model && previewingModelName() === props.model) {
           const options = {};
           const currentUrl = new URL(location.href);
-          const apiKey = currentUrl.searchParams.get('apiKey');
+          const apiKey = currentUrl.searchParams.get("apiKey");
           if (apiKey) {
-            const builderPrefix = 'builder.';
+            const builderPrefix = "builder.";
             currentUrl.searchParams.forEach((value, key) => {
               if (key.startsWith(builderPrefix)) {
-                options[key.replace(builderPrefix, '')] = value;
+                options[key.replace(builderPrefix, "")] = value;
               }
             });
             getContent({
               model: props.model,
               apiKey,
-              options,
-            }).then(content => {
+              options
+            }).then((content) => {
               if (content) {
                 setOverrideContent(content);
               }
@@ -117,75 +112,32 @@ function RenderContent(props) {
       }
     }
   }, []);
-  return /* @__PURE__ */ React.createElement(
-    BuilderContext.Provider,
-    {
-      value: {
-        get content() {
-          return useContent();
-        },
-        get state() {
-          return state;
-        },
-        get context() {
-          return context;
-        },
+  return /* @__PURE__ */ React.createElement(BuilderContext.Provider, {
+    value: {
+      get content() {
+        return useContent();
       },
+      get state() {
+        return state;
+      },
+      get context() {
+        return context;
+      }
+    }
+  }, useContent() ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, {
+    onClick: (event) => {
+      if (!isEditing()) {
+        track("click", {
+          contentId: useContent().id
+        });
+      }
     },
-    useContent()
-      ? /* @__PURE__ */ React.createElement(
-          React.Fragment,
-          null,
-          /* @__PURE__ */ React.createElement(
-            View,
-            {
-              onClick: event => {
-                if (!isEditing()) {
-                  track('click', {
-                    contentId: useContent().id,
-                  });
-                }
-              },
-              'data-builder-content-id':
-                (_a = useContent == null ? void 0 : useContent()) == null ? void 0 : _a.id,
-            },
-            (((_c = (_b = useContent == null ? void 0 : useContent()) == null ? void 0 : _b.data) ==
-            null
-              ? void 0
-              : _c.cssCode) ||
-              (((_e =
-                (_d = useContent == null ? void 0 : useContent()) == null ? void 0 : _d.data) ==
-              null
-                ? void 0
-                : _e.customFonts) &&
-                ((_g =
-                  (_f = useContent == null ? void 0 : useContent()) == null ? void 0 : _f.data) ==
-                null
-                  ? void 0
-                  : _g.customFonts.length))) &&
-              !isReactNative()
-              ? /* @__PURE__ */ React.createElement(
-                  View,
-                  null,
-                  /* @__PURE__ */ React.createElement(Text, null, useContent().data.cssCode),
-                  /* @__PURE__ */ React.createElement(Text, null, getFontCss(useContent().data))
-                )
-              : null,
-            (_j =
-              (_i = (_h = useContent == null ? void 0 : useContent()) == null ? void 0 : _h.data) ==
-              null
-                ? void 0
-                : _i.blocks) == null
-              ? void 0
-              : _j.map(block =>
-                  /* @__PURE__ */ React.createElement(RenderBlock, {
-                    key: block.id,
-                    block,
-                  })
-                )
-          )
-        )
-      : null
-  );
+    "data-builder-content-id": (_a = useContent == null ? void 0 : useContent()) == null ? void 0 : _a.id
+  }, (((_c = (_b = useContent == null ? void 0 : useContent()) == null ? void 0 : _b.data) == null ? void 0 : _c.cssCode) || ((_e = (_d = useContent == null ? void 0 : useContent()) == null ? void 0 : _d.data) == null ? void 0 : _e.customFonts) && ((_g = (_f = useContent == null ? void 0 : useContent()) == null ? void 0 : _f.data) == null ? void 0 : _g.customFonts.length)) && !isReactNative() ? /* @__PURE__ */ React.createElement(View, null, /* @__PURE__ */ React.createElement(Text, null, useContent().data.cssCode), /* @__PURE__ */ React.createElement(Text, null, getFontCss(useContent().data))) : null, (_j = (_i = (_h = useContent == null ? void 0 : useContent()) == null ? void 0 : _h.data) == null ? void 0 : _i.blocks) == null ? void 0 : _j.map((block) => /* @__PURE__ */ React.createElement(RenderBlock, {
+    key: block.id,
+    block
+  })))) : null);
 }
-export { RenderContent as default };
+export {
+  RenderContent as default
+};