tee3apps-cms-sdk-react 0.0.18 → 0.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tee3apps-cms-sdk-react",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "description": "Uses JSON to dynamically generate and render UI pages in a website",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/App.css

@@ -22,16 +22,14 @@
 }
 
 .image-box {
- 
-   width: 100%;
-  /* height: 280px; */
+  width: 100%;
   overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  display: block;
+  position: relative;
 }
 
 .fitted-image {
   width: 100%;
-  height: 100%;
+  height: auto;
+  display: block;
 }

package/src/PageComponents/RowComponent.tsx

@@ -61,6 +61,59 @@ const RowComponent: React.FC<RowComponentProps> = ({
     return null;
   }
 
+  // Check if children contain image/video components for dynamic height
+  const hasMediaComponents = (): boolean => {
+    const checkChild = (child: React.ReactNode): boolean => {
+      if (!React.isValidElement(child)) return false;
+      
+      const componentName = (child.type as any)?.name || (child.type as any)?.displayName;
+      const mediaComponents = [
+        'ImageComponent',
+        'CarouselComponent',
+        'VideoComponent',
+        'TabComponent',
+        'GroupImageComponent',
+        'GroupVideoComponent'
+      ];
+      
+      if (componentName && mediaComponents.includes(componentName)) {
+        return true;
+      }
+      
+      // Check nested children
+      if (child.props && typeof child.props === 'object' && 'children' in child.props) {
+        const children = (child.props as any).children;
+        if (children) {
+          const nestedChildren = React.Children.toArray(children);
+          return nestedChildren.some(checkChild);
+        }
+      }
+      
+      return false;
+    };
+    
+    return React.Children.toArray(children).some(checkChild);
+  };
+
+  // Check if we have media components
+  const hasMedia = hasMediaComponents();
+
+  // Get dynamic height based on media components
+  const getRowHeight = (): string | undefined => {
+    if (hasMedia) {
+      return 'auto';
+    }
+    return currentMode.height;
+  };
+
+  // Get dynamic minHeight based on media components
+  const getRowMinHeight = (): string | undefined => {
+    if (hasMedia) {
+      return undefined; // Remove minHeight constraint for media components
+    }
+    return props.minHeight;
+  };
+
   // Handle content justification with proper CSS values
 const getJustifyContent = (): React.CSSProperties['justifyContent'] => {
   const justifyMap: Record<string, React.CSSProperties['justifyContent']> = {
@@ -81,14 +134,14 @@ const getJustifyContent = (): React.CSSProperties['justifyContent'] => {
   return (
     <div 
       style={{
-        minHeight: props.minHeight,
+        minHeight: getRowMinHeight(),
         backgroundColor: props.bgColor,
         backgroundImage: props.bgImage ? `url(${props.bgImage})` : 'none',
         backgroundSize: props.bgsize,
         backgroundPosition: 'center',
         backgroundRepeat: 'no-repeat',
         width: currentMode.width || '100%',
-        height: currentMode.height,
+        height: getRowHeight(),
         marginTop: currentMode.top,
         marginBottom: currentMode.bottom,
         marginLeft: currentMode.left,