@builder.io/sdk-react-native 1.0.30 → 1.0.31-1

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,53 @@
+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;
+  linkComponent: any;
+  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;
+}

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

@@ -0,0 +1,93 @@
+import * as React from "react";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+} from "react-native";
+
+export type BlocksWrapperProps = {
+  blocks: BuilderBlock[] | undefined;
+  parent: string | undefined;
+  path: string | undefined;
+  styleProp: Record<string, any> | undefined;
+  /**
+   * The element that wraps each list of blocks. Defaults to a `div` element ('ScrollView' in React Native).
+   */
+  BlocksWrapper: any;
+  /**
+   * Additonal props to pass to `blocksWrapper`. Defaults to `{}`.
+   */
+  BlocksWrapperProps: any;
+  children?: any;
+};
+import { isEditing } from "../../functions/is-editing";
+import type { BuilderBlock } from "../../types/builder-block";
+
+function BlocksWrapper(props: BlocksWrapperProps) {
+  function className() {
+    return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
+  }
+
+  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 (
+    <props.BlocksWrapper
+      builder-path={props.path}
+      builder-parent-id={props.parent}
+      {...{
+        dataSet: {
+          class: className(),
+        },
+      }}
+      style={{
+        ...styles.propsBlocksWrapper1,
+        ...props.styleProp,
+      }}
+      onPress={(event) => onClick()}
+      onMouseEnter={(event) => onMouseEnter()}
+      onKeyPress={(event) => onClick()}
+      {...props.BlocksWrapperProps}
+    >
+      {props.children}
+    </props.BlocksWrapper>
+  );
+}
+
+const styles = StyleSheet.create({
+  propsBlocksWrapper1: { display: "flex", flexDirection: "column" },
+});
+
+export default BlocksWrapper;

package/src/components/blocks/blocks.tsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+} from "react-native";
+import { useContext } from "react";
+import BuilderContext from "../../context/builder.context";
+import ComponentsContext from "../../context/components.context";
+import Block from "../block/block";
+import BlocksWrapper from "./blocks-wrapper";
+import type { BlocksProps } from "./blocks.types";
+
+function Blocks(props: BlocksProps) {
+  const builderContext = useContext(BuilderContext);
+
+  const componentsContext = useContext(ComponentsContext);
+
+  return (
+    <BlocksWrapper
+      blocks={props.blocks}
+      parent={props.parent}
+      path={props.path}
+      styleProp={props.styleProp}
+      BlocksWrapper={
+        props.context?.BlocksWrapper || builderContext.BlocksWrapper
+      }
+      BlocksWrapperProps={
+        props.context?.BlocksWrapperProps || builderContext.BlocksWrapperProps
+      }
+    >
+      {props.blocks ? (
+        <>
+          {props.blocks?.map((block) => (
+            <Block
+              key={block.id}
+              block={block}
+              linkComponent={props.linkComponent}
+              context={props.context || builderContext}
+              registeredComponents={
+                props.registeredComponents ||
+                componentsContext.registeredComponents
+              }
+            />
+          ))}
+        </>
+      ) : null}
+    </BlocksWrapper>
+  );
+}
+
+export default Blocks;

package/src/components/blocks/blocks.types.ts

@@ -0,0 +1,7 @@
+import type { BuilderContextInterface, RegisteredComponents } from '../../context/types';
+import type { BlocksWrapperProps } from './blocks-wrapper';
+export type BlocksProps = Partial<Omit<BlocksWrapperProps, 'BlocksWrapper' | 'BlocksWrapperProps'>> & {
+  context?: BuilderContextInterface;
+  registeredComponents?: RegisteredComponents;
+  linkComponent?: any;
+}

package/src/components/blocks/index.ts

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