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

package/src/blocks/form.lite.tsx

@@ -1,30 +1,26 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import { useState, useContext, useRef } from "react";
-import { BuilderBlockComponent as BuilderBlock } from "@dummy";
-import { Builder, builder } from "@builder.io/sdk";
-import { BuilderBlocks } from "@dummy";
-import { set } from "@dummy";
-import { get } from "@dummy";
+import * as React from 'react';
+import { View, StyleSheet, Image, Text } from 'react-native';
+import { useState, useContext, useRef } from 'react';
+import RenderBlock from '../components/render-block.lite';
 
 export default function FormComponent(props) {
-  const [state, setState] = useState(() => "unsubmitted");
+  const [state, setState] = useState(() => 'unsubmitted');
 
   const [responseData, setResponseData] = useState(() => null);
 
-  const [formErrorMessage, setFormErrorMessage] = useState(() => "");
+  const [formErrorMessage, setFormErrorMessage] = useState(() => '');
 
   function submissionState() {
     return (Builder.isEditing && props.previewState) || state;
   }
 
   function onSubmit(event) {
-    const sendWithJs = props.sendWithJs || props.sendSubmissionsTo === "email";
+    const sendWithJs = props.sendWithJs || props.sendSubmissionsTo === 'email';
 
-    if (props.sendSubmissionsTo === "zapier") {
+    if (props.sendSubmissionsTo === 'zapier') {
       event.preventDefault();
     } else if (sendWithJs) {
-      if (!(props.action || props.sendSubmissionsTo === "email")) {
+      if (!(props.action || props.sendSubmissionsTo === 'email')) {
         event.preventDefault();
         return;
       }
@@ -35,16 +31,14 @@ export default function FormComponent(props) {
       let body;
       const formData = new FormData(el); // TODO: maybe support null
 
-      const formPairs = Array.from(
-        event.currentTarget.querySelectorAll("input,select,textarea")
-      )
-        .filter((el) => !!el.name)
-        .map((el) => {
+      const formPairs = Array.from(event.currentTarget.querySelectorAll('input,select,textarea'))
+        .filter(el => !!el.name)
+        .map(el => {
           let value;
           const key = el.name;
 
           if (el instanceof HTMLInputElement) {
-            if (el.type === "radio") {
+            if (el.type === 'radio') {
               if (el.checked) {
                 value = el.name;
                 return {
@@ -52,15 +46,15 @@ export default function FormComponent(props) {
                   value,
                 };
               }
-            } else if (el.type === "checkbox") {
+            } else if (el.type === 'checkbox') {
               value = el.checked;
-            } else if (el.type === "number" || el.type === "range") {
+            } else if (el.type === 'number' || el.type === 'range') {
               const num = el.valueAsNumber;
 
               if (!isNaN(num)) {
                 value = num;
               }
-            } else if (el.type === "file") {
+            } else if (el.type === 'file') {
               // TODO: one vs multiple files
               value = el.files;
             } else {
@@ -77,8 +71,8 @@ export default function FormComponent(props) {
         });
       let contentType = props.contentType;
 
-      if (props.sendSubmissionsTo === "email") {
-        contentType = "multipart/form-data";
+      if (props.sendSubmissionsTo === 'email') {
+        contentType = 'multipart/form-data';
       }
 
       Array.from(formPairs).forEach(({ value }) => {
@@ -87,13 +81,13 @@ export default function FormComponent(props) {
           (Array.isArray(value) && value[0] instanceof File) ||
           value instanceof FileList
         ) {
-          contentType = "multipart/form-data";
+          contentType = 'multipart/form-data';
         }
       }); // TODO: send as urlEncoded or multipart by default
       // because of ease of use and reliability in browser API
       // for encoding the form?
 
-      if (contentType !== "application/json") {
+      if (contentType !== 'application/json') {
         body = formData;
       } else {
         // Json
@@ -104,57 +98,60 @@ export default function FormComponent(props) {
         body = JSON.stringify(json);
       }
 
-      if (contentType && contentType !== "multipart/form-data") {
+      if (contentType && contentType !== 'multipart/form-data') {
         if (
           /* Zapier doesn't allow content-type header to be sent from browsers */ !(
-            sendWithJs && props.action?.includes("zapier.com")
+            sendWithJs && props.action?.includes('zapier.com')
           )
         ) {
-          headers["content-type"] = contentType;
+          headers['content-type'] = contentType;
         }
       }
-      const presubmitEvent = new CustomEvent("presubmit", { detail: { body } });
+      const presubmitEvent = new CustomEvent('presubmit', { detail: { body } });
       if (formRef.current) {
         formRef.current.dispatchEvent(presubmitEvent);
         if (presubmitEvent.defaultPrevented) {
           return;
         }
       }
-      setState("sending");
+      setState('sending');
       const formUrl = `${
-        builder.env === "dev" ? "http://localhost:5000" : "https://builder.io"
+        builder.env === 'dev' ? 'http://localhost:5000' : 'https://builder.io'
       }/api/v1/form-submit?apiKey=${builder.apiKey}&to=${btoa(
-        props.sendSubmissionsToEmail || ""
-      )}&name=${encodeURIComponent(props.name || "")}`;
+        props.sendSubmissionsToEmail || ''
+      )}&name=${encodeURIComponent(props.name || '')}`;
       fetch(
-        props.sendSubmissionsTo === "email"
+        props.sendSubmissionsTo === 'email'
           ? formUrl
           : props.action /* TODO: throw error if no action URL */,
-        { body, headers, method: props.method || "post" }
+        { body, headers, method: props.method || 'post' }
       ).then(
-        async (res) => {
+        async res => {
           let body;
-          const contentType = res.headers.get("content-type");
-          if (contentType && contentType.indexOf("application/json") !== -1) {
+          const contentType = res.headers.get('content-type');
+          if (contentType && contentType.indexOf('application/json') !== -1) {
             body = await res.json();
           } else {
             body = await res.text();
           }
           if (!res.ok && props.errorMessagePath) {
-            /* TODO: allow supplying an error formatter function */ let message =
-              get(body, props.errorMessagePath);
+            /* TODO: allow supplying an error formatter function */ let message = get(
+              body,
+              props.errorMessagePath
+            );
             if (message) {
-              if (typeof message !== "string") {
-                /* TODO: ideally convert json to yaml so it woul dbe like             error: - email has been taken */ message =
-                  JSON.stringify(message);
+              if (typeof message !== 'string') {
+                /* TODO: ideally convert json to yaml so it woul dbe like             error: - email has been taken */ message = JSON.stringify(
+                  message
+                );
               }
               setFormErrorMessage(message);
             }
           }
           setResponseData(body);
-          setState(res.ok ? "success" : "error");
+          setState(res.ok ? 'success' : 'error');
           if (res.ok) {
-            const submitSuccessEvent = new CustomEvent("submit:success", {
+            const submitSuccessEvent = new CustomEvent('submit:success', {
               detail: { res, body },
             });
             if (formRef.current) {
@@ -162,9 +159,7 @@ export default function FormComponent(props) {
               if (submitSuccessEvent.defaultPrevented) {
                 return;
               }
-              /* TODO: option to turn this on/off? */ if (
-                props.resetFormOnSubmit !== false
-              ) {
+              /* TODO: option to turn this on/off? */ if (props.resetFormOnSubmit !== false) {
                 formRef.current.reset();
               }
             }
@@ -172,7 +167,7 @@ export default function FormComponent(props) {
               props.successUrl
             ) {
               if (formRef.current) {
-                const event = new CustomEvent("route", {
+                const event = new CustomEvent('route', {
                   detail: { url: props.successUrl },
                 });
                 formRef.current.dispatchEvent(event);
@@ -185,8 +180,8 @@ export default function FormComponent(props) {
             }
           }
         },
-        (err) => {
-          const submitErrorEvent = new CustomEvent("submit:error", {
+        err => {
+          const submitErrorEvent = new CustomEvent('submit:error', {
             detail: { error: err },
           });
           if (formRef.current) {
@@ -196,7 +191,7 @@ export default function FormComponent(props) {
             }
           }
           setResponseData(err);
-          setState("error");
+          setState('error');
         }
       );
     }
@@ -210,48 +205,42 @@ export default function FormComponent(props) {
       action={!props.sendWithJs && props.action}
       method={props.method}
       name={props.name}
-      onSubmit={(event) => onSubmit(event)}
+      onSubmit={event => onSubmit(event)}
     >
-      {" "}
-      {props.builderBlock && props.builderBlock.children && (
+      {' '}
+      {props.builderBlock && props.builderBlock.children ? (
         <>
-          {props.builderBlock?.children?.map((block) => (
-            <BuilderBlockComponent block={block} />
+          {props.builderBlock?.children?.map(block => (
+            <RenderBlock block={block} />
           ))}
         </>
-      )}{" "}
-      {submissionState() === "error" && (
+      ) : null}{' '}
+      {submissionState() === 'error' ? (
         <>
           <BuilderBlocks dataPath="errorMessage" blocks={props.errorMessage} />
         </>
-      )}{" "}
-      {submissionState() === "sending" && (
+      ) : null}{' '}
+      {submissionState() === 'sending' ? (
         <>
-          <BuilderBlocks
-            dataPath="sendingMessage"
-            blocks={props.sendingMessage}
-          />
+          <BuilderBlocks dataPath="sendingMessage" blocks={props.sendingMessage} />
         </>
-      )}{" "}
-      {submissionState() === "error" && responseData && (
+      ) : null}{' '}
+      {submissionState() === 'error' && responseData ? (
         <>
           <View className="builder-form-error-text" style={styles.view1}>
-            {" "}
-            <Text>{JSON.stringify(responseData, null, 2)}</Text>{" "}
+            {' '}
+            <Text>{JSON.stringify(responseData, null, 2)}</Text>{' '}
           </View>
         </>
-      )}{" "}
-      {submissionState() === "success" && (
+      ) : null}{' '}
+      {submissionState() === 'success' ? (
         <>
-          <BuilderBlocks
-            dataPath="successMessage"
-            blocks={props.successMessage}
-          />
+          <BuilderBlocks dataPath="successMessage" blocks={props.successMessage} />
         </>
-      )}{" "}
+      ) : null}{' '}
     </View>
   );
 }
 const styles = StyleSheet.create({
-  view1: { padding: 10, color: "red", textAlign: "center" },
+  view1: { padding: 10, color: 'red', textAlign: 'center' },
 });

package/src/blocks/fragment.js

@@ -1,16 +1,21 @@
 import { registerComponent } from '../functions/register-component';
 
-        import * as React from "react";
-import RenderBlocks from "../components/render-blocks";
+import * as React from 'react';
+import { View, Text } from 'react-native';
 function FragmentComponent(props) {
-return /* @__PURE__ */ React.createElement(RenderBlocks, {
-  path: "children",
-  blocks: props.children
-});
+  return /* @__PURE__ */ React.createElement(
+    View,
+    null,
+    /* @__PURE__ */ React.createElement(Text, null, props.children)
+  );
 }
-export {
-FragmentComponent as default
-};
-
+export { FragmentComponent as default };
 
-        registerComponent(FragmentComponent, {name:'Fragment',static:true,hidden:true,canHaveChildren:true,noWrap:true});
+registerComponent(FragmentComponent, {
+  name: 'Fragment',
+  static: true,
+  hidden: true,
+  builtIn: true,
+  canHaveChildren: true,
+  noWrap: true,
+});

package/src/blocks/fragment.lite.tsx

@@ -1,8 +1,11 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import { useContext } from "react";
-import RenderBlocks from "../components/render-blocks.lite";
+import * as React from 'react';
+import { View, StyleSheet, Image, Text } from 'react-native';
+import { useContext } from 'react';
 
 export default function FragmentComponent(props) {
-  return <RenderBlocks path="children" blocks={props.children} />;
+  return (
+    <View>
+      <Text>{props.children}</Text>
+    </View>
+  );
 }

package/src/blocks/image.js

@@ -1,120 +1,129 @@
 import * as React from 'react';
-import { Image as ReactImage, View } from "react-native";
-import { registerComponent } from "../functions/register-component";
+import { Image as ReactImage, View } from 'react-native';
+import { registerComponent } from '../functions/register-component';
 function Image(props) {
-  return /* @__PURE__ */ React.createElement(View, {
-    style: { position: "relative" }
-  }, /* @__PURE__ */ React.createElement(ReactImage, {
-    resizeMode: props.backgroundSize || "contain",
-    style: { position: "absolute", top: 0, bottom: 0, left: 0, right: 0 },
-    source: { uri: props.image }
-  }), /* @__PURE__ */ React.createElement(View, {
-    style: {
-      width: "100%",
-      paddingTop: props.aspectRatio * 100 + "%"
-    }
-  }));
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: { position: 'relative' },
+    },
+    /* @__PURE__ */ React.createElement(ReactImage, {
+      resizeMode: props.backgroundSize || 'contain',
+      style: { position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 },
+      source: { uri: props.image },
+    }),
+    /* @__PURE__ */ React.createElement(View, {
+      style: {
+        width: '100%',
+        paddingTop: props.aspectRatio * 100 + '%',
+      },
+    })
+  );
 }
 registerComponent(Image, {
-  name: "Image",
+  name: 'Image',
   static: 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",
+  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"
+    position: 'relative',
+    minHeight: '20px',
+    minWidth: '20px',
+    overflow: 'hidden',
   },
   canHaveChildren: true,
   inputs: [
     {
-      name: "image",
-      type: "file",
+      name: 'image',
+      type: 'file',
       bubble: true,
-      allowedFileTypes: ["jpeg", "jpg", "png", "svg"],
+      allowedFileTypes: ['jpeg', 'jpg', 'png', 'svg'],
       required: true,
-      defaultValue: "https://cdn.builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
-      onChange: "        const DEFAULT_ASPECT_RATIO = 0.7041;        options.delete('srcset');        options.delete('noWebp');        function loadImage(url, timeout) {          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) {          return Math.round(num * 1000) / 1000;        }        const value = options.get('image');        const aspectRatio = options.get('aspectRatio');        // For SVG images - don't render as webp, keep them as SVG        fetch(value)          .then(res => res.blob())          .then(blob => {            if (blob.type.includes('svg')) {              options.set('noWebp', true);            }          });        if (value && (!aspectRatio || aspectRatio === DEFAULT_ASPECT_RATIO)) {          return loadImage(value).then(img => {            const possiblyUpdatedAspectRatio = options.get('aspectRatio');            if (              options.get('image') === value &&              (!possiblyUpdatedAspectRatio || possiblyUpdatedAspectRatio === DEFAULT_ASPECT_RATIO)            ) {              if (img.width && img.height) {                options.set('aspectRatio', round(img.height / img.width));                options.set('height', img.height);                options.set('width', img.width);              }            }          });        }"
+      defaultValue:
+        'https://cdn.builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
+      onChange:
+        "        const DEFAULT_ASPECT_RATIO = 0.7041;        options.delete('srcset');        options.delete('noWebp');        function loadImage(url, timeout) {          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) {          return Math.round(num * 1000) / 1000;        }        const value = options.get('image');        const aspectRatio = options.get('aspectRatio');        // For SVG images - don't render as webp, keep them as SVG        fetch(value)          .then(res => res.blob())          .then(blob => {            if (blob.type.includes('svg')) {              options.set('noWebp', true);            }          });        if (value && (!aspectRatio || aspectRatio === DEFAULT_ASPECT_RATIO)) {          return loadImage(value).then(img => {            const possiblyUpdatedAspectRatio = options.get('aspectRatio');            if (              options.get('image') === value &&              (!possiblyUpdatedAspectRatio || possiblyUpdatedAspectRatio === DEFAULT_ASPECT_RATIO)            ) {              if (img.width && img.height) {                options.set('aspectRatio', round(img.height / img.width));                options.set('height', img.height);                options.set('width', img.width);              }            }          });        }",
     },
     {
-      name: "backgroundSize",
-      type: "text",
-      defaultValue: "cover",
+      name: 'backgroundSize',
+      type: 'text',
+      defaultValue: 'cover',
       enum: [
         {
-          label: "contain",
-          value: "contain",
-          helperText: "The image should never get cropped"
+          label: 'contain',
+          value: 'contain',
+          helperText: 'The image should never get cropped',
         },
         {
-          label: "cover",
-          value: "cover",
-          helperText: `The image should fill it's box, cropping when needed`
-        }
-      ]
+          label: 'cover',
+          value: 'cover',
+          helperText: `The image should fill it's box, cropping when needed`,
+        },
+      ],
     },
     {
-      name: "backgroundPosition",
-      type: "text",
-      defaultValue: "center",
+      name: 'backgroundPosition',
+      type: 'text',
+      defaultValue: 'center',
       enum: [
-        "center",
-        "top",
-        "left",
-        "right",
-        "bottom",
-        "top left",
-        "top right",
-        "bottom left",
-        "bottom right"
-      ]
+        'center',
+        'top',
+        'left',
+        'right',
+        'bottom',
+        'top left',
+        'top right',
+        'bottom left',
+        'bottom right',
+      ],
     },
     {
-      name: "altText",
-      type: "string",
-      helperText: "Text to display when the user has images off"
+      name: 'altText',
+      type: 'string',
+      helperText: 'Text to display when the user has images off',
     },
     {
-      name: "height",
-      type: "number",
-      hideFromUI: true
+      name: 'height',
+      type: 'number',
+      hideFromUI: true,
     },
     {
-      name: "width",
-      type: "number",
-      hideFromUI: true
+      name: 'width',
+      type: 'number',
+      hideFromUI: true,
     },
     {
-      name: "sizes",
-      type: "string",
-      hideFromUI: true
+      name: 'sizes',
+      type: 'string',
+      hideFromUI: true,
     },
     {
-      name: "srcset",
-      type: "string",
-      hideFromUI: true
+      name: 'srcset',
+      type: 'string',
+      hideFromUI: true,
     },
     {
-      name: "lazy",
-      type: "boolean",
+      name: 'lazy',
+      type: 'boolean',
       defaultValue: true,
-      hideFromUI: true
+      hideFromUI: true,
     },
     {
-      name: "fitContent",
-      type: "boolean",
-      helperText: "When child blocks are provided, fit to them instead of using the image's aspect ratio",
-      defaultValue: true
+      name: 'fitContent',
+      type: 'boolean',
+      helperText:
+        "When child blocks are provided, fit to them instead of using the image's aspect ratio",
+      defaultValue: true,
     },
     {
-      name: "aspectRatio",
-      type: "number",
-      helperText: "This is the ratio of height/width, e.g. set to 1.5 for a 300px wide and 200px tall photo. Set to 0 to not force the image to maintain it's aspect ratio",
+      name: 'aspectRatio',
+      type: 'number',
+      helperText:
+        "This is the ratio of height/width, e.g. set to 1.5 for a 300px wide and 200px tall photo. Set to 0 to not force the image to maintain it's aspect ratio",
       advanced: true,
-      defaultValue: 0.7041
-    }
-  ]
+      defaultValue: 0.7041,
+    },
+  ],
 });
-export {
-  Image as default
-};
+export { Image as default };