@builder.io/sdk-react-native 0.0.1-55 → 0.0.1-58

package/src/blocks/form/form.lite.tsx

@@ -1,254 +0,0 @@
-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 [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 formRef = useRef();
-  return (
-    <View
-      {...props.attributes}
-      validate={props.validate}
-      ref={formRef}
-      action={!props.sendWithJs && props.action}
-      method={props.method}
-      name={props.name}
-      onSubmit={(event) => onSubmit(event)}
-    >
-      {" "}
-      {props.builderBlock && props.builderBlock.children ? (
-        <>
-          {props.builderBlock?.children?.map((block) => (
-            <RenderBlock block={block} />
-          ))}
-        </>
-      ) : 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}>
-            {" "}
-            <Text>{JSON.stringify(responseData, null, 2)}</Text>{" "}
-          </View>
-        </>
-      ) : null}{" "}
-      {submissionState() === "success" ? (
-        <>
-          <BuilderBlocks
-            dataPath="successMessage"
-            blocks={props.successMessage}
-          />
-        </>
-      ) : null}{" "}
-    </View>
-  );
-}
-const styles = StyleSheet.create({
-  view1: { padding: 10, color: "red", textAlign: "center" },
-});

package/src/blocks/fragment/fragment.lite.tsx

@@ -1,10 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-
-export default function FragmentComponent(props) {
-  return (
-    <View>
-      <Text>{props.children}</Text>
-    </View>
-  );
-}

package/src/blocks/image/image.lite.tsx

@@ -1,67 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-
-export default function Image(props) {
-  return (
-    <View style={styles.view1}>
-      <View>
-        <View
-          loading="lazy"
-          alt={props.altText}
-          role={props.altText ? "presentation" : undefined}
-          style={styles.view2}
-          src={props.image}
-          srcSet={props.srcset}
-          sizes={props.sizes}
-        />
-
-        <View srcSet={props.srcset} />
-      </View>
-
-      {props.aspectRatio &&
-      !(props.fitContent && props.builderBlock?.children?.length) ? (
-        <View style={styles.view3}>
-          <Text> </Text>
-        </View>
-      ) : null}
-
-      {props.builderBlock?.children?.length && props.fitContent ? (
-        <>
-          <Text>{props.children}</Text>
-        </>
-      ) : null}
-
-      {!props.fitContent ? (
-        <>
-          <View style={styles.view4}>
-            <Text>{props.children}</Text>
-          </View>
-        </>
-      ) : null}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  view1: { position: "relative" },
-  view2: {
-    opacity: 1,
-    transition: "opacity 0.2s ease-in-out",
-    position: "absolute",
-    height: 100,
-    width: 100,
-    top: 0,
-    left: 0,
-  },
-  view3: { width: 100, pointerEvents: "none", fontSize: 0 },
-  view4: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "stretch",
-    position: "absolute",
-    top: 0,
-    left: 0,
-    width: 100,
-    height: 100,
-  },
-});

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

@@ -1,18 +0,0 @@
-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/input.lite.tsx

@@ -1,20 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import { isEditing } from "../../functions/is-editing.js";
-
-export default function FormInputComponent(props) {
-  return (
-    <View
-      {...props.attributes}
-      key={
-        isEditing() && props.defaultValue ? props.defaultValue : "default-key"
-      }
-      placeholder={props.placeholder}
-      type={props.type}
-      name={props.name}
-      value={props.value}
-      defaultValue={props.defaultValue}
-      required={props.required}
-    />
-  );
-}

package/src/blocks/raw-text/raw-text.lite.tsx

@@ -1,6 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-
-export default function RawText(props) {
-  return <View dangerouslySetInnerHTML={{ __html: props.text || "" }} />;
-}

package/src/blocks/section/section.lite.tsx

@@ -1,19 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-
-export default function SectionComponent(props) {
-  return (
-    <View
-      {...props.attributes}
-      style={
-        props.maxWidth && typeof props.maxWidth === "number"
-          ? {
-              maxWidth: props.maxWidth,
-            }
-          : undefined
-      }
-    >
-      <Text>{props.children}</Text>
-    </View>
-  );
-}

package/src/blocks/select/select.lite.tsx

@@ -1,23 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import { isEditing } from "../../functions/is-editing.js";
-
-export default function SelectComponent(props) {
-  return (
-    <View
-      {...props.attributes}
-      value={props.value}
-      key={
-        isEditing() && props.defaultValue ? props.defaultValue : "default-key"
-      }
-      defaultValue={props.defaultValue}
-      name={props.name}
-    >
-      {props.options?.map((option) => (
-        <View value={option.value}>
-          <Text>{option.name || option.value}</Text>
-        </View>
-      ))}
-    </View>
-  );
-}

package/src/blocks/submit-button/submit-button.lite.tsx

@@ -1,10 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-
-export default function SubmitButton(props) {
-  return (
-    <View {...props.attributes} type="submit">
-      <Text>{props.text}</Text>
-    </View>
-  );
-}

package/src/blocks/symbol/symbol.lite.tsx

@@ -1,60 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import { useState, useContext, useEffect } from "react";
-import RenderContent from "../../components/render-content/render-content.lite";
-import BuilderContext from "../../context/builder.context";
-import { getContent } from "../../functions/get-content/index.js";
-
-export default function Symbol(props) {
-  const [className, setClassName] = useState(() => "builder-symbol");
-
-  const [content, setContent] = useState(() => null);
-
-  const builderContext = useContext(BuilderContext);
-
-  useEffect(() => {
-    setContent(props.symbol?.content);
-  }, []);
-
-  useEffect(() => {
-    const symbolToUse = props.symbol;
-
-    if (symbolToUse && !symbolToUse.content && !content && symbolToUse.model) {
-      getContent({
-        model: symbolToUse.model,
-        apiKey: builderContext.apiKey,
-        options: {
-          entry: symbolToUse.entry,
-        },
-      }).then((response) => {
-        setContent(response);
-      });
-    }
-  }, [
-    props.symbol?.content,
-    props.symbol?.model,
-    props.symbol?.entry,
-    content,
-  ]);
-
-  return (
-    <View
-      {...props.attributes}
-      dataSet={{
-        class: className,
-      }}
-    >
-      <RenderContent
-        apiKey={builderContext.apiKey}
-        context={builderContext.context}
-        data={{
-          ...props.symbol?.data,
-          ...builderContext.state,
-          ...props.symbol?.content?.data?.state,
-        }}
-        model={props.symbol?.model}
-        content={content}
-      />
-    </View>
-  );
-}

package/src/blocks/text/text.lite.tsx

@@ -1,6 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-
-export default function Text(props) {
-  return <View dangerouslySetInnerHTML={{ __html: props.text }} />;
-}

package/src/blocks/textarea/textarea.lite.tsx

@@ -1,14 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-
-export default function Textarea(props) {
-  return (
-    <View
-      {...props.attributes}
-      placeholder={props.placeholder}
-      name={props.name}
-      value={props.value}
-      defaultValue={props.defaultValue}
-    />
-  );
-}

package/src/blocks/video/video.lite.tsx

@@ -1,27 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-
-export default function Video(props) {
-  return (
-    <View
-      {...props.attributes}
-      preload="none"
-      style={{
-        width: "100%",
-        height: "100%",
-        ...props.attributes?.style,
-        objectFit: props.fit,
-        objectPosition: props.position,
-        // Hack to get object fit to work as expected and
-        // not have the video overflow
-        borderRadius: 1,
-      }}
-      key={props.video || "no-src"}
-      poster={props.posterImage}
-      autoPlay={props.autoPlay}
-      muted={props.muted}
-      controls={props.controls}
-      loop={props.loop}
-    />
-  );
-}

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

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

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

@@ -1,35 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import RenderInlinedStyles from "../render-inlined-styles.lite";
-
-export default function BlockStyles(props) {
-  function camelToKebabCase(string) {
-    return string
-      .replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2")
-      .toLowerCase();
-  }
-
-  function css() {
-    // TODO: media queries
-    const styleObject = props.block.responsiveStyles?.large;
-
-    if (!styleObject) {
-      return "";
-    }
-
-    let str = `.${props.block.id} {`;
-
-    for (const key in styleObject) {
-      const value = styleObject[key];
-
-      if (typeof value === "string") {
-        str += `${camelToKebabCase(key)}: ${value};`;
-      }
-    }
-
-    str += "}";
-    return str;
-  }
-
-  return <RenderInlinedStyles styles={css()} />;
-}