tee3apps-cms-sdk-react 0.0.18 → 0.0.20

package/src/PageComponents/Visual-Components/TabComponent.tsx

@@ -129,6 +129,24 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 	const [activeTab, setActiveTab] = useState(0);
 	const [carouselIndex, setCarouselIndex] = useState(0);
 
+	// Check if tab content contains image/video components for dynamic height
+	const hasMediaComponents = (): boolean => {
+		if (!props.tabs || props.tabs.length === 0) return false;
+		
+		const activeTabData = props.tabs[activeTab];
+		if (!activeTabData) return false;
+		
+		// Check tab content type
+		const contentType = activeTabData.tabContentType;
+		const mediaContentTypes = ['IMAGE', 'VIDEO', 'GROUPIMAGE', 'GROUPVIDEO'];
+		
+		if (contentType && mediaContentTypes.includes(contentType)) {
+			return true;
+		}
+		
+		return false;
+	};
+
 	const buildLinkForSlide = (slide: any) => {
     switch (slide.link_type) {
       case 'NONE':
@@ -474,7 +492,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 			gridTemplateColumns: getGridColumns(),
 			gridTemplateRows: getGridRows(),
 			gap: '3px',
-			height: `${props.height}px`, // force tab content height
+			width: '100%',
 			overflow: 'hidden'
 		  };
 		  
@@ -497,15 +515,14 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 				  
 				  const imageElement = (
 					<div style={contentStyle}>
-						<div className="media-box" style={{ width: '100%', height: '100%', overflow: 'hidden' }}>
+						<div className="media-box" style={{ width: '100%', overflow: 'hidden' }}>
 							<img
 								src={fullImageUrl}
 								alt={imageAlt}
 								className="media-content"
 								style={{
 									width: '100%',
-									height: '100%',
-									objectFit: 'cover',
+									height: 'auto',
 									display: 'block'
 								}}
 								onError={(e) => {
@@ -537,12 +554,12 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 				if (tab.tabContentVideo) {
 					return (
 						<div style={contentStyle}>
-						  <div className="media-box">
+						  <div className="media-box" style={{ width: '100%', overflow: 'hidden' }}>
 								<video
 									src={getImageUrl(tab.tabContentVideo.video.url)}
 									controls
 							   className="media-content"
-
+							   style={{ width: '100%', height: 'auto', display: 'block' }}
 								/>
 							</div>
 						</div>
@@ -567,7 +584,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 							const linkUrl = currentImage ? buildLinkForSlide(currentImage) : null;
 					  
 							const imageElement = currentImage ? (
-							  <div className="media-box">
+							  <div className="media-box" style={{ width: '100%', overflow: 'hidden' }}>
 								<img
 								  src={getImageUrl(
 									tab.tabContentGroupImage.type === 'DYNAMIC' 
@@ -580,6 +597,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 									  : currentImage.attr?.alt
 								  }
 								   className="media-content"
+								   style={{ width: '100%', height: 'auto', display: 'block' }}
 								/>
 							  </div>
 							) : null;
@@ -589,11 +607,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 							style={{
 								  position: 'relative',
 								  width: '100%',
-								  height: 'auto',
 								  overflow: 'hidden',
-								  display: 'flex',
-								  alignItems: 'center',
-								  justifyContent: 'center',
 								}}
 							  >
 								{linkUrl ? (
@@ -604,7 +618,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 										? currentImage.external_link?.target || '_blank'
 										: '_self'
 									}
-									style={{ width: '100%', height: '100%' }}
+									style={{ width: '100%', display: 'block' }}
 								  >
 									{imageElement}
 								  </a>
@@ -738,7 +752,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 							gridTemplateColumns: getGridColumns(),
 							gridTemplateRows: getGridRows(),
 							gap: '3px',
-							height: '100%', // Use auto height for group images
+							width: '100%',
 							overflow: 'hidden'
 						  };
 						  
@@ -747,11 +761,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 							  style={{
 								position: 'relative',
 								width: '100%',
-								height: 'auto',
 								overflow: 'hidden',
-								display: 'flex',
-								alignItems: 'center',
-								justifyContent: 'center',
 							  }}
 							>
 							  <div style={groupImageContentStyle} className='media-box'>
@@ -759,7 +769,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 								  const originalIndex = displayIndices[displayIndex];
 								  const linkUrl = buildLinkForSlide(image);
 								  const imageElement = (
-									<div key={originalIndex} className="media-box">
+									<div key={originalIndex} className="media-box" style={{ width: '100%', overflow: 'hidden' }}>
 									  <img
 										src={getImageUrl(
 										  tab.tabContentGroupImage.type === 'DYNAMIC' 
@@ -772,6 +782,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 											: image.attr?.alt
 										}
 										className="media-content"
+										style={{ width: '100%', height: 'auto', display: 'block' }}
 									  />
 									</div>
 								  );
@@ -786,11 +797,12 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 										  : '_self'
 									  }
 									  className='media-box'
+									  style={{ width: '100%', display: 'block' }}
 									>
 									  {imageElement}
 									</a>
 								  ) : (
-									<div key={originalIndex} style={{ width: '100%', height: '100%' }}>
+									<div key={originalIndex} style={{ width: '100%' }}>
 									  {imageElement}
 									</div>
 								  );
@@ -907,7 +919,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 								const linkUrl = currentVideo ? buildLinkForSlide(currentVideo) : null;
 						  
 								const videoElement = currentVideo ? (
-								  <div className="media-box">
+								  <div className="media-box" style={{ width: '100%', overflow: 'hidden' }}>
 									<video
 									  src={getImageUrl(
 										tab.tabContentGroupVideo.type === 'DYNAMIC' 
@@ -920,7 +932,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 										  : currentVideo.attr?.alt 								  }
 									  className="media-content"
 									  controls
-									  style={{ width: '100%', height: 'auto', objectFit: 'cover' }}
+									  style={{ width: '100%', height: 'auto', display: 'block' }}
 									/>
 								  </div>
 								) : null;
@@ -930,15 +942,11 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 									style={{
 									  position: 'relative',
 									  width: '100%',
-									  height: 'auto',
 									  overflow: 'hidden',
-									  display: 'flex',
-									  alignItems: 'stretch',
-									  justifyContent: 'center',
 									}}
 								  >
 									{currentVideo && (
-									  <div style={{ width: '100%', height: '100%', display: 'flex' }}>
+									  <div style={{ width: '100%' }}>
 										{linkUrl ? (
 										  <a
 											href={linkUrl}
@@ -947,7 +955,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 												? currentVideo.external_link?.target || '_blank'
 												: '_self'
 											}
-											style={{ textDecoration: 'none', color: 'inherit', display: 'contents' }}
+											style={{ textDecoration: 'none', color: 'inherit', display: 'block', width: '100%' }}
 										  >
 											{videoElement}
 										  </a>
@@ -1083,7 +1091,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 							gridTemplateColumns: getGridColumns(),
 							gridTemplateRows: getGridRows(),
 							gap: '3px',
-							height: 'auto', // Use auto height for group videos
+							width: '100%',
 							overflow: 'hidden'
 						  };
 						  
@@ -1092,11 +1100,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 							  style={{
 								position: 'relative',
 								width: '100%',
-								height: 'auto',
 								overflow: 'hidden',
-								display: 'flex',
-								alignItems: 'center',
-								justifyContent: 'center',
 							  }}
 							>
 							  <div style={groupVideoContentStyle} className='media-box'>
@@ -1105,7 +1109,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 								  const linkUrl = buildLinkForSlide(video);
 								  
 								  const videoElement = (
-									<div key={originalIndex} className="media-box">
+									<div key={originalIndex} className="media-box" style={{ width: '100%', overflow: 'hidden' }}>
 									  <video
 										src={getImageUrl(
 										  tab.tabContentGroupVideo.type === 'DYNAMIC' 
@@ -1119,7 +1123,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 										}
 										className="media-content"
 										controls
-										style={{ width: '100%', height: 'auto', objectFit: 'cover' }}
+										style={{ width: '100%', height: 'auto', display: 'block' }}
 									  />
 									</div>
 								  );
@@ -1134,11 +1138,12 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 										  : '_self'
 									  }
 									  className='media-box'
+									  style={{ width: '100%', display: 'block' }}
 									>
 									  {videoElement}
 									</a>
 								  ) : (
-									<div key={originalIndex} style={{ width: '100%', height: '100%' }}>
+									<div key={originalIndex} style={{ width: '100%' }}>
 									  {videoElement}
 									</div>
 								  );
@@ -1258,15 +1263,12 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 									style={{
 									  position: 'relative',
 									  width: '100%',
-									  height: `${props.height}px`, // Full height of tab content
+									  height: `${props.height}px`,
 									  overflow: 'hidden',
-									  display: 'flex',
-									  alignItems: 'stretch',
-									  justifyContent: 'center',
 									}}
 								  >
 									{currentProduct && (
-									  <div style={{ width: '100%', height: '100%', display: 'flex' }}>
+									  <div style={{ width: '100%', height: '100%' }}>
 										<ProductCard product={currentProduct} layout={layout} />
 									  </div>
 									)}
@@ -1424,7 +1426,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 								gridTemplateColumns: getGridColumns(),
 								gridTemplateRows: getGridRows(),
 								gap: '12px',
-								height: 'auto', // Use auto height for group products
+								height: `${props.height}px`, // Use TabComponent height for group products
 								overflow: 'hidden',
 								padding: '12px',
 								alignItems: 'stretch',
@@ -1435,11 +1437,8 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 								  style={{
 									position: 'relative',
 									width: '100%',
-									height: 'auto',
+									height: `${props.height}px`,
 									overflow: 'hidden',
-									display: 'flex',
-									alignItems: 'center',
-									justifyContent: 'center',
 								  }}
 								>
 								  <div style={groupProductContentStyle}>
@@ -1450,7 +1449,6 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 										  key={originalIndex}
 										  style={{
 											width: '100%',
-											height: '100%',
 											display: 'flex',
 											alignItems: 'stretch',
 											justifyContent: 'center',
@@ -1593,11 +1591,19 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 	};
 
 	const tabs = props.tabs || [];
+	
+	// Get dynamic minHeight based on media components
+	const getTabMinHeight = (): string | undefined => {
+		if (hasMediaComponents()) {
+			return undefined; // Remove minHeight constraint for media components
+		}
+		return `${props.height}px`;
+	};
 
 	return (
 		<div style={{
 			width: '100%',
-			minHeight: `${props.height}px`,
+			minHeight: getTabMinHeight(),
 			backgroundColor: '#ffffff',
 			overflow: 'hidden',
 			boxShadow: '0 4px 20px rgba(0,0,0,0.08)',

package/src/PageComponents/Visual-Components/tab.css

@@ -1,22 +1,17 @@
 .media-box {
     width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: #f4f4f4;
     overflow: hidden;
+    display: block;
   }
   
   .media-content {
-    height: 100%;
     width: 100%;
-    object-fit: fill;
+    height: auto;
+    display: block;
   }
   
   /* Video specific styles */
   video.media-content {
-    object-fit: cover;
     background-color: #000;
   }
   

package/src/index.css

@@ -53,22 +53,22 @@ body {
 }
 
 /* -------------- IMAGE STYLES --------------- */
-
 .image-box {
  
-   width: 100%;
-  /* height: 280px; */
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  width: 100%;
+ /* height: 280px; */
+ overflow: hidden;
+ display: flex;
+ align-items: center;
+ justify-content: center;
 
 }
 
 .fitted-image {
-  width: 100%;
-  height: 100%;
+ width: 100%;
+ height: 100%;
 }
+
 .mainpagearea{
   background-color: rgb(205, 205, 205);
   width: 100%;