@snack-uikit/carousel 0.2.13 → 0.2.14-preview-ff8280b4.0

package/dist/components/ItemProvider/ItemProvider.js

@@ -1,27 +1,36 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import debounce from 'lodash.debounce';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { TEST_IDS } from '../../testIds';
 import { getPageX } from './helpers';
-import { useWindowWidthChange } from './hooks';
 import styles from './styles.module.css';
 export function ItemProvider({ items, showItems, scrollBy, slideCallback, transition, swipe, page, gap, }) {
+    const containerRef = useRef(null);
     const [computedValues, setComputedValues] = useState({
         itemWidth: 200,
         gap: 0,
     });
-    const ref = useCallback((node) => {
-        if (node !== null) {
-            const styles = getComputedStyle(node);
-            const gap = Number.parseFloat(styles.getPropertyValue('--gap'));
-            const paddingLeft = Number.parseFloat(styles.getPropertyValue('padding-left'));
-            const paddingRight = Number.parseFloat(styles.getPropertyValue('padding-right'));
-            const itemWidth = (node.getBoundingClientRect().width - (Math.trunc(showItems) - 1) * gap - paddingLeft - paddingRight) /
-                showItems;
-            setComputedValues({ itemWidth, gap });
+    const recalculateItemsSize = useCallback(() => {
+        const containerElement = containerRef.current;
+        if (!containerElement) {
+            return;
         }
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [computedValues.itemWidth, showItems]);
+        const styles = getComputedStyle(containerElement);
+        const gap = Number.parseFloat(styles.getPropertyValue('--gap'));
+        const paddingLeft = Number.parseFloat(styles.getPropertyValue('padding-left'));
+        const paddingRight = Number.parseFloat(styles.getPropertyValue('padding-right'));
+        const itemWidth = (containerElement.getBoundingClientRect().width -
+            (Math.trunc(showItems) - 1) * gap -
+            paddingLeft -
+            paddingRight) /
+            showItems;
+        setComputedValues({ itemWidth, gap });
+    }, [showItems]);
+    useEffect(() => {
+        recalculateItemsSize();
+        window.addEventListener('resize', debounce(recalculateItemsSize, 100));
+        return () => window.removeEventListener('resize', recalculateItemsSize);
+    }, [recalculateItemsSize]);
     const itemsTrackerRef = useRef(null);
     function hideNonVisibleItems() {
         var _a;
@@ -52,9 +61,6 @@ export function ItemProvider({ items, showItems, scrollBy, slideCallback, transi
         hideNonVisibleItems();
         showVisibleItems(scrollBy, page, showItems);
     }, [page, scrollBy, showItems]);
-    useWindowWidthChange((change) => {
-        setComputedValues(computedValues => (Object.assign(Object.assign({}, computedValues), { itemWidth: computedValues.itemWidth - change })));
-    });
     const [drag, setDrag] = useState({
         initial: transform,
         start: 0,
@@ -106,7 +112,7 @@ export function ItemProvider({ items, showItems, scrollBy, slideCallback, transi
             onMouseMove: handleDragMove,
         }
         : {};
-    return (_jsx("div", { ref: ref, className: styles.itemProvider, "data-pointers": !drag.pointers || undefined, "data-swipe": swipe || undefined, style: Object.assign({}, (Boolean(gap) ? { '--gap': gap } : {})), children: _jsx("div", Object.assign({}, swipeProps, { className: styles.itemTracker, "data-test-id": TEST_IDS.trackLine, style: {
+    return (_jsx("div", { ref: containerRef, className: styles.itemProvider, "data-pointers": !drag.pointers || undefined, "data-swipe": swipe || undefined, style: Object.assign({}, (Boolean(gap) ? { '--gap': gap } : {})), children: _jsx("div", Object.assign({}, swipeProps, { className: styles.itemTracker, "data-test-id": TEST_IDS.trackLine, style: {
                 transform: `translateX(${transform - drag.drag}px)`,
                 transition: `transform ${transition}s ease 0s`,
             }, ref: itemsTrackerRef, children: items.map((item, i) => (_jsx("div", { style: { width: computedValues.itemWidth }, className: styles.itemContainer, role: 'group', "data-test-id": TEST_IDS.trackItem, children: item }, i))) })) }));

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.13",
+  "version": "0.2.14-preview-ff8280b4.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,7 +36,8 @@
     "@snack-uikit/pagination": "0.6.9",
     "@snack-uikit/utils": "3.3.0",
     "classnames": "2.3.2",
+    "lodash.debounce": "4.0.8",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "d19da5dedbb93af1e6d86330b6f2590ef117a7c9"
+  "gitHead": "ce078dfe9d48a2e6d36d34b1eff4fdb5db996d83"
 }

package/src/components/ItemProvider/ItemProvider.tsx

@@ -1,8 +1,8 @@
+import debounce from 'lodash.debounce';
 import { MouseEvent, ReactElement, TouchEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { TEST_IDS } from '../../testIds';
 import { getPageX } from './helpers';
-import { useWindowWidthChange } from './hooks';
 import styles from './styles.module.scss';
 
 export type ItemProviderProps = {
@@ -26,29 +26,40 @@ export function ItemProvider({
   page,
   gap,
 }: ItemProviderProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
   const [computedValues, setComputedValues] = useState({
     itemWidth: 200,
     gap: 0,
   });
 
-  const ref = useCallback(
-    (node: HTMLDivElement) => {
-      if (node !== null) {
-        const styles = getComputedStyle(node);
+  const recalculateItemsSize = useCallback(() => {
+    const containerElement = containerRef.current;
+
+    if (!containerElement) {
+      return;
+    }
 
-        const gap = Number.parseFloat(styles.getPropertyValue('--gap'));
-        const paddingLeft = Number.parseFloat(styles.getPropertyValue('padding-left'));
-        const paddingRight = Number.parseFloat(styles.getPropertyValue('padding-right'));
+    const styles = getComputedStyle(containerElement);
 
-        const itemWidth =
-          (node.getBoundingClientRect().width - (Math.trunc(showItems) - 1) * gap - paddingLeft - paddingRight) /
-          showItems;
-        setComputedValues({ itemWidth, gap });
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [computedValues.itemWidth, showItems],
-  );
+    const gap = Number.parseFloat(styles.getPropertyValue('--gap'));
+    const paddingLeft = Number.parseFloat(styles.getPropertyValue('padding-left'));
+    const paddingRight = Number.parseFloat(styles.getPropertyValue('padding-right'));
+
+    const itemWidth =
+      (containerElement.getBoundingClientRect().width -
+        (Math.trunc(showItems) - 1) * gap -
+        paddingLeft -
+        paddingRight) /
+      showItems;
+    setComputedValues({ itemWidth, gap });
+  }, [showItems]);
+
+  useEffect(() => {
+    recalculateItemsSize();
+    window.addEventListener('resize', debounce(recalculateItemsSize, 100));
+    return () => window.removeEventListener('resize', recalculateItemsSize);
+  }, [recalculateItemsSize]);
 
   const itemsTrackerRef = useRef<HTMLDivElement>(null);
 
@@ -87,10 +98,6 @@ export function ItemProvider({
     showVisibleItems(scrollBy, page, showItems);
   }, [page, scrollBy, showItems]);
 
-  useWindowWidthChange((change: number) => {
-    setComputedValues(computedValues => ({ ...computedValues, itemWidth: computedValues.itemWidth - change }));
-  });
-
   const [drag, setDrag] = useState({
     initial: transform,
     start: 0,
@@ -163,7 +170,7 @@ export function ItemProvider({
 
   return (
     <div
-      ref={ref}
+      ref={containerRef}
       className={styles.itemProvider}
       data-pointers={!drag.pointers || undefined}
       data-swipe={swipe || undefined}

package/dist/components/ItemProvider/hooks.d.ts

@@ -1 +0,0 @@
-export declare const useWindowWidthChange: (cb: (changed: number) => void) => void;

package/dist/components/ItemProvider/hooks.js

@@ -1,20 +0,0 @@
-import { useLayoutEffect, useState } from 'react';
-const getWindowWidth = () => {
-    if (typeof window === 'undefined') {
-        return 0;
-    }
-    return window.innerWidth;
-};
-export const useWindowWidthChange = (cb) => {
-    const [windowWidth, setWindowWidth] = useState(getWindowWidth());
-    useLayoutEffect(() => {
-        const update = () => {
-            const changed = windowWidth - window.innerWidth;
-            setWindowWidth(window.innerWidth);
-            cb(changed);
-        };
-        window.addEventListener('resize', update);
-        return () => window.removeEventListener('resize', update);
-    }, [cb, windowWidth]);
-    return;
-};

package/src/components/ItemProvider/hooks.ts

@@ -1,26 +0,0 @@
-import { useLayoutEffect, useState } from 'react';
-
-const getWindowWidth = () => {
-  if (typeof window === 'undefined') {
-    return 0;
-  }
-
-  return window.innerWidth;
-};
-
-export const useWindowWidthChange = (cb: (changed: number) => void) => {
-  const [windowWidth, setWindowWidth] = useState(getWindowWidth());
-
-  useLayoutEffect(() => {
-    const update = () => {
-      const changed = windowWidth - window.innerWidth;
-      setWindowWidth(window.innerWidth);
-      cb(changed);
-    };
-
-    window.addEventListener('resize', update);
-
-    return () => window.removeEventListener('resize', update);
-  }, [cb, windowWidth]);
-  return;
-};