@snack-uikit/carousel 0.4.18-preview-790689b4.0 → 0.5.0

package/CHANGELOG.md

@@ -3,6 +3,27 @@
 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
+* [@snack-uikit/icons@0.26.2](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/icons/CHANGELOG.md)
+* [@snack-uikit/pagination@0.10.9](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/pagination/CHANGELOG.md)
+
+
+
+
+
 ## 0.4.17 (2025-03-17)
 
 ### 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/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/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.4.18-preview-790689b4.0",
+  "version": "0.5.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,13 +36,13 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/icons": "0.26.2-preview-790689b4.0",
-    "@snack-uikit/pagination": "0.10.9-preview-790689b4.0",
+    "@snack-uikit/icons": "0.26.2",
+    "@snack-uikit/pagination": "0.10.9",
     "@snack-uikit/utils": "3.8.1",
     "classnames": "2.5.1",
     "lodash.debounce": "4.0.8",
     "merge-refs": "1.3.0",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "ea32d3ce80ab87290636f1ff7eadf56392651524"
+  "gitHead": "614c4dc0de37ef72d1b1c66f2b393933321d73db"
 }

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}>