oddsgate-ds 1.0.91 → 1.0.93

package/dist/esm/types/helpers/useMediaMatch.d.ts

@@ -0,0 +1 @@
+export default function useMediaMatch(query?: string): boolean;

package/dist/esm/types/index.d.ts

@@ -48,5 +48,6 @@ export { iconsList } from './helpers/getIcons';
 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/useMediaMatch';
 export { debounce } from './helpers/events';
 export { variables };

package/dist/types.d.ts

@@ -637,6 +637,8 @@ declare function clickOutSideToClose(ref: React.RefObject<HTMLDivElement>, close
 
 declare const isTouchDevice: () => boolean;
 
+declare function useMediaMatch(query?: string): boolean;
+
 declare const debounce: (callback: any, wait: number) => (...args: any) => void;
 
-export { Accordion, AccordionItem, BlogCard, Button, CareersCard, CheckRadioField, Chip, CircularSlider, CloseButton, Column, Counter, Cover, Dropdown, DropdownItem, EmptyState, EventsCard, Flex, FormField, GlobalStyles, Heading, Icon, IconBox, IconTitle, ImageWrapper, LicenseCard, Loader, LogosCard, Marquee, Modal, NewsCard, OffCanvas, PortalComponent, ProductCard, Quote, RichText, Row, ScrollingNav, Separator, ShareModal, Slider, SocialLinks, Spacer, Tabs, TeamCard, Video, VideoEmbed, clickOutSideToClose, debounce, iconsList, isTouchDevice, variables };
+export { Accordion, AccordionItem, BlogCard, Button, CareersCard, CheckRadioField, Chip, CircularSlider, CloseButton, Column, Counter, Cover, Dropdown, DropdownItem, EmptyState, EventsCard, Flex, FormField, GlobalStyles, Heading, Icon, IconBox, IconTitle, ImageWrapper, LicenseCard, Loader, LogosCard, Marquee, Modal, NewsCard, OffCanvas, PortalComponent, ProductCard, Quote, RichText, Row, ScrollingNav, Separator, ShareModal, Slider, SocialLinks, Spacer, Tabs, TeamCard, Video, VideoEmbed, clickOutSideToClose, debounce, iconsList, isTouchDevice, useMediaMatch, variables };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oddsgate-ds",
-  "version": "1.0.91",
+  "version": "1.0.93",
   "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/useMediaMatch';
 
 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/useMediaMatch'
 
 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/useMediaMatch.tsx

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

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/useMediaMatch'
 export { debounce } from './helpers/events'
 
 export { variables };

package/dist/cjs/types/helpers/useMediaQuery.d.ts

@@ -1,2 +0,0 @@
-declare function useMediaQuery(query: string): boolean;
-export default useMediaQuery;

package/dist/esm/types/helpers/useMediaQuery.d.ts

@@ -1,2 +0,0 @@
-declare function useMediaQuery(query: string): boolean;
-export default useMediaQuery;

package/src/helpers/useMediaQuery.tsx

@@ -1,28 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { debounce } from './events';
-
-function useMediaQuery(query: string) {
-  const [matches, setMatches] = useState<boolean>(false)
-
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      const media = window.matchMedia(query)
-
-      if (media.matches !== matches) {
-        setMatches(media.matches)
-      }
-
-      const listener = debounce(() => {
-        setMatches(media.matches)
-      }, 250)
-      window.addEventListener('resize', listener)
-
-      return () => window.removeEventListener('resize', listener)
-    }
-  }, [matches, query])
-
-  return matches
-}
-
-export default useMediaQuery