oddsgate-ds 1.0.91 → 1.0.92

package/package.json

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

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

@@ -10,7 +10,7 @@ import {
 import Heading from '@/components/atoms/Heading/Heading.component';
 import { ICircularSlider } from './CircularSlider.interface'
 import { debounce } from '@/helpers/events';
-import isTouchDevice from '@/helpers/isTouchDevice';
+import { useMediaMatch } from '@/helpers/useMediaQuery';
 
 const CircularSlider = ({
   content,
@@ -27,7 +27,7 @@ const CircularSlider = ({
   const slidesHolder = useRef<HTMLDivElement>();
   const contentHolder = useRef<HTMLDivElement>();
 
-  const isMobile = isTouchDevice();
+  const isMobile = useMediaMatch();
 
   const sliderSize = isMobile ? 2.6 : 1;
   const slideSize = isMobile ? 0.12 : 0.15;

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

@@ -4,8 +4,8 @@ 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'
+import { useMediaMatch } from '@/helpers/useMediaQuery'
 
 const Slider = ({
   arrows,
@@ -28,7 +28,7 @@ const Slider = ({
   let elRef: any = null
   let sliderRef: any = null
 
-  const isMobile = isTouchDevice();
+  const isMobile = useMediaMatch();
 
   const setConfig = () => {
     if (sliderRef?.current) sliderRef.current.destroy()

package/src/helpers/isTouchDevice.tsx

@@ -1,35 +1,11 @@
-import { useEffect, useRef, useState } from "react";
-
-import { responsiveMedia } from "@/styles/variables";
-
 const isTouchDevice = () => {
-  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
-
-  useEffect(() => {
-    const observedElementRef = document.querySelector('body');
-    if (observedElementRef) {
-      const observer = new ResizeObserver((entries) => {
-        for (let entry of entries) {
-          setDimensions({
-            width: entry.contentRect.width,
-            height: entry.contentRect.height,
-          });
-        }
-      });
-
-      observer.observe(observedElementRef);
-
-      // Cleanup function
-      return () => {
-        observer.disconnect();
-      };
-    }
-  }, []);
-
-  console.log(dimensions);
-  return dimensions.width < parseInt(responsiveMedia);
+  try {
+    document.createEvent('TouchEvent');
+    return true;
+  } catch (e) {
+    return false;
+  }
 }
 
 
-
 export default isTouchDevice

package/src/helpers/useMediaQuery.tsx

@@ -1,28 +1,26 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react'
 
 import { debounce } from './events';
+import { responsiveMedia } from '@/styles/variables'
 
-function useMediaQuery(query: string) {
-  const [matches, setMatches] = useState<boolean>(false)
+// useMediaMatch('(max-width: 600px)')
+export default function useMediaMatch(query: string = `(max-width: ${responsiveMedia})`) {
+  const [matches, setMatches] = useState(false)
 
   useEffect(() => {
-    if (typeof window !== 'undefined') {
-      const media = window.matchMedia(query)
+    const mediaQueryList = window.matchMedia(query)
 
-      if (media.matches !== matches) {
-        setMatches(media.matches)
-      }
+    const handleMatchChange = debounce((e) => {
+      setMatches(e.matches)
+    }, 250)
 
-      const listener = debounce(() => {
-        setMatches(media.matches)
-      }, 250)
-      window.addEventListener('resize', listener)
+    mediaQueryList.addEventListener('change', handleMatchChange)
+    setMatches(mediaQueryList.matches || false)
 
-      return () => window.removeEventListener('resize', listener)
+    return () => {
+      mediaQueryList.removeEventListener('change', handleMatchChange)
     }
-  }, [matches, query])
+  }, [query])
 
   return matches
 }
-
-export default useMediaQuery

package/src/index.ts

@@ -58,6 +58,7 @@ export { default as GlobalStyles } from './styles/Global'
 
 export { default as clickOutSideToClose } from './helpers/clickOutsideToClose'
 export { default as isTouchDevice } from './helpers/isTouchDevice'
+export { default as useMediaMatch } from './helpers/useMediaQuery'
 export { debounce } from './helpers/events'
 
 export { variables };