oddsgate-ds 1.0.174 → 1.0.176

package/src/components/organisms/ProductsSlider//306/222.js

@@ -1,164 +1,164 @@
-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(() => {
-    const _options = {
-      type: "equal", // compact, equal
-      size: 1, // 0, 1
-      reflection: 0.6, // 0, 1
-      rotateY: 0, // 0, 360
-      reverse: false,
-      shiftX: 0,
-      shiftY: 0,
-    }
-
-    const render = () => {
-      if (!slidesHolder.current) return //bail out;
-
-      const targetBound = slidesHolder?.current.getBoundingClientRect();
-      const childItems = Array.prototype.slice.call(slidesHolder?.current?.children);
-
-      let coordinates = equalCoordinates(childItems.length, targetBound.width / 2, targetBound.height, targetBound.width / 2, targetBound.height)
-
-      childItems.forEach((child, index) => {
-        if (coordinates[index]) {
-          const left = coordinates[index][0] - (child.clientWidth / 2) + _options.shiftX;
-          const top = coordinates[index][1] - (child.clientHeight / 2) + _options.shiftY;
-          child.style.left = left + "px";
-          child.style.top = top + "px";
-        }
-      })
-    }
-
-    const _computeDpt = (r1, r2, theta, rotateY = 0) => {
-      const dpt_sin = Math.pow(r1 * Math.sin(theta + rotateY), 2)
-      const dpt_cos = Math.pow(r2 * Math.cos(theta + rotateY), 2)
-      return Math.sqrt(dpt_sin + dpt_cos)
-    }
-
-    const equalCoordinates = (n, r1, r2, centerX, centerY) => {
-      // type options
-      let reflection = -(_options.reflection);
-
-      let deltaTheta = 0.001
-
-      let coordinates: number[][] = [];
-      let theta = 0;
-
-      const twoPi = (Math.PI * 2 * _options.size);
-      const numIntegrals = Math.round(twoPi / deltaTheta);
-
-      let circ = 0;
-      let dpt = 0;
-
-      /* integrate over the ellipse to get the circumference */
-      for (let i = 1; i < numIntegrals; i++) {
-        theta += i * deltaTheta;
-        dpt = _computeDpt(r1, r2, theta);
-        circ += dpt;
-      }
-
-      let nextPoint = 0;
-      let run = 0;
-      theta = 0;
-
-      const rotateY = (Math.PI / 2 * (_options.rotateY * 4 / 360));
-      for (let i = 0; i < numIntegrals; i++) {
-        theta += deltaTheta;
-        let subIntegral = n * run / circ;
-        if (subIntegral >= nextPoint) {
-          let x: number = Math.floor((centerX - r1 * Math.cos(theta + rotateY)) * 100) / 100;
-          let y: number = Math.floor((centerY + r2 * Math.sin(theta + rotateY) * reflection) * 100) / 100;
-          coordinates.push([x, y]);
-
-          nextPoint++;
-        }
-
-        run += _computeDpt(r1, r2, theta, rotateY);
-      }
-
-      return coordinates;
-    }
-
-    render();
-    window.addEventListener("resize", render);
-
-    return () => {
-      window.removeEventListener('resize', render)
-    }
-  }, [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(() => {
+    const _options = {
+      type: "equal", // compact, equal
+      size: 1, // 0, 1
+      reflection: 0.6, // 0, 1
+      rotateY: 0, // 0, 360
+      reverse: false,
+      shiftX: 0,
+      shiftY: 0,
+    }
+
+    const render = () => {
+      if (!slidesHolder.current) return //bail out;
+
+      const targetBound = slidesHolder?.current.getBoundingClientRect();
+      const childItems = Array.prototype.slice.call(slidesHolder?.current?.children);
+
+      let coordinates = equalCoordinates(childItems.length, targetBound.width / 2, targetBound.height, targetBound.width / 2, targetBound.height)
+
+      childItems.forEach((child, index) => {
+        if (coordinates[index]) {
+          const left = coordinates[index][0] - (child.clientWidth / 2) + _options.shiftX;
+          const top = coordinates[index][1] - (child.clientHeight / 2) + _options.shiftY;
+          child.style.left = left + "px";
+          child.style.top = top + "px";
+        }
+      })
+    }
+
+    const _computeDpt = (r1, r2, theta, rotateY = 0) => {
+      const dpt_sin = Math.pow(r1 * Math.sin(theta + rotateY), 2)
+      const dpt_cos = Math.pow(r2 * Math.cos(theta + rotateY), 2)
+      return Math.sqrt(dpt_sin + dpt_cos)
+    }
+
+    const equalCoordinates = (n, r1, r2, centerX, centerY) => {
+      // type options
+      let reflection = -(_options.reflection);
+
+      let deltaTheta = 0.001
+
+      let coordinates: number[][] = [];
+      let theta = 0;
+
+      const twoPi = (Math.PI * 2 * _options.size);
+      const numIntegrals = Math.round(twoPi / deltaTheta);
+
+      let circ = 0;
+      let dpt = 0;
+
+      /* integrate over the ellipse to get the circumference */
+      for (let i = 1; i < numIntegrals; i++) {
+        theta += i * deltaTheta;
+        dpt = _computeDpt(r1, r2, theta);
+        circ += dpt;
+      }
+
+      let nextPoint = 0;
+      let run = 0;
+      theta = 0;
+
+      const rotateY = (Math.PI / 2 * (_options.rotateY * 4 / 360));
+      for (let i = 0; i < numIntegrals; i++) {
+        theta += deltaTheta;
+        let subIntegral = n * run / circ;
+        if (subIntegral >= nextPoint) {
+          let x: number = Math.floor((centerX - r1 * Math.cos(theta + rotateY)) * 100) / 100;
+          let y: number = Math.floor((centerY + r2 * Math.sin(theta + rotateY) * reflection) * 100) / 100;
+          coordinates.push([x, y]);
+
+          nextPoint++;
+        }
+
+        run += _computeDpt(r1, r2, theta, rotateY);
+      }
+
+      return coordinates;
+    }
+
+    render();
+    window.addEventListener("resize", render);
+
+    return () => {
+      window.removeEventListener('resize', render)
+    }
+  }, [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/Slider/Slider.component.tsx

@@ -1,154 +1,156 @@
-import React, { useEffect } from 'react'
-
-import Button from '@/components/atoms/Button/Button.component'
-import { ISlider } from './Slider.interface'
-import Icon from '@/components/atoms/Icon/Icon.component'
-import { StyledSlider } from './Slider.theme'
-import isTouchDevice from '@/helpers/isTouchDevice'
-import { useBlazeSlider } from './Slider.utils'
-
-const Slider = ({
-  arrows,
-  dots,
-  slidesToShow,
-  slidesToScroll,
-  infinite,
-  autoplay,
-  spacing,
-  mediaQueries,
-  mobileOnly,
-  className,
-  style,
-  children,
-  onSlide,
-  ...props
-}: ISlider) => {
-  let responsive: any = []
-  let responsiveCSS: string = ''
-  let elRef: any = null
-  let sliderRef: any = null
-
-  const isMobile = isTouchDevice();
-
-  const setConfig = () => {
-    if (sliderRef?.current) sliderRef.current.destroy()
-    responsiveCSS = `
-      --slides-to-show: ${slidesToShow ? slidesToShow : 4} !important;
-      --slide-gap: ${spacing ? spacing : '1rem'} !important;
-    `
-
-    if (mediaQueries) {
-      const responsiveKeys = Object.keys(mediaQueries).reverse()
-      const responsiveValues = Object.values(mediaQueries).reverse()
-
-      mediaQueries &&
-        responsiveKeys.map((value: string, index: number) => {
-          responsive[`(max-width: ${value}px)`] = {
-            slidesToShow: responsiveValues[index].slidesToShow
-          }
-          responsiveCSS += `@media screen and (max-width:${value}px){
-            --slides-to-show: ${responsiveValues[index].slidesToShow} !important;
-          }`
-        })
-    }
-
-    const refs = useBlazeSlider({
-      all: {
-        // layout
-        slidesToShow: slidesToShow ? slidesToShow : 4,
-        slidesToScroll: slidesToScroll ? slidesToScroll : 1,
-        slideGap: spacing ? spacing : '1rem',
-
-        // loop
-        loop: infinite,
-
-        // autoplay
-        enableAutoplay: autoplay ? autoplay : false,
-        stopAutoplayOnInteraction: false,
-        autoplayInterval: 3000,
-        autoplayDirection: 'to left',
-
-        // pagination
-        enablePagination: dots,
-
-        // transition
-        transitionDuration: 500,
-        transitionTimingFunction: 'ease'
-      },
-      ...responsive,
-      onSlide: (
-        pageIndex: number,
-        firstVisibleSlideIndex: number,
-        lastVisibleSlideIndex: number
-      ) => {
-        if (onSlide) onSlide
-      }
-    })
-
-    elRef = refs.elRef
-    sliderRef = refs.sliderRef
-  }
-
-  // useEffect(() => {
-  //   if (sliderRef && sliderRef.current) {
-  //     console.log(sliderRef?.current)
-  //     sliderRef.current.destroy()
-  //     setConfig()
-  //   }
-  // }, [
-  //   arrows,
-  //   dots,
-  //   slidesToShow,
-  //   slidesToScroll,
-  //   infinite,
-  //   spacing,
-  //   mediaQueries
-  // ])
-
-  if (mobileOnly) {
-    isMobile && setConfig();
-  } else {
-    setConfig();
-  }
-
-  return (
-    <StyledSlider
-      $responsiveCSS={responsiveCSS}
-      $mobileOnly={mobileOnly}
-      className={className}
-      style={style}
-    >
-      <div className="blaze-slider" ref={elRef}>
-        <div className="blaze-container">
-          <div className="blaze-track-container">
-            <div className="blaze-track">{children}</div>
-          </div>
-        </div>
-
-        {React.Children.count(children) > 1 && (
-          <div className="blaze-controls">
-            {dots && <div className="blaze-pagination"></div>}
-            <div className="blaze-arrows">
-              {arrows && (
-                <Button
-                  variant="icon"
-                  leftIcon={<Icon icon="icon-left-chevron" />}
-                  className="blaze-prev"
-                ></Button>
-              )}
-              {arrows && (
-                <Button
-                  variant="icon"
-                  leftIcon={<Icon icon="icon-right-chevron" />}
-                  className="blaze-next"
-                ></Button>
-              )}
-            </div>
-          </div>
-        )}
-      </div>
-    </StyledSlider>
-  )
-}
-
-export default Slider
+import React, { useEffect } from 'react'
+
+import Button from '@/components/atoms/Button/Button.component'
+import { ISlider } from './Slider.interface'
+import Icon from '@/components/atoms/Icon/Icon.component'
+import { StyledSlider } from './Slider.theme'
+import isTouchDevice from '@/helpers/isTouchDevice'
+import { useBlazeSlider } from './Slider.utils'
+
+const Slider = ({
+  arrows,
+  dots,
+  slidesToShow,
+  slidesToScroll,
+  infinite,
+  autoplay,
+  spacing,
+  mediaQueries,
+  mobileOnly,
+  className,
+  style,
+  children,
+  onSlide,
+  variant = 'default',
+  ...props
+}: ISlider) => {
+  let responsive: any = []
+  let responsiveCSS: string = ''
+  let elRef: any = null
+  let sliderRef: any = null
+
+  const isMobile = isTouchDevice();
+
+  const setConfig = () => {
+    if (sliderRef?.current) sliderRef.current.destroy()
+    responsiveCSS = `
+      --slides-to-show: ${slidesToShow ? slidesToShow : 4} !important;
+      --slide-gap: ${spacing ? spacing : '1rem'} !important;
+    `
+
+    if (mediaQueries) {
+      const responsiveKeys = Object.keys(mediaQueries).reverse()
+      const responsiveValues = Object.values(mediaQueries).reverse()
+
+      mediaQueries &&
+        responsiveKeys.map((value: string, index: number) => {
+          responsive[`(max-width: ${value}px)`] = {
+            slidesToShow: responsiveValues[index].slidesToShow
+          }
+          responsiveCSS += `@media screen and (max-width:${value}px){
+            --slides-to-show: ${responsiveValues[index].slidesToShow} !important;
+          }`
+        })
+    }
+
+    const refs = useBlazeSlider({
+      all: {
+        // layout
+        slidesToShow: slidesToShow ? slidesToShow : 4,
+        slidesToScroll: slidesToScroll ? slidesToScroll : 1,
+        slideGap: spacing ? spacing : '1rem',
+
+        // loop
+        loop: infinite,
+
+        // autoplay
+        enableAutoplay: autoplay ? autoplay : false,
+        stopAutoplayOnInteraction: false,
+        autoplayInterval: 3000,
+        autoplayDirection: 'to left',
+
+        // pagination
+        enablePagination: dots,
+
+        // transition
+        transitionDuration: 500,
+        transitionTimingFunction: 'ease'
+      },
+      ...responsive,
+      onSlide: (
+        pageIndex: number,
+        firstVisibleSlideIndex: number,
+        lastVisibleSlideIndex: number
+      ) => {
+        if (onSlide) onSlide
+      }
+    })
+
+    elRef = refs.elRef
+    sliderRef = refs.sliderRef
+  }
+
+  // useEffect(() => {
+  //   if (sliderRef && sliderRef.current) {
+  //     console.log(sliderRef?.current)
+  //     sliderRef.current.destroy()
+  //     setConfig()
+  //   }
+  // }, [
+  //   arrows,
+  //   dots,
+  //   slidesToShow,
+  //   slidesToScroll,
+  //   infinite,
+  //   spacing,
+  //   mediaQueries
+  // ])
+
+  if (mobileOnly) {
+    isMobile && setConfig();
+  } else {
+    setConfig();
+  }
+
+  return (
+    <StyledSlider
+      $responsiveCSS={responsiveCSS}
+      $mobileOnly={mobileOnly}
+      $variant={variant}
+      className={className}
+      style={style}
+    >
+      <div className="blaze-slider" ref={elRef}>
+        <div className="blaze-container">
+          <div className="blaze-track-container">
+            <div className="blaze-track">{children}</div>
+          </div>
+        </div>
+
+        {React.Children.count(children) > 1 && (
+          <div className="blaze-controls">
+            {dots && <div className="blaze-pagination"></div>}
+            <div className="blaze-arrows">
+              {arrows && (
+                <Button
+                  variant="icon"
+                  leftIcon={<Icon icon="icon-left-chevron" />}
+                  className="blaze-prev"
+                ></Button>
+              )}
+              {arrows && (
+                <Button
+                  variant="icon"
+                  leftIcon={<Icon icon="icon-right-chevron" />}
+                  className="blaze-next"
+                ></Button>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </StyledSlider>
+  )
+}
+
+export default Slider