oddsgate-ds 1.0.86 → 1.0.88

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

@@ -0,0 +1 @@
+export declare const debounce: (callback: any, wait: number) => (...args: any) => void;

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

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

package/dist/types.d.ts

@@ -637,4 +637,6 @@ declare function clickOutSideToClose(ref: React.RefObject<HTMLDivElement>, close
 
 declare const isTouchDevice: () => boolean;
 
-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, iconsList, isTouchDevice, variables };
+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 };

package/package.json

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

package/src/components/atoms/ImageWrapper/ImageWrapper.theme.ts

@@ -3,7 +3,6 @@ import { css, styled } from 'styled-components';
 import { IImageWrapper } from './ImageWrapper.interface';
 
 export const StyledImageWrapper = styled.picture<IImageWrapper>`
-
   & picture{
     position: relative;
   }
@@ -48,4 +47,4 @@ export const Overlay = styled.div`
   bottom: 0;
   left: 0;
   right: 0;
-`
+`

package/src/components/molecules/IconBox/IconBox.theme.ts

@@ -15,7 +15,7 @@ export const StyledIconBox = styled.div<IIconBox>`
     height: 32px;
 
     color: ${colors.primary50};
-    background: ${colors.primary10};
+    background: ${colors.secondary50};
     border-radius: 50px;
 
     text-align:center;

package/src/components/molecules/ProductCard/ProductCard.component.tsx

@@ -32,8 +32,6 @@ const ProductCard = ({
     firstRowTitle = title;
   }
 
-  console.log(parts, half);
-
 
   return (
     <StyledProductCard className={className} style={style}>

package/src/components/molecules/ShareModal/ShareModal.theme.ts

@@ -35,7 +35,7 @@ export const StyledModal = styled.div<IShareModal>`
 
     &:hover {
       & > div {
-        background: ${colors.primary10}
+        background: ${colors.primary50}
       }
     };
 

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

@@ -9,6 +9,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';
 
 const CircularSlider = ({
@@ -88,7 +89,7 @@ const CircularSlider = ({
 
     }
 
-    const sliderResize = () => {
+    const sliderResize = debounce(() => {
       let radius,
         w = slider?.current ? slider?.current?.getBoundingClientRect().width : 0,
         h = slider?.current ? slider?.current.getBoundingClientRect().height : 0;
@@ -96,7 +97,7 @@ const CircularSlider = ({
       2 * h <= w ? radius = h * sliderSize : radius = (w / 2) * sliderSize;
 
       setSize(Math.round(radius));
-    }
+    }, 250)
 
     const addStyle = () => {
       setTimeout(() => {
@@ -126,10 +127,10 @@ const CircularSlider = ({
       if (currentSlide === 0 && newSlide === (slides.length - 1)) {
         multiplier = -1;
         direction = "-";
-      } else if(currentSlide === (slides.length - 1) && newSlide === 0) {
+      } else if (currentSlide === (slides.length - 1) && newSlide === 0) {
         multiplier = 1;
         direction = "+";
-      }else{
+      } else {
         multiplier = newSlide - currentSlide
         direction = currentSlide < newSlide ? "+" : "-";
       }
@@ -149,7 +150,7 @@ const CircularSlider = ({
 
 
     for (let i = 0; i < slides.length; i++) {
-      slides[i].addEventListener('click', rotateSlider);
+      slides[i].addEventListener('click', rotateSlider, { passive: true });
     };
 
     window.addEventListener('resize', sliderResize)

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

@@ -8,6 +8,7 @@ import {
 
 import Heading from '@/components/atoms/Heading/Heading.component'
 import { ITabs } from './Tabs.interface'
+import { debounce } from '@/helpers/events'
 
 const Tabs = ({ id, title, menu, vertical, className, style }: ITabs) => {
   const [active, setActive] = useState(0)
@@ -19,7 +20,8 @@ const Tabs = ({ id, title, menu, vertical, className, style }: ITabs) => {
     setActive(index);
   }
 
-  const setTabsHeight = () => {
+
+  const setTabsHeight = debounce(() => {
     if (!tabsContent.current) return;
 
     const heights: number[] = [];
@@ -27,7 +29,7 @@ const Tabs = ({ id, title, menu, vertical, className, style }: ITabs) => {
       heights.push(child?.offsetHeight as number)
     })
     tabsContent.current.style.height = `${Math.max(...heights)}px`;
-  }
+  }, 250)
 
   useEffect(()=>{
     setTabsHeight();

package/src/helpers/clickOutsideToClose.tsx

@@ -11,7 +11,7 @@ export default function clickOutSideToClose(
   }
 
   useEffect(() => {
-    document.addEventListener('mouseup', handleClickOutside)
+    document.addEventListener('mouseup', handleClickOutside, {passive: true})
     return () => document.removeEventListener('mouseup', handleClickOutside)
   }, [ref])
 }

package/src/helpers/events.ts

@@ -0,0 +1,9 @@
+export const debounce = (callback: any, wait: number) => {
+  let timeoutId: number | null = null;
+  return (...args: any) => {
+    timeoutId && window.clearTimeout(timeoutId);
+    timeoutId = window.setTimeout(() => {
+      callback(...args);
+    }, wait);
+  };
+}

package/src/helpers/useInterval.ts

@@ -10,7 +10,6 @@ export const useInterval = (callback, delay) => {
 
   useEffect(() => {
     function tick() {
-      console.log("tou2");
       if (savedCallback && savedCallback.current) {
         const result = (savedCallback as unknown as any).current();
         if (result === true) {// if callback returs true, clear timeout;

package/src/helpers/useMediaQuery.tsx

@@ -1,5 +1,7 @@
 import { useEffect, useState } from 'react';
 
+import { debounce } from './events';
+
 function useMediaQuery(query: string) {
   const [matches, setMatches] = useState<boolean>(false)
 
@@ -11,7 +13,9 @@ function useMediaQuery(query: string) {
         setMatches(media.matches)
       }
 
-      const listener = () => setMatches(media.matches)
+      const listener = debounce(() => {
+        setMatches(media.matches)
+      }, 250)
       window.addEventListener('resize', listener)
 
       return () => window.removeEventListener('resize', listener)

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