@builder.io/sdk-react-native 1.0.31-2 → 1.0.32

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

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

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

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

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

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

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

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

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

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

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

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