@builder.io/sdk-react-native 1.0.33 → 1.0.35

package/src/blocks/video/video.tsx

@@ -0,0 +1,70 @@
+// TO-DO: This file breaks due to this issue:
+// https://github.com/expo/web-examples/issues/73
+// For now, we do not import it elsewhere to avoid crashing Expo servers on web when importing the SDK.
+import * as React from 'react';
+import { View } from 'react-native';
+import ReactVideo from 'react-native-video';
+
+// Subset of Image props, many are irrelevant for native (such as altText, etc)
+/**
+ * 
+ * @typedef {{
+ *   attributes?: any;
+ *   video?: string;
+ *   autoPlay?: boolean;
+ *   controls?: boolean;
+ *   muted?: boolean;
+ *   loop?: boolean;
+ *   playsInline?: boolean;
+ *   aspectRatio?: number;
+ *   fit?: 'contain' | 'cover' | 'stretch';
+ *   position?:
+ *     | 'center'
+ *     | 'top'
+ *     | 'left'
+ *     | 'right'
+ *     | 'bottom'
+ *     | 'top left'
+ *     | 'top right'
+ *     | 'bottom left'
+ *     | 'bottom right';
+ *   posterImage?: string;
+ *   children?: any;
+ * }} VideoProps
+ */
+
+// TODO: support children by wrapping in a View
+
+/**
+ * @param {VideoProps} props
+ */
+export default function Video(props) {
+  return (
+    <View style={{ position: 'relative' }}>
+      <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 }}
+      />
+      <View
+        style={{
+          width: '100%',
+          paddingTop: `${props.aspectRatio * 100}%`,
+        }}
+      />
+    </View>
+  );
+}

package/src/blocks/video/video.types.ts

@@ -0,0 +1,21 @@
+import type { BuilderBlock } from '../../types/builder-block';
+export interface VideoProps {
+  attributes?: any;
+  video?: string;
+  autoPlay?: boolean;
+  controls?: boolean;
+  muted?: boolean;
+  loop?: boolean;
+  playsInline?: boolean;
+  aspectRatio?: number;
+  width?: number;
+  height?: number;
+  fit?: 'contain' | 'cover' | 'fill';
+  preload?: 'auto' | 'metadata' | 'none';
+  position?: 'center' | 'top' | 'left' | 'right' | 'bottom' | 'top left' | 'top right' | 'bottom left' | 'bottom right';
+  posterImage?: string;
+  lazyLoad?: boolean;
+  children?: any;
+  fitContent?: boolean;
+  builderBlock?: BuilderBlock;
+}

package/src/components/block/animator.ts

@@ -0,0 +1,220 @@
+import { camelToKebabCase } from '../../functions/camel-to-kebab-case';
+import type { BuilderAnimation } from '../../types/builder-block';
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+function throttle(func: Function, wait: number, options: any = {}) {
+  let context: any;
+  let args: any;
+  let result: any;
+  let timeout = (null as any);
+  let previous = 0;
+  const later = function () {
+    previous = options.leading === false ? 0 : Date.now();
+    timeout = null;
+    result = func.apply(context, args);
+    if (!timeout) context = args = null;
+  };
+  return function (this: any) {
+    const now = Date.now();
+    if (!previous && options.leading === false) previous = now;
+    const remaining = wait - (now - previous);
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    context = this;
+    // eslint-disable-next-line prefer-rest-params
+    args = arguments;
+    if (remaining <= 0 || remaining > wait) {
+      if (timeout) {
+        clearTimeout(timeout);
+        timeout = null;
+      }
+      previous = now;
+      result = func.apply(context, args);
+      if (!timeout) context = args = null;
+    } else if (!timeout && options.trailing !== false) {
+      timeout = setTimeout(later, remaining);
+    }
+    return result;
+  };
+}
+function assign(target: object, ..._args: any[]) {
+  const to = Object(target);
+  for (let index = 1; index < arguments.length; index++) {
+    // eslint-disable-next-line prefer-rest-params
+    const nextSource = arguments[index];
+    if (nextSource != null) {
+      // Skip over if undefined or null
+      for (const nextKey in nextSource) {
+        // Avoid bugs when hasOwnProperty is shadowed
+        if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
+          to[nextKey] = nextSource[nextKey];
+        }
+      }
+    }
+  }
+  return to;
+}
+export function bindAnimations(animations: BuilderAnimation[]) {
+  for (const animation of animations) {
+    switch (animation.trigger) {
+      case 'pageLoad':
+        triggerAnimation(animation);
+        break;
+      case 'scrollInView':
+        bindScrollInViewAnimation(animation);
+        break;
+    }
+  }
+}
+function warnElementNotPresent(id: string) {
+  console.warn(`Cannot animate element: element with ID ${id} not found!`);
+}
+function augmentAnimation(animation: BuilderAnimation, element: HTMLElement) {
+  const stylesUsed = getAllStylesUsed(animation);
+  const computedStyle: any = getComputedStyle(element);
+  // const computedStyle = getComputedStyle(element);
+  // // FIXME: this will break if original load is in one reponsive size then resize to another hmmm
+  // Need to use transform instead of left since left can change on screen sizes
+  const firstStyles = animation.steps[0].styles;
+  const lastStyles = animation.steps[animation.steps.length - 1]!.styles;
+  const bothStyles = [firstStyles, lastStyles];
+
+  // FIXME: this won't work as expected for augmented animations - may need the editor itself to manage this
+  for (const styles of bothStyles) {
+    for (const style of stylesUsed) {
+      if (!(style in styles)) {
+        styles[(style as any)] = computedStyle[style];
+      }
+    }
+  }
+}
+function getAllStylesUsed(animation: BuilderAnimation) {
+  const properties: (keyof CSSStyleDeclaration)[] = [];
+  for (const step of animation.steps) {
+    for (const key in step.styles) {
+      if (properties.indexOf((key as any)) === -1) {
+        properties.push((key as any));
+      }
+    }
+  }
+  return properties;
+}
+export function triggerAnimation(animation: BuilderAnimation) {
+  // TODO: do for ALL elements
+  const elements = (Array.prototype.slice.call(document.getElementsByClassName(animation.elementId || animation.id || '')) as HTMLElement[]);
+  if (!elements.length) {
+    warnElementNotPresent(animation.elementId || animation.id || '');
+    return;
+  }
+  Array.from(elements).forEach(element => {
+    augmentAnimation(animation, element);
+    // TODO: do this properly, may have other animations of different properties
+
+    // TODO: only override the properties
+    // TODO: if there is an entrance and hover animation, the transition duration will get effed
+    // element.setAttribute('style', '');
+
+    // const styledUsed = this.getAllStylesUsed(animation);
+    element.style.transition = 'none';
+    element.style.transitionDelay = '0';
+    assign(element.style, animation.steps[0].styles);
+    // TODO: queue/batch these timeouts
+    // TODO: only include properties explicitly set in the animation
+    // using Object.keys(styles)
+    setTimeout(() => {
+      element.style.transition = `all ${animation.duration}s ${camelToKebabCase(animation.easing)}`;
+      if (animation.delay) {
+        element.style.transitionDelay = animation.delay + 's';
+      }
+      assign(element.style, animation.steps[1].styles);
+      // TODO: maybe remove/reset transitoin property after animation duration
+
+      // TODO: queue timers
+      setTimeout(() => {
+        // TODO: what if has other transition (reset back to what it was)
+        element.style.transition = '';
+        element.style.transitionDelay = '';
+      }, (animation.delay || 0) * 1000 + animation.duration * 1000 + 100);
+    });
+  });
+}
+
+// TODO: unbind on element remove
+export function bindScrollInViewAnimation(animation: BuilderAnimation) {
+  // TODO: apply to ALL matching elements
+  const elements = (Array.prototype.slice.call(document.getElementsByClassName(animation.elementId || animation.id || '')) as HTMLElement[]);
+  if (!elements.length) {
+    warnElementNotPresent(animation.elementId || animation.id || '');
+    return;
+  }
+
+  // TODO: if server side rendered and scrolled into view don't animate...
+  Array.from(elements).forEach(element => {
+    augmentAnimation(animation, element);
+    let triggered = false;
+    let pendingAnimation = false;
+    function immediateOnScroll() {
+      if (!triggered && isScrolledIntoView(element)) {
+        triggered = true;
+        pendingAnimation = true;
+        setTimeout(() => {
+          assign(element!.style, animation.steps[1].styles);
+          if (!animation.repeat) {
+            document.removeEventListener('scroll', onScroll);
+          }
+          setTimeout(() => {
+            pendingAnimation = false;
+            if (!animation.repeat) {
+              element.style.transition = '';
+              element.style.transitionDelay = '';
+            }
+          }, (animation.duration + (animation.delay || 0)) * 1000 + 100);
+        });
+      } else if (animation.repeat && triggered && !pendingAnimation && !isScrolledIntoView(element)) {
+        // we want to repeat the animation every time the the element is out of view and back again
+        triggered = false;
+        assign(element!.style, animation.steps[0].styles);
+      }
+    }
+
+    // TODO: roll all of these in one for more efficiency of checking all the rects
+    const onScroll = throttle(immediateOnScroll, 200, {
+      leading: false
+    });
+
+    // TODO: fully in view or partially
+    function isScrolledIntoView(elem: HTMLElement) {
+      const rect = elem.getBoundingClientRect();
+      const windowHeight = window.innerHeight;
+      const thresholdPercent = (animation.thresholdPercent || 0) / 100;
+      const threshold = thresholdPercent * windowHeight;
+
+      // TODO: partial in view? or what if element is larger than screen itself
+      return rect.bottom > threshold && rect.top < windowHeight - threshold // Element is peeking top or bottom
+      // (rect.top > 0 && rect.bottom < window.innerHeight) || // element fits within the screen and is fully on screen (not hanging off at all)
+      // (rect.top < 0 && rect.bottom > window.innerHeight) // element is larger than the screen and hangs over the top and bottom
+      ;
+    }
+    const defaultState = animation.steps[0].styles;
+    function attachDefaultState() {
+      assign(element!.style, defaultState);
+    }
+    attachDefaultState();
+
+    // TODO: queue/batch these timeouts!
+    setTimeout(() => {
+      element.style.transition = `all ${animation.duration}s ${camelToKebabCase(animation.easing)}`;
+      if (animation.delay) {
+        element.style.transitionDelay = animation.delay + 's';
+      }
+    });
+
+    // TODO: one listener for everything
+    document.addEventListener('scroll', onScroll, ({
+      capture: true,
+      passive: true
+    } as any));
+
+    // Do an initial check
+    immediateOnScroll();
+  });
+}

package/src/components/block/block.helpers.ts

@@ -0,0 +1,124 @@
+import { TARGET } from '../../constants/target';
+import type { BuilderContextInterface, RegisteredComponent, RegisteredComponents } from '../../context/types';
+import { evaluate } from '../../functions/evaluate/index';
+import { extractTextStyles } from '../../functions/extract-text-styles';
+import { getProcessedBlock } from '../../functions/get-processed-block';
+import { getStyle } from '../../functions/get-style';
+import type { BuilderBlock } from '../../types/builder-block';
+import type { RepeatData } from './types';
+export const getComponent = ({
+  block,
+  context,
+  registeredComponents
+}: {
+  block: BuilderBlock;
+  context: BuilderContextInterface;
+  registeredComponents: RegisteredComponents;
+}) => {
+  const componentName = getProcessedBlock({
+    block,
+    localState: context.localState,
+    rootState: context.rootState,
+    rootSetState: context.rootSetState,
+    context: context.context,
+    shouldEvaluateBindings: false
+  }).component?.name;
+  if (!componentName) {
+    return null;
+  }
+  const ref = registeredComponents[componentName];
+  if (!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 undefined;
+  } else {
+    return ref;
+  }
+};
+export const getRepeatItemData = ({
+  block,
+  context
+}: {
+  block: BuilderBlock;
+  context: BuilderContextInterface;
+}): RepeatData[] | undefined => {
+  /**
+   * we don't use `state.processedBlock` here because the processing done within its logic includes evaluating the block's bindings,
+   * which will not work if there is a repeat.
+   */
+  const {
+    repeat,
+    ...blockWithoutRepeat
+  } = block;
+  if (!repeat?.collection) {
+    return undefined;
+  }
+  const itemsArray = evaluate({
+    code: repeat.collection,
+    localState: context.localState,
+    rootState: context.rootState,
+    rootSetState: context.rootSetState,
+    context: context.context,
+    enableCache: true
+  });
+  if (!Array.isArray(itemsArray)) {
+    return undefined;
+  }
+  const collectionName = repeat.collection.split('.').pop();
+  const itemNameToUse = repeat.itemName || (collectionName ? collectionName + 'Item' : 'item');
+  const repeatArray = itemsArray.map<RepeatData>((item, index) => ({
+    context: {
+      ...context,
+      localState: {
+        ...context.localState,
+        $index: index,
+        $item: item,
+        [itemNameToUse]: item,
+        [`$${itemNameToUse}Index`]: index
+      }
+    },
+    block: blockWithoutRepeat
+  }));
+  return repeatArray;
+};
+export const getInheritedStyles = ({
+  block,
+  context
+}: {
+  block: BuilderBlock;
+  context: BuilderContextInterface;
+}) => {
+  const style = getStyle({
+    block,
+    context
+  });
+  if (!style) {
+    return {};
+  }
+  return extractTextStyles(style);
+};
+export const provideLinkComponent = (block: RegisteredComponent | null | undefined, linkComponent: any) => {
+  return block && (block.isRSC && TARGET === 'rsc' || ['Core:Button', 'Symbol', 'Columns', 'Form:Form', 'Builder: Tabs', 'Builder:Accordion'].includes(block.name)) ? {
+    builderLinkComponent: linkComponent
+  } : {};
+};
+export const provideRegisteredComponents = (block: RegisteredComponent | null | undefined, registeredComponents: RegisteredComponents) => {
+  return block && (block.isRSC && TARGET === 'rsc' || ['Symbol', 'Columns', 'Form:Form', 'Builder: Tabs', 'Builder:Accordion'].includes(block.name)) ? {
+    builderComponents: registeredComponents
+  } : {};
+};
+export const provideBuilderBlock = (block: RegisteredComponent | null | undefined, builderBlock: BuilderBlock) => {
+  /**
+   * Our built-in components frequently make use of the block, so we provide all of it under `builderBlock`
+   */
+  return block && (block.isRSC && TARGET === 'rsc' || TARGET === 'reactNative' && block.name === 'Text' || ['Builder:Accordion', 'Columns', 'Form:Form', 'Builder: Tabs', 'Symbol', 'Image', 'Video'].includes(block.name)) ? {
+    builderBlock
+  } : {};
+};
+export const provideBuilderContext = (block: RegisteredComponent | null | undefined, context: BuilderContextInterface) => {
+  return block && (block.isRSC && TARGET === 'rsc' || ['Builder:Accordion', 'Columns', 'Form:Form', 'Builder: Tabs', 'Symbol', 'Slot'].includes(block.name)) ? {
+    builderContext: context
+  } : {};
+}

package/src/components/block/block.tsx

@@ -0,0 +1,232 @@
+import BaseText from "../../blocks/BaseText";
+import * as React from "react";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+} from "react-native";
+import { useEffect } from "react";
+
+export type BlockProps = {
+  block: BuilderBlock;
+  context: BuilderContextInterface;
+  registeredComponents: RegisteredComponents;
+  linkComponent: any;
+};
+import type {
+  BuilderContextInterface,
+  RegisteredComponents,
+} from "../../context/types";
+import { getBlockComponentOptions } from "../../functions/get-block-component-options";
+import { getProcessedBlock } from "../../functions/get-processed-block";
+import type { BuilderBlock } from "../../types/builder-block";
+import DynamicDiv from "../dynamic-div";
+import { bindAnimations } from "./animator";
+import {
+  getComponent,
+  getInheritedStyles,
+  getRepeatItemData,
+  provideBuilderBlock,
+  provideBuilderContext,
+  provideLinkComponent,
+  provideRegisteredComponents,
+} from "./block.helpers";
+import BlockStyles from "./components/block-styles";
+import BlockWrapper from "./components/block-wrapper";
+import type { ComponentProps } from "./components/component-ref/component-ref.helpers";
+import ComponentRef from "./components/component-ref/component-ref";
+import RepeatedBlock from "./components/repeated-block";
+
+function Block(props: BlockProps) {
+  function blockComponent() {
+    return getComponent({
+      block: props.block,
+      context: props.context,
+      registeredComponents: props.registeredComponents,
+    });
+  }
+
+  function repeatItem() {
+    return getRepeatItemData({
+      block: props.block,
+      context: props.context,
+    });
+  }
+
+  function processedBlock() {
+    return props.block.repeat?.collection
+      ? props.block
+      : getProcessedBlock({
+          block: props.block,
+          localState: props.context.localState,
+          rootState: props.context.rootState,
+          rootSetState: props.context.rootSetState,
+          context: props.context.context,
+          shouldEvaluateBindings: true,
+        });
+  }
+
+  function Tag() {
+    const shouldUseLink =
+      props.block.tagName === "a" ||
+      processedBlock().properties?.href ||
+      processedBlock().href;
+    if (shouldUseLink) {
+      return props.linkComponent || BaseText;
+    }
+    return View;
+  }
+
+  function canShowBlock() {
+    if (props.block.repeat?.collection) {
+      if (repeatItem?.()?.length) return true;
+      return false;
+    }
+    const shouldHide =
+      "hide" in processedBlock() ? processedBlock().hide : false;
+    const shouldShow =
+      "show" in processedBlock() ? processedBlock().show : true;
+    return shouldShow && !shouldHide;
+  }
+
+  function childrenWithoutParentComponent() {
+    /**
+     * When there is no `componentRef`, there might still be children that need to be rendered. In this case,
+     * we render them outside of `componentRef`.
+     * NOTE: We make sure not to render this if `repeatItemData` is non-null, because that means we are rendering an array of
+     * blocks, and the children will be repeated within those blocks.
+     */
+    const shouldRenderChildrenOutsideRef =
+      !blockComponent?.()?.component && !repeatItem();
+    return shouldRenderChildrenOutsideRef
+      ? processedBlock().children ?? []
+      : [];
+  }
+
+  function componentRefProps() {
+    return {
+      blockChildren: processedBlock().children ?? [],
+      componentRef: blockComponent?.()?.component,
+      componentOptions: {
+        ...getBlockComponentOptions(processedBlock()),
+        ...provideBuilderBlock(blockComponent(), processedBlock()),
+        ...provideBuilderContext(blockComponent(), props.context),
+        ...provideLinkComponent(blockComponent(), props.linkComponent),
+        ...provideRegisteredComponents(
+          blockComponent(),
+          props.registeredComponents
+        ),
+      },
+      context: {
+        ...props.context,
+        inheritedStyles: getInheritedStyles({
+          block: processedBlock(),
+          context: props.context,
+        }),
+      } as any,
+      linkComponent: props.linkComponent,
+      registeredComponents: props.registeredComponents,
+      builderBlock: processedBlock(),
+      includeBlockProps: blockComponent?.()?.noWrap === true,
+      isInteractive: !blockComponent?.()?.isRSC,
+    };
+  }
+
+  useEffect(() => {
+    const blockId = processedBlock().id;
+    const animations = processedBlock().animations;
+    if (animations && blockId) {
+      bindAnimations(
+        animations.map((animation) => ({
+          ...animation,
+          elementId: blockId,
+        }))
+      );
+    }
+  }, []);
+
+  return (
+    <>
+      {canShowBlock() ? (
+        <>
+          <BlockStyles block={props.block} context={props.context} />
+          {!blockComponent?.()?.noWrap ? (
+            <>
+              {!repeatItem() ? (
+                <BlockWrapper
+                  Wrapper={Tag()}
+                  block={processedBlock()}
+                  context={props.context}
+                >
+                  <ComponentRef
+                    componentRef={componentRefProps().componentRef}
+                    componentOptions={componentRefProps().componentOptions}
+                    blockChildren={componentRefProps().blockChildren}
+                    context={componentRefProps().context}
+                    registeredComponents={
+                      componentRefProps().registeredComponents
+                    }
+                    linkComponent={componentRefProps().linkComponent}
+                    builderBlock={componentRefProps().builderBlock}
+                    includeBlockProps={componentRefProps().includeBlockProps}
+                    isInteractive={componentRefProps().isInteractive}
+                  />
+                  {childrenWithoutParentComponent()?.map((child) => (
+                    <Block
+                      key={child.id}
+                      block={child}
+                      registeredComponents={props.registeredComponents}
+                      linkComponent={props.linkComponent}
+                      context={
+                        {
+                          ...props.context,
+                          inheritedStyles: getInheritedStyles({
+                            block: processedBlock(),
+                            context: props.context,
+                          }),
+                        } as any
+                      }
+                    />
+                  ))}
+                </BlockWrapper>
+              ) : (
+                <>
+                  {repeatItem()?.map((data, index) => (
+                    <RepeatedBlock
+                      key={index}
+                      repeatContext={data.context}
+                      block={data.block}
+                      registeredComponents={props.registeredComponents}
+                      linkComponent={props.linkComponent}
+                    />
+                  ))}
+                </>
+              )}
+            </>
+          ) : (
+            <>
+              <ComponentRef
+                componentRef={componentRefProps().componentRef}
+                componentOptions={componentRefProps().componentOptions}
+                blockChildren={componentRefProps().blockChildren}
+                context={componentRefProps().context}
+                registeredComponents={componentRefProps().registeredComponents}
+                linkComponent={componentRefProps().linkComponent}
+                builderBlock={componentRefProps().builderBlock}
+                includeBlockProps={componentRefProps().includeBlockProps}
+                isInteractive={componentRefProps().isInteractive}
+              />
+            </>
+          )}
+        </>
+      ) : null}
+    </>
+  );
+}
+
+export default Block;