@builder.io/sdk-react-native 0.0.1-49 → 0.0.1-51

package/src/blocks/{form.lite.tsx → form/form.lite.tsx}

@@ -1,26 +1,27 @@
-import * as React from 'react';
-import { View, StyleSheet, Image, Text } from 'react-native';
-import { useState, useRef } from 'react';
-import RenderBlock from '../components/render-block.lite';
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+import { useState, useRef } from "react";
+import RenderBlock from "../../components/render-block/render-block.lite";
+import { isEditing } from "../../functions/is-editing.js";
 
 export default function FormComponent(props) {
-  const [state, setState] = useState(() => 'unsubmitted');
+  const [formState, setFormState] = useState(() => "unsubmitted");
 
   const [responseData, setResponseData] = useState(() => null);
 
-  const [formErrorMessage, setFormErrorMessage] = useState(() => '');
+  const [formErrorMessage, setFormErrorMessage] = useState(() => "");
 
   function submissionState() {
-    return (Builder.isEditing && props.previewState) || state;
+    return (isEditing() && props.previewState) || formState;
   }
 
   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;
       }
@@ -32,7 +33,7 @@ export default function FormComponent(props) {
       const formData = new FormData(el); // TODO: maybe support null
 
       const formPairs = Array.from(
-        event.currentTarget.querySelectorAll('input,select,textarea')
+        event.currentTarget.querySelectorAll("input,select,textarea")
       )
         .filter((el) => !!el.name)
         .map((el) => {
@@ -40,7 +41,7 @@ export default function FormComponent(props) {
           const key = el.name;
 
           if (el instanceof HTMLInputElement) {
-            if (el.type === 'radio') {
+            if (el.type === "radio") {
               if (el.checked) {
                 value = el.name;
                 return {
@@ -48,15 +49,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 {
@@ -73,8 +74,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 }) => {
@@ -83,13 +84,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
@@ -100,38 +101,38 @@ 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');
+      setFormState("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) => {
           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();
@@ -140,7 +141,7 @@ export default function FormComponent(props) {
             /* TODO: allow supplying an error formatter function */ let message =
               get(body, props.errorMessagePath);
             if (message) {
-              if (typeof message !== 'string') {
+              if (typeof message !== "string") {
                 /* TODO: ideally convert json to yaml so it woul dbe like            error: - email has been taken */ message =
                   JSON.stringify(message);
               }
@@ -148,9 +149,9 @@ export default function FormComponent(props) {
             }
           }
           setResponseData(body);
-          setState(res.ok ? 'success' : 'error');
+          setFormState(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) {
@@ -168,7 +169,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);
@@ -182,7 +183,7 @@ export default function FormComponent(props) {
           }
         },
         (err) => {
-          const submitErrorEvent = new CustomEvent('submit:error', {
+          const submitErrorEvent = new CustomEvent("submit:error", {
             detail: { error: err },
           });
           if (formRef.current) {
@@ -192,7 +193,7 @@ export default function FormComponent(props) {
             }
           }
           setResponseData(err);
-          setState('error');
+          setFormState("error");
         }
       );
     }
@@ -208,46 +209,46 @@ export default function FormComponent(props) {
       name={props.name}
       onSubmit={(event) => onSubmit(event)}
     >
-      {' '}
+      {" "}
       {props.builderBlock && props.builderBlock.children ? (
         <>
           {props.builderBlock?.children?.map((block) => (
             <RenderBlock block={block} />
           ))}
         </>
-      ) : null}{' '}
-      {submissionState() === 'error' ? (
+      ) : null}{" "}
+      {submissionState() === "error" ? (
         <>
           <BuilderBlocks dataPath="errorMessage" blocks={props.errorMessage} />
         </>
-      ) : null}{' '}
-      {submissionState() === 'sending' ? (
+      ) : null}{" "}
+      {submissionState() === "sending" ? (
         <>
           <BuilderBlocks
             dataPath="sendingMessage"
             blocks={props.sendingMessage}
           />
         </>
-      ) : null}{' '}
-      {submissionState() === 'error' && responseData ? (
+      ) : null}{" "}
+      {submissionState() === "error" && responseData ? (
         <>
           <View style={styles.view1}>
-            {' '}
-            <Text>{JSON.stringify(responseData, null, 2)}</Text>{' '}
+            {" "}
+            <Text>{JSON.stringify(responseData, null, 2)}</Text>{" "}
           </View>
         </>
-      ) : null}{' '}
-      {submissionState() === 'success' ? (
+      ) : null}{" "}
+      {submissionState() === "success" ? (
         <>
           <BuilderBlocks
             dataPath="successMessage"
             blocks={props.successMessage}
           />
         </>
-      ) : null}{' '}
+      ) : null}{" "}
     </View>
   );
 }
 const styles = StyleSheet.create({
-  view1: { padding: 10, color: 'red', textAlign: 'center' },
+  view1: { padding: 10, color: "red", textAlign: "center" },
 });

package/src/blocks/fragment/component-info.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+const componentInfo = {
+  name: "Fragment",
+  static: true,
+  hidden: true,
+  builtIn: true,
+  canHaveChildren: true,
+  noWrap: true
+};
+export {
+  componentInfo
+};

package/src/blocks/fragment/fragment.js

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { View, Text } from "react-native";
+function FragmentComponent(props) {
+  return /* @__PURE__ */ React.createElement(View, null, /* @__PURE__ */ React.createElement(Text, null, props.children));
+}
+export {
+  FragmentComponent as default
+};

package/src/blocks/{fragment.lite.tsx → fragment/fragment.lite.tsx}

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

package/src/blocks/image/component-info.js

@@ -0,0 +1,105 @@
+import * as React from 'react';
+const componentInfo = {
+  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: "image",
+      type: "file",
+      bubble: true,
+      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);              }            }          });        }"
+    },
+    {
+      name: "backgroundSize",
+      type: "text",
+      defaultValue: "cover",
+      enum: [
+        {
+          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"
+        }
+      ]
+    },
+    {
+      name: "backgroundPosition",
+      type: "text",
+      defaultValue: "center",
+      enum: [
+        "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: "height",
+      type: "number",
+      hideFromUI: true
+    },
+    {
+      name: "width",
+      type: "number",
+      hideFromUI: true
+    },
+    {
+      name: "sizes",
+      type: "string",
+      hideFromUI: true
+    },
+    {
+      name: "srcset",
+      type: "string",
+      hideFromUI: true
+    },
+    {
+      name: "lazy",
+      type: "boolean",
+      defaultValue: 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: "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
+    }
+  ]
+};
+export {
+  componentInfo
+};

package/src/blocks/image/image.js

@@ -0,0 +1,41 @@
+import * as React from 'react';
+var __defProp = Object.defineProperty;
+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;
+};
+import { Image as ReactImage, View } from "react-native";
+function Image(props) {
+  return props.aspectRatio ? /* @__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 + "%"
+    }
+  })) : /* @__PURE__ */ React.createElement(ReactImage, {
+    resizeMode: props.backgroundSize || "contain",
+    style: __spreadValues(__spreadValues({
+      position: "relative"
+    }, props.width ? { width: props.width } : {}), props.height ? { height: props.height } : {}),
+    source: { uri: props.image }
+  });
+}
+export {
+  Image as default
+};

package/src/blocks/{image.lite.tsx → image/image.lite.tsx}

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { View, StyleSheet, Image, Text } from 'react-native';
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
 
 export default function Image(props) {
   return (
@@ -8,7 +8,7 @@ export default function Image(props) {
         <View
           loading="lazy"
           alt={props.altText}
-          aria-role={props.altText ? 'presentation' : undefined}
+          role={props.altText ? "presentation" : undefined}
           style={styles.view2}
           src={props.image}
           srcset={props.srcset}
@@ -43,22 +43,22 @@ export default function Image(props) {
 }
 
 const styles = StyleSheet.create({
-  view1: { position: 'relative' },
+  view1: { position: "relative" },
   view2: {
     opacity: 1,
-    transition: 'opacity 0.2s ease-in-out',
-    position: 'absolute',
+    transition: "opacity 0.2s ease-in-out",
+    position: "absolute",
     height: 100,
     width: 100,
     top: 0,
     left: 0,
   },
-  view3: { width: 100, pointerEvents: 'none', fontSize: 0 },
+  view3: { width: 100, pointerEvents: "none", fontSize: 0 },
   view4: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'stretch',
-    position: 'absolute',
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "stretch",
+    position: "absolute",
     top: 0,
     left: 0,
     width: 100,

package/src/blocks/img/component-info.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+const componentInfo = {
+  name: "Raw:Img",
+  hideFromInsertMenu: 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",
+  inputs: [
+    {
+      name: "image",
+      bubble: true,
+      type: "file",
+      allowedFileTypes: ["jpeg", "jpg", "png", "svg"],
+      required: true
+    }
+  ],
+  noWrap: true,
+  static: true
+};
+export {
+  componentInfo
+};

package/src/blocks/img/img.js

@@ -0,0 +1,36 @@
+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";
+import { isEditing } from "../../functions/is-editing.js";
+function ImgComponent(props) {
+  return /* @__PURE__ */ React.createElement(View, __spreadProps(__spreadValues({}, props.attributes), {
+    style: {
+      objectFit: props.backgroundSize || "cover",
+      objectPosition: props.backgroundPosition || "center"
+    },
+    key: isEditing() && props.imgSrc || "default-key",
+    alt: props.altText,
+    src: props.imgSrc
+  }));
+}
+export {
+  ImgComponent as default
+};

package/src/blocks/img/img.lite.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+import { isEditing } from "../../functions/is-editing.js";
+
+export default function ImgComponent(props) {
+  return (
+    <View
+      {...props.attributes}
+      style={{
+        objectFit: props.backgroundSize || "cover",
+        objectPosition: props.backgroundPosition || "center",
+      }}
+      key={(isEditing() && props.imgSrc) || "default-key"}
+      alt={props.altText}
+      src={props.imgSrc}
+    />
+  );
+}

package/src/blocks/input/component-info.js

@@ -0,0 +1,75 @@
+import * as React from 'react';
+const componentInfo = {
+  name: "Form:Input",
+  builtIn: true,
+  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fad6f37889d9e40bbbbc72cdb5875d6ca",
+  inputs: [
+    {
+      name: "type",
+      type: "text",
+      enum: [
+        "text",
+        "number",
+        "email",
+        "url",
+        "checkbox",
+        "radio",
+        "range",
+        "date",
+        "datetime-local",
+        "search",
+        "tel",
+        "time",
+        "file",
+        "month",
+        "week",
+        "password",
+        "color",
+        "hidden"
+      ],
+      defaultValue: "text"
+    },
+    {
+      name: "name",
+      type: "string",
+      required: true,
+      helperText: 'Every input in a form needs a unique name describing what it takes, e.g. "email"'
+    },
+    {
+      name: "placeholder",
+      type: "string",
+      defaultValue: "Hello there",
+      helperText: "Text to display when there is no value"
+    },
+    {
+      name: "defaultValue",
+      type: "string"
+    },
+    {
+      name: "value",
+      type: "string",
+      advanced: true
+    },
+    {
+      name: "required",
+      type: "boolean",
+      helperText: "Is this input required to be filled out to submit a form",
+      defaultValue: false
+    }
+  ],
+  noWrap: true,
+  static: true,
+  defaultStyles: {
+    paddingTop: "10px",
+    paddingBottom: "10px",
+    paddingLeft: "10px",
+    paddingRight: "10px",
+    borderRadius: "3px",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: "#ccc"
+  }
+};
+export {
+  componentInfo
+};