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

package/src/blocks/button.js

@@ -1,86 +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));
-import * as React from 'react';
-import { View, Text } from 'react-native';
-function Button(props) {
-  return /* @__PURE__ */ React.createElement(
-    React.Fragment,
-    null,
-    props.link
-      ? /* @__PURE__ */ React.createElement(
-          React.Fragment,
-          null,
-          /* @__PURE__ */ React.createElement(
-            View,
-            __spreadProps(__spreadValues({}, props.attributes), {
-              role: 'button',
-              href: props.link,
-              target: props.openLinkInNewTab ? '_blank' : void 0,
-            }),
-            /* @__PURE__ */ React.createElement(Text, null, props.text)
-          )
-        )
-      : /* @__PURE__ */ React.createElement(
-          View,
-          __spreadValues({}, props.attributes),
-          /* @__PURE__ */ React.createElement(Text, null, props.text)
-        )
-  );
-}
-export { Button as default };
-
-registerComponent(Button, {
-  name: 'Core:Button',
-  builtIn: true,
-  image:
-    'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13',
-  defaultStyles: {
-    appearance: 'none',
-    paddingTop: '15px',
-    paddingBottom: '15px',
-    paddingLeft: '25px',
-    paddingRight: '25px',
-    backgroundColor: '#000000',
-    color: 'white',
-    borderRadius: '4px',
-    textAlign: 'center',
-    cursor: 'pointer',
-  },
-  inputs: [
-    { name: 'text', type: 'text', defaultValue: 'Click me!', bubble: true },
-    { name: 'link', type: 'url', bubble: true },
-    {
-      name: 'openLinkInNewTab',
-      type: 'boolean',
-      defaultValue: false,
-      friendlyName: 'Open link in new tab',
-    },
-  ],
-  static: true,
-  noWrap: true,
-});

package/src/blocks/columns.js

@@ -1,293 +0,0 @@
-import { registerComponent } from '../functions/register-component';
-
-import * as React from 'react';
-import { View, StyleSheet } from 'react-native';
-import RenderBlocks from '../components/render-blocks';
-function Columns(props) {
-  var _a;
-  function getGutterSize() {
-    return typeof props.space === 'number' ? props.space || 0 : 20;
-  }
-  function getColumns() {
-    return props.columns || [];
-  }
-  function getWidth(index) {
-    var _a2;
-    const columns = getColumns();
-    return (
-      ((_a2 = columns[index]) == null ? void 0 : _a2.width) ||
-      100 / columns.length
-    );
-  }
-  function getColumnCssWidth(index) {
-    const columns = getColumns();
-    const gutterSize = getGutterSize();
-    const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
-    return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
-  }
-  function maybeApplyForTablet(prop) {
-    const stackColumnsAt = props.stackColumnsAt || 'tablet';
-    return stackColumnsAt === 'tablet' ? prop : 'inherit';
-  }
-  function columnsCssVars() {
-    const flexDir =
-      props.stackColumnsAt === 'never'
-        ? 'inherit'
-        : props.reverseColumnsWhenStacked
-        ? 'column-reverse'
-        : 'column';
-    return {
-      '--flex-dir': flexDir,
-      '--flex-dir-tablet': maybeApplyForTablet(flexDir),
-    };
-  }
-  function columnCssVars() {
-    const width = '100%';
-    const marginLeft = '0';
-    return {
-      '--column-width': width,
-      '--column-margin-left': marginLeft,
-      '--column-width-tablet': maybeApplyForTablet(width),
-      '--column-margin-left-tablet': maybeApplyForTablet(marginLeft),
-    };
-  }
-  return /* @__PURE__ */ React.createElement(
-    View,
-    {
-      style: styles.view1,
-    },
-    (_a = props.columns) == null
-      ? void 0
-      : _a.map((column) =>
-          /* @__PURE__ */ React.createElement(
-            View,
-            {
-              style: styles.view2,
-            },
-            /* @__PURE__ */ React.createElement(RenderBlocks, {
-              blocks: column.blocks,
-            })
-          )
-        )
-  );
-}
-const styles = StyleSheet.create({
-  view1: { display: 'flex', alignItems: 'stretch' },
-  view2: { flexGrow: 1 },
-});
-export { Columns as default };
-
-registerComponent(Columns, {
-  name: 'Columns',
-  builtIn: true,
-  inputs: [
-    {
-      name: 'columns',
-      type: 'array',
-      broadcast: true,
-      subFields: [
-        {
-          name: 'blocks',
-          type: 'array',
-          hideFromUI: true,
-          defaultValue: [
-            {
-              '@type': '@builder.io/sdk:Element',
-              responsiveStyles: {
-                large: {
-                  display: 'flex',
-                  flexDirection: 'column',
-                  alignItems: 'stretch',
-                  flexShrink: '0',
-                  position: 'relative',
-                  marginTop: '30px',
-                  textAlign: 'center',
-                  lineHeight: 'normal',
-                  height: 'auto',
-                  minHeight: '20px',
-                  minWidth: '20px',
-                  overflow: 'hidden',
-                },
-              },
-              component: {
-                name: 'Image',
-                options: {
-                  image:
-                    'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
-                  backgroundPosition: 'center',
-                  backgroundSize: 'cover',
-                  aspectRatio: 0.7004048582995948,
-                },
-              },
-            },
-            {
-              '@type': '@builder.io/sdk:Element',
-              responsiveStyles: {
-                large: {
-                  display: 'flex',
-                  flexDirection: 'column',
-                  alignItems: 'stretch',
-                  flexShrink: '0',
-                  position: 'relative',
-                  marginTop: '30px',
-                  textAlign: 'center',
-                  lineHeight: 'normal',
-                  height: 'auto',
-                },
-              },
-              component: {
-                name: 'Text',
-                options: { text: '<p>Enter some text...</p>' },
-              },
-            },
-          ],
-        },
-        {
-          name: 'width',
-          type: 'number',
-          hideFromUI: true,
-          helperText: 'Width %, e.g. set to 50 to fill half of the space',
-        },
-        {
-          name: 'link',
-          type: 'url',
-          helperText:
-            'Optionally set a url that clicking this column will link to',
-        },
-      ],
-      defaultValue: [
-        {
-          blocks: [
-            {
-              '@type': '@builder.io/sdk:Element',
-              responsiveStyles: {
-                large: {
-                  display: 'flex',
-                  flexDirection: 'column',
-                  alignItems: 'stretch',
-                  flexShrink: '0',
-                  position: 'relative',
-                  marginTop: '30px',
-                  textAlign: 'center',
-                  lineHeight: 'normal',
-                  height: 'auto',
-                  minHeight: '20px',
-                  minWidth: '20px',
-                  overflow: 'hidden',
-                },
-              },
-              component: {
-                name: 'Image',
-                options: {
-                  image:
-                    'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
-                  backgroundPosition: 'center',
-                  backgroundSize: 'cover',
-                  aspectRatio: 0.7004048582995948,
-                },
-              },
-            },
-            {
-              '@type': '@builder.io/sdk:Element',
-              responsiveStyles: {
-                large: {
-                  display: 'flex',
-                  flexDirection: 'column',
-                  alignItems: 'stretch',
-                  flexShrink: '0',
-                  position: 'relative',
-                  marginTop: '30px',
-                  textAlign: 'center',
-                  lineHeight: 'normal',
-                  height: 'auto',
-                },
-              },
-              component: {
-                name: 'Text',
-                options: { text: '<p>Enter some text...</p>' },
-              },
-            },
-          ],
-        },
-        {
-          blocks: [
-            {
-              '@type': '@builder.io/sdk:Element',
-              responsiveStyles: {
-                large: {
-                  display: 'flex',
-                  flexDirection: 'column',
-                  alignItems: 'stretch',
-                  flexShrink: '0',
-                  position: 'relative',
-                  marginTop: '30px',
-                  textAlign: 'center',
-                  lineHeight: 'normal',
-                  height: 'auto',
-                  minHeight: '20px',
-                  minWidth: '20px',
-                  overflow: 'hidden',
-                },
-              },
-              component: {
-                name: 'Image',
-                options: {
-                  image:
-                    'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
-                  backgroundPosition: 'center',
-                  backgroundSize: 'cover',
-                  aspectRatio: 0.7004048582995948,
-                },
-              },
-            },
-            {
-              '@type': '@builder.io/sdk:Element',
-              responsiveStyles: {
-                large: {
-                  display: 'flex',
-                  flexDirection: 'column',
-                  alignItems: 'stretch',
-                  flexShrink: '0',
-                  position: 'relative',
-                  marginTop: '30px',
-                  textAlign: 'center',
-                  lineHeight: 'normal',
-                  height: 'auto',
-                },
-              },
-              component: {
-                name: 'Text',
-                options: { text: '<p>Enter some text...</p>' },
-              },
-            },
-          ],
-        },
-      ],
-      onChange:
-        "        function clearWidths() {          columns.forEach(col => {            col.delete('width');          });        }        const columns = options.get('columns') as Array<Map<String, any>>;        if (Array.isArray(columns)) {          const containsColumnWithWidth = !!columns.find(col => col.get('width'));          if (containsColumnWithWidth) {            const containsColumnWithoutWidth = !!columns.find(col => !col.get('width'));            if (containsColumnWithoutWidth) {              clearWidths();            } else {              const sumWidths = columns.reduce((memo, col) => {                return memo + col.get('width');              }, 0);              const widthsDontAddUp = sumWidths !== 100;              if (widthsDontAddUp) {                clearWidths();              }            }          }        }      ",
-    },
-    {
-      name: 'space',
-      type: 'number',
-      defaultValue: 20,
-      helperText: 'Size of gap between columns',
-      advanced: true,
-    },
-    {
-      name: 'stackColumnsAt',
-      type: 'string',
-      defaultValue: 'tablet',
-      helperText: 'Convert horizontal columns to vertical at what device size',
-      enum: ['tablet', 'mobile', 'never'],
-      advanced: true,
-    },
-    {
-      name: 'reverseColumnsWhenStacked',
-      type: 'boolean',
-      defaultValue: false,
-      helperText:
-        'When stacking columns for mobile devices, reverse the ordering',
-      advanced: true,
-    },
-  ],
-});

package/src/blocks/custom-code.js

@@ -1,83 +0,0 @@
-import { registerComponent } from '../functions/register-component';
-
-import * as React from 'react';
-import { View } from 'react-native';
-import { useState, useRef, useEffect } from 'react';
-function CustomCode(props) {
-  const [scriptsInserted, setScriptsInserted] = useState(() => []);
-  const [scriptsRun, setScriptsRun] = useState(() => []);
-  function findAndRunScripts() {
-    if (elem.current && typeof window !== 'undefined') {
-      const scripts = elem.current.getElementsByTagName('script');
-      for (let i = 0; i < scripts.length; i++) {
-        const script = scripts[i];
-        if (script.src) {
-          if (scriptsInserted.includes(script.src)) {
-            continue;
-          }
-          scriptsInserted.push(script.src);
-          const newScript = document.createElement('script');
-          newScript.async = true;
-          newScript.src = script.src;
-          document.head.appendChild(newScript);
-        } else if (
-          !script.type ||
-          [
-            'text/javascript',
-            'application/javascript',
-            'application/ecmascript',
-          ].includes(script.type)
-        ) {
-          if (scriptsRun.includes(script.innerText)) {
-            continue;
-          }
-          try {
-            scriptsRun.push(script.innerText);
-            new Function(script.innerText)();
-          } catch (error) {
-            console.warn('`CustomCode`: Error running script:', error);
-          }
-        }
-      }
-    }
-  }
-  const elem = useRef();
-  useEffect(() => {
-    findAndRunScripts();
-  }, []);
-  return /* @__PURE__ */ React.createElement(View, {
-    ref: elem,
-    dangerouslySetInnerHTML: { __html: 'props.code' },
-  });
-}
-export { CustomCode as default };
-
-registerComponent(CustomCode, {
-  name: 'Custom Code',
-  static: true,
-  builtIn: true,
-  requiredPermissions: ['editCode'],
-  inputs: [
-    {
-      name: 'code',
-      type: 'html',
-      required: true,
-      defaultValue: '<p>Hello there, I am custom HTML code!</p>',
-      code: true,
-    },
-    {
-      name: 'replaceNodes',
-      type: 'boolean',
-      helperText: 'Preserve server rendered dom nodes',
-      advanced: true,
-    },
-    {
-      name: 'scriptsClientOnly',
-      type: 'boolean',
-      defaultValue: false,
-      helperText:
-        'Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads',
-      advanced: true,
-    },
-  ],
-});

package/src/blocks/embed.js

@@ -1,77 +0,0 @@
-import { registerComponent } from '../functions/register-component';
-
-import * as React from 'react';
-import { View } from 'react-native';
-import { useState, useRef, useEffect } from 'react';
-function Embed(props) {
-  const [scriptsInserted, setScriptsInserted] = useState(() => []);
-  const [scriptsRun, setScriptsRun] = useState(() => []);
-  function findAndRunScripts() {
-    if (elem.current && typeof window !== 'undefined') {
-      const scripts = elem.current.getElementsByTagName('script');
-      for (let i = 0; i < scripts.length; i++) {
-        const script = scripts[i];
-        if (script.src) {
-          if (scriptsInserted.includes(script.src)) {
-            continue;
-          }
-          scriptsInserted.push(script.src);
-          const newScript = document.createElement('script');
-          newScript.async = true;
-          newScript.src = script.src;
-          document.head.appendChild(newScript);
-        } else if (
-          !script.type ||
-          [
-            'text/javascript',
-            'application/javascript',
-            'application/ecmascript',
-          ].includes(script.type)
-        ) {
-          if (scriptsRun.includes(script.innerText)) {
-            continue;
-          }
-          try {
-            scriptsRun.push(script.innerText);
-            new Function(script.innerText)();
-          } catch (error) {
-            console.warn('`Embed`: Error running script:', error);
-          }
-        }
-      }
-    }
-  }
-  const elem = useRef();
-  useEffect(() => {
-    findAndRunScripts();
-  }, []);
-  return /* @__PURE__ */ React.createElement(View, {
-    ref: elem,
-    dangerouslySetInnerHTML: { __html: 'props.content' },
-  });
-}
-export { Embed as default };
-
-registerComponent(Embed, {
-  name: 'Embed',
-  static: true,
-  builtIn: true,
-  inputs: [
-    {
-      name: 'url',
-      type: 'url',
-      required: true,
-      defaultValue: '',
-      helperText: 'e.g. enter a youtube url, google map, etc',
-      onChange:
-        "        const url = options.get('url');        if (url) {          options.set('content', 'Loading...');          // TODO: get this out of here!          const apiKey = 'ae0e60e78201a3f2b0de4b';          return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`)            .then(res => res.json())            .then(data => {              if (options.get('url') === url) {                if (data.html) {                  options.set('content', data.html);                } else {                  options.set('content', 'Invalid url, please try another');                }              }            })            .catch(err => {              options.set(                'content',                'There was an error embedding this URL, please try again or another URL'              );            });        } else {          options.delete('content');        }      ",
-    },
-    {
-      name: 'content',
-      type: 'html',
-      defaultValue:
-        '<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',
-      hideFromUI: true,
-    },
-  ],
-});