oddsgate-ds 1.0.169 → 1.0.174

package/src/components/organisms/ProductsSlider/ProductsSlider.component.tsx

@@ -1,216 +1,216 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react'
-import {
-  StyledProductsSlider,
-  StyledProductsSliderContent,
-  StyledProductsSliderSlide,
-  StyledProductsSliderSlides,
-  StyledProductsSliderWrapper
-} from './ProductsSlider.theme'
-
-import Heading from '@/components/atoms/Heading/Heading.component';
-import { IProductsSlider } from './ProductsSlider.interface'
-import ProductCard from '@/components/molecules/ProductCard/ProductCard.component';
-import { debounce } from '@/helpers/events';
-import useMediaMatch from '@/helpers/useMediaMatch';
-
-const ProductsSlider = ({
-  content,
-  style,
-  className,
-}: IProductsSlider) => {
-
-  const [activeElement, setActiveElement] = useState(content && content[0]);
-  const slider = useRef<HTMLDivElement>();
-  const wrapper = useRef<HTMLDivElement>();
-  const slidesHolder = useRef<HTMLDivElement>();
-  const contentHolder = useRef<HTMLDivElement>();
-  const isMobile = useMediaMatch();
-
-
-  //force 26 items
-  const newContent = useMemo(() => {
-    if (isMobile) {
-      return content;
-    } else if (content && content.length < 26) {
-      let counter = 0;
-      for (let i = content.length; i <= 26; i++) {
-        content[i] = content[counter];
-        counter++;
-      }
-      return content;
-    }
-  }, [isMobile, content])
-
-  useEffect(() => {
-    if (!slidesHolder.current) return //bail out;
-
-    const slides = Array.prototype.slice.call(slidesHolder?.current?.children);
-    let slidesSize = 0;
-    let currentAngle = 0;
-
-    const stepAngle = 2 * Math.PI / slidesHolder?.current?.children.length;
-    // const stepAngle = 0.52;
-
-    let currentSlide = 0;
-
-    const slidesRepositioning = (r) => {
-      if (isMobile) return;
-
-      for (let i = 0; i < slides.length; i++) {
-
-        let x = r * Math.cos(stepAngle * i - Math.PI / 2),
-          y = r * Math.sin(stepAngle * i - Math.PI / 2);
-
-        slides[i].style.transform = 'translate( ' + x + 'px, ' + y + 'px ) rotate( ' + (((stepAngle * 180 / Math.PI * i) + 90) - 90) + 'deg )';
-        // slides[i].style.transform = 'translate( ' + x + 'px, ' + y + 'px )';
-      };
-    }
-    const setSize = (radius: number) => {
-      if (!wrapper.current || !slidesHolder.current || isMobile) return //bail out;
-
-      const slideSize = 0.08;
-
-      wrapper.current.style.width = 2 * radius + 'px';
-      // wrapper.current.style.height = 2 * radius + 'px';
-      wrapper.current.style.height = '880px';
-
-      let r = 2 * radius * (1 - slideSize);
-      slidesHolder.current.style.width = r + 'px'
-      slidesHolder.current.style.height = r + 'px';
-      slidesRepositioning(r / 2);
-
-      slidesSize = Math.min(2 * radius * slideSize, stepAngle * radius * (1 - slideSize) - 20);
-      slidesHolder.current.style.marginTop = slidesSize + 'px';
-
-
-      for (let i = 0; i < slides.length; i++) {
-        slides[i].style.width = slidesSize + 'px';
-      };
-
-    }
-
-    const sliderResize = debounce(() => {
-      if (isMobile) return;
-      const sliderSize = 2.4;
-
-      let radius,
-        w = slider?.current ? slider?.current?.getBoundingClientRect().width : 0,
-        h = slider?.current ? slider?.current.getBoundingClientRect().height : 0;
-
-      radius = (w / 2) * sliderSize
-
-      setSize(Math.round(radius));
-    }, 250)
-
-    const addStyle = () => {
-      setTimeout(() => {
-        contentHolder?.current?.classList.add('active');
-        if (slides[currentSlide]) slides[currentSlide].classList.add('active');
-      }, 200);
-    };
-    const removeStyle = () => {
-      contentHolder?.current?.classList.remove('active');
-      const prevElement = slides[currentSlide];
-
-      setTimeout(() => {
-        content && setActiveElement(content[currentSlide] as any)
-        prevElement.classList.remove('active');
-      }, 200);
-    };
-
-    const rotateSlider = (e) => {
-      const newSlide = slides.indexOf(e.target);
-
-      if (currentSlide === newSlide || !slidesHolder?.current) return;
-
-      removeStyle();
-
-      let multiplier = 0;
-      let direction = "";
-
-      if (currentSlide === 0 && newSlide === (slides.length - 1)) {
-        multiplier = -1;
-        direction = "-";
-      } else if (currentSlide === (slides.length - 1) && newSlide === 0) {
-        multiplier = 1;
-        direction = "+";
-      } else {
-        multiplier = newSlide - currentSlide
-        direction = currentSlide < newSlide ? "+" : "-";
-      }
-
-      const newAngle = Math.abs((stepAngle * 180 / Math.PI) * multiplier);
-
-
-      currentAngle = direction === "-" ? (currentAngle + newAngle) : (currentAngle - newAngle);
-      currentSlide = newSlide;
-
-      slidesHolder.current.style.transform = 'rotate( ' + currentAngle + 'deg )';
-      addStyle();
-    }
-
-    if (isMobile) {
-      setTimeout(() => {
-        if (wrapper?.current) wrapper.current.removeAttribute('style');
-        if (slidesHolder?.current) slidesHolder.current.removeAttribute('style');
-
-        for (let i = 0; i < slides.length; i++) {
-          slides[i].removeAttribute('style');
-          slides[i].removeEventListener('click', rotateSlider);
-        };
-        window.removeEventListener('resize', sliderResize)
-      }, 250)
-    } else {
-      sliderResize();
-      addStyle();
-
-      for (let i = 0; i < slides.length; i++) {
-        slides[i].addEventListener('click', rotateSlider, { passive: true });
-      };
-
-      window.addEventListener('resize', sliderResize)
-    }
-
-    return () => {
-      for (let i = 0; i < slides.length; i++) {
-        slides[i].removeEventListener('click', rotateSlider);
-      };
-
-      window.removeEventListener('resize', sliderResize)
-    }
-  }, [isMobile])
-
-  if (!content) return <></>
-
-  return (
-    <StyledProductsSlider ref={slider as any} className={className} style={style}>
-      <StyledProductsSliderWrapper ref={wrapper as any}>
-        <StyledProductsSliderSlides ref={slidesHolder as any}>
-          {newContent?.map((item, index) => {
-            return (
-              <StyledProductsSliderSlide key={`ProductCard-${index}`}>
-                <ProductCard
-                  imageElement={item.imageElement}
-                  title={item.title}
-                  description={isMobile ? item?.description : ""}
-                />
-              </StyledProductsSliderSlide>
-            )
-          })}
-        </StyledProductsSliderSlides>
-      </StyledProductsSliderWrapper>
-      {!isMobile && (
-        <StyledProductsSliderContent ref={contentHolder as any}>
-          <Heading tag="h5" size="h5">
-            <strong>{activeElement?.title}</strong>
-            <br />
-            {activeElement?.description}
-          </Heading>
-        </StyledProductsSliderContent>
-      )}
-    </StyledProductsSlider>
-
-  )
-}
-
-export default ProductsSlider
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import {
+  StyledProductsSlider,
+  StyledProductsSliderContent,
+  StyledProductsSliderSlide,
+  StyledProductsSliderSlides,
+  StyledProductsSliderWrapper
+} from './ProductsSlider.theme'
+
+import Heading from '@/components/atoms/Heading/Heading.component';
+import { IProductsSlider } from './ProductsSlider.interface'
+import ProductCard from '@/components/molecules/ProductCard/ProductCard.component';
+import { debounce } from '@/helpers/events';
+import useMediaMatch from '@/helpers/useMediaMatch';
+
+const ProductsSlider = ({
+  content,
+  style,
+  className,
+}: IProductsSlider) => {
+
+  const [activeElement, setActiveElement] = useState(content && content[0]);
+  const slider = useRef<HTMLDivElement>();
+  const wrapper = useRef<HTMLDivElement>();
+  const slidesHolder = useRef<HTMLDivElement>();
+  const contentHolder = useRef<HTMLDivElement>();
+  const isMobile = useMediaMatch();
+
+
+  //force 26 items
+  const newContent = useMemo(() => {
+    if (isMobile) {
+      return content;
+    } else if (content && content.length < 26) {
+      let counter = 0;
+      for (let i = content.length; i <= 26; i++) {
+        content[i] = content[counter];
+        counter++;
+      }
+      return content;
+    }
+  }, [isMobile, content])
+
+  useEffect(() => {
+    if (!slidesHolder.current) return //bail out;
+
+    const slides = Array.prototype.slice.call(slidesHolder?.current?.children);
+    let slidesSize = 0;
+    let currentAngle = 0;
+
+    const stepAngle = 2 * Math.PI / slidesHolder?.current?.children.length;
+    // const stepAngle = 0.52;
+
+    let currentSlide = 0;
+
+    const slidesRepositioning = (r) => {
+      if (isMobile) return;
+
+      for (let i = 0; i < slides.length; i++) {
+
+        let x = r * Math.cos(stepAngle * i - Math.PI / 2),
+          y = r * Math.sin(stepAngle * i - Math.PI / 2);
+
+        slides[i].style.transform = 'translate( ' + x + 'px, ' + y + 'px ) rotate( ' + (((stepAngle * 180 / Math.PI * i) + 90) - 90) + 'deg )';
+        // slides[i].style.transform = 'translate( ' + x + 'px, ' + y + 'px )';
+      };
+    }
+    const setSize = (radius: number) => {
+      if (!wrapper.current || !slidesHolder.current || isMobile) return //bail out;
+
+      const slideSize = 0.08;
+
+      wrapper.current.style.width = 2 * radius + 'px';
+      // wrapper.current.style.height = 2 * radius + 'px';
+      wrapper.current.style.height = '880px';
+
+      let r = 2 * radius * (1 - slideSize);
+      slidesHolder.current.style.width = r + 'px'
+      slidesHolder.current.style.height = r + 'px';
+      slidesRepositioning(r / 2);
+
+      slidesSize = Math.min(2 * radius * slideSize, stepAngle * radius * (1 - slideSize) - 20);
+      slidesHolder.current.style.marginTop = slidesSize + 'px';
+
+
+      for (let i = 0; i < slides.length; i++) {
+        slides[i].style.width = slidesSize + 'px';
+      };
+
+    }
+
+    const sliderResize = debounce(() => {
+      if (isMobile) return;
+      const sliderSize = 2.4;
+
+      let radius,
+        w = slider?.current ? slider?.current?.getBoundingClientRect().width : 0,
+        h = slider?.current ? slider?.current.getBoundingClientRect().height : 0;
+
+      radius = (w / 2) * sliderSize
+
+      setSize(Math.round(radius));
+    }, 250)
+
+    const addStyle = () => {
+      setTimeout(() => {
+        contentHolder?.current?.classList.add('active');
+        if (slides[currentSlide]) slides[currentSlide].classList.add('active');
+      }, 200);
+    };
+    const removeStyle = () => {
+      contentHolder?.current?.classList.remove('active');
+      const prevElement = slides[currentSlide];
+
+      setTimeout(() => {
+        content && setActiveElement(content[currentSlide] as any)
+        prevElement.classList.remove('active');
+      }, 200);
+    };
+
+    const rotateSlider = (e) => {
+      const newSlide = slides.indexOf(e.target);
+
+      if (currentSlide === newSlide || !slidesHolder?.current) return;
+
+      removeStyle();
+
+      let multiplier = 0;
+      let direction = "";
+
+      if (currentSlide === 0 && newSlide === (slides.length - 1)) {
+        multiplier = -1;
+        direction = "-";
+      } else if (currentSlide === (slides.length - 1) && newSlide === 0) {
+        multiplier = 1;
+        direction = "+";
+      } else {
+        multiplier = newSlide - currentSlide
+        direction = currentSlide < newSlide ? "+" : "-";
+      }
+
+      const newAngle = Math.abs((stepAngle * 180 / Math.PI) * multiplier);
+
+
+      currentAngle = direction === "-" ? (currentAngle + newAngle) : (currentAngle - newAngle);
+      currentSlide = newSlide;
+
+      slidesHolder.current.style.transform = 'rotate( ' + currentAngle + 'deg )';
+      addStyle();
+    }
+
+    if (isMobile) {
+      setTimeout(() => {
+        if (wrapper?.current) wrapper.current.removeAttribute('style');
+        if (slidesHolder?.current) slidesHolder.current.removeAttribute('style');
+
+        for (let i = 0; i < slides.length; i++) {
+          slides[i].removeAttribute('style');
+          slides[i].removeEventListener('click', rotateSlider);
+        };
+        window.removeEventListener('resize', sliderResize)
+      }, 250)
+    } else {
+      sliderResize();
+      addStyle();
+
+      for (let i = 0; i < slides.length; i++) {
+        slides[i].addEventListener('click', rotateSlider, { passive: true });
+      };
+
+      window.addEventListener('resize', sliderResize)
+    }
+
+    return () => {
+      for (let i = 0; i < slides.length; i++) {
+        slides[i].removeEventListener('click', rotateSlider);
+      };
+
+      window.removeEventListener('resize', sliderResize)
+    }
+  }, [isMobile])
+
+  if (!content) return <></>
+
+  return (
+    <StyledProductsSlider ref={slider as any} className={className} style={style}>
+      <StyledProductsSliderWrapper ref={wrapper as any}>
+        <StyledProductsSliderSlides ref={slidesHolder as any}>
+          {newContent?.map((item, index) => {
+            return (
+              <StyledProductsSliderSlide key={`ProductCard-${index}`}>
+                <ProductCard
+                  imageElement={item.imageElement}
+                  title={item.title}
+                  description={isMobile ? item?.description : ""}
+                />
+              </StyledProductsSliderSlide>
+            )
+          })}
+        </StyledProductsSliderSlides>
+      </StyledProductsSliderWrapper>
+      {!isMobile && (
+        <StyledProductsSliderContent ref={contentHolder as any}>
+          <Heading tag="h5" size="h5">
+            <strong>{activeElement?.title}</strong>
+            <br />
+            {activeElement?.description}
+          </Heading>
+        </StyledProductsSliderContent>
+      )}
+    </StyledProductsSlider>
+
+  )
+}
+
+export default ProductsSlider

package/src/components/organisms/ProductsSlider/ProductsSlider.interface.ts

@@ -1,12 +1,12 @@
-import { CSSProperties } from 'react';
-
-export type IProductsSlider = {
-  id?: string;
-  className?: string;
-  style?: CSSProperties;
-  content?: {
-    title?: string,
-    description?: string | React.ReactElement,
-    imageElement?: React.ReactElement
-  }[],
-}
+import { CSSProperties } from 'react';
+
+export type IProductsSlider = {
+  id?: string;
+  className?: string;
+  style?: CSSProperties;
+  content?: {
+    title?: string,
+    description?: string | React.ReactElement,
+    imageElement?: React.ReactElement
+  }[],
+}