@builder.io/sdk-react-native 1.0.31-0 → 1.0.31

package/src/blocks/video/video.tsx

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

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

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

@@ -1,106 +0,0 @@
-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 shouldPassLinkComponent = (block: RegisteredComponent | null | undefined) => {
-  return block && (block.isRSC || ['Core:Button', 'Symbol', 'Columns', 'Form:Form', 'Builder: Tabs', 'Builder:Accordion'].includes(block.name));
-};
-export const shouldPassRegisteredComponents = (block: RegisteredComponent | null | undefined) => {
-  return block && (block.isRSC || ['Symbol', 'Columns', 'Form:Form', 'Builder: Tabs', 'Builder:Accordion'].includes(block.name));
-}

package/src/components/block/block.tsx

@@ -1,235 +0,0 @@
-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,
-  shouldPassLinkComponent,
-  shouldPassRegisteredComponents,
-} 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()),
-        builderContext: props.context,
-        ...(shouldPassLinkComponent(blockComponent())
-          ? {
-              builderLinkComponent: props.linkComponent,
-            }
-          : {}),
-        ...(shouldPassRegisteredComponents(blockComponent())
-          ? {
-              builderComponents: 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}
-                  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}
-                  />
-                  {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;