@snack-uikit/carousel 0.4.18 → 0.5.1-preview-9917f1e7.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.5.0 (2025-03-29)
+
+
+### Features
+
+* **PDS-1119:** carousel autoswipe ([ff064ac](https://github.com/cloud-ru-tech/snack-uikit/commit/ff064acc23974c47acf2e1c3a52638fd482fecdb))
+
+
+
+
+
 ## 0.4.18 (2025-03-19)
 
 ### Only dependencies have been changed

package/README.md

@@ -18,6 +18,7 @@
 | scrollBy | `number` | Math.trunc(show) | Сдвиг айтемов при смене 1 страницы |
 | transition | `number` | 0.4 | Время переключения 1 страницы (в s) |
 | swipe | `boolean` | true | Переключение страниц свайпом |
+| autoSwipe | `number` | - | Автоматическое переключение слайдов в секундах |
 | swipeActivateLength | `number` | 48 | Минимальная длина в px для активации свайпа |
 | arrows | `boolean` | true | Использовать стрелки для переключения страниц |
 | pagination | `boolean` | true | Использовать пагинацию для переключения страниц |

package/dist/cjs/components/Carousel/Carousel.d.ts

@@ -13,6 +13,8 @@ export type CarouselProps = WithSupportProps<{
     transition?: number;
     /** Переключение страниц свайпом @default true */
     swipe?: boolean;
+    /** Автоматическое переключение слайдов в секундах */
+    autoSwipe?: number;
     /** Минимальная длина в px для активации свайпа @default 48 */
     swipeActivateLength?: number;
     /** Использовать стрелки для переключения страниц @default true */
@@ -29,4 +31,4 @@ export type CarouselProps = WithSupportProps<{
     /** Цикличная прокрутка @default false*/
     infiniteScroll?: boolean;
 }>;
-export declare function Carousel({ children: items, showItems, scrollBy: scrollByProp, transition, swipe, arrows, pagination, className, gap, state, infiniteScroll, swipeActivateLength, ...rest }: CarouselProps): import("react/jsx-runtime").JSX.Element;
+export declare function Carousel({ children: items, showItems, scrollBy: scrollByProp, transition, swipe, arrows, pagination, className, gap, state, infiniteScroll, swipeActivateLength, autoSwipe, ...rest }: CarouselProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/Carousel/Carousel.js

@@ -41,9 +41,11 @@ function Carousel(_a) {
       gap,
       state,
       infiniteScroll = false,
-      swipeActivateLength = 48
+      swipeActivateLength = 48,
+      autoSwipe
     } = _a,
-    rest = __rest(_a, ["children", "showItems", "scrollBy", "transition", "swipe", "arrows", "pagination", "className", "gap", "state", "infiniteScroll", "swipeActivateLength"]);
+    rest = __rest(_a, ["children", "showItems", "scrollBy", "transition", "swipe", "arrows", "pagination", "className", "gap", "state", "infiniteScroll", "swipeActivateLength", "autoSwipe"]);
+  const timerRef = (0, react_1.useRef)();
   const scrollBy = (0, react_1.useMemo)(() => scrollByProp !== null && scrollByProp !== void 0 ? scrollByProp : Math.trunc(showItems), [showItems, scrollByProp]);
   const [page, setPage] = (0, uncontrollable_1.useUncontrolledProp)(state === null || state === void 0 ? void 0 : state.page, (_b = state === null || state === void 0 ? void 0 : state.page) !== null && _b !== void 0 ? _b : 0, newPage => {
     const result = typeof newPage === 'function' ? newPage(page) : newPage;
@@ -68,6 +70,13 @@ function Carousel(_a) {
     }
     onLeftArrowClick();
   }, [onLeftArrowClick, onRightArrowClick]);
+  (0, react_1.useEffect)(() => {
+    if (!autoSwipe || !infiniteScroll) {
+      return;
+    }
+    timerRef.current = setTimeout(() => onRightArrowClick(), autoSwipe * 1000);
+    return () => clearTimeout(timerRef.current);
+  }, [autoSwipe, infiniteScroll, onRightArrowClick]);
   return (0, jsx_runtime_1.jsxs)("div", Object.assign({
     className: (0, classnames_1.default)(styles_module_scss_1.default.carousel, className)
   }, (0, utils_1.extractSupportProps)(rest), {

package/dist/cjs/components/ItemProvider/ItemProvider.js

@@ -96,6 +96,9 @@ function ItemProvider(_ref) {
   }, [page, scrollBy, showItems]);
   const handleSlideClick = (0, react_1.useCallback)(e => {
     var _a, _b;
+    if (showItems === 1) {
+      return;
+    }
     const slideRect = e.currentTarget.getBoundingClientRect();
     const containerRect = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
     const containerViewport = (_b = containerRect === null || containerRect === void 0 ? void 0 : containerRect.right) !== null && _b !== void 0 ? _b : 0;
@@ -104,7 +107,7 @@ function ItemProvider(_ref) {
     if (minPos < 0) {
       slideCallback(slidePositionDelta);
     }
-  }, [slideCallback]);
+  }, [showItems, slideCallback]);
   const itemWidth = (0, react_1.useMemo)(() => {
     if (computedValues.itemWidth > 0) {
       return computedValues.itemWidth;

package/dist/esm/components/Carousel/Carousel.d.ts

@@ -13,6 +13,8 @@ export type CarouselProps = WithSupportProps<{
     transition?: number;
     /** Переключение страниц свайпом @default true */
     swipe?: boolean;
+    /** Автоматическое переключение слайдов в секундах */
+    autoSwipe?: number;
     /** Минимальная длина в px для активации свайпа @default 48 */
     swipeActivateLength?: number;
     /** Использовать стрелки для переключения страниц @default true */
@@ -29,4 +31,4 @@ export type CarouselProps = WithSupportProps<{
     /** Цикличная прокрутка @default false*/
     infiniteScroll?: boolean;
 }>;
-export declare function Carousel({ children: items, showItems, scrollBy: scrollByProp, transition, swipe, arrows, pagination, className, gap, state, infiniteScroll, swipeActivateLength, ...rest }: CarouselProps): import("react/jsx-runtime").JSX.Element;
+export declare function Carousel({ children: items, showItems, scrollBy: scrollByProp, transition, swipe, arrows, pagination, className, gap, state, infiniteScroll, swipeActivateLength, autoSwipe, ...rest }: CarouselProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Carousel/Carousel.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
 import { PaginationSlider } from '@snack-uikit/pagination';
 import { extractSupportProps } from '@snack-uikit/utils';
@@ -21,7 +21,8 @@ import { ItemProvider } from '../ItemProvider';
 import styles from './styles.module.css';
 export function Carousel(_a) {
     var _b;
-    var { children: items, showItems = 1, scrollBy: scrollByProp, transition = 0.4, swipe = true, arrows = true, pagination = true, className, gap, state, infiniteScroll = false, swipeActivateLength = 48 } = _a, rest = __rest(_a, ["children", "showItems", "scrollBy", "transition", "swipe", "arrows", "pagination", "className", "gap", "state", "infiniteScroll", "swipeActivateLength"]);
+    var { children: items, showItems = 1, scrollBy: scrollByProp, transition = 0.4, swipe = true, arrows = true, pagination = true, className, gap, state, infiniteScroll = false, swipeActivateLength = 48, autoSwipe } = _a, rest = __rest(_a, ["children", "showItems", "scrollBy", "transition", "swipe", "arrows", "pagination", "className", "gap", "state", "infiniteScroll", "swipeActivateLength", "autoSwipe"]);
+    const timerRef = useRef();
     const scrollBy = useMemo(() => scrollByProp !== null && scrollByProp !== void 0 ? scrollByProp : Math.trunc(showItems), [showItems, scrollByProp]);
     const [page, setPage] = useUncontrolledProp(state === null || state === void 0 ? void 0 : state.page, (_b = state === null || state === void 0 ? void 0 : state.page) !== null && _b !== void 0 ? _b : 0, newPage => {
         const result = typeof newPage === 'function' ? newPage(page) : newPage;
@@ -46,6 +47,13 @@ export function Carousel(_a) {
         }
         onLeftArrowClick();
     }, [onLeftArrowClick, onRightArrowClick]);
+    useEffect(() => {
+        if (!autoSwipe || !infiniteScroll) {
+            return;
+        }
+        timerRef.current = setTimeout(() => onRightArrowClick(), autoSwipe * 1000);
+        return () => clearTimeout(timerRef.current);
+    }, [autoSwipe, infiniteScroll, onRightArrowClick]);
     return (_jsxs("div", Object.assign({ className: cn(styles.carousel, className) }, extractSupportProps(rest), { children: [_jsxs("div", { className: styles.carouselBase, children: [_jsx(ItemProvider, { showItems: showItems, scrollBy: scrollBy, swipe: swipe, transition: transition, items: items, slideCallback: slideCallback, page: page, gap: gap, swipeActivateLength: swipeActivateLength }), arrows && (_jsxs(_Fragment, { children: [(infiniteScroll || page > 0) && (_jsx(Control, { onClick: onLeftArrowClick, variant: 'prev', "data-test-id": TEST_IDS.arrowPrev })), (infiniteScroll || page + 1 < total) && (_jsx(Control, { onClick: onRightArrowClick, variant: 'next', "data-test-id": TEST_IDS.arrowNext }))] }))] }), pagination && (_jsx("div", { className: styles.pagination, children: _jsx(PaginationSlider, { "data-test-id": TEST_IDS.pagination, page: page + 1, onChange: (page) => {
                         setPage(page - 1);
                     }, total: total }) }))] })));

package/dist/esm/components/ItemProvider/ItemProvider.js

@@ -78,6 +78,9 @@ export function ItemProvider({ items, showItems, scrollBy, slideCallback, transi
     }, [page, scrollBy, showItems]);
     const handleSlideClick = useCallback(e => {
         var _a, _b;
+        if (showItems === 1) {
+            return;
+        }
         const slideRect = e.currentTarget.getBoundingClientRect();
         const containerRect = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
         const containerViewport = (_b = containerRect === null || containerRect === void 0 ? void 0 : containerRect.right) !== null && _b !== void 0 ? _b : 0;
@@ -86,7 +89,7 @@ export function ItemProvider({ items, showItems, scrollBy, slideCallback, transi
         if (minPos < 0) {
             slideCallback(slidePositionDelta);
         }
-    }, [slideCallback]);
+    }, [showItems, slideCallback]);
     const itemWidth = useMemo(() => {
         if (computedValues.itemWidth > 0) {
             return computedValues.itemWidth;

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.4.18",
+  "version": "0.5.1-preview-9917f1e7.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -44,5 +44,5 @@
     "merge-refs": "1.3.0",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "e14c6ec6fbc59b086b7ed348403eb1bac740b9c3"
+  "gitHead": "70c9a8daac46a4a93689ec8471a674f7a84df430"
 }

package/src/components/Carousel/Carousel.tsx

@@ -1,5 +1,5 @@
 import cn from 'classnames';
-import { ReactElement, useCallback, useMemo } from 'react';
+import { ReactElement, useCallback, useEffect, useMemo, useRef } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
 
 import { PaginationSlider } from '@snack-uikit/pagination';
@@ -23,6 +23,8 @@ export type CarouselProps = WithSupportProps<{
   transition?: number;
   /** Переключение страниц свайпом @default true */
   swipe?: boolean;
+  /** Автоматическое переключение слайдов в секундах */
+  autoSwipe?: number;
   /** Минимальная длина в px для активации свайпа @default 48 */
   swipeActivateLength?: number;
   /** Использовать стрелки для переключения страниц @default true */
@@ -53,8 +55,11 @@ export function Carousel({
   state,
   infiniteScroll = false,
   swipeActivateLength = 48,
+  autoSwipe,
   ...rest
 }: CarouselProps) {
+  const timerRef = useRef<NodeJS.Timeout>();
+
   const scrollBy = useMemo(() => scrollByProp ?? Math.trunc(showItems), [showItems, scrollByProp]);
 
   const [page, setPage] = useUncontrolledProp<number>(state?.page, state?.page ?? 0, newPage => {
@@ -89,6 +94,16 @@ export function Carousel({
     [onLeftArrowClick, onRightArrowClick],
   );
 
+  useEffect(() => {
+    if (!autoSwipe || !infiniteScroll) {
+      return;
+    }
+
+    timerRef.current = setTimeout(() => onRightArrowClick(), autoSwipe * 1000);
+
+    return () => clearTimeout(timerRef.current);
+  }, [autoSwipe, infiniteScroll, onRightArrowClick]);
+
   return (
     <div className={cn(styles.carousel, className)} {...extractSupportProps(rest)}>
       <div className={styles.carouselBase}>

package/src/components/ItemProvider/ItemProvider.tsx

@@ -110,6 +110,10 @@ export function ItemProvider({
 
   const handleSlideClick: MouseEventHandler = useCallback(
     e => {
+      if (showItems === 1) {
+        return;
+      }
+
       const slideRect = e.currentTarget.getBoundingClientRect();
       const containerRect = containerRef.current?.getBoundingClientRect();
       const containerViewport = containerRect?.right ?? 0;
@@ -120,7 +124,7 @@ export function ItemProvider({
         slideCallback(slidePositionDelta);
       }
     },
-    [slideCallback],
+    [showItems, slideCallback],
   );
 
   const itemWidth = useMemo(() => {