@builder.io/sdk-react-native 1.0.31-2 → 1.0.32

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

@@ -1,324 +0,0 @@
-import * as React from "react";
-import BaseText from "../../blocks/BaseText";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-  Pressable,
-  TextInput,
-} from "react-native";
-import { useState, useRef } from "react";
-
-/**
- * This import is used by the Svelte SDK. Do not remove.
- */
-
-export type FormProps = BuilderDataProps &
-  BuilderComponentsProp &
-  BuilderLinkComponentProp & {
-    attributes?: any;
-    name?: string;
-    action?: string;
-    validate?: boolean;
-    method?: string;
-    sendSubmissionsTo?: string;
-    sendSubmissionsToEmail?: string;
-    sendWithJs?: boolean;
-    contentType?: string;
-    customHeaders?: {
-      [key: string]: string;
-    };
-    successUrl?: string;
-    previewState?: FormState;
-    successMessage?: BuilderBlock[];
-    errorMessage?: BuilderBlock[];
-    sendingMessage?: BuilderBlock[];
-    resetFormOnSubmit?: boolean;
-    errorMessagePath?: string;
-  };
-/**
- * This import is used by the Svelte SDK. Do not remove.
- */
-
-export type FormState = "unsubmitted" | "sending" | "success" | "error";
-import Block from "../../../components/block/block";
-import Blocks from "../../../components/blocks/blocks";
-import { getEnv } from "../../../functions/get-env";
-import { get } from "../../../functions/get";
-import { isEditing } from "../../../functions/is-editing";
-import { set } from "../../../functions/set";
-import type { BuilderBlock } from "../../../types/builder-block";
-import type {
-  BuilderComponentsProp,
-  BuilderDataProps,
-  BuilderLinkComponentProp,
-} from "../../../types/builder-props";
-import type { Dictionary } from "../../../types/typescript";
-import { filterAttrs } from "../../helpers";
-import { setAttrs } from "../../helpers";
-
-function FormComponent(props: FormProps) {
-  const formRef = useRef<HTMLFormElement>(null);
-  const [formState, setFormState] = useState(() => "unsubmitted");
-
-  const [responseData, setResponseData] = useState(() => null);
-
-  const [formErrorMessage, setFormErrorMessage] = useState(() => "");
-
-  function mergeNewRootState(newData: Dictionary<any>) {
-    const combinedState = {
-      ...props.builderContext.rootState,
-      ...newData,
-    };
-    if (props.builderContext.rootSetState) {
-      props.builderContext.rootSetState?.(combinedState);
-    } else {
-      props.builderContext.rootState = combinedState;
-    }
-  }
-
-  function submissionState() {
-    return (isEditing() && props.previewState) || formState;
-  }
-
-  function onSubmit(event: any) {
-    const sendWithJsProp =
-      props.sendWithJs || props.sendSubmissionsTo === "email";
-    if (props.sendSubmissionsTo === "zapier") {
-      event.preventDefault();
-    } else if (sendWithJsProp) {
-      if (!(props.action || props.sendSubmissionsTo === "email")) {
-        event.preventDefault();
-        return;
-      }
-      event.preventDefault();
-      const el = event.currentTarget || event.target;
-      const headers = props.customHeaders || {};
-      let body: any;
-      const formData = new FormData(el);
-
-      // TODO: maybe support null
-      const formPairs: {
-        key: string;
-        value: File | boolean | number | string | FileList;
-      }[] = Array.from(el.querySelectorAll("input,select,textarea"))
-        .filter((el) => !!(el as HTMLInputElement).name)
-        .map((el) => {
-          let value: any;
-          const key = (el as HTMLImageElement).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 as HTMLInputElement).value;
-          }
-          return {
-            key,
-            value,
-          };
-        });
-      let formContentType = props.contentType;
-      if (props.sendSubmissionsTo === "email") {
-        formContentType = "multipart/form-data";
-      }
-      Array.from(formPairs).forEach(({ value }) => {
-        if (
-          value instanceof File ||
-          (Array.isArray(value) && value[0] instanceof File) ||
-          value instanceof FileList
-        ) {
-          formContentType = "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 (formContentType !== "application/json") {
-        body = formData;
-      } else {
-        // Json
-        const json = {};
-        Array.from(formPairs).forEach(({ value, key }) => {
-          set(json, key, value);
-        });
-        body = JSON.stringify(json);
-      }
-      if (formContentType && formContentType !== "multipart/form-data") {
-        if (
-          /* Zapier doesn't allow content-type header to be sent from browsers */ !(
-            sendWithJsProp && props.action?.includes("zapier.com")
-          )
-        ) {
-          headers["content-type"] = formContentType;
-        }
-      }
-      const presubmitEvent = new CustomEvent("presubmit", { detail: { body } });
-      if (formRef.current) {
-        formRef.current.dispatchEvent(presubmitEvent);
-        if (presubmitEvent.defaultPrevented) {
-          return;
-        }
-      }
-      setFormState("sending");
-      const formUrl = `${
-        getEnv() === "dev" ? "http://localhost:5000" : "https://builder.io"
-      }/api/v1/form-submit?apiKey=${props.builderContext.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);
-              mergeNewRootState({ formErrorMessage: 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");
-        }
-      );
-    }
-  }
-  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, idx) => (
-            <Block
-              key={`form-block-${idx}`}
-              block={block}
-              context={props.builderContext}
-              registeredComponents={props.builderComponents}
-              linkComponent={props.builderLinkComponent}
-            />
-          ))}
-        </>
-      ) : null}
-      {submissionState() === "error" ? (
-        <Blocks
-          path="errorMessage"
-          blocks={props.errorMessage!}
-          context={props.builderContext}
-        />
-      ) : null}
-      {submissionState() === "sending" ? (
-        <Blocks
-          path="sendingMessage"
-          blocks={props.sendingMessage!}
-          context={props.builderContext}
-        />
-      ) : null}
-      {submissionState() === "error" && responseData ? (
-        <View style={styles.view1}>
-          <BaseText>{JSON.stringify(responseData, null, 2)}</BaseText>
-        </View>
-      ) : null}
-      {submissionState() === "success" ? (
-        <Blocks
-          path="successMessage"
-          blocks={props.successMessage!}
-          context={props.builderContext}
-        />
-      ) : null}
-    </View>
-  );
-}
-const styles = StyleSheet.create({
-  view1: { padding: 10, color: "red", textAlign: "center" },
-});
-export default FormComponent;

package/src/blocks/form/form/index.ts

@@ -1 +0,0 @@
-export { default } from './form'

package/src/blocks/form/input/component-info.ts

@@ -1,47 +0,0 @@
-import type { ComponentInfo } from '../../../types/components';
-export const componentInfo: ComponentInfo = {
-  name: 'Form:Input',
-  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'
-  },
-  // TODO: handle value vs default value automatically like ng-model
-  {
-    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'
-  }
-}

package/src/blocks/form/input/index.ts

@@ -1 +0,0 @@
-export { default } from './input'

package/src/blocks/form/input/input.tsx

@@ -1,49 +0,0 @@
-import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-  Pressable,
-  TextInput,
-} from "react-native";
-
-/**
- * This import is used by the Svelte SDK. Do not remove.
- */
-
-export interface FormInputProps {
-  type?: string;
-  attributes?: any;
-  name?: string;
-  value?: string;
-  placeholder?: string;
-  defaultValue?: string;
-  required?: boolean;
-}
-
-import { isEditing } from "../../../functions/is-editing";
-import { filterAttrs } from "../../helpers";
-import { setAttrs } from "../../helpers";
-
-function FormInputComponent(props: FormInputProps) {
-  return (
-    <TextInput
-      {...{}}
-      {...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}
-    />
-  );
-}
-
-export default FormInputComponent;

package/src/blocks/form/select/component-info.ts

@@ -1,44 +0,0 @@
-import type { ComponentInfo } from '../../../types/components';
-export const componentInfo: ComponentInfo = {
-  name: 'Form:Select',
-  image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F83acca093fb24aaf94dee136e9a4b045',
-  defaultStyles: {
-    alignSelf: 'flex-start'
-  },
-  inputs: [{
-    name: 'options',
-    type: 'list',
-    required: true,
-    subFields: [{
-      name: 'value',
-      type: 'text',
-      required: true
-    }, {
-      name: 'name',
-      type: 'text'
-    }],
-    defaultValue: [{
-      value: 'option 1'
-    }, {
-      value: 'option 2'
-    }]
-  }, {
-    name: 'name',
-    type: 'string',
-    required: true,
-    helperText: 'Every select in a form needs a unique name describing what it gets, e.g. "email"'
-  }, {
-    name: 'defaultValue',
-    type: 'string'
-  }, {
-    name: 'value',
-    type: 'string',
-    advanced: true
-  }, {
-    name: 'required',
-    type: 'boolean',
-    defaultValue: false
-  }],
-  static: true,
-  noWrap: true
-}

package/src/blocks/form/select/index.ts

@@ -1 +0,0 @@
-export { default } from './select'

package/src/blocks/form/select/select.tsx

@@ -1,54 +0,0 @@
-import * as React from "react";
-import BaseText from "../../blocks/BaseText";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-  Pressable,
-  TextInput,
-} from "react-native";
-
-/**
- * This import is used by the Svelte SDK. Do not remove.
- */
-
-export interface FormSelectProps {
-  options?: {
-    name?: string;
-    value: string;
-  }[];
-  attributes?: any;
-  name?: string;
-  value?: string;
-  defaultValue?: string;
-}
-
-import { isEditing } from "../../../functions/is-editing";
-import { filterAttrs } from "../../helpers";
-import { setAttrs } from "../../helpers";
-
-function SelectComponent(props: FormSelectProps) {
-  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, index) => (
-        <View key={`${option.name}-${index}`} value={option.value}>
-          <BaseText>{option.name || option.value}</BaseText>
-        </View>
-      ))}
-    </View>
-  );
-}
-
-export default SelectComponent;

package/src/blocks/form/submit-button/component-info.ts

@@ -1,27 +0,0 @@
-import type { ComponentInfo } from '../../../types/components';
-export const componentInfo: ComponentInfo = {
-  name: 'Form:SubmitButton',
-  image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fdf2820ffed1f4349a94c40b3221f5b98',
-  defaultStyles: {
-    appearance: 'none',
-    paddingTop: '15px',
-    paddingBottom: '15px',
-    paddingLeft: '25px',
-    paddingRight: '25px',
-    backgroundColor: '#3898EC',
-    color: 'white',
-    borderRadius: '4px',
-    cursor: 'pointer'
-  },
-  inputs: [{
-    name: 'text',
-    type: 'text',
-    defaultValue: 'Click me'
-  }],
-  static: true,
-  noWrap: true
-  // TODO: optional children? maybe as optional form input
-  // that only shows if advanced setting is flipped
-  // TODO: defaultChildren
-  // canHaveChildren: true,
-}

package/src/blocks/form/submit-button/index.ts

@@ -1 +0,0 @@
-export { default } from './submit-button'

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

@@ -1,34 +0,0 @@
-import * as React from "react";
-import BaseText from "../../blocks/BaseText";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-  Pressable,
-  TextInput,
-} from "react-native";
-
-/**
- * This import is used by the Svelte SDK. Do not remove.
- */
-
-export interface ButtonProps {
-  attributes?: any;
-  text?: string;
-}
-
-import { filterAttrs } from "../../helpers";
-import { setAttrs } from "../../helpers";
-
-function SubmitButton(props: ButtonProps) {
-  return (
-    <View type="submit" {...{}} {...props.attributes}>
-      <BaseText>{props.text}</BaseText>
-    </View>
-  );
-}
-
-export default SubmitButton;

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

@@ -1,8 +0,0 @@
-import type { ComponentInfo } from '../../types/components';
-export const componentInfo: ComponentInfo = {
-  name: 'Fragment',
-  static: true,
-  hidden: true,
-  canHaveChildren: true,
-  noWrap: true
-}

package/src/blocks/fragment/fragment.tsx

@@ -1,18 +0,0 @@
-import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-  Pressable,
-  TextInput,
-} from "react-native";
-import type { FragmentProps } from "./fragment.types";
-
-function FragmentComponent(props: FragmentProps) {
-  return <View>{props.children}</View>;
-}
-
-export default FragmentComponent;

package/src/blocks/fragment/fragment.types.ts

@@ -1,5 +0,0 @@
-export interface FragmentProps {
-  maxWidth?: number;
-  attributes?: any;
-  children?: any;
-}

package/src/blocks/fragment/index.ts

@@ -1 +0,0 @@
-export { default } from './fragment'

package/src/blocks/helpers.ts

@@ -1,43 +0,0 @@
-export function filterAttrs(attrs: {
-  [index: string]: any;
-} = {}, prefix: string, isEvent: boolean) {
-  const result: typeof attrs = {};
-  for (const attr in attrs) {
-    if (!attrs[attr]) continue;
-    if (isEvent && !attr.startsWith(prefix)) continue;
-    const eventName = isEvent ? attr.replace(prefix, '') : attr;
-    result[eventName] = attrs[attr];
-  }
-  return result;
-}
-
-/**
- * Svelte SDK: workaround to dynamically provide event handlers to components/elements.
- * https://svelte.dev/repl/1246699e266f41218a8eeb45b9b58b54?version=3.24.1
- */
-export function setAttrs(node: HTMLElement, attrs: Record<string, (event: Event) => void> = {}) {
-  const attrKeys = Object.keys(attrs);
-
-  /**
-   *
-   * @param {string} attr
-   */
-  const setup = (attr: string) => node.addEventListener(attr, attrs[attr]);
-
-  /**
-   *
-   * @param {string} attr
-   */
-  const teardown = (attr: string) => node.removeEventListener(attr, attrs[attr]);
-  attrKeys.forEach(setup);
-  return {
-    update(attrs = {}) {
-      const attrKeys = Object.keys(attrs);
-      attrKeys.forEach(teardown);
-      attrKeys.forEach(setup);
-    },
-    destroy() {
-      attrKeys.forEach(teardown);
-    }
-  };
-}