tee3apps-cms-sdk-react 0.0.14 → 0.0.15

package/package.json

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

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

@@ -642,6 +642,19 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 						  const displayImages = displayIndices.map(idx => images[idx]);
 						  const needsCarousel = images.length > itemsPerView;
 						  
+						  // Navigation handlers specific to this layout
+						  const handleNextImage = () => {
+							if (carouselIndex < maxCarouselIndex) {
+							  setCarouselIndex((prev) => Math.min(prev + 1, maxCarouselIndex));
+							}
+						  };
+						  
+						  const handlePrevImage = () => {
+							if (carouselIndex > 0) {
+							  setCarouselIndex((prev) => Math.max(prev - 1, 0));
+							}
+						  };
+						  
 						  // Create dynamic content style for GROUPIMAGE
 						  const groupImageContentStyle = {
 							display: 'grid',
@@ -653,7 +666,17 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 						  };
 						  
 						  return (
-							<div style={{ position: 'relative', width: '100%' }}>
+							<div
+							  style={{
+								position: 'relative',
+								width: '100%',
+								height: 'auto',
+								overflow: 'hidden',
+								display: 'flex',
+								alignItems: 'center',
+								justifyContent: 'center',
+							  }}
+							>
 							  <div style={groupImageContentStyle} className='media-box'>
 								{displayImages.map((image, displayIndex) => {
 								  const originalIndex = displayIndices[displayIndex];
@@ -702,7 +725,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 								<>
 								  {/* Previous Button */}
 								  <button
-									onClick={prevCarouselItem}
+									onClick={handlePrevImage}
 									disabled={carouselIndex === 0}
 									style={{
 									  position: 'absolute',
@@ -729,7 +752,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 
 								  {/* Next Button */}
 								  <button
-									onClick={nextCarouselItem}
+									onClick={handleNextImage}
 									disabled={carouselIndex >= maxCarouselIndex}
 									style={{
 									  position: 'absolute',
@@ -964,6 +987,19 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 						  const displayVideos = displayIndices.map(idx => videos[idx]);
 						  const needsCarousel = videos.length > itemsPerView;
 						  
+						  // Navigation handlers specific to this layout
+						  const handleNextVideo = () => {
+							if (carouselIndex < maxCarouselIndex) {
+							  setCarouselIndex((prev) => Math.min(prev + 1, maxCarouselIndex));
+							}
+						  };
+						  
+						  const handlePrevVideo = () => {
+							if (carouselIndex > 0) {
+							  setCarouselIndex((prev) => Math.max(prev - 1, 0));
+							}
+						  };
+						  
 						  // Create dynamic content style for GROUPVIDEO
 						  const groupVideoContentStyle = {
 							display: 'grid',
@@ -975,7 +1011,17 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 						  };
 						  
 						  return (
-							<div style={{ position: 'relative', width: '100%' }}>
+							<div
+							  style={{
+								position: 'relative',
+								width: '100%',
+								height: 'auto',
+								overflow: 'hidden',
+								display: 'flex',
+								alignItems: 'center',
+								justifyContent: 'center',
+							  }}
+							>
 							  <div style={groupVideoContentStyle} className='media-box'>
 								{displayVideos.map((video, displayIndex) => {
 								  const originalIndex = displayIndices[displayIndex];
@@ -1027,7 +1073,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 								<>
 								  {/* Previous Button */}
 								  <button
-									onClick={prevCarouselItem}
+									onClick={handlePrevVideo}
 									disabled={carouselIndex === 0}
 									style={{
 									  position: 'absolute',
@@ -1054,7 +1100,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 
 								  {/* Next Button */}
 								  <button
-									onClick={nextCarouselItem}
+									onClick={handleNextVideo}
 									disabled={carouselIndex >= maxCarouselIndex}
 									style={{
 									  position: 'absolute',
@@ -1254,6 +1300,40 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 							  const displayProducts = displayIndices.map(idx => products[idx]);
 							  const needsCarousel = products.length > itemsPerView;
 							  
+							  // Debug logging
+							  console.log('GROUPPRODUCT Grid Layout:', {
+								layout,
+								totalProducts: products.length,
+								itemsPerView,
+								carouselIndex,
+								maxCarouselIndex,
+								displayIndices,
+								needsCarousel
+							  });
+							  
+							  // Navigation handlers specific to this layout
+							  const handleNextProduct = () => {
+								console.log('Next clicked, current:', carouselIndex, 'max:', maxCarouselIndex);
+								if (carouselIndex < maxCarouselIndex) {
+								  setCarouselIndex((prev) => {
+									const next = Math.min(prev + 1, maxCarouselIndex);
+									console.log('Setting carousel index to:', next);
+									return next;
+								  });
+								}
+							  };
+							  
+							  const handlePrevProduct = () => {
+								console.log('Prev clicked, current:', carouselIndex);
+								if (carouselIndex > 0) {
+								  setCarouselIndex((prev) => {
+									const next = Math.max(prev - 1, 0);
+									console.log('Setting carousel index to:', next);
+									return next;
+								  });
+								}
+							  };
+							  
 							  // Create dynamic content style for GROUPPRODUCT
 							  const groupProductContentStyle = {
 								display: 'grid',
@@ -1267,7 +1347,17 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 							  };
 							  
 							  return (
-								<div style={{ position: 'relative', width: '100%' }}>
+								<div
+								  style={{
+									position: 'relative',
+									width: '100%',
+									height: 'auto',
+									overflow: 'hidden',
+									display: 'flex',
+									alignItems: 'center',
+									justifyContent: 'center',
+								  }}
+								>
 								  <div style={groupProductContentStyle}>
 									{displayProducts.map((product, displayIndex) => {
 									  const originalIndex = displayIndices[displayIndex];
@@ -1294,14 +1384,18 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 									<>
 									  {/* Previous Button */}
 									  <button
-										onClick={prevCarouselItem}
+										onClick={(e) => {
+										  e.preventDefault();
+										  e.stopPropagation();
+										  handlePrevProduct();
+										}}
 										disabled={carouselIndex === 0}
 										style={{
 										  position: 'absolute',
 										  left: '10px',
 										  top: '50%',
 										  transform: 'translateY(-50%)',
-										  background: 'rgba(0,0,0,0.5)',
+										  background: carouselIndex === 0 ? 'rgba(0,0,0,0.3)' : 'rgba(0,0,0,0.7)',
 										  color: 'white',
 										  border: 'none',
 										  borderRadius: '50%',
@@ -1312,8 +1406,11 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 										  display: 'flex',
 										  alignItems: 'center',
 										  justifyContent: 'center',
-										  fontSize: '18px',
-										  zIndex: 10,
+										  fontSize: '24px',
+										  fontWeight: 'bold',
+										  zIndex: 100,
+										  pointerEvents: 'auto',
+										  transition: 'all 0.3s ease',
 										}}
 									  >
 										‹
@@ -1321,14 +1418,18 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 
 									  {/* Next Button */}
 									  <button
-										onClick={nextCarouselItem}
+										onClick={(e) => {
+										  e.preventDefault();
+										  e.stopPropagation();
+										  handleNextProduct();
+										}}
 										disabled={carouselIndex >= maxCarouselIndex}
 										style={{
 										  position: 'absolute',
 										  right: '10px',
 										  top: '50%',
 										  transform: 'translateY(-50%)',
-										  background: 'rgba(0,0,0,0.5)',
+										  background: carouselIndex >= maxCarouselIndex ? 'rgba(0,0,0,0.3)' : 'rgba(0,0,0,0.7)',
 										  color: 'white',
 										  border: 'none',
 										  borderRadius: '50%',
@@ -1339,8 +1440,11 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 										  display: 'flex',
 										  alignItems: 'center',
 										  justifyContent: 'center',
-										  fontSize: '18px',
-										  zIndex: 10,
+										  fontSize: '24px',
+										  fontWeight: 'bold',
+										  zIndex: 100,
+										  pointerEvents: 'auto',
+										  transition: 'all 0.3s ease',
 										}}
 									  >
 										›
@@ -1355,21 +1459,27 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 										  transform: 'translateX(-50%)',
 										  display: 'flex',
 										  gap: '8px',
-										  zIndex: 10,
+										  zIndex: 100,
+										  pointerEvents: 'auto',
 										}}
 									  >
 										{Array.from({ length: maxCarouselIndex + 1 }, (_, index) => (
 										  <button
 											key={index}
-											onClick={() => goToCarouselItem(index)}
+											onClick={(e) => {
+											  e.preventDefault();
+											  e.stopPropagation();
+											  goToCarouselItem(index);
+											}}
 											style={{
 											  width: index === carouselIndex ? '12px' : '8px',
 											  height: index === carouselIndex ? '12px' : '8px',
 											  borderRadius: '50%',
-											  border: 'none',
-											  background: index === carouselIndex ? 'white' : 'rgba(255,255,255,0.5)',
+											  border: '2px solid white',
+											  background: index === carouselIndex ? 'white' : 'rgba(255,255,255,0.6)',
 											  cursor: 'pointer',
 											  transition: 'all 0.3s ease',
+											  pointerEvents: 'auto',
 											}}
 										  />
 										))}