tee3apps-cms-sdk-react 0.0.18 → 0.0.20

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

@@ -1,366 +1,364 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { Linodeurl } from '../../const';
-
-// Types for the carousel props
-interface Slide {
-  sl_id: string;
-  name: string;
-  sl_type: string;
-  image: {
-    isDynamic: boolean;
-    url: string;
-    alt: string;
-    width: number | null;
-    height: number | null;
-  };
-  video: {
-    url?: string;
-    alt?: string;
-  };
-  link_type: string; // NONE | EXTERNALLINK | PRODUCT | TAG | PAGE
-  product: any;
-  tag: any;
-  page: any;
-  external_link: {
-    url: string;
-    target: string;
-  };
-}
-
-interface SlideMode {
-  web: {
-    slidesToShow: number;
-  };
-  mobileweb: {
-    slidesToShow: number;
-  };
-  mobileapp: {
-    slidesToShow: number;
-  };
-  tablet: {
-    slidesToShow: number;
-  };
-}
-
-interface SlidesData {
-  all: Slide[];
-  mode: SlideMode;
-}
-
-export interface CarouselProps {
-  name: string;
-  code: string;
-  scrollMode: string;
-  autoplay: boolean;
-  autoplayInterval: number;
-  pauseOnHover: boolean;
-  speed: number;
-  height: string;
-  vertical: boolean;
-  sliderArrowVisible: boolean;
-  pagingDotVisible: boolean;
-  objectFit: string;
-  slides: SlidesData[];
-}
-
-interface CarouselComponentMainProps {
-  props: CarouselProps;
-  deviceMode?: string;
-}
-
-const CarouselComponent: React.FC<CarouselComponentMainProps> = ({
-  props,
-  deviceMode = 'web'
-}) => {
-  const [currentSlide, setCurrentSlide] = useState(0);
-  const [isPlaying, setIsPlaying] = useState(props.autoplay);
-  const [isHovered, setIsHovered] = useState(false);
-  
-  const slides = props.slides[0].all;
-  const totalSlides = slides.length;
-
-  // Function to go to next slide (advance by 1 to support wrap pairs)
-  const nextSlide = useCallback(() => {
-    setCurrentSlide((prev) => (prev + 1) % totalSlides);
-  }, [totalSlides]);
-
-  // Function to go to previous slide
-  const prevSlide = useCallback(() => {
-    setCurrentSlide((prev) => (prev - 1 + totalSlides) % totalSlides);
-  }, [totalSlides]);
-
-  // Function to go to specific slide start index
-  const goToSlide = (index: number) => {
-    setCurrentSlide(index % totalSlides);
-  };
-
-  // Handle autoplay
-  useEffect(() => {
-    if (!props.autoplay || !isPlaying || isHovered) return;
-
-    const interval = setInterval(() => {
-      nextSlide();
-    }, props.autoplayInterval);
-
-    return () => clearInterval(interval);
-  }, [props.autoplay, props.autoplayInterval, isPlaying, isHovered, nextSlide]);
-
-  // Handle pause on hover
-  const handleMouseEnter = () => {
-    setIsHovered(true);
-    if (props.pauseOnHover) {
-      setIsPlaying(false);
-    }
-  };
-
-  const handleMouseLeave = () => {
-    setIsHovered(false);
-    if (props.pauseOnHover) {
-      setIsPlaying(true);
-    }
-  };
-
-  // Get current mode settings
-  const getCurrentMode = () => {
-    switch(deviceMode) {
-      case 'mobileweb':
-        return props.slides[0].mode.mobileweb;
-      case 'mobileapp':
-        return props.slides[0].mode.mobileapp;
-      case 'tablet':
-        return props.slides[0].mode.tablet;
-      case 'web':
-      default:
-        return props.slides[0].mode.web;
-    }
-  };
-
-  const currentMode = getCurrentMode();
-  const slidesToShow = currentMode.slidesToShow;
-
-  const resolveAssetUrl = (url?: string) => {
-    if (!url) return '';
-    if (url.startsWith('http://') || url.startsWith('https://')) return url;
-    return `${Linodeurl}${url}`;
-  };
-
-  const buildLinkForSlide = (slide: Slide) => {
-    console.warn(slide)
-    switch (slide.link_type) {
-      case 'NONE':
-        return null;
-      case 'EXTERNALLINK':
-        return `${slide.external_link?.url || ''}`;
-      case 'PRODUCT': {
-        const product: any = slide.product || {};
-        const pdType = product?.pd_type || product?.product_type;
-        const code = product?.code || '';
-         if (!code) return null;
-
-        return pdType === 'VARIANT'
-        ? `/variant/${code}`
-        : `model/${code}`;
-      }
-      case 'TAG': {
-        const tag: any = slide.tag || {};
-        if (!tag.code) return null;
-        return `/tag/${tag?.code}`;
-      }
-      case 'PAGE': {
-        const page: any = slide.page || {};
-        const pageId = page._id
-        const pgType=page.page_type
-        return `/page/${pageId}?type=${pgType}`;
-      }
-      default:
-        return null;
-    }
-  };
-
-  const handleSlideClick = (slide: Slide) => {
-    const link = buildLinkForSlide(slide);
-    if (link === null) return;
-    if (typeof link === 'string') {
-      if (link.startsWith('http')) {
-        window.open(link, '_blank');
-      } else {
-        window.location.href = link;
-      }
-      return;
-    }
-    const queryString = Object.entries((link as any).query || {})
-      .map(([key, value]) => `${key}=${encodeURIComponent(value as string)}`)
-      .join('&');
-    const fullPath = `${(link as any).pathname}${queryString ? `?${queryString}` : ''}`;
-    window.location.href = fullPath;
-  };
-
-  return (
-    <div 
-      className="carousel-container"
-      style={{
-        position: 'relative',
-        height: props.height,
-        overflow: 'hidden'
-      }}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-    >
-      {/* Slides container */}
-      <div
-        className="carousel-slides"
-        style={{
-          display: 'flex',
-          height: '100%',
-          transition: `opacity ${props.speed}ms ease`,
-          flexDirection: props.vertical ? 'column' : 'row'
-        }}
-      >
-        {Array.from({ length: slidesToShow }).map((_, offset) => {
-          const slide = slides[(currentSlide + offset) % totalSlides];
-          const clickable = buildLinkForSlide(slide) !== null;
-          return (
-            <div
-              key={`${slide.sl_id}-${offset}`}
-              className="carousel-slide"
-              style={{
-                flex: `0 0 ${100 / slidesToShow}%`,
-                height: props.vertical ? `${100 / slidesToShow}%` : '100%',
-                overflow: 'hidden',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                cursor: clickable ? 'pointer' : 'default'
-              }}
-              onClick={clickable ? () => handleSlideClick(slide) : undefined}
-            >
-              {slide.sl_type === 'video' ? (
-                <video
-                  src={resolveAssetUrl(slide.video?.url)}
-                  style={{ width: '100%', height: '100%', objectFit: props.objectFit as any }}
-                  autoPlay={props.autoplay}
-                  muted
-                  loop
-                  controls={!props.autoplay}
-                />
-              ) : (
-                <img
-                  src={resolveAssetUrl(slide.image?.url)}
-                  alt={slide.image?.alt || ''}
-                  style={{ width: '100%', height: '100%', objectFit: props.objectFit as any }}
-                />
-              )}
-            </div>
-          );
-        })}
-        
-      </div>
-
-      {/* Navigation arrows */}
-      {props.sliderArrowVisible && totalSlides > slidesToShow && (
-        <>
-         <button
-  className="carousel-arrow carousel-arrow-prev"
-  onClick={prevSlide}
-  style={{
-    position: 'absolute',
-    ...(props.vertical
-      ? { top: '10px', left: '50%', transform: 'translateX(-50%)' }
-      : { top: '50%', left: '1px', transform: 'translateY(-50%)' }),
-    zIndex: 10,
-    background: 'white', 
-    color: 'black',
-    border: '2px solid white', 
-    boxShadow: '0 2px 6px rgba(0,0,0,0.5)', 
-    borderRadius: '15%',
-    width: '40px',
-    height: '60px',
-    cursor: 'pointer',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    fontSize: '20px',
-    fontWeight: 'bold',
-    transition: 'transform 0.2s ease-in-out',
-    
-  }}
->
-  {props.vertical ? '˄' : '‹'}
-</button>
-
-<button
-  className="carousel-arrow carousel-arrow-next"
-  onClick={nextSlide}
-  style={{
-    position: 'absolute',
-    ...(props.vertical
-      ? { bottom: '10px', left: '50%', transform: 'translateX(-50%)' }
-      : { top: '50%', right: '1px', transform: 'translateY(-50%)' }),
-    zIndex: 10,
-    background: 'white', 
-    color: 'black',
-    border: '2px solid white', 
-    boxShadow: '0 2px 6px rgba(0,0,0,0.5)', 
-    borderRadius: '15%',
-    width: '40px',
-    height: '60px',
-    cursor: 'pointer',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    fontSize: '20px',
-    fontWeight: 'bold',
-    transition: 'transform 0.2s ease-in-out',
-  }}
->
-  {props.vertical ? '˅' : '›'}
-</button>
-
-        </>
-      )}
-
-      {/* Pagination dots */}
-      {props.pagingDotVisible && totalSlides > 1 && (
-        <div
-          className="carousel-dots"
-          style={{
-            position: 'absolute',
-            ...(props.vertical
-              ? { top: '50%', right: '10px', transform: 'translateY(-50%)', bottom: 'auto', left: 'auto' }
-              : { bottom: '15px', left: '0', right: '0' }
-            ),
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            flexDirection: props.vertical ? 'column' : 'row',
-            gap: '8px',
-            zIndex: 100,
-            padding: props.vertical ? '8px 6px' : '6px 10px',
-          
-            borderRadius: props.vertical ? '12px' : '16px'
-          }}
-        >
-          {Array.from({ length: totalSlides }).map((_, index) => (
-            <button
-              key={index}
-              aria-label={`Go to slide ${index + 1}`}
-              className={`carousel-dot ${index === currentSlide ? 'active' : ''}`}
-              onClick={() => goToSlide(index)}
-              style={{
-                width: index === currentSlide ? '12px' : '10px',
-                height: index === currentSlide ? '12px' : '10px',
-                borderRadius: '50%',
-                border: 'none',
-                background: index === currentSlide ? '#000' : '#ccc',
-                cursor: 'pointer',
-                transition: 'all 200ms ease'
-              }}
-            />
-          ))}
-        </div>
-      )}
-    </div>
-  );
-};
-
+import React, { useState, useEffect, useCallback } from 'react';
+import { Linodeurl } from '../../const';
+
+// Types for the carousel props
+interface Slide {
+  sl_id: string;
+  name: string;
+  sl_type: string;
+  image: {
+    isDynamic: boolean;
+    url: string;
+    alt: string;
+    width: number | null;
+    height: number | null;
+  };
+  video: {
+    url?: string;
+    alt?: string;
+  };
+  link_type: string; // NONE | EXTERNALLINK | PRODUCT | TAG | PAGE
+  product: any;
+  tag: any;
+  page: any;
+  external_link: {
+    url: string;
+    target: string;
+  };
+}
+
+interface SlideMode {
+  web: {
+    slidesToShow: number;
+  };
+  mobileweb: {
+    slidesToShow: number;
+  };
+  mobileapp: {
+    slidesToShow: number;
+  };
+  tablet: {
+    slidesToShow: number;
+  };
+}
+
+interface SlidesData {
+  all: Slide[];
+  mode: SlideMode;
+}
+
+export interface CarouselProps {
+  name: string;
+  code: string;
+  scrollMode: string;
+  autoplay: boolean;
+  autoplayInterval: number;
+  pauseOnHover: boolean;
+  speed: number;
+  height: string;
+  vertical: boolean;
+  sliderArrowVisible: boolean;
+  pagingDotVisible: boolean;
+  objectFit: string;
+  slides: SlidesData[];
+}
+
+interface CarouselComponentMainProps {
+  props: CarouselProps;
+  deviceMode?: string;
+}
+
+const CarouselComponent: React.FC<CarouselComponentMainProps> = ({
+  props,
+  deviceMode = 'web'
+}) => {
+  const [currentSlide, setCurrentSlide] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(props.autoplay);
+  const [isHovered, setIsHovered] = useState(false);
+  
+  const slides = props.slides[0].all;
+  const totalSlides = slides.length;
+
+  // Function to go to next slide (advance by 1 to support wrap pairs)
+  const nextSlide = useCallback(() => {
+    setCurrentSlide((prev) => (prev + 1) % totalSlides);
+  }, [totalSlides]);
+
+  // Function to go to previous slide
+  const prevSlide = useCallback(() => {
+    setCurrentSlide((prev) => (prev - 1 + totalSlides) % totalSlides);
+  }, [totalSlides]);
+
+  // Function to go to specific slide start index
+  const goToSlide = (index: number) => {
+    setCurrentSlide(index % totalSlides);
+  };
+
+  // Handle autoplay
+  useEffect(() => {
+    if (!props.autoplay || !isPlaying || isHovered) return;
+
+    const interval = setInterval(() => {
+      nextSlide();
+    }, props.autoplayInterval);
+
+    return () => clearInterval(interval);
+  }, [props.autoplay, props.autoplayInterval, isPlaying, isHovered, nextSlide]);
+
+  // Handle pause on hover
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+    if (props.pauseOnHover) {
+      setIsPlaying(false);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+    if (props.pauseOnHover) {
+      setIsPlaying(true);
+    }
+  };
+
+  // Get current mode settings
+  const getCurrentMode = () => {
+    switch(deviceMode) {
+      case 'mobileweb':
+        return props.slides[0].mode.mobileweb;
+      case 'mobileapp':
+        return props.slides[0].mode.mobileapp;
+      case 'tablet':
+        return props.slides[0].mode.tablet;
+      case 'web':
+      default:
+        return props.slides[0].mode.web;
+    }
+  };
+
+  const currentMode = getCurrentMode();
+  const slidesToShow = currentMode.slidesToShow;
+
+  const resolveAssetUrl = (url?: string) => {
+    if (!url) return '';
+    if (url.startsWith('http://') || url.startsWith('https://')) return url;
+    return `${Linodeurl}${url}`;
+  };
+
+  const buildLinkForSlide = (slide: Slide) => {
+    console.warn(slide)
+    switch (slide.link_type) {
+      case 'NONE':
+        return null;
+      case 'EXTERNALLINK':
+        return `${slide.external_link?.url || ''}`;
+      case 'PRODUCT': {
+        const product: any = slide.product || {};
+        const pdType = product?.pd_type || product?.product_type;
+        const code = product?.code || '';
+         if (!code) return null;
+
+        return pdType === 'VARIANT'
+        ? `/variant/${code}`
+        : `model/${code}`;
+      }
+      case 'TAG': {
+        const tag: any = slide.tag || {};
+        if (!tag.code) return null;
+        return `/tag/${tag?.code}`;
+      }
+      case 'PAGE': {
+        const page: any = slide.page || {};
+        const pageId = page._id
+        const pgType=page.page_type
+        return `/page/${pageId}?type=${pgType}`;
+      }
+      default:
+        return null;
+    }
+  };
+
+  const handleSlideClick = (slide: Slide) => {
+    const link = buildLinkForSlide(slide);
+    if (link === null) return;
+    if (typeof link === 'string') {
+      if (link.startsWith('http')) {
+        window.open(link, '_blank');
+      } else {
+        window.location.href = link;
+      }
+      return;
+    }
+    const queryString = Object.entries((link as any).query || {})
+      .map(([key, value]) => `${key}=${encodeURIComponent(value as string)}`)
+      .join('&');
+    const fullPath = `${(link as any).pathname}${queryString ? `?${queryString}` : ''}`;
+    window.location.href = fullPath;
+  };
+
+  return (
+    <div 
+      className="carousel-container"
+      style={{
+        position: 'relative',
+        width: '100%',
+        overflow: 'hidden'
+      }}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {/* Slides container */}
+      <div
+        className="carousel-slides"
+        style={{
+          display: 'flex',
+          width: '100%',
+          transition: `opacity ${props.speed}ms ease`,
+          flexDirection: props.vertical ? 'column' : 'row'
+        }}
+      >
+        {Array.from({ length: slidesToShow }).map((_, offset) => {
+          const slide = slides[(currentSlide + offset) % totalSlides];
+          const clickable = buildLinkForSlide(slide) !== null;
+          return (
+            <div
+              key={`${slide.sl_id}-${offset}`}
+              className="carousel-slide"
+              style={{
+                flex: `0 0 ${100 / slidesToShow}%`,
+                width: props.vertical ? '100%' : `${100 / slidesToShow}%`,
+                overflow: 'hidden',
+                display: 'block',
+                cursor: clickable ? 'pointer' : 'default'
+              }}
+              onClick={clickable ? () => handleSlideClick(slide) : undefined}
+            >
+              {slide.sl_type === 'video' ? (
+                <video
+                  src={resolveAssetUrl(slide.video?.url)}
+                  style={{ width: '100%', height: 'auto', display: 'block' }}
+                  autoPlay={props.autoplay}
+                  muted
+                  loop
+                  controls={!props.autoplay}
+                />
+              ) : (
+                <img
+                  src={resolveAssetUrl(slide.image?.url)}
+                  alt={slide.image?.alt || ''}
+                  style={{ width: '100%', height: 'auto', display: 'block' }}
+                />
+              )}
+            </div>
+          );
+        })}
+        
+      </div>
+
+      {/* Navigation arrows */}
+      {props.sliderArrowVisible && totalSlides > slidesToShow && (
+        <>
+         <button
+  className="carousel-arrow carousel-arrow-prev"
+  onClick={prevSlide}
+  style={{
+    position: 'absolute',
+    ...(props.vertical
+      ? { top: '10px', left: '50%', transform: 'translateX(-50%)' }
+      : { top: '50%', left: '1px', transform: 'translateY(-50%)' }),
+    zIndex: 10,
+    background: 'white', 
+    color: 'black',
+    border: '2px solid white', 
+    boxShadow: '0 2px 6px rgba(0,0,0,0.5)', 
+    borderRadius: '15%',
+    width: '40px',
+    height: '60px',
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: '20px',
+    fontWeight: 'bold',
+    transition: 'transform 0.2s ease-in-out',
+    
+  }}
+>
+  {props.vertical ? '˄' : '‹'}
+</button>
+
+<button
+  className="carousel-arrow carousel-arrow-next"
+  onClick={nextSlide}
+  style={{
+    position: 'absolute',
+    ...(props.vertical
+      ? { bottom: '10px', left: '50%', transform: 'translateX(-50%)' }
+      : { top: '50%', right: '1px', transform: 'translateY(-50%)' }),
+    zIndex: 10,
+    background: 'white', 
+    color: 'black',
+    border: '2px solid white', 
+    boxShadow: '0 2px 6px rgba(0,0,0,0.5)', 
+    borderRadius: '15%',
+    width: '40px',
+    height: '60px',
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: '20px',
+    fontWeight: 'bold',
+    transition: 'transform 0.2s ease-in-out',
+  }}
+>
+  {props.vertical ? '˅' : '›'}
+</button>
+
+        </>
+      )}
+
+      {/* Pagination dots */}
+      {props.pagingDotVisible && totalSlides > 1 && (
+        <div
+          className="carousel-dots"
+          style={{
+            position: 'absolute',
+            ...(props.vertical
+              ? { top: '50%', right: '10px', transform: 'translateY(-50%)', bottom: 'auto', left: 'auto' }
+              : { bottom: '15px', left: '0', right: '0' }
+            ),
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            flexDirection: props.vertical ? 'column' : 'row',
+            gap: '8px',
+            zIndex: 100,
+            padding: props.vertical ? '8px 6px' : '6px 10px',
+          
+            borderRadius: props.vertical ? '12px' : '16px'
+          }}
+        >
+          {Array.from({ length: totalSlides }).map((_, index) => (
+            <button
+              key={index}
+              aria-label={`Go to slide ${index + 1}`}
+              className={`carousel-dot ${index === currentSlide ? 'active' : ''}`}
+              onClick={() => goToSlide(index)}
+              style={{
+                width: index === currentSlide ? '12px' : '10px',
+                height: index === currentSlide ? '12px' : '10px',
+                borderRadius: '50%',
+                border: 'none',
+                background: index === currentSlide ? '#000' : '#ccc',
+                cursor: 'pointer',
+                transition: 'all 200ms ease'
+              }}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
 export default CarouselComponent;