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

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;

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

@@ -0,0 +1,136 @@
+import * as React from "react";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+} from "react-native";
+
+export type BlockStylesProps = {
+  block: BuilderBlock;
+  context: BuilderContextInterface;
+};
+import {
+  getMaxWidthQueryForSize,
+  getSizesForBreakpoints,
+} from "../../../constants/device-sizes";
+import { TARGET } from "../../../constants/target";
+import type { BuilderContextInterface } from "../../../context/types";
+import { camelToKebabCase } from "../../../functions/camel-to-kebab-case";
+import { getProcessedBlock } from "../../../functions/get-processed-block";
+import { createCssClass } from "../../../helpers/css";
+import { checkIsDefined } from "../../../helpers/nullable";
+import type { BuilderBlock } from "../../../types/builder-block";
+import InlinedStyles from "../../inlined-styles";
+
+function BlockStyles(props: BlockStylesProps) {
+  function canShowBlock() {
+    const processedBlock = getProcessedBlock({
+      block: props.block,
+      localState: props.context.localState,
+      rootState: props.context.rootState,
+      rootSetState: props.context.rootSetState,
+      context: props.context.context,
+      shouldEvaluateBindings: true,
+    });
+    // only render styles for blocks that are visible
+    if (checkIsDefined(processedBlock.hide)) {
+      return !processedBlock.hide;
+    }
+    if (checkIsDefined(processedBlock.show)) {
+      return processedBlock.show;
+    }
+    return true;
+  }
+
+  function css() {
+    const processedBlock = getProcessedBlock({
+      block: props.block,
+      localState: props.context.localState,
+      rootState: props.context.rootState,
+      rootSetState: props.context.rootSetState,
+      context: props.context.context,
+      shouldEvaluateBindings: true,
+    });
+    const styles = processedBlock.responsiveStyles;
+    const content = props.context.content;
+    const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(
+      content?.meta?.breakpoints || {}
+    );
+    const largeStyles = styles?.large;
+    const mediumStyles = styles?.medium;
+    const smallStyles = styles?.small;
+    const className = processedBlock.id;
+    if (!className) {
+      return "";
+    }
+    const largeStylesClass = largeStyles
+      ? createCssClass({
+          className,
+          styles: largeStyles,
+        })
+      : "";
+    const mediumStylesClass = mediumStyles
+      ? createCssClass({
+          className,
+          styles: mediumStyles,
+          mediaQuery: getMaxWidthQueryForSize(
+            "medium",
+            sizesWithUpdatedBreakpoints
+          ),
+        })
+      : "";
+    const smallStylesClass = smallStyles
+      ? createCssClass({
+          className,
+          styles: smallStyles,
+          mediaQuery: getMaxWidthQueryForSize(
+            "small",
+            sizesWithUpdatedBreakpoints
+          ),
+        })
+      : "";
+    const hoverAnimation =
+      processedBlock.animations &&
+      processedBlock.animations.find((item) => item.trigger === "hover");
+    let hoverStylesClass = "";
+    if (hoverAnimation) {
+      const hoverStyles = hoverAnimation.steps?.[1]?.styles || {};
+      hoverStylesClass =
+        createCssClass({
+          className: `${className}:hover`,
+          styles: {
+            ...hoverStyles,
+            transition: `all ${hoverAnimation.duration}s ${camelToKebabCase(
+              hoverAnimation.easing
+            )}`,
+            transitionDelay: hoverAnimation.delay
+              ? `${hoverAnimation.delay}s`
+              : "0s",
+          },
+        }) || "";
+    }
+    return [
+      largeStylesClass,
+      mediumStylesClass,
+      smallStylesClass,
+      hoverStylesClass,
+    ].join(" ");
+  }
+
+  return (
+    <>
+      {TARGET !== "reactNative" && css() && canShowBlock() ? (
+        <>
+          <InlinedStyles id="builderio-block" styles={css()} />
+        </>
+      ) : null}
+    </>
+  );
+}
+
+export default BlockStyles;

package/src/components/block/components/block-wrapper.tsx

@@ -0,0 +1,52 @@
+import * as React from "react";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+} from "react-native";
+
+type BlockWrapperProps = {
+  Wrapper: string;
+  block: BuilderBlock;
+  context: BuilderContextInterface;
+  children?: any;
+};
+
+/**
+ * This component renders a block's wrapper HTML element (from the block's `tagName` property).
+ */
+
+import type { BuilderContextInterface } from "../../../context/types";
+import { getBlockActions } from "../../../functions/get-block-actions";
+import { getBlockProperties } from "../../../functions/get-block-properties";
+import type { BuilderBlock } from "../../../types/builder-block";
+import DynamicRenderer from "../../dynamic-renderer/dynamic-renderer";
+
+function BlockWrapper(props: BlockWrapperProps) {
+  return (
+    <DynamicRenderer
+      TagName={props.Wrapper}
+      attributes={getBlockProperties({
+        block: props.block,
+        context: props.context,
+      })}
+      actionAttributes={getBlockActions({
+        block: props.block,
+        rootState: props.context.rootState,
+        rootSetState: props.context.rootSetState,
+        localState: props.context.localState,
+        context: props.context.context,
+        stripPrefix: true,
+      })}
+    >
+      {props.children}
+    </DynamicRenderer>
+  );
+}
+
+export default BlockWrapper;

package/src/components/block/components/component-ref/component-ref.helpers.ts

@@ -0,0 +1,55 @@
+import type { BuilderContextInterface, RegisteredComponents } from '../../../../context/types';
+import { getBlockProperties } from '../../../../functions/get-block-properties';
+import type { BuilderBlock } from '../../../../types/builder-block';
+import type { BuilderDataProps } from '../../../../types/builder-props';
+import type { InteractiveElementProps } from '../interactive-element';
+type ComponentOptions = BuilderDataProps & {
+  [index: string]: any;
+  attributes?: {
+    [index: string]: any;
+  };
+};
+export interface ComponentProps {
+  componentRef: any;
+  componentOptions: ComponentOptions;
+  blockChildren: BuilderBlock[];
+  context: BuilderContextInterface;
+  registeredComponents: RegisteredComponents;
+  linkComponent: any;
+  builderBlock: BuilderBlock;
+  includeBlockProps: boolean;
+  isInteractive: boolean | undefined;
+}
+export const getWrapperProps = ({
+  componentOptions,
+  builderBlock,
+  context,
+  componentRef,
+  includeBlockProps,
+  isInteractive,
+  contextValue
+}: Omit<ComponentProps, 'blockChildren' | 'registeredComponents'> & {
+  contextValue: BuilderContextInterface;
+}) => {
+  const wrapperPropsWithAttributes = {
+    ...componentOptions,
+    /**
+     * If `noWrap` is set to `true`, then the block's props/attributes are provided to the
+     * component itself directly. Otherwise, they are provided to the wrapper element.
+     */
+    ...(includeBlockProps ? {
+      attributes: getBlockProperties({
+        block: builderBlock,
+        context: contextValue
+      })
+    } : {})
+  };
+  const interactiveElementProps: InteractiveElementProps = {
+    Wrapper: componentRef,
+    block: builderBlock,
+    context,
+    wrapperProps: componentOptions,
+    includeBlockProps
+  };
+  return isInteractive ? interactiveElementProps : wrapperPropsWithAttributes;
+}

package/src/components/block/components/component-ref/component-ref.tsx

@@ -0,0 +1,66 @@
+import * as React from "react";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+} from "react-native";
+import { useState, useContext } from "react";
+import { wrapComponentRef } from "../../../content/wrap-component-ref";
+import Block from "../../block";
+import InteractiveElement from "../interactive-element";
+import type { ComponentProps } from "./component-ref.helpers";
+import { getWrapperProps } from "./component-ref.helpers";
+import BuilderContext from "../../../../context/builder.context";
+
+function ComponentRef(props: ComponentProps) {
+  const [Wrapper, setWrapper] = useState(() =>
+    props.isInteractive ? InteractiveElement : props.componentRef
+  );
+
+  return (
+    <BuilderContext.Provider
+      value={{
+        content: props.context.content,
+        rootState: props.context.rootState,
+        localState: props.context.localState,
+        context: props.context.context,
+        apiKey: props.context.apiKey,
+        componentInfos: props.context.componentInfos,
+        inheritedStyles: props.context.inheritedStyles,
+        apiVersion: props.context.apiVersion,
+      }}
+    >
+      {props.componentRef ? (
+        <Wrapper
+          {...getWrapperProps({
+            componentOptions: props.componentOptions,
+            builderBlock: props.builderBlock,
+            context: props.context,
+            componentRef: props.componentRef,
+            linkComponent: props.linkComponent,
+            includeBlockProps: props.includeBlockProps,
+            isInteractive: props.isInteractive,
+            contextValue: props.context,
+          })}
+        >
+          {props.blockChildren?.map((child) => (
+            <Block
+              key={child.id}
+              block={child}
+              context={props.context}
+              registeredComponents={props.registeredComponents}
+              linkComponent={props.linkComponent}
+            />
+          ))}
+        </Wrapper>
+      ) : null}
+    </BuilderContext.Provider>
+  );
+}
+
+export default ComponentRef;

package/src/components/block/components/interactive-element.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+} from "react-native";
+
+export type InteractiveElementProps = {
+  Wrapper: any;
+  block: BuilderBlock;
+  context: BuilderContextInterface;
+  wrapperProps: Dictionary<any>;
+  includeBlockProps: boolean;
+  children?: any;
+};
+import type { BuilderContextInterface } from "../../../context/types";
+import { getBlockActions } from "../../../functions/get-block-actions";
+import { getBlockProperties } from "../../../functions/get-block-properties";
+import type { BuilderBlock } from "../../../types/builder-block";
+import type { Dictionary } from "../../../types/typescript";
+
+function InteractiveElement(props: InteractiveElementProps) {
+  function attributes() {
+    return props.includeBlockProps
+      ? {
+          ...getBlockProperties({
+            block: props.block,
+            context: props.context,
+          }),
+          ...getBlockActions({
+            block: props.block,
+            rootState: props.context.rootState,
+            rootSetState: props.context.rootSetState,
+            localState: props.context.localState,
+            context: props.context.context,
+          }),
+        }
+      : {};
+  }
+
+  return (
+    <props.Wrapper {...props.wrapperProps} attributes={attributes()}>
+      {props.children}
+    </props.Wrapper>
+  );
+}
+
+export default InteractiveElement;

package/src/components/block/components/repeated-block.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+} from "react-native";
+import { useState, useContext } from "react";
+
+type Props = Omit<BlockProps, "context"> & {
+  repeatContext: BuilderContextInterface;
+};
+import BuilderContext from "../../../context/builder.context";
+import type { BuilderContextInterface } from "../../../context/types";
+import type { BlockProps } from "../block";
+import Block from "../block";
+
+function RepeatedBlock(props: Props) {
+  const [store, setStore] = useState(() => props.repeatContext);
+
+  return (
+    <BuilderContext.Provider value={store}>
+      <Block
+        block={props.block}
+        context={store}
+        registeredComponents={props.registeredComponents}
+        linkComponent={props.linkComponent}
+      />
+    </BuilderContext.Provider>
+  );
+}
+
+export default RepeatedBlock;

package/src/components/block/types.ts

@@ -0,0 +1,6 @@
+import type { BuilderContextInterface } from '../../context/types';
+import type { BuilderBlock } from '../../types/builder-block';
+export interface RepeatData {
+  block: BuilderBlock;
+  context: BuilderContextInterface;
+}