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

package/src/blocks/video.js

@@ -1,100 +0,0 @@
-import * as React from 'react';
-import { View } from 'react-native';
-import ReactVideo from 'react-native-video';
-import { registerComponent } from '../functions/register-component';
-function Video(props) {
-  return /* @__PURE__ */ React.createElement(
-    View,
-    {
-      style: { position: 'relative' },
-    },
-    /* @__PURE__ */ React.createElement(ReactVideo, {
-      paused: !props.autoPlay,
-      controls: props.controls,
-      muted: props.muted,
-      repeat: props.loop,
-      poster: props.posterImage,
-      posterResizeMode: props.fit || 'contain',
-      resizeMode: props.fit || 'contain',
-      style: {
-        position: 'absolute',
-        top: 0,
-        bottom: 0,
-        left: 0,
-        right: 0,
-        zIndex: 1,
-      },
-      source: { uri: props.video },
-    }),
-    /* @__PURE__ */ React.createElement(View, {
-      style: {
-        width: '100%',
-        paddingTop: `${props.aspectRatio * 100}%`,
-      },
-    })
-  );
-}
-registerComponent(Video, {
-  name: 'Video',
-  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: 'video',
-      type: 'file',
-      allowedFileTypes: ['mp4'],
-      bubble: true,
-      defaultValue:
-        'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f',
-      required: true,
-    },
-    {
-      name: 'posterImage',
-      type: 'file',
-      allowedFileTypes: ['jpeg', 'png'],
-      helperText: 'Image to show before the video plays',
-    },
-    {
-      name: 'autoPlay',
-      type: 'boolean',
-      defaultValue: true,
-    },
-    {
-      name: 'controls',
-      type: 'boolean',
-      defaultValue: false,
-    },
-    {
-      name: 'muted',
-      type: 'boolean',
-      defaultValue: true,
-    },
-    {
-      name: 'loop',
-      type: 'boolean',
-      defaultValue: true,
-    },
-    {
-      name: 'fit',
-      type: 'text',
-      defaultValue: 'cover',
-      enum: ['contain', 'cover', 'stretch'],
-    },
-    {
-      name: 'aspectRatio',
-      type: 'number',
-      advanced: true,
-      defaultValue: 0.7004048582995948,
-    },
-  ],
-});
-export { Video as default };

package/src/components/block-styles.js

@@ -1,5 +0,0 @@
-import * as React from 'react';
-function BlockStyles(props) {
-  return /* @__PURE__ */ React.createElement(React.Fragment, null);
-}
-export { BlockStyles as default };

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

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

package/src/components/render-block.js

@@ -1,164 +0,0 @@
-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 { useContext } from 'react';
-import { getBlockComponentOptions } from '../functions/get-block-component-options';
-import { getBlockProperties } from '../functions/get-block-properties';
-import { getBlockStyles } from '../functions/get-block-styles';
-import { getBlockTag } from '../functions/get-block-tag';
-import { components } from '../functions/register-component';
-import BuilderContext from '../context/builder.context';
-import { getBlockActions } from '../functions/get-block-actions';
-import { getProcessedBlock } from '../functions/get-processed-block';
-import BlockStyles from './block-styles';
-function RenderBlock(props) {
-  var _a, _b, _c, _d;
-  function component() {
-    var _a2, _b2;
-    const componentName =
-      (_a2 = useBlock().component) == null ? void 0 : _a2.name;
-    if (!componentName) {
-      return null;
-    }
-    const ref =
-      components[(_b2 = useBlock().component) == null ? void 0 : _b2.name];
-    if (componentName && !ref) {
-      console.warn(`
-        Could not find a registered component named "${componentName}". 
-        If you registered it, is the file that registered it imported by the file that needs to render it?`);
-    }
-    return ref;
-  }
-  function componentInfo() {
-    var _a2;
-    return (_a2 = component == null ? void 0 : component()) == null
-      ? void 0
-      : _a2.info;
-  }
-  function componentRef() {
-    var _a2;
-    return (_a2 = component == null ? void 0 : component()) == null
-      ? void 0
-      : _a2.component;
-  }
-  function tagName() {
-    return getBlockTag(useBlock());
-  }
-  function properties() {
-    return getBlockProperties(useBlock());
-  }
-  function useBlock() {
-    return getProcessedBlock({
-      block: props.block,
-      state: builderContext.state,
-      context: builderContext.context,
-    });
-  }
-  function propertiesAndActions() {
-    return __spreadValues(__spreadValues({}, properties()), actions());
-  }
-  function actions() {
-    return getBlockActions({
-      block: useBlock(),
-      state: builderContext.state,
-      context: builderContext.context,
-    });
-  }
-  function css() {
-    return getBlockStyles(useBlock());
-  }
-  function componentOptions() {
-    return getBlockComponentOptions(useBlock());
-  }
-  function children() {
-    var _a2;
-    return (_a2 = useBlock().children) != null ? _a2 : [];
-  }
-  function noCompRefChildren() {
-    return componentRef() ? [] : children();
-  }
-  const builderContext = useContext(BuilderContext);
-  const ComponentRefRef = componentRef();
-  const TagNameRef = tagName();
-  return /* @__PURE__ */ React.createElement(
-    React.Fragment,
-    null,
-    !((_a = componentInfo == null ? void 0 : componentInfo()) == null
-      ? void 0
-      : _a.noWrap)
-      ? /* @__PURE__ */ React.createElement(
-          React.Fragment,
-          null,
-          /* @__PURE__ */ React.createElement(
-            TagNameRef,
-            __spreadProps(__spreadValues({}, propertiesAndActions()), {
-              style: css(),
-            }),
-            /* @__PURE__ */ React.createElement(BlockStyles, {
-              block: useBlock(),
-            }),
-            componentRef()
-              ? /* @__PURE__ */ React.createElement(
-                  ComponentRefRef,
-                  __spreadProps(__spreadValues({}, componentOptions()), {
-                    builderBlock: useBlock(),
-                  }),
-                  (_b = children()) == null
-                    ? void 0
-                    : _b.map((child) =>
-                        /* @__PURE__ */ React.createElement(RenderBlock, {
-                          block: child,
-                        })
-                      )
-                )
-              : null,
-            (_c = noCompRefChildren()) == null
-              ? void 0
-              : _c.map((child) =>
-                  /* @__PURE__ */ React.createElement(RenderBlock, {
-                    block: child,
-                  })
-                )
-          )
-        )
-      : /* @__PURE__ */ React.createElement(
-          ComponentRefRef,
-          __spreadProps(__spreadValues({}, componentOptions()), {
-            attributes: propertiesAndActions(),
-            builderBlock: useBlock(),
-            style: css(),
-          }),
-          (_d = children()) == null
-            ? void 0
-            : _d.map((child) =>
-                /* @__PURE__ */ React.createElement(RenderBlock, {
-                  block: child,
-                })
-              )
-        )
-  );
-}
-export { RenderBlock as default };

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

@@ -1,132 +0,0 @@
-import * as React from 'react';
-import { View, StyleSheet, Image, Text } from 'react-native';
-import { useContext } from 'react';
-import { getBlockComponentOptions } from '../functions/get-block-component-options';
-import { getBlockProperties } from '../functions/get-block-properties';
-import { getBlockStyles } from '../functions/get-block-styles';
-import { getBlockTag } from '../functions/get-block-tag';
-import { components } from '../functions/register-component';
-import BuilderContext from '../context/builder.context.lite';
-import { getBlockActions } from '../functions/get-block-actions';
-import { getProcessedBlock } from '../functions/get-processed-block';
-import BlockStyles from './block-styles.lite';
-
-export default function RenderBlock(props) {
-  function component() {
-    const componentName = useBlock().component?.name;
-
-    if (!componentName) {
-      return null;
-    }
-
-    const ref = components[useBlock().component?.name];
-
-    if (componentName && !ref) {
-      // TODO: Public doc page with more info about this message
-      console.warn(`
-        Could not find a registered component named "${componentName}". 
-        If you registered it, is the file that registered it imported by the file that needs to render it?`);
-    }
-
-    return ref;
-  }
-
-  function componentInfo() {
-    return component?.()?.info;
-  }
-
-  function componentRef() {
-    return component?.()?.component;
-  }
-
-  function tagName() {
-    return getBlockTag(useBlock());
-  }
-
-  function properties() {
-    return getBlockProperties(useBlock());
-  }
-
-  function useBlock() {
-    return getProcessedBlock({
-      block: props.block,
-      state: builderContext.state,
-      context: builderContext.context,
-    });
-  }
-
-  function propertiesAndActions() {
-    return { ...properties(), ...actions() };
-  }
-
-  function actions() {
-    return getBlockActions({
-      block: useBlock(),
-      state: builderContext.state,
-      context: builderContext.context,
-    });
-  }
-
-  function css() {
-    return getBlockStyles(useBlock());
-  }
-
-  function componentOptions() {
-    return getBlockComponentOptions(useBlock());
-  }
-
-  function children() {
-    // TO-DO: When should `canHaveChildren` dictate rendering?
-    // This is currently commented out because some Builder components (e.g. Box) do not have `canHaveChildren: true`,
-    // but still receive and need to render children.
-    // return componentInfo?.()?.canHaveChildren ? useBlock().children : [];
-    return useBlock().children ?? [];
-  }
-
-  function noCompRefChildren() {
-    return componentRef() ? [] : children();
-  }
-
-  const builderContext = useContext(BuilderContext);
-
-  const ComponentRefRef = componentRef();
-  const TagNameRef = tagName();
-
-  return (
-    <>
-      {!componentInfo?.()?.noWrap ? (
-        <>
-          <TagNameRef {...propertiesAndActions()} style={css()}>
-            <BlockStyles block={useBlock()} />
-
-            {componentRef() ? (
-              <ComponentRefRef
-                {...componentOptions()}
-                builderBlock={useBlock()}
-              >
-                {children()?.map((child) => (
-                  <RenderBlock block={child} />
-                ))}
-              </ComponentRefRef>
-            ) : null}
-
-            {noCompRefChildren()?.map((child) => (
-              <RenderBlock block={child} />
-            ))}
-          </TagNameRef>
-        </>
-      ) : (
-        <ComponentRefRef
-          {...componentOptions()}
-          attributes={propertiesAndActions()}
-          builderBlock={useBlock()}
-          style={css()}
-        >
-          {children()?.map((child) => (
-            <RenderBlock block={child} />
-          ))}
-        </ComponentRefRef>
-      )}
-    </>
-  );
-}

package/src/components/render-content.js

@@ -1,220 +0,0 @@
-import * as React from 'react';
-import { View, Text } from 'react-native';
-import { useState, useEffect } from 'react';
-import { isBrowser } from '../functions/is-browser';
-import BuilderContext from '../context/builder.context';
-import { track } from '../functions/track';
-import { isReactNative } from '../functions/is-react-native';
-import { isEditing } from '../functions/is-editing';
-import { isPreviewing } from '../functions/is-previewing';
-import { previewingModelName } from '../functions/previewing-model-name';
-import { getContent } from '../functions/get-content';
-import {
-  convertSearchParamsToQueryObject,
-  getBuilderSearchParams,
-} from '../functions/get-builder-search-params';
-import RenderBlocks from './render-blocks';
-function RenderContent(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
-  function useContent() {
-    return overrideContent || props.content;
-  }
-  const [update, setUpdate] = useState(() => 0);
-  const [state, setState] = useState(() => ({}));
-  const [context, setContext] = useState(() => ({}));
-  const [overrideContent, setOverrideContent] = useState(() => null);
-  function getCssFromFont(font, data) {
-    var _a2, _b2;
-    const family =
-      font.family +
-      (font.kind && !font.kind.includes('#') ? ', ' + font.kind : '');
-    const name = family.split(',')[0];
-    const url =
-      (_b2 = font.fileUrl) != null
-        ? _b2
-        : (_a2 = font == null ? void 0 : font.files) == null
-        ? void 0
-        : _a2.regular;
-    let str = '';
-    if (url && family && name) {
-      str += `
-@font-face {
-  font-family: "${family}";
-  src: local("${name}"), url('${url}') format('woff2');
-  font-display: fallback;
-  font-weight: 400;
-}
-        `.trim();
-    }
-    if (font.files) {
-      for (const weight in font.files) {
-        const isNumber = String(Number(weight)) === weight;
-        if (!isNumber) {
-          continue;
-        }
-        const weightUrl = font.files[weight];
-        if (weightUrl && weightUrl !== url) {
-          str += `
-@font-face {
-  font-family: "${family}";
-  src: url('${weightUrl}') format('woff2');
-  font-display: fallback;
-  font-weight: ${weight};
-}
-          `.trim();
-        }
-      }
-    }
-    return str;
-  }
-  function getFontCss(data) {
-    var _a2, _b2;
-    return (
-      ((_b2 =
-        (_a2 = data == null ? void 0 : data.customFonts) == null
-          ? void 0
-          : _a2.map((font) => getCssFromFont(font, data))) == null
-        ? void 0
-        : _b2.join(' ')) || ''
-    );
-  }
-  function processMessage(event) {
-    const { data } = event;
-    if (data) {
-      switch (data.type) {
-        case 'builder.contentUpdate': {
-          const key =
-            data.data.key ||
-            data.data.alias ||
-            data.data.entry ||
-            data.data.modelName;
-          const contentData = data.data.data;
-          if (key === props.model) {
-            setOverrideContent(contentData);
-          }
-          break;
-        }
-        case 'builder.patchUpdates': {
-          break;
-        }
-      }
-    }
-  }
-  useEffect(() => {
-    if (isBrowser()) {
-      if (isEditing()) {
-        window.addEventListener('message', processMessage);
-      }
-      if (useContent() && !isEditing()) {
-        track('impression', {
-          contentId: useContent().id,
-        });
-      }
-      if (isPreviewing()) {
-        if (props.model && previewingModelName() === props.model) {
-          const currentUrl = new URL(location.href);
-          const apiKey = currentUrl.searchParams.get('apiKey');
-          if (apiKey) {
-            getContent({
-              model: props.model,
-              apiKey,
-              options: getBuilderSearchParams(
-                convertSearchParamsToQueryObject(currentUrl.searchParams)
-              ),
-            }).then((content) => {
-              if (content) {
-                setOverrideContent(content);
-              }
-            });
-          }
-        }
-      }
-    }
-  }, []);
-  useEffect(() => {
-    return () => {
-      if (isBrowser()) {
-        window.removeEventListener('message', processMessage);
-      }
-    };
-  }, []);
-  return /* @__PURE__ */ React.createElement(
-    BuilderContext.Provider,
-    {
-      value: {
-        get content() {
-          return useContent();
-        },
-        get state() {
-          return state;
-        },
-        get context() {
-          return context;
-        },
-      },
-    },
-    useContent()
-      ? /* @__PURE__ */ React.createElement(
-          React.Fragment,
-          null,
-          /* @__PURE__ */ React.createElement(
-            View,
-            {
-              onClick: (event) => {
-                if (!isEditing()) {
-                  track('click', {
-                    contentId: useContent().id,
-                  });
-                }
-              },
-              'data-builder-content-id':
-                (_a = useContent == null ? void 0 : useContent()) == null
-                  ? void 0
-                  : _a.id,
-            },
-            (((_c =
-              (_b = useContent == null ? void 0 : useContent()) == null
-                ? void 0
-                : _b.data) == null
-              ? void 0
-              : _c.cssCode) ||
-              ((_f =
-                (_e =
-                  (_d = useContent == null ? void 0 : useContent()) == null
-                    ? void 0
-                    : _d.data) == null
-                  ? void 0
-                  : _e.customFonts) == null
-                ? void 0
-                : _f.length)) &&
-              !isReactNative()
-              ? /* @__PURE__ */ React.createElement(
-                  View,
-                  null,
-                  /* @__PURE__ */ React.createElement(
-                    Text,
-                    null,
-                    useContent().data.cssCode
-                  ),
-                  /* @__PURE__ */ React.createElement(
-                    Text,
-                    null,
-                    getFontCss(useContent().data)
-                  )
-                )
-              : null,
-            /* @__PURE__ */ React.createElement(RenderBlocks, {
-              blocks:
-                (_h =
-                  (_g = useContent == null ? void 0 : useContent()) == null
-                    ? void 0
-                    : _g.data) == null
-                  ? void 0
-                  : _h.blocks,
-            })
-          )
-        )
-      : null
-  );
-}
-export { RenderContent as default };