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

package/src/blocks/form.js

@@ -1,521 +0,0 @@
-import { registerComponent } from '../functions/register-component';
-
-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));
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) =>
-      x.done
-        ? resolve(x.value)
-        : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
-import * as React from 'react';
-import { View, StyleSheet, Text } from 'react-native';
-import { useState, useRef } from 'react';
-import RenderBlock from '../components/render-block';
-function FormComponent(props) {
-  var _a, _b;
-  const [state, setState] = useState(() => 'unsubmitted');
-  const [responseData, setResponseData] = useState(() => null);
-  const [formErrorMessage, setFormErrorMessage] = useState(() => '');
-  function submissionState() {
-    return (Builder.isEditing && props.previewState) || state;
-  }
-  function onSubmit(event) {
-    var _a2;
-    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);
-      const formPairs = Array.from(
-        event.currentTarget.querySelectorAll('input,select,textarea')
-      )
-        .filter((el2) => !!el2.name)
-        .map((el2) => {
-          let value;
-          const key = el2.name;
-          if (el2 instanceof HTMLInputElement) {
-            if (el2.type === 'radio') {
-              if (el2.checked) {
-                value = el2.name;
-                return {
-                  key,
-                  value,
-                };
-              }
-            } else if (el2.type === 'checkbox') {
-              value = el2.checked;
-            } else if (el2.type === 'number' || el2.type === 'range') {
-              const num = el2.valueAsNumber;
-              if (!isNaN(num)) {
-                value = num;
-              }
-            } else if (el2.type === 'file') {
-              value = el2.files;
-            } else {
-              value = el2.value;
-            }
-          } else {
-            value = el2.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';
-        }
-      });
-      if (contentType !== 'application/json') {
-        body = formData;
-      } else {
-        const json = {};
-        Array.from(formPairs).forEach(({ value, key }) => {
-          set(json, key, value);
-        });
-        body = JSON.stringify(json);
-      }
-      if (contentType && contentType !== 'multipart/form-data') {
-        if (
-          !(
-            sendWithJs &&
-            ((_a2 = props.action) == null ? void 0 : _a2.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;
-        }
-      }
-      setState('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, {
-        body,
-        headers,
-        method: props.method || 'post',
-      }).then(
-        (res) =>
-          __async(this, null, function* () {
-            let body2;
-            const contentType2 = res.headers.get('content-type');
-            if (
-              contentType2 &&
-              contentType2.indexOf('application/json') !== -1
-            ) {
-              body2 = yield res.json();
-            } else {
-              body2 = yield res.text();
-            }
-            if (!res.ok && props.errorMessagePath) {
-              let message = get(body2, props.errorMessagePath);
-              if (message) {
-                if (typeof message !== 'string') {
-                  message = JSON.stringify(message);
-                }
-                setFormErrorMessage(message);
-              }
-            }
-            setResponseData(body2);
-            setState(res.ok ? 'success' : 'error');
-            if (res.ok) {
-              const submitSuccessEvent = new CustomEvent('submit:success', {
-                detail: { res, body: body2 },
-              });
-              if (formRef.current) {
-                formRef.current.dispatchEvent(submitSuccessEvent);
-                if (submitSuccessEvent.defaultPrevented) {
-                  return;
-                }
-                if (props.resetFormOnSubmit !== false) {
-                  formRef.current.reset();
-                }
-              }
-              if (props.successUrl) {
-                if (formRef.current) {
-                  const event2 = new CustomEvent('route', {
-                    detail: { url: props.successUrl },
-                  });
-                  formRef.current.dispatchEvent(event2);
-                  if (!event2.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);
-          setState('error');
-        }
-      );
-    }
-  }
-  const formRef = useRef();
-  return /* @__PURE__ */ React.createElement(
-    View,
-    __spreadProps(__spreadValues({}, 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
-      ? /* @__PURE__ */ React.createElement(
-          React.Fragment,
-          null,
-          (_b = (_a = props.builderBlock) == null ? void 0 : _a.children) ==
-            null
-            ? void 0
-            : _b.map((block) =>
-                /* @__PURE__ */ React.createElement(RenderBlock, {
-                  block,
-                })
-              )
-        )
-      : null,
-    ' ',
-    submissionState() === 'error'
-      ? /* @__PURE__ */ React.createElement(
-          React.Fragment,
-          null,
-          /* @__PURE__ */ React.createElement(BuilderBlocks, {
-            dataPath: 'errorMessage',
-            blocks: props.errorMessage,
-          })
-        )
-      : null,
-    ' ',
-    submissionState() === 'sending'
-      ? /* @__PURE__ */ React.createElement(
-          React.Fragment,
-          null,
-          /* @__PURE__ */ React.createElement(BuilderBlocks, {
-            dataPath: 'sendingMessage',
-            blocks: props.sendingMessage,
-          })
-        )
-      : null,
-    ' ',
-    submissionState() === 'error' && responseData
-      ? /* @__PURE__ */ React.createElement(
-          React.Fragment,
-          null,
-          /* @__PURE__ */ React.createElement(
-            View,
-            {
-              style: styles.view1,
-            },
-            ' ',
-            /* @__PURE__ */ React.createElement(
-              Text,
-              null,
-              JSON.stringify(responseData, null, 2)
-            ),
-            ' '
-          )
-        )
-      : null,
-    ' ',
-    submissionState() === 'success'
-      ? /* @__PURE__ */ React.createElement(
-          React.Fragment,
-          null,
-          /* @__PURE__ */ React.createElement(BuilderBlocks, {
-            dataPath: 'successMessage',
-            blocks: props.successMessage,
-          })
-        )
-      : null,
-    ' '
-  );
-}
-const styles = StyleSheet.create({
-  view1: { padding: 10, color: 'red', textAlign: 'center' },
-});
-export { FormComponent as default };
-
-registerComponent(FormComponent, {
-  name: 'Form:Form',
-  builtIn: true,
-  defaults: {
-    responsiveStyles: { large: { marginTop: '15px', paddingBottom: '15px' } },
-  },
-  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: [
-    {
-      '@type': '@builder.io/sdk:Element',
-      responsiveStyles: { large: { marginTop: '10px' } },
-      component: {
-        name: 'Text',
-        options: { text: '<span>Enter your name</span>' },
-      },
-    },
-    {
-      '@type': '@builder.io/sdk:Element',
-      responsiveStyles: { large: { marginTop: '10px' } },
-      component: {
-        name: 'Form:Input',
-        options: { name: 'name', placeholder: 'Jane Doe' },
-      },
-    },
-    {
-      '@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' } },
-    },
-  ],
-});

package/src/blocks/fragment.js

@@ -1,21 +0,0 @@
-import { registerComponent } from '../functions/register-component';
-
-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 };
-
-registerComponent(FragmentComponent, {
-  name: 'Fragment',
-  static: true,
-  hidden: true,
-  builtIn: true,
-  canHaveChildren: true,
-  noWrap: true,
-});

package/src/blocks/image.js

@@ -1,165 +0,0 @@
-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';
-import { registerComponent } from '../functions/register-component';
-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 },
-      });
-}
-registerComponent(Image, {
-  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 { Image as default };