@builder.io/sdk-react-native 0.0.1-22 → 0.0.1-26

package/src/blocks/textarea.lite.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import { useContext } from "react";
+import * as React from 'react';
+import { View, StyleSheet, Image, Text } from 'react-native';
+import { useContext } from 'react';
 
 export default function Textarea(props) {
   return (

package/src/blocks/video.js

@@ -1,49 +1,115 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import ReactVideo from 'react-native-video';
 import { registerComponent } from '../functions/register-component';
-
-        var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-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 __spreadValues = (a, b) => {
-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]);
-  }
-return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import * as React from "react";
-import { View } from "react-native";
 function Video(props) {
-var _a;
-return /* @__PURE__ */ React.createElement(View, __spreadProps(__spreadValues({}, props.attributes), {
-  preload: "none",
-  style: __spreadProps(__spreadValues({
-    width: "100%",
-    height: "100%"
-  }, (_a = props.attributes) == null ? void 0 : _a.style), {
-    objectFit: props.fit,
-    objectPosition: props.position,
-    borderRadius: 1
-  }),
-  key: props.video || "no-src",
-  poster: props.posterImage,
-  autoPlay: props.autoPlay,
-  muted: props.muted,
-  controls: props.controls,
-  loop: props.loop
-}));
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: { position: 'relative' },
+    },
+    /* @__PURE__ */ React.createElement(ReactVideo, {
+      paused: !props.autoPlay,
+      controls: props.controls,
+      muted: props.muted,
+      repeat: props.loop,
+      poster: props.posterImage,
+      posterResizeMode: props.fit || 'contain',
+      resizeMode: props.fit || 'contain',
+      style: { position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 },
+      source: { uri: props.video },
+    }),
+    /* @__PURE__ */ React.createElement(View, {
+      style: {
+        width: '100%',
+        paddingTop: props.aspectRatio * 100 + '%',
+      },
+    })
+  );
 }
-export {
-Video as default
-};
-
-
-        registerComponent(Video, {name:'Video',canHaveChildren:true,defaultStyles:{minHeight:'20px',minWidth:'20px'},image:'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-videocam-24px%20(1).svg?alt=media&token=49a84e4a-b20e-4977-a650-047f986874bb',inputs:[{name:'video',type:'file',allowedFileTypes:['mp4'],bubble:true,defaultValue:'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f',required:true,onChange:"        const 0.7004048582995948 = 0.7004048582995948;        function loadImage(url: string, timeout = 60000): Promise<HTMLImageElement> {          return new Promise((resolve, reject) => {            const img = document.createElement('img');            let loaded = false;            img.onload = () => {              loaded = true;              resolve(img);            };            img.addEventListener('error', event => {              console.warn('Image load failed', event.error);              reject(event.error);            });            img.src = url;            setTimeout(() => {              if (!loaded) {                reject(new Error('Image load timed out'));              }            }, timeout);          });        }        function round(num: number) {          return Math.round(num * 1000) / 1000;        }        // TODO        const value = options.get('image');        const aspectRatio = options.get('aspectRatio');        if (value && (!aspectRatio || aspectRatio === 0.7004048582995948)) {          return loadImage(value).then(img => {            const possiblyUpdatedAspectRatio = options.get('aspectRatio');            if (              options.get('image') === value &&              (!possiblyUpdatedAspectRatio || possiblyUpdatedAspectRatio === 0.7004048582995948)            ) {              if (img.width && img.height) {                options.set('aspectRatio', round(img.height / img.width));              }            }          });        }      "},{name:'posterImage',type:'file',allowedFileTypes:['jpeg','png'],helperText:'Image to show before the video plays'},{name:'autoPlay',type:'boolean',defaultValue:true},{name:'controls',type:'boolean',defaultValue:false},{name:'muted',type:'boolean',defaultValue:true},{name:'loop',type:'boolean',defaultValue:true},{name:'playsInline',type:'boolean',defaultValue:true},{name:'fit',type:'text',defaultValue:'cover',enum:['contain','cover','fill','auto']},{name:'fitContent',type:'boolean',helperText:'When child blocks are provided, fit to them instead of using the aspect ratio',defaultValue:true,advanced:true},{name:'position',type:'text',defaultValue:'center',enum:['center','top','left','right','bottom','top left','top right','bottom left','bottom right']},{name:'height',type:'number',advanced:true},{name:'width',type:'number',advanced:true},{name:'aspectRatio',type:'number',advanced:true,defaultValue:0.7004048582995948},{name:'lazyLoad',type:'boolean',helperText:'Load this video "lazily" - as in only when a user scrolls near the video. Recommended for optmized performance and bandwidth consumption',defaultValue:true,advanced:true}]});
+registerComponent(Image, {
+  name: 'Image',
+  static: true,
+  builtIn: 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',
+  defaultStyles: {
+    position: 'relative',
+    minHeight: '20px',
+    minWidth: '20px',
+    overflow: 'hidden',
+  },
+  canHaveChildren: true,
+  inputs: [
+    {
+      name: 'video',
+      type: 'file',
+      allowedFileTypes: ['mp4'],
+      bubble: true,
+      defaultValue:
+        'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f',
+      required: true,
+    },
+    {
+      name: 'posterImage',
+      type: 'file',
+      allowedFileTypes: ['jpeg', 'png'],
+      helperText: 'Image to show before the video plays',
+    },
+    {
+      name: 'posterImage',
+      type: 'file',
+      allowedFileTypes: ['jpeg', 'png'],
+      helperText: 'Image to show before the video plays',
+    },
+    {
+      name: 'autoPlay',
+      type: 'boolean',
+      defaultValue: true,
+    },
+    {
+      name: 'controls',
+      type: 'boolean',
+      defaultValue: false,
+    },
+    {
+      name: 'muted',
+      type: 'boolean',
+      defaultValue: true,
+    },
+    {
+      name: 'loop',
+      type: 'boolean',
+      defaultValue: true,
+    },
+    {
+      name: 'fit',
+      type: 'text',
+      defaultValue: 'cover',
+      enum: ['contain', 'cover', 'stretch'],
+    },
+    {
+      name: 'position',
+      type: 'text',
+      defaultValue: 'center',
+      enum: [
+        'center',
+        'top',
+        'left',
+        'right',
+        'bottom',
+        'top left',
+        'top right',
+        'bottom left',
+        'bottom right',
+      ],
+    },
+    {
+      name: 'aspectRatio',
+      type: 'number',
+      advanced: true,
+      defaultValue: 0.7004048582995948,
+    },
+  ],
+});
+export { Video as default };

package/src/blocks/video.lite.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import { useContext } from "react";
+import * as React from 'react';
+import { View, StyleSheet, Image, Text } from 'react-native';
+import { useContext } from 'react';
 
 export default function Video(props) {
   return (
@@ -8,8 +8,8 @@ export default function Video(props) {
       {...props.attributes}
       preload="none"
       style={{
-        width: "100%",
-        height: "100%",
+        width: '100%',
+        height: '100%',
         ...props.attributes?.style,
         objectFit: props.fit,
         objectPosition: props.position,
@@ -17,7 +17,7 @@ export default function Video(props) {
         // not have the video overflow
         borderRadius: 1,
       }}
-      key={props.video || "no-src"}
+      key={props.video || 'no-src'}
       poster={props.posterImage}
       autoPlay={props.autoPlay}
       muted={props.muted}

package/src/components/block-styles.js

@@ -1,7 +1,5 @@
-import * as React from "react";
+import * as React from 'react';
 function BlockStyles(props) {
   return /* @__PURE__ */ React.createElement(React.Fragment, null);
 }
-export {
-  BlockStyles as default
-};
+export { BlockStyles as default };

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

@@ -1,6 +1,6 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import { useContext } from "react";
+import * as React from 'react';
+import { View, StyleSheet, Image, Text } from 'react-native';
+import { useContext } from 'react';
 
 export default function BlockStyles(props) {
   return <></>;

package/src/components/error-boundary.js

@@ -1,5 +1,5 @@
-import React from "react";
-import { Text } from "react-native";
+import React from 'react';
+import { Text } from 'react-native';
 class ErrorBoundary extends React.Component {
   constructor(props) {
     super(props);
@@ -9,17 +9,19 @@ class ErrorBoundary extends React.Component {
     return { hasError: true };
   }
   componentDidCatch(error, errorInfo) {
-    console.error("Error rendering Builder.io block", error, errorInfo);
+    console.error('Error rendering Builder.io block', error, errorInfo);
   }
   render() {
     if (this.state.hasError) {
-      return /* @__PURE__ */ React.createElement(Text, {
-        style: { color: "gray" }
-      }, "Error rendering Builder.io block");
+      return /* @__PURE__ */ React.createElement(
+        Text,
+        {
+          style: { color: 'gray' },
+        },
+        'Error rendering Builder.io block'
+      );
     }
     return this.props.children;
   }
 }
-export {
-  ErrorBoundary as default
-};
+export { ErrorBoundary as default };

package/src/components/error-boundary.lite.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import { useContext } from "react";
+import * as React from 'react';
+import { View, StyleSheet, Image, Text } from 'react-native';
+import { useContext } from 'react';
 
 export default function ErrorBoundary(props) {
   return <></>;

package/src/components/render-block.js

@@ -4,39 +4,40 @@ 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 * 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;
+  var _a, _b, _c;
   function component() {
-    var _a2, _b;
+    var _a2, _b2;
     const componentName = (_a2 = useBlock().component) == null ? void 0 : _a2.name;
     if (!componentName) {
       return null;
     }
-    const ref = components[(_b = useBlock().component) == null ? void 0 : _b.name];
+    const ref = components[(_b2 = useBlock().component) == null ? void 0 : _b2.name];
     if (componentName && !ref) {
       console.warn(`
         Could not find a registered component named "${componentName}". 
@@ -62,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() {
@@ -79,19 +80,71 @@ function RenderBlock(props) {
     return getBlockComponentOptions(useBlock());
   }
   const builderContext = useContext(BuilderContext);
-  const TagNameRef = tagName();
   const ComponentRefRef = componentRef();
-  return /* @__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(),
-    children: useBlock().children
-  })), !componentRef() && useBlock().children && useBlock().children.length && /* @__PURE__ */ React.createElement(React.Fragment, null, (_a = useBlock().children) == null ? void 0 : _a.map((child) => /* @__PURE__ */ React.createElement(RenderBlock, {
-    block: child
-  })))));
+  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,
+            }
+          )
+        )
+  );
 }
-export {
-  RenderBlock as default
-};
+export { RenderBlock as default };

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

@@ -1,15 +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 * 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() {
@@ -73,30 +74,44 @@ export default function RenderBlock(props) {
 
   const builderContext = useContext(BuilderContext);
 
-  const TagNameRef = tagName();
   const ComponentRefRef = componentRef();
+  const TagNameRef = tagName();
 
   return (
     <>
-      <TagNameRef {...properties()} style={css()}>
-        <BlockStyles block={useBlock()} />
-
-        {componentRef() && (
-          <ComponentRefRef
-            {...componentOptions()}
-            builderBlock={useBlock()}
-            children={useBlock().children}
-          />
-        )}
-
-        {!componentRef() && useBlock().children && useBlock().children.length && (
-          <>
-            {useBlock().children?.map((child) => (
-              <RenderBlock block={child} />
-            ))}
-          </>
-        )}
-      </TagNameRef>
+      {!componentInfo?.()?.noWrap ? (
+        <>
+          <TagNameRef {...properties()} style={css()}>
+            <BlockStyles block={useBlock()} />
+
+            {componentRef() ? (
+              <ComponentRefRef {...componentOptions()} builderBlock={useBlock()}>
+                {useBlock().children ? (
+                  <>
+                    <RenderBlocks path="children" blocks={useBlock().children} />
+                  </>
+                ) : null}
+              </ComponentRefRef>
+            ) : null}
+
+            {!componentRef() && useBlock().children && useBlock().children.length ? (
+              <>
+                {useBlock().children?.map(child => (
+                  <RenderBlock block={child} />
+                ))}
+              </>
+            ) : null}
+          </TagNameRef>
+        </>
+      ) : (
+        <ComponentRefRef
+          {...componentInfo?.()?.options}
+          attributes={properties()}
+          builderBlock={useBlock()}
+          style={css()}
+          children={useBlock().children}
+        />
+      )}
     </>
   );
 }