oddsgate-ds 1.0.117 → 1.0.119

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oddsgate-ds",
-  "version": "1.0.117",
+  "version": "1.0.119",
   "description": "Miew theme component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
 import {
   StyledProductsSlider,
   StyledProductsSliderContent,
@@ -26,6 +26,21 @@ const ProductsSlider = ({
   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;
 
@@ -53,7 +68,7 @@ const ProductsSlider = ({
     const setSize = (radius: number) => {
       if (!wrapper.current || !slidesHolder.current || isMobile) return //bail out;
 
-      const slideSize = 0.11;
+      const slideSize = 0.1;
 
       wrapper.current.style.width = 2 * radius + 'px';
       // wrapper.current.style.height = 2 * radius + 'px';
@@ -170,7 +185,7 @@ const ProductsSlider = ({
     <StyledProductsSlider ref={slider as any} className={className} style={style}>
       <StyledProductsSliderWrapper ref={wrapper as any}>
         <StyledProductsSliderSlides ref={slidesHolder as any}>
-          {content?.map((item, index) => {
+          {newContent?.map((item, index) => {
             return (
               <StyledProductsSliderSlide key={`ProductCard-${index}`}>
                 <ProductCard

package/src/helpers/useMediaMatch.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useMemo, useState } from 'react'
 
 import { debounce } from './events';
 import { responsiveMediaMax } from '@/styles/variables'
@@ -7,7 +7,7 @@ import { responsiveMediaMax } from '@/styles/variables'
 export default function useMediaMatch(query: string = `(max-width: ${responsiveMediaMax})`) {
   const [matches, setMatches] = useState(false)
 
-  useEffect(() => {
+  useMemo(() => {
     const mediaQueryList = window.matchMedia(query)
 
     const handleMatchChange = debounce((e) => {