@builder.io/sdk-react-native 0.0.1-57 → 0.0.1-58

package/src/blocks/img/img.lite.tsx

@@ -1,36 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-
-export interface ImgProps {
-  attributes?: any;
-  imgSrc?: string;
-  altText?: string;
-  backgroundSize?: "cover" | "contain";
-  backgroundPosition?:
-    | "center"
-    | "top"
-    | "left"
-    | "right"
-    | "bottom"
-    | "top left"
-    | "top right"
-    | "bottom left"
-    | "bottom right";
-}
-
-import { isEditing } from "../../functions/is-editing.js";
-
-export default function ImgComponent(props: ImgProps) {
-  return (
-    <View
-      {...props.attributes}
-      style={{
-        objectFit: props.backgroundSize || "cover",
-        objectPosition: props.backgroundPosition || "center",
-      }}
-      key={(isEditing() && props.imgSrc) || "default-key"}
-      alt={props.altText}
-      src={props.imgSrc}
-    />
-  );
-}

package/src/blocks/input/input.lite.tsx

@@ -1,31 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-
-export interface FormInputProps {
-  type?: string;
-  attributes?: any;
-  name?: string;
-  value?: string;
-  placeholder?: string;
-  defaultValue?: string;
-  required?: boolean;
-}
-
-import { isEditing } from "../../functions/is-editing.js";
-
-export default function FormInputComponent(props: FormInputProps) {
-  return (
-    <View
-      {...props.attributes}
-      key={
-        isEditing() && props.defaultValue ? props.defaultValue : "default-key"
-      }
-      placeholder={props.placeholder}
-      type={props.type}
-      name={props.name}
-      value={props.value}
-      defaultValue={props.defaultValue}
-      required={props.required}
-    />
-  );
-}

package/src/blocks/raw-text/raw-text.lite.tsx

@@ -1,11 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-
-export interface RawTextProps {
-  attributes?: any;
-  text?: string; // builderBlock?: any;
-}
-
-export default function RawText(props: RawTextProps) {
-  return <View dangerouslySetInnerHTML={{ __html: props.text || "" }} />;
-}

package/src/blocks/section/section.lite.tsx

@@ -1,26 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-
-export interface SectionProps {
-  maxWidth?: number;
-  attributes?: any;
-  children?: any;
-  builderBlock?: any;
-}
-
-export default function SectionComponent(props: SectionProps) {
-  return (
-    <View
-      {...props.attributes}
-      style={
-        props.maxWidth && typeof props.maxWidth === "number"
-          ? {
-              maxWidth: props.maxWidth,
-            }
-          : undefined
-      }
-    >
-      <Text>{props.children}</Text>
-    </View>
-  );
-}

package/src/blocks/select/select.lite.tsx

@@ -1,35 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-
-export interface FormSelectProps {
-  options?: {
-    name?: string;
-    value: string;
-  }[];
-  attributes?: any;
-  name?: string;
-  value?: string;
-  defaultValue?: string;
-}
-
-import { isEditing } from "../../functions/is-editing.js";
-
-export default function SelectComponent(props: FormSelectProps) {
-  return (
-    <View
-      {...props.attributes}
-      value={props.value}
-      key={
-        isEditing() && props.defaultValue ? props.defaultValue : "default-key"
-      }
-      defaultValue={props.defaultValue}
-      name={props.name}
-    >
-      {props.options?.map((option) => (
-        <View value={option.value}>
-          <Text>{option.name || option.value}</Text>
-        </View>
-      ))}
-    </View>
-  );
-}

package/src/blocks/submit-button/submit-button.lite.tsx

@@ -1,15 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-
-export interface ButtonProps {
-  attributes?: any;
-  text?: string;
-}
-
-export default function SubmitButton(props: ButtonProps) {
-  return (
-    <View {...props.attributes} type="submit">
-      <Text>{props.text}</Text>
-    </View>
-  );
-}

package/src/blocks/symbol/symbol.lite.tsx

@@ -1,79 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import { useState, useContext, useEffect } from "react";
-
-export interface SymbolInfo {
-  model?: string;
-  entry?: string;
-  data?: any;
-  content?: any;
-  inline?: boolean;
-  dynamic?: boolean;
-}
-export interface SymbolProps {
-  symbol?: SymbolInfo;
-  dataOnly?: boolean;
-  dynamic?: boolean;
-  builderBlock?: any; // TODO: BuilderElement
-
-  attributes?: any;
-  inheritState?: boolean;
-}
-
-import RenderContent from "../../components/render-content/render-content.lite";
-import BuilderContext from "../../context/builder.context";
-import { getContent } from "../../functions/get-content/index.js";
-
-export default function Symbol(props: SymbolProps) {
-  const [className, setClassName] = useState(() => "builder-symbol");
-
-  const [content, setContent] = useState(() => null);
-
-  const builderContext = useContext(BuilderContext);
-
-  useEffect(() => {
-    setContent(props.symbol?.content);
-  }, []);
-
-  useEffect(() => {
-    const symbolToUse = props.symbol;
-
-    if (symbolToUse && !symbolToUse.content && !content && symbolToUse.model) {
-      getContent({
-        model: symbolToUse.model,
-        apiKey: builderContext.apiKey,
-        options: {
-          entry: symbolToUse.entry,
-        },
-      }).then((response) => {
-        setContent(response);
-      });
-    }
-  }, [
-    props.symbol?.content,
-    props.symbol?.model,
-    props.symbol?.entry,
-    content,
-  ]);
-
-  return (
-    <View
-      {...props.attributes}
-      dataSet={{
-        class: className,
-      }}
-    >
-      <RenderContent
-        apiKey={builderContext.apiKey}
-        context={builderContext.context}
-        data={{
-          ...props.symbol?.data,
-          ...builderContext.state,
-          ...props.symbol?.content?.data?.state,
-        }}
-        model={props.symbol?.model}
-        content={content}
-      />
-    </View>
-  );
-}

package/src/blocks/text/text.lite.tsx

@@ -1,6 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-
-export default function Text(props: { text: string }) {
-  return <View dangerouslySetInnerHTML={{ __html: props.text }} />;
-}

package/src/blocks/textarea/textarea.lite.tsx

@@ -1,22 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-
-export interface TextareaProps {
-  attributes?: any;
-  name?: string;
-  value?: string;
-  defaultValue?: string;
-  placeholder?: string;
-}
-
-export default function Textarea(props: TextareaProps) {
-  return (
-    <View
-      {...props.attributes}
-      placeholder={props.placeholder}
-      name={props.name}
-      value={props.value}
-      defaultValue={props.defaultValue}
-    />
-  );
-}

package/src/blocks/video/video.lite.tsx

@@ -1,53 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-
-export interface VideoProps {
-  attributes?: any;
-  video?: string;
-  autoPlay?: boolean;
-  controls?: boolean;
-  muted?: boolean;
-  loop?: boolean;
-  playsInline?: boolean;
-  aspectRatio?: number;
-  width?: number;
-  height?: number;
-  fit?: "contain" | "cover" | "fill";
-  position?:
-    | "center"
-    | "top"
-    | "left"
-    | "right"
-    | "bottom"
-    | "top left"
-    | "top right"
-    | "bottom left"
-    | "bottom right";
-  posterImage?: string;
-  lazyLoad?: boolean;
-}
-
-export default function Video(props: VideoProps) {
-  return (
-    <View
-      {...props.attributes}
-      preload="none"
-      style={{
-        width: "100%",
-        height: "100%",
-        ...props.attributes?.style,
-        objectFit: props.fit,
-        objectPosition: props.position,
-        // Hack to get object fit to work as expected and
-        // not have the video overflow
-        borderRadius: 1,
-      }}
-      key={props.video || "no-src"}
-      poster={props.posterImage}
-      autoPlay={props.autoPlay}
-      muted={props.muted}
-      controls={props.controls}
-      loop={props.loop}
-    />
-  );
-}

package/src/components/error-boundary.lite.tsx

@@ -1,6 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-
-export default function ErrorBoundary(props: any) {
-  return <></>;
-}

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

@@ -1,61 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import { useContext } from "react";
-
-export type BlockStylesProps = {
-  block: BuilderBlock;
-};
-import { TARGET } from "../../constants/target.js";
-import BuilderContext from "../../context/builder.context";
-import { getProcessedBlock } from "../../functions/get-processed-block.js";
-import RenderInlinedStyles from "../render-inlined-styles.lite";
-
-export default function BlockStyles(props: BlockStylesProps) {
-  function useBlock() {
-    return getProcessedBlock({
-      block: props.block,
-      state: builderContext.state,
-      context: builderContext.context,
-    });
-  }
-
-  function camelToKebabCase(string) {
-    return string
-      .replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2")
-      .toLowerCase();
-  }
-
-  function css() {
-    // TODO: media queries
-    const styleObject = useBlock().responsiveStyles?.large;
-
-    if (!styleObject) {
-      return "";
-    }
-
-    let str = `.${useBlock().id} {`;
-
-    for (const key in styleObject) {
-      const value = styleObject[key];
-
-      if (typeof value === "string") {
-        str += `${camelToKebabCase(key)}: ${value};`;
-      }
-    }
-
-    str += "}";
-    return str;
-  }
-
-  const builderContext = useContext(BuilderContext);
-
-  return (
-    <>
-      {TARGET === "vue" || TARGET === "svelte" ? (
-        <>
-          <RenderInlinedStyles styles={css()} />
-        </>
-      ) : null}
-    </>
-  );
-}

package/src/components/render-block/render-block.lite.tsx

@@ -1,153 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import { useContext } from "react";
-
-export type RenderBlockProps = {
-  block: BuilderBlock;
-}; // eslint-disable-next-line @builder.io/mitosis/only-default-function-and-imports
-
-import BuilderContext from "../../context/builder.context";
-import { getBlockActions } from "../../functions/get-block-actions.js";
-import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
-import { getBlockProperties } from "../../functions/get-block-properties.js";
-import { getBlockStyles } from "../../functions/get-block-styles.js";
-import { getBlockTag } from "../../functions/get-block-tag.js";
-import { getProcessedBlock } from "../../functions/get-processed-block.js";
-import BlockStyles from "./block-styles.lite";
-import { isEmptyHtmlElement } from "./render-block.helpers.js";
-import RenderComponent from "./render-component.lite";
-
-export default function RenderBlock(props: RenderBlockProps) {
-  function component() {
-    const componentName = useBlock().component?.name;
-
-    if (!componentName) {
-      return null;
-    }
-
-    const ref = builderContext.registeredComponents[componentName];
-
-    if (!ref) {
-      // TODO: Public doc page with more info about this message
-      console.warn(`
-        Could not find a registered component named "${componentName}". 
-        If you registered it, is the file that registered it imported by the file that needs to render it?`);
-      return undefined;
-    } else {
-      return ref;
-    }
-  }
-
-  function componentInfo() {
-    if (component()) {
-      const { component: _, ...info } = component();
-      return info;
-    } else {
-      return undefined;
-    }
-  }
-
-  function componentRef() {
-    return component?.()?.component;
-  }
-
-  function tagName() {
-    return getBlockTag(useBlock());
-  }
-
-  function useBlock() {
-    return getProcessedBlock({
-      block: props.block,
-      state: builderContext.state,
-      context: builderContext.context,
-    });
-  }
-
-  function attributes() {
-    return {
-      ...getBlockProperties(useBlock()),
-      ...getBlockActions({
-        block: useBlock(),
-        state: builderContext.state,
-        context: builderContext.context,
-      }),
-      style: getBlockStyles(useBlock()),
-    };
-  }
-
-  function shouldWrap() {
-    return !componentInfo?.()?.noWrap;
-  }
-
-  function componentOptions() {
-    return {
-      ...getBlockComponentOptions(useBlock()),
-
-      /**
-       * These attributes are passed to the wrapper element when there is one. If `noWrap` is set to true, then
-       * they are provided to the component itself directly.
-       */
-      ...(shouldWrap()
-        ? {}
-        : {
-            attributes: attributes(),
-          }),
-    };
-  }
-
-  function children() {
-    // TO-DO: When should `canHaveChildren` dictate rendering?
-    // This is currently commented out because some Builder components (e.g. Box) do not have `canHaveChildren: true`,
-    // but still receive and need to render children.
-    // return componentInfo?.()?.canHaveChildren ? useBlock().children : [];
-    return useBlock().children ?? [];
-  }
-
-  function noCompRefChildren() {
-    /**
-     * When there is no `componentRef`, there might still be children that need to be rendered. In this case,
-     * we render them outside of `componentRef`
-     */
-    return componentRef() ? [] : children();
-  }
-
-  const builderContext = useContext(BuilderContext);
-
-  const TagNameRef = tagName();
-
-  return (
-    <>
-      {shouldWrap() ? (
-        <>
-          {!isEmptyHtmlElement(tagName()) ? (
-            <>
-              <TagNameRef {...attributes()}>
-                <RenderComponent
-                  blockChildren={children()}
-                  componentRef={componentRef()}
-                  componentOptions={componentOptions()}
-                />
-
-                {noCompRefChildren()?.map((child) => (
-                  <RenderBlock key={"render-block-" + child.id} block={child} />
-                ))}
-
-                {noCompRefChildren()?.map((child) => (
-                  <BlockStyles key={"block-style-" + child.id} block={child} />
-                ))}
-              </TagNameRef>
-            </>
-          ) : (
-            <TagNameRef {...attributes()} />
-          )}
-        </>
-      ) : (
-        <RenderComponent
-          blockChildren={children()}
-          componentRef={componentRef()}
-          componentOptions={componentOptions()}
-        />
-      )}
-    </>
-  );
-}

package/src/components/render-block/render-component.lite.tsx

@@ -1,32 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-
-type Props = {
-  componentRef: any;
-  componentOptions: any;
-  blockChildren: BuilderBlock[];
-};
-import BlockStyles from "./block-styles.lite";
-import RenderBlock from "./render-block.lite";
-
-export default function RenderComponent(props: Props) {
-  const ComponentRefRef = props.componentRef;
-
-  return (
-    <>
-      {props.componentRef ? (
-        <>
-          <ComponentRefRef {...props.componentOptions}>
-            {props.blockChildren?.map((child) => (
-              <RenderBlock key={"render-block-" + child.id} block={child} />
-            ))}
-
-            {props.blockChildren?.map((child) => (
-              <BlockStyles key={"block-style-" + child.id} block={child} />
-            ))}
-          </ComponentRefRef>
-        </>
-      ) : null}
-    </>
-  );
-}

package/src/components/render-blocks.lite.tsx

@@ -1,80 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-
-export type RenderBlockProps = {
-  blocks?: BuilderBlock[];
-  parent?: string;
-  path?: string;
-};
-import { isEditing } from "../functions/is-editing.js";
-import BlockStyles from "./render-block/block-styles.lite";
-import RenderBlock from "./render-block/render-block.lite";
-
-export default function RenderBlocks(props: RenderBlockProps) {
-  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(),
-      }}
-      onClick={(event) => onClick()}
-      onMouseEnter={(event) => onMouseEnter()}
-      style={styles.view1}
-    >
-      {props.blocks ? (
-        <>
-          {props.blocks?.map((block) => (
-            <RenderBlock key={"render-block-" + block.id} block={block} />
-          ))}
-        </>
-      ) : null}
-
-      {props.blocks ? (
-        <>
-          {props.blocks?.map((block) => (
-            <BlockStyles key={"block-style-" + block.id} block={block} />
-          ))}
-        </>
-      ) : null}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  view1: { display: "flex", flexDirection: "column", alignItems: "stretch" },
-});