@builder.io/sdk-react-native 0.4.5 → 0.5.0

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

@@ -0,0 +1,41 @@
+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/src/components/block/components/component-ref/component-ref.jsx

@@ -0,0 +1,72 @@
+"use client";
+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 BuilderContext from "../../../../context/builder.context";
+
+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/src/components/block/components/interactive-element.jsx

@@ -0,0 +1,37 @@
+"use client";
+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/src/components/{render-block/render-repeated-block.jsx → block/components/repeated-block.jsx}

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import * as React from "react";
 import {
   FlatList,
@@ -9,17 +9,21 @@ import {
   Text,
 } from "react-native";
 import { useState, useContext } from "react";
-import BuilderContext from "../../context/builder.context.js";
-import RenderBlock from "./render-block";
+import BuilderContext from "../../../context/builder.context";
+import Block from "../block";
 
-function RenderRepeatedBlock(props) {
+function RepeatedBlock(props) {
   const [store, setStore] = useState(() => props.repeatContext);
 
   return (
     <BuilderContext.Provider value={store}>
-      <RenderBlock block={props.block} context={store} />
+      <Block
+        block={props.block}
+        context={store}
+        registeredComponents={props.registeredComponents}
+      />
     </BuilderContext.Provider>
   );
 }
 
-export default RenderRepeatedBlock;
+export default RepeatedBlock;

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

@@ -0,0 +1,74 @@
+"use client";
+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/src/components/blocks/blocks.jsx

@@ -0,0 +1,51 @@
+"use client";
+import * as React from "react";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+} from "react-native";
+import BlockStyles from "../block/components/block-styles";
+import Block from "../block/block";
+import BlocksWrapper from "./blocks-wrapper";
+
+function Blocks(props) {
+  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}
+              registeredComponents={props.registeredComponents}
+            />
+          ))}
+        </>
+      ) : null}
+
+      {props.blocks ? (
+        <>
+          {props.blocks?.map((block) => (
+            <BlockStyles
+              key={"block-style-" + block.id}
+              block={block}
+              context={props.context}
+            />
+          ))}
+        </>
+      ) : null}
+    </BlocksWrapper>
+  );
+}
+
+export default Blocks;