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

package/src/blocks/textarea/textarea.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+} from "react-native";
+
+/**
+ * This import is used by the Svelte SDK. Do not remove.
+ */
+
+export interface TextareaProps {
+  attributes?: any;
+  name?: string;
+  value?: string;
+  defaultValue?: string;
+  placeholder?: string;
+}
+
+import { filterAttrs } from "../helpers";
+import { setAttrs } from "../helpers";
+
+function Textarea(props: TextareaProps) {
+  return (
+    <View
+      {...{}}
+      {...props.attributes}
+      placeholder={props.placeholder}
+      name={props.name}
+      value={props.value}
+      defaultValue={props.defaultValue}
+    />
+  );
+}
+
+export default Textarea;

package/src/blocks/video/component-info.ts

@@ -0,0 +1,83 @@
+import type { ComponentInfo } from '../../types/components';
+export const componentInfo: ComponentInfo = {
+  name: 'Video',
+  canHaveChildren: true,
+  defaultStyles: {
+    minHeight: '20px',
+    minWidth: '20px'
+  },
+  image: 'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-videocam-24px%20(1).svg?alt=media&token=49a84e4a-b20e-4977-a650-047f986874bb',
+  inputs: [{
+    name: 'video',
+    type: 'file',
+    allowedFileTypes: ['mp4'],
+    bubble: true,
+    defaultValue: 'https://cdn.builder.io/o/assets%2FYJIGb4i01jvw0SRdL5Bt%2Fd27731a526464deba0016216f5f9e570%2Fcompressed?apiKey=YJIGb4i01jvw0SRdL5Bt&token=d27731a526464deba0016216f5f9e570&alt=media&optimized=true',
+    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: 'playsInline',
+    type: 'boolean',
+    defaultValue: true
+  }, {
+    name: 'fit',
+    type: 'text',
+    defaultValue: 'cover',
+    enum: ['contain', 'cover', 'fill', 'auto']
+  }, {
+    name: 'preload',
+    type: 'text',
+    defaultValue: 'metadata',
+    enum: ['auto', 'metadata', 'none']
+  }, {
+    name: 'fitContent',
+    type: 'boolean',
+    helperText: 'When child blocks are provided, fit to them instead of using the aspect ratio',
+    defaultValue: true,
+    advanced: true
+  }, {
+    name: 'position',
+    type: 'text',
+    defaultValue: 'center',
+    enum: ['center', 'top', 'left', 'right', 'bottom', 'top left', 'top right', 'bottom left', 'bottom right']
+  }, {
+    name: 'height',
+    type: 'number',
+    advanced: true
+  }, {
+    name: 'width',
+    type: 'number',
+    advanced: true
+  }, {
+    name: 'aspectRatio',
+    type: 'number',
+    advanced: true,
+    defaultValue: 0.7004048582995948
+  }, {
+    name: 'lazyLoad',
+    type: 'boolean',
+    helperText: 'Load this video "lazily" - as in only when a user scrolls near the video. Recommended for optmized performance and bandwidth consumption',
+    defaultValue: true,
+    advanced: true
+  }]
+}

package/src/blocks/video/index.ts

@@ -0,0 +1 @@
+export { default } from './video'

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
+  } : {};
+}