oddsgate-ds 1.0.116 → 1.0.118

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oddsgate-ds",
-  "version": "1.0.116",
+  "version": "1.0.118",
   "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,14 +26,20 @@ const ProductsSlider = ({
   const contentHolder = useRef<HTMLDivElement>();
   const isMobile = useMediaMatch();
 
-  //force 12 items
-  if (content && content.length < 26) {
-    let counter = 0;
-    for (let i = content.length; i <= 26; i++) {
-      content[i] = content[counter];
-      counter++;
+
+  //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;
@@ -62,11 +68,11 @@ const ProductsSlider = ({
     const setSize = (radius: number) => {
       if (!wrapper.current || !slidesHolder.current || isMobile) return //bail out;
 
-      const slideSize = 0.08;
+      const slideSize = 0.1;
 
       wrapper.current.style.width = 2 * radius + 'px';
       // wrapper.current.style.height = 2 * radius + 'px';
-      wrapper.current.style.height = '530px';
+      wrapper.current.style.height = '680px';
 
       let r = 2 * radius * (1 - slideSize);
       slidesHolder.current.style.width = r + 'px'
@@ -179,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/components/organisms/ProductsSlider/ProductsSlider.theme.ts

@@ -21,11 +21,12 @@ export const StyledProductsSliderWrapper = styled.div<IProductsSlider>`
 export const StyledProductsSliderSlides = styled.div<IProductsSlider>`
   position: relative;
   display: flex;
-  justify-content: center;
-  align-items: center;
   flex-flow: row wrap;
 
   @media only screen and (min-width: ${responsiveMedia}) {
+    justify-content: center;
+    align-items: center;
+
     transform-origin: center;
     transition: all 0.6s;
     transform: rotate(0deg);

package/src/helpers/useMediaMatch.tsx

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