@builder.io/sdk-react-native 0.0.1-34 → 0.0.1-38

package/src/blocks/video.js

@@ -0,0 +1,100 @@
+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/blocks/video.lite.tsx

@@ -0,0 +1,27 @@
+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/block-styles.js

@@ -0,0 +1,5 @@
+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

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

package/src/components/error-boundary.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Text } from 'react-native';
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error('Error rendering Builder.io block', error, errorInfo);
+  }
+  render() {
+    if (this.state.hasError) {
+      return /* @__PURE__ */ React.createElement(
+        Text,
+        {
+          style: { color: 'gray' },
+        },
+        'Error rendering Builder.io block'
+      );
+    }
+    return this.props.children;
+  }
+}
+export { ErrorBoundary as default };

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

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

package/src/components/render-block.js

@@ -0,0 +1,169 @@
+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';
+import RenderBlocks from './render-blocks';
+function RenderBlock(props) {
+  var _a, _b, _c;
+  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());
+  }
+  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(),
+                  }),
+                  useBlock().children
+                    ? /* @__PURE__ */ React.createElement(
+                        React.Fragment,
+                        null,
+                        /* @__PURE__ */ React.createElement(RenderBlocks, {
+                          path: 'children',
+                          blocks: useBlock().children,
+                        })
+                      )
+                    : null
+                )
+              : null,
+            !componentRef() && useBlock().children && useBlock().children.length
+              ? /* @__PURE__ */ React.createElement(
+                  React.Fragment,
+                  null,
+                  (_b = useBlock().children) == null
+                    ? void 0
+                    : _b.map((child) =>
+                        /* @__PURE__ */ React.createElement(RenderBlock, {
+                          block: child,
+                        })
+                      )
+                )
+              : null
+          )
+        )
+      : /* @__PURE__ */ React.createElement(
+          ComponentRefRef,
+          __spreadProps(
+            __spreadValues(
+              {},
+              (_c = componentInfo == null ? void 0 : componentInfo()) == null
+                ? void 0
+                : _c.options
+            ),
+            {
+              attributes: propertiesAndActions(),
+              builderBlock: useBlock(),
+              style: css(),
+              children: useBlock().children,
+            }
+          )
+        )
+  );
+}
+export { RenderBlock as default };

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

@@ -0,0 +1,129 @@
+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';
+import RenderBlocks from './render-blocks.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());
+  }
+
+  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()}
+              >
+                {useBlock().children ? (
+                  <>
+                    <RenderBlocks
+                      path="children"
+                      blocks={useBlock().children}
+                    />
+                  </>
+                ) : null}
+              </ComponentRefRef>
+            ) : null}
+
+            {!componentRef() &&
+            useBlock().children &&
+            useBlock().children.length ? (
+              <>
+                {useBlock().children?.map((child) => (
+                  <RenderBlock block={child} />
+                ))}
+              </>
+            ) : null}
+          </TagNameRef>
+        </>
+      ) : (
+        <ComponentRefRef
+          {...componentInfo?.()?.options}
+          attributes={propertiesAndActions()}
+          builderBlock={useBlock()}
+          style={css()}
+          children={useBlock().children}
+        />
+      )}
+    </>
+  );
+}

package/src/components/render-blocks.js

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { isEditing } from '../functions/is-editing';
+import RenderBlock from './render-block';
+function RenderBlocks(props) {
+  var _a, _b;
+  function onClick() {
+    var _a2, _b2;
+    if (isEditing() && !((_a2 = props.blocks) == null ? void 0 : _a2.length)) {
+      (_b2 = window.parent) == null
+        ? void 0
+        : _b2.postMessage(
+            {
+              type: 'builder.clickEmptyBlocks',
+              data: {
+                parentElementId: props.parent,
+                dataPath: props.path,
+              },
+            },
+            '*'
+          );
+    }
+  }
+  function onMouseEnter() {
+    var _a2, _b2;
+    if (isEditing() && !((_a2 = props.blocks) == null ? void 0 : _a2.length)) {
+      (_b2 = window.parent) == null
+        ? void 0
+        : _b2.postMessage(
+            {
+              type: 'builder.hoverEmptyBlocks',
+              data: {
+                parentElementId: props.parent,
+                dataPath: props.path,
+              },
+            },
+            '*'
+          );
+    }
+  }
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      'builder-path': props.path,
+      'builder-parent-id': props.parent,
+      onClick: (event) => onClick,
+      onMouseEnter: (event) => onMouseEnter,
+      className:
+        'builder-blocks' +
+        (!((_a = props.blocks) == null ? void 0 : _a.length)
+          ? ' no-blocks'
+          : ''),
+      style: styles.view1,
+    },
+    props.blocks
+      ? /* @__PURE__ */ React.createElement(
+          React.Fragment,
+          null,
+          (_b = props.blocks) == null
+            ? void 0
+            : _b.map((block) =>
+                /* @__PURE__ */ React.createElement(RenderBlock, {
+                  block,
+                })
+              )
+        )
+      : null
+  );
+}
+const styles = StyleSheet.create({
+  view1: { display: 'flex', flexDirection: 'column', alignItems: 'stretch' },
+});
+export { RenderBlocks as default };

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

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { View, StyleSheet, Image, Text } from 'react-native';
+import { isEditing } from '../functions/is-editing';
+import RenderBlock from './render-block.lite';
+
+export default function RenderBlocks(props) {
+  function onClick() {
+    if (isEditing() && !props.blocks?.length) {
+      window.parent?.postMessage(
+        {
+          type: 'builder.clickEmptyBlocks',
+          data: {
+            parentElementId: props.parent,
+            dataPath: props.path,
+          },
+        },
+        '*'
+      );
+    }
+  }
+
+  function onMouseEnter() {
+    if (isEditing() && !props.blocks?.length) {
+      window.parent?.postMessage(
+        {
+          type: 'builder.hoverEmptyBlocks',
+          data: {
+            parentElementId: props.parent,
+            dataPath: props.path,
+          },
+        },
+        '*'
+      );
+    }
+  }
+
+  return (
+    <View
+      builder-path={props.path}
+      builder-parent-id={props.parent}
+      onClick={(event) => onClick}
+      onMouseEnter={(event) => onMouseEnter}
+      className={'builder-blocks' + (!props.blocks?.length ? ' no-blocks' : '')}
+      style={styles.view1}
+    >
+      {props.blocks ? (
+        <>
+          {props.blocks?.map((block) => (
+            <RenderBlock block={block} />
+          ))}
+        </>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  view1: { display: 'flex', flexDirection: 'column', alignItems: 'stretch' },
+});