@builder.io/sdk-react-native 0.7.1-1 → 0.7.1

package/lib/edge/commonjs/components/block/block.js.flow

@@ -1,190 +0,0 @@
-import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-} from "react-native";
-import { useState } from "react";
-import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
-import { getBlockProperties } from "../../functions/get-block-properties.js";
-import { getProcessedBlock } from "../../functions/get-processed-block.js";
-import BlockStyles from "./components/block-styles";
-import {
-  getComponent,
-  getRepeatItemData,
-  isEmptyHtmlElement,
-} from "./block.helpers.js";
-import RepeatedBlock from "./components/repeated-block";
-import { extractTextStyles } from "../../functions/extract-text-styles.js";
-import ComponentRef from "./components/component-ref/component-ref";
-import BlockWrapper from "./components/block-wrapper";
-
-function Block(props) {
-  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 repeatItem()
-      ? 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() {
-    return View;
-  }
-
-  function canShowBlock() {
-    if ("hide" in processedBlock()) {
-      return !processedBlock().hide;
-    }
-    if ("show" in processedBlock()) {
-      return processedBlock().show;
-    }
-    return true;
-  }
-
-  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,
-        ...(blockComponent?.()?.name === "Symbol" ||
-        blockComponent?.()?.name === "Columns"
-          ? {
-              builderComponents: props.registeredComponents,
-            }
-          : {}),
-      },
-      context: childrenContext,
-      registeredComponents: props.registeredComponents,
-      builderBlock: processedBlock(),
-      includeBlockProps: blockComponent?.()?.noWrap === true,
-      isInteractive: !blockComponent?.()?.isRSC,
-    };
-  }
-
-  const [childrenContext, setChildrenContext] = useState(() => ({
-    apiKey: props.context.apiKey,
-    apiVersion: props.context.apiVersion,
-    localState: props.context.localState,
-    rootState: props.context.rootState,
-    rootSetState: props.context.rootSetState,
-    content: props.context.content,
-    context: props.context.context,
-    componentInfos: props.context.componentInfos,
-    inheritedStyles: extractTextStyles(
-      getBlockProperties({
-        block: processedBlock(),
-        context: props.context,
-      }).style || {}
-    ),
-  }));
-
-  return (
-    <>
-      {canShowBlock() ? (
-        <>
-          {!blockComponent?.()?.noWrap ? (
-            <>
-              {isEmptyHtmlElement(Tag()) ? (
-                <>
-                  <BlockWrapper
-                    Wrapper={Tag()}
-                    block={processedBlock()}
-                    context={props.context}
-                    hasChildren={false}
-                  />
-                </>
-              ) : null}
-              {!isEmptyHtmlElement(Tag()) && repeatItem() ? (
-                <>
-                  {repeatItem()?.map((data, index) => (
-                    <RepeatedBlock
-                      key={index}
-                      repeatContext={data.context}
-                      block={data.block}
-                      registeredComponents={props.registeredComponents}
-                    />
-                  ))}
-                </>
-              ) : null}
-              {!isEmptyHtmlElement(Tag()) && !repeatItem() ? (
-                <>
-                  <BlockWrapper
-                    Wrapper={Tag()}
-                    block={processedBlock()}
-                    context={props.context}
-                    hasChildren={true}
-                  >
-                    <ComponentRef {...componentRefProps()} />
-
-                    {childrenWithoutParentComponent()?.map((child) => (
-                      <Block
-                        key={"block-" + child.id}
-                        block={child}
-                        context={childrenContext}
-                        registeredComponents={props.registeredComponents}
-                      />
-                    ))}
-
-                    {childrenWithoutParentComponent()?.map((child) => (
-                      <BlockStyles
-                        key={"block-style-" + child.id}
-                        block={child}
-                        context={childrenContext}
-                      />
-                    ))}
-                  </BlockWrapper>
-                </>
-              ) : null}
-            </>
-          ) : (
-            <>
-              <ComponentRef {...componentRefProps()} />
-            </>
-          )}
-        </>
-      ) : null}
-    </>
-  );
-}
-
-export default Block;

package/lib/edge/commonjs/components/block/components/block-styles.js.flow

@@ -1,101 +0,0 @@
-import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-} from "react-native";
-import {
-  getMaxWidthQueryForSize,
-  getSizesForBreakpoints,
-} from "../../../constants/device-sizes.js";
-import { TARGET } from "../../../constants/target.js";
-import { getProcessedBlock } from "../../../functions/get-processed-block.js";
-import { createCssClass } from "../../../helpers/css.js";
-import { checkIsDefined } from "../../../helpers/nullable.js";
-import InlinedStyles from "../../inlined-styles";
-
-function BlockStyles(props) {
-  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
-          ),
-        })
-      : "";
-    return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");
-  }
-
-  return (
-    <>
-      {TARGET !== "reactNative" && css() && canShowBlock() ? (
-        <>
-          <InlinedStyles styles={css()} />
-        </>
-      ) : null}
-    </>
-  );
-}
-
-export default BlockStyles;

package/lib/edge/commonjs/components/block/components/block-wrapper.js.flow

@@ -1,57 +0,0 @@
-import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-} from "react-native";
-import { getBlockActions } from "../../../functions/get-block-actions.js";
-import { getBlockProperties } from "../../../functions/get-block-properties.js";
-
-function BlockWrapper(props) {
-  return (
-    <>
-      {props.hasChildren ? (
-        <>
-          <props.Wrapper
-            {...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,
-              stripPrefix: true,
-            })}
-          >
-            {props.children}
-          </props.Wrapper>
-        </>
-      ) : (
-        <>
-          <props.Wrapper
-            {...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,
-              stripPrefix: true,
-            })}
-          />
-        </>
-      )}
-    </>
-  );
-}
-
-export default BlockWrapper;

package/lib/edge/commonjs/components/block/components/component-ref/component-ref.helpers.js.flow

@@ -1,41 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {
-  enumerable: true,
-  configurable: true,
-  writable: true,
-  value
-}) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {})) if (__hasOwnProp.call(b, prop)) __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols) for (var prop of __getOwnPropSymbols(b)) {
-    if (__propIsEnum.call(b, prop)) __defNormalProp(a, prop, b[prop]);
-  }
-  return a;
-};
-import { getBlockProperties } from "../../../../functions/get-block-properties.js";
-const getWrapperProps = ({
-  componentOptions,
-  builderBlock,
-  context,
-  componentRef,
-  includeBlockProps,
-  isInteractive,
-  contextValue
-}) => {
-  const interactiveElementProps = {
-    Wrapper: componentRef,
-    block: builderBlock,
-    context,
-    wrapperProps: componentOptions
-  };
-  return isInteractive ? interactiveElementProps : __spreadValues(__spreadValues({}, componentOptions), includeBlockProps ? {
-    attributes: getBlockProperties({
-      block: builderBlock,
-      context: contextValue
-    })
-  } : {});
-};
-export { getWrapperProps }

package/lib/edge/commonjs/components/block/components/component-ref/component-ref.js.flow

@@ -1,72 +0,0 @@
-import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-} from "react-native";
-import { useState, useContext } from "react";
-import BlockStyles from "../block-styles";
-import Block from "../../block";
-import InteractiveElement from "../interactive-element";
-import { getWrapperProps } from "./component-ref.helpers.js";
-import { wrapComponentRef } from "../../../content/wrap-component-ref.js";
-import BuilderContext from "../../../../context/builder.context.js";
-
-function ComponentRef(props) {
-  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,
-              includeBlockProps: props.includeBlockProps,
-              isInteractive: props.isInteractive,
-              contextValue: props.context,
-            })}
-          >
-            {props.blockChildren?.map((child) => (
-              <Block
-                key={"block-" + child.id}
-                block={child}
-                context={props.context}
-                registeredComponents={props.registeredComponents}
-              />
-            ))}
-
-            {props.blockChildren?.map((child) => (
-              <BlockStyles
-                key={"block-style-" + child.id}
-                block={child}
-                context={props.context}
-              />
-            ))}
-          </Wrapper>
-        </>
-      ) : null}
-    </BuilderContext.Provider>
-  );
-}
-
-export default ComponentRef;

package/lib/edge/commonjs/components/block/components/interactive-element.js.flow

@@ -1,36 +0,0 @@
-import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-} from "react-native";
-import { getBlockActions } from "../../../functions/get-block-actions.js";
-import { getBlockProperties } from "../../../functions/get-block-properties.js";
-
-function InteractiveElement(props) {
-  return (
-    <props.Wrapper
-      {...props.wrapperProps}
-      attributes={{
-        ...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,
-        }),
-      }}
-    >
-      {props.children}
-    </props.Wrapper>
-  );
-}
-
-export default InteractiveElement;

package/lib/edge/commonjs/components/block/components/repeated-block.js.flow

@@ -1,28 +0,0 @@
-import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-} from "react-native";
-import { useState, useContext } from "react";
-import BuilderContext from "../../../context/builder.context.js";
-import Block from "../block";
-
-function RepeatedBlock(props) {
-  const [store, setStore] = useState(() => props.repeatContext);
-
-  return (
-    <BuilderContext.Provider value={store}>
-      <Block
-        block={props.block}
-        context={store}
-        registeredComponents={props.registeredComponents}
-      />
-    </BuilderContext.Provider>
-  );
-}
-
-export default RepeatedBlock;

package/lib/edge/commonjs/components/blocks/blocks-wrapper.js.flow

@@ -1,73 +0,0 @@
-import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-} from "react-native";
-import { isEditing } from "../../functions/is-editing.js";
-
-function BlocksWrapper(props) {
-  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 (
-    <View
-      builder-path={props.path}
-      builder-parent-id={props.parent}
-      {...{
-        dataSet: {
-          class: className(),
-        },
-      }}
-      style={{
-        ...styles.view1,
-        ...props.styleProp,
-      }}
-      onClick={(event) => onClick()}
-      onMouseEnter={(event) => onMouseEnter()}
-      onKeyPress={(event) => onClick()}
-    >
-      {props.children}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  view1: { display: "flex", flexDirection: "column", alignItems: "stretch" },
-});
-
-export default BlocksWrapper;

package/lib/edge/commonjs/components/blocks/blocks.js.flow

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