@developer_tribe/react-builder 1.2.20 → 1.2.22

package/src/build-components/View/View.tsx

@@ -1,7 +1,7 @@
 import React, { useId } from 'react';
 import type { ViewComponentProps } from './ViewProps.generated';
 import RenderNode from '../RenderNode.generated';
-import { Node } from '../../types/Node';
+import type { Node } from '../../types/Node';
 import useNode from '../useNode';
 import { useBuilderParams } from '../../components/BuilderProvider';
 import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
@@ -9,31 +9,35 @@ import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
 
-export function View({ node }: ViewComponentProps) {
+function View({ node }: ViewComponentProps) {
   useLogRender('View');
   node = useNode(node);
+
   const generatedId = useId();
-  const attributeName = node.sourceType ?? node.type ?? 'view';
+  const attributeName = node.sourceType ?? node.type ?? 'View';
   const attributeKey = node.key ?? generatedId;
+
   const { previewMode, selectedKey } = useBuilderParams();
+
   const baseStyle = useExtractViewStyle(node);
+
   const isSelected = isNodeSelected({
     previewMode: !!previewMode,
     current: selectedKey ? { key: selectedKey } : undefined,
     node,
   });
-  const viewStyle = useMergedStyle(
+  const style = useMergedStyle(
     baseStyle,
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,
   );
+
   return (
     <div
       attribute-name={attributeName}
       attribute-key={attributeKey}
-      style={{ ...viewStyle, boxSizing: 'border-box' }}
-      className="scroll-container"
+      style={style}
     >
-      <RenderNode node={node.children as Node} />
+      {node.children && <RenderNode node={node.children as Node} />}
     </div>
   );
 }

package/src/build-components/View/ViewProps.generated.ts

@@ -3,6 +3,7 @@
 import type { NodeData } from '../../types/Node';
 
 export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
   | 'flex-start'
   | 'center'
@@ -20,6 +21,7 @@ export type PositionOptionType = 'relative' | 'absolute';
 
 export interface ViewStyleGenerated {
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

package/src/build-components/View/pattern.json

@@ -7,6 +7,7 @@
       "scrollable": "boolean",
       "style": {
         "flexDirection": ["row", "column"],
+        "flexWrap": ["nowrap", "wrap", "wrap-reverse"],
         "alignItems": [
           "flex-start",
           "center",
@@ -117,6 +118,13 @@
         "specialCategory": null,
         "sort": 4
       },
+      "flexWrap": {
+        "label": "Flex Wrap",
+        "description": "Controls whether flex items wrap to multiple lines.",
+        "category": "container",
+        "specialCategory": null,
+        "sort": 4.5
+      },
       "alignItems": {
         "label": "Align Items",
         "description": "Controls cross-axis alignment.",