@builder.io/sdk-react-native 0.4.4 → 0.5.0

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

@@ -9,180 +9,75 @@ const componentInfo = {
     }
   },
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fef36d2a846134910b64b88e6d18c5ca5",
-  inputs: [
-    {
-      name: "sendSubmissionsTo",
-      type: "string",
-      enum: [
-        {
-          label: "Send to email",
-          value: "email",
-          helperText: "Send form submissions to the email address of your choosing"
-        },
-        {
-          label: "Custom",
-          value: "custom",
-          helperText: "Handle where the form requests go manually with a little code, e.g. to your own custom backend"
-        }
-      ],
-      defaultValue: "email"
-    },
-    {
-      name: "sendSubmissionsToEmail",
-      type: "string",
-      required: true,
-      defaultValue: "your@email.com",
-      showIf: 'options.get("sendSubmissionsTo") === "email"'
-    },
-    {
-      name: "sendWithJs",
-      type: "boolean",
-      helperText: "Set to false to use basic html form action",
-      defaultValue: true,
-      showIf: 'options.get("sendSubmissionsTo") === "custom"'
-    },
-    {
-      name: "name",
-      type: "string",
-      defaultValue: "My form"
-    },
-    {
-      name: "action",
-      type: "string",
-      helperText: "URL to send the form data to",
-      showIf: 'options.get("sendSubmissionsTo") === "custom"'
-    },
-    {
-      name: "contentType",
-      type: "string",
-      defaultValue: "application/json",
-      advanced: true,
-      enum: [
-        "application/json",
-        "multipart/form-data",
-        "application/x-www-form-urlencoded"
-      ],
-      showIf: 'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true'
-    },
-    {
-      name: "method",
-      type: "string",
-      showIf: 'options.get("sendSubmissionsTo") === "custom"',
-      defaultValue: "POST",
-      advanced: true
-    },
-    {
-      name: "previewState",
-      type: "string",
-      enum: ["unsubmitted", "sending", "success", "error"],
-      defaultValue: "unsubmitted",
-      helperText: 'Choose a state to edit, e.g. choose "success" to show what users see on success and edit the message',
-      showIf: 'options.get("sendSubmissionsTo") !== "zapier" && options.get("sendWithJs") === true'
-    },
-    {
-      name: "successUrl",
-      type: "url",
-      helperText: "Optional URL to redirect the user to on form submission success",
-      showIf: 'options.get("sendSubmissionsTo") !== "zapier" && options.get("sendWithJs") === true'
-    },
-    {
-      name: "resetFormOnSubmit",
-      type: "boolean",
-      showIf: "options.get('sendSubmissionsTo') === 'custom' && options.get('sendWithJs') === true",
-      advanced: true
-    },
-    {
-      name: "successMessage",
-      type: "uiBlocks",
-      hideFromUI: true,
-      defaultValue: [
-        {
-          "@type": "@builder.io/sdk:Element",
-          responsiveStyles: {
-            large: {
-              marginTop: "10px"
-            }
-          },
-          component: {
-            name: "Text",
-            options: {
-              text: "<span>Thanks!</span>"
-            }
-          }
-        }
-      ]
-    },
-    {
-      name: "validate",
-      type: "boolean",
-      defaultValue: true,
-      advanced: true
-    },
-    {
-      name: "errorMessagePath",
-      type: "text",
-      advanced: true,
-      helperText: 'Path to where to get the error message from in a JSON response to display to the user, e.g. "error.message" for a response like { "error": { "message": "this username is taken" }}'
-    },
-    {
-      name: "errorMessage",
-      type: "uiBlocks",
-      hideFromUI: true,
-      defaultValue: [
-        {
-          "@type": "@builder.io/sdk:Element",
-          responsiveStyles: {
-            large: {
-              marginTop: "10px"
-            }
-          },
-          bindings: {
-            "component.options.text": "state.formErrorMessage || block.component.options.text"
-          },
-          component: {
-            name: "Text",
-            options: {
-              text: "<span>Form submission error :( Please check your answers and try again</span>"
-            }
-          }
-        }
-      ]
-    },
-    {
-      name: "sendingMessage",
-      type: "uiBlocks",
-      hideFromUI: true,
-      defaultValue: [
-        {
-          "@type": "@builder.io/sdk:Element",
-          responsiveStyles: {
-            large: {
-              marginTop: "10px"
-            }
-          },
-          component: {
-            name: "Text",
-            options: {
-              text: "<span>Sending...</span>"
-            }
-          }
-        }
-      ]
-    },
-    {
-      name: "customHeaders",
-      type: "map",
-      valueType: {
-        type: "string"
-      },
-      advanced: true,
-      showIf: 'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true'
-    }
-  ],
-  noWrap: true,
-  canHaveChildren: true,
-  defaultChildren: [
-    {
+  inputs: [{
+    name: "sendSubmissionsTo",
+    type: "string",
+    enum: [{
+      label: "Send to email",
+      value: "email",
+      helperText: "Send form submissions to the email address of your choosing"
+    }, {
+      label: "Custom",
+      value: "custom",
+      helperText: "Handle where the form requests go manually with a little code, e.g. to your own custom backend"
+    }],
+    defaultValue: "email"
+  }, {
+    name: "sendSubmissionsToEmail",
+    type: "string",
+    required: true,
+    defaultValue: "your@email.com",
+    showIf: 'options.get("sendSubmissionsTo") === "email"'
+  }, {
+    name: "sendWithJs",
+    type: "boolean",
+    helperText: "Set to false to use basic html form action",
+    defaultValue: true,
+    showIf: 'options.get("sendSubmissionsTo") === "custom"'
+  }, {
+    name: "name",
+    type: "string",
+    defaultValue: "My form"
+  }, {
+    name: "action",
+    type: "string",
+    helperText: "URL to send the form data to",
+    showIf: 'options.get("sendSubmissionsTo") === "custom"'
+  }, {
+    name: "contentType",
+    type: "string",
+    defaultValue: "application/json",
+    advanced: true,
+    enum: ["application/json", "multipart/form-data", "application/x-www-form-urlencoded"],
+    showIf: 'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true'
+  }, {
+    name: "method",
+    type: "string",
+    showIf: 'options.get("sendSubmissionsTo") === "custom"',
+    defaultValue: "POST",
+    advanced: true
+  }, {
+    name: "previewState",
+    type: "string",
+    enum: ["unsubmitted", "sending", "success", "error"],
+    defaultValue: "unsubmitted",
+    helperText: 'Choose a state to edit, e.g. choose "success" to show what users see on success and edit the message',
+    showIf: 'options.get("sendSubmissionsTo") !== "zapier" && options.get("sendWithJs") === true'
+  }, {
+    name: "successUrl",
+    type: "url",
+    helperText: "Optional URL to redirect the user to on form submission success",
+    showIf: 'options.get("sendSubmissionsTo") !== "zapier" && options.get("sendWithJs") === true'
+  }, {
+    name: "resetFormOnSubmit",
+    type: "boolean",
+    showIf: "options.get('sendSubmissionsTo') === 'custom' && options.get('sendWithJs') === true",
+    advanced: true
+  }, {
+    name: "successMessage",
+    type: "uiBlocks",
+    hideFromUI: true,
+    defaultValue: [{
       "@type": "@builder.io/sdk:Element",
       responsiveStyles: {
         large: {
@@ -192,26 +87,46 @@ const componentInfo = {
       component: {
         name: "Text",
         options: {
-          text: "<span>Enter your name</span>"
+          text: "<span>Thanks!</span>"
         }
       }
-    },
-    {
+    }]
+  }, {
+    name: "validate",
+    type: "boolean",
+    defaultValue: true,
+    advanced: true
+  }, {
+    name: "errorMessagePath",
+    type: "text",
+    advanced: true,
+    helperText: 'Path to where to get the error message from in a JSON response to display to the user, e.g. "error.message" for a response like { "error": { "message": "this username is taken" }}'
+  }, {
+    name: "errorMessage",
+    type: "uiBlocks",
+    hideFromUI: true,
+    defaultValue: [{
       "@type": "@builder.io/sdk:Element",
       responsiveStyles: {
         large: {
           marginTop: "10px"
         }
       },
+      bindings: {
+        "component.options.text": "state.formErrorMessage || block.component.options.text"
+      },
       component: {
-        name: "Form:Input",
+        name: "Text",
         options: {
-          name: "name",
-          placeholder: "Jane Doe"
+          text: "<span>Form submission error :( Please check your answers and try again</span>"
         }
       }
-    },
-    {
+    }]
+  }, {
+    name: "sendingMessage",
+    type: "uiBlocks",
+    hideFromUI: true,
+    defaultValue: [{
       "@type": "@builder.io/sdk:Element",
       responsiveStyles: {
         large: {
@@ -221,41 +136,88 @@ const componentInfo = {
       component: {
         name: "Text",
         options: {
-          text: "<span>Enter your email</span>"
+          text: "<span>Sending...</span>"
         }
       }
+    }]
+  }, {
+    name: "customHeaders",
+    type: "map",
+    valueType: {
+      type: "string"
+    },
+    advanced: true,
+    showIf: 'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true'
+  }],
+  noWrap: true,
+  canHaveChildren: true,
+  defaultChildren: [{
+    "@type": "@builder.io/sdk:Element",
+    responsiveStyles: {
+      large: {
+        marginTop: "10px"
+      }
     },
-    {
-      "@type": "@builder.io/sdk:Element",
-      responsiveStyles: {
-        large: {
-          marginTop: "10px"
-        }
-      },
-      component: {
-        name: "Form:Input",
-        options: {
-          name: "email",
-          placeholder: "jane@doe.com"
-        }
+    component: {
+      name: "Text",
+      options: {
+        text: "<span>Enter your name</span>"
+      }
+    }
+  }, {
+    "@type": "@builder.io/sdk:Element",
+    responsiveStyles: {
+      large: {
+        marginTop: "10px"
       }
     },
-    {
-      "@type": "@builder.io/sdk:Element",
-      responsiveStyles: {
-        large: {
-          marginTop: "10px"
-        }
-      },
-      component: {
-        name: "Form:SubmitButton",
-        options: {
-          text: "Submit"
-        }
+    component: {
+      name: "Form:Input",
+      options: {
+        name: "name",
+        placeholder: "Jane Doe"
       }
     }
-  ]
-};
-export {
-  componentInfo
+  }, {
+    "@type": "@builder.io/sdk:Element",
+    responsiveStyles: {
+      large: {
+        marginTop: "10px"
+      }
+    },
+    component: {
+      name: "Text",
+      options: {
+        text: "<span>Enter your email</span>"
+      }
+    }
+  }, {
+    "@type": "@builder.io/sdk:Element",
+    responsiveStyles: {
+      large: {
+        marginTop: "10px"
+      }
+    },
+    component: {
+      name: "Form:Input",
+      options: {
+        name: "email",
+        placeholder: "jane@doe.com"
+      }
+    }
+  }, {
+    "@type": "@builder.io/sdk:Element",
+    responsiveStyles: {
+      large: {
+        marginTop: "10px"
+      }
+    },
+    component: {
+      name: "Form:SubmitButton",
+      options: {
+        text: "Submit"
+      }
+    }
+  }]
 };
+export { componentInfo }

package/src/blocks/form/form.jsx

@@ -1,5 +1,4 @@
-'use client';
-import BaseText from "../BaseText";
+"use client";
 import * as React from "react";
 import {
   FlatList,
@@ -9,252 +8,9 @@ import {
   Image,
   Text,
 } from "react-native";
-import { useState, useContext, useRef } from "react";
-import RenderBlock from "../../components/render-block/render-block";
-import BuilderBlocks from "../../components/render-blocks";
-import { isEditing } from "../../functions/is-editing.js";
 
 function FormComponent(props) {
-  const formRef = useRef(null);
-  const [formState, setFormState] = useState(() => "unsubmitted");
-
-  const [responseData, setResponseData] = useState(() => null);
-
-  const [formErrorMessage, setFormErrorMessage] = useState(() => "");
-
-  function submissionState() {
-    return (isEditing() && props.previewState) || formState;
-  }
-
-  function onSubmit(event) {
-    const sendWithJs = props.sendWithJs || props.sendSubmissionsTo === "email";
-    if (props.sendSubmissionsTo === "zapier") {
-      event.preventDefault();
-    } else if (sendWithJs) {
-      if (!(props.action || props.sendSubmissionsTo === "email")) {
-        event.preventDefault();
-        return;
-      }
-      event.preventDefault();
-      const el = event.currentTarget;
-      const headers = props.customHeaders || {};
-      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) => {
-          let value;
-          const key = el.name;
-          if (el instanceof HTMLInputElement) {
-            if (el.type === "radio") {
-              if (el.checked) {
-                value = el.name;
-                return {
-                  key,
-                  value,
-                };
-              }
-            } else if (el.type === "checkbox") {
-              value = el.checked;
-            } else if (el.type === "number" || el.type === "range") {
-              const num = el.valueAsNumber;
-              if (!isNaN(num)) {
-                value = num;
-              }
-            } else if (el.type === "file") {
-              // TODO: one vs multiple files
-              value = el.files;
-            } else {
-              value = el.value;
-            }
-          } else {
-            value = el.value;
-          }
-          return {
-            key,
-            value,
-          };
-        });
-      let contentType = props.contentType;
-      if (props.sendSubmissionsTo === "email") {
-        contentType = "multipart/form-data";
-      }
-      Array.from(formPairs).forEach(({ value }) => {
-        if (
-          value instanceof File ||
-          (Array.isArray(value) && value[0] instanceof File) ||
-          value instanceof FileList
-        ) {
-          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") {
-        body = formData;
-      } else {
-        // Json
-        const json = {};
-        Array.from(formPairs).forEach(({ value, key }) => {
-          set(json, key, value);
-        });
-        body = JSON.stringify(json);
-      }
-      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")
-          )
-        ) {
-          headers["content-type"] = contentType;
-        }
-      }
-      const presubmitEvent = new CustomEvent("presubmit", { detail: { body } });
-      if (formRef.current) {
-        formRef.current.dispatchEvent(presubmitEvent);
-        if (presubmitEvent.defaultPrevented) {
-          return;
-        }
-      }
-      setFormState("sending");
-      const formUrl = `${
-        builder.env === "dev" ? "http://localhost:5000" : "https://builder.io"
-      }/api/v1/form-submit?apiKey=${builder.apiKey}&to=${btoa(
-        props.sendSubmissionsToEmail || ""
-      )}&name=${encodeURIComponent(props.name || "")}`;
-      fetch(
-        props.sendSubmissionsTo === "email"
-          ? formUrl
-          : props.action /* TODO: throw error if no action URL */,
-        { 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) {
-            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);
-            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);
-              }
-              setFormErrorMessage(message);
-            }
-          }
-          setResponseData(body);
-          setFormState(res.ok ? "success" : "error");
-          if (res.ok) {
-            const submitSuccessEvent = new CustomEvent("submit:success", {
-              detail: { res, body },
-            });
-            if (formRef.current) {
-              formRef.current.dispatchEvent(submitSuccessEvent);
-              if (submitSuccessEvent.defaultPrevented) {
-                return;
-              }
-              /* TODO: option to turn this on/off? */ if (
-                props.resetFormOnSubmit !== false
-              ) {
-                formRef.current.reset();
-              }
-            }
-            /* TODO: client side route event first that can be preventDefaulted */ if (
-              props.successUrl
-            ) {
-              if (formRef.current) {
-                const event = new CustomEvent("route", {
-                  detail: { url: props.successUrl },
-                });
-                formRef.current.dispatchEvent(event);
-                if (!event.defaultPrevented) {
-                  location.href = props.successUrl;
-                }
-              } else {
-                location.href = props.successUrl;
-              }
-            }
-          }
-        },
-        (err) => {
-          const submitErrorEvent = new CustomEvent("submit:error", {
-            detail: { error: err },
-          });
-          if (formRef.current) {
-            formRef.current.dispatchEvent(submitErrorEvent);
-            if (submitErrorEvent.defaultPrevented) {
-              return;
-            }
-          }
-          setResponseData(err);
-          setFormState("error");
-        }
-      );
-    }
-  }
-  const builderContext = useContext(BuilderContext);
-  return (
-    <View
-      validate={props.validate}
-      ref={formRef}
-      action={!props.sendWithJs && props.action}
-      method={props.method}
-      name={props.name}
-      onSubmit={(event) => onSubmit(event)}
-      {...props.attributes}
-    >
-      {" "}
-      {props.builderBlock && props.builderBlock.children ? (
-        <>
-          {props.builderBlock?.children?.map((block) => (
-            <RenderBlock block={block} context={builderContext} />
-          ))}
-        </>
-      ) : null}{" "}
-      {submissionState() === "error" ? (
-        <>
-          <BuilderBlocks dataPath="errorMessage" blocks={props.errorMessage} />
-        </>
-      ) : null}{" "}
-      {submissionState() === "sending" ? (
-        <>
-          <BuilderBlocks
-            dataPath="sendingMessage"
-            blocks={props.sendingMessage}
-          />
-        </>
-      ) : null}{" "}
-      {submissionState() === "error" && responseData ? (
-        <>
-          <View style={styles.view1}>
-            {" "}
-            <BaseText>{JSON.stringify(responseData, null, 2)}</BaseText>{" "}
-          </View>
-        </>
-      ) : null}{" "}
-      {submissionState() === "success" ? (
-        <>
-          <BuilderBlocks
-            dataPath="successMessage"
-            blocks={props.successMessage}
-          />
-        </>
-      ) : null}{" "}
-    </View>
-  );
+  return <></>;
 }
-const styles = StyleSheet.create({
-  view1: { padding: 10, color: "red", textAlign: "center" },
-});
+
 export default FormComponent;

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

@@ -5,6 +5,4 @@ const componentInfo = {
   canHaveChildren: true,
   noWrap: true
 };
-export {
-  componentInfo
-};
+export { componentInfo }