feat: add scrollReverse props, autoplay reverse (#6589)

* feat: add scrollReverse props, autoplay reverse * fix: merge new props into autoplay * fix: test usage
ant-design · Apr 9, 2024 · e55ddf9 · e55ddf9
1 parent 84bad16
commit e55ddf9
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 4 deletions.
diff --git a/src/components/swiper/index.zh.md b/src/components/swiper/index.zh.md
@@ -49,7 +49,7 @@
 | 属性 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | allowTouchMove | 是否允许手势滑动 | `boolean` | `true` |
-| autoplay | 是否自动切换 | `boolean` | `false` |
+| autoplay | 是否自动切换 | `boolean` | `false` | `reverse` |
 | autoplayInterval | 自动切换的间隔，单位为 `ms` | `number` | `3000` |
 | defaultIndex | 初始位置 | `number` | `0` |
 | direction | 方向，默认是水平方向 | `'horizontal' \| 'vertical'` | `'horizontal'` |

diff --git a/src/components/swiper/swiper.tsx b/src/components/swiper/swiper.tsx
@@ -44,7 +44,7 @@ export type SwiperRef = {
 export type SwiperProps = {
   defaultIndex?: number
   allowTouchMove?: boolean
-  autoplay?: boolean
+  autoplay?: boolean | 'reverse'
   autoplayInterval?: number
   loop?: boolean
   direction?: 'horizontal' | 'vertical'
@@ -69,7 +69,7 @@ export type SwiperProps = {
 const defaultProps = {
   defaultIndex: 0,
   allowTouchMove: true,
-  autoplay: false,
+  autoplay: false as SwiperProps['autoplay'],
   autoplayInterval: 3000,
   loop: false,
   direction: 'horizontal',
@@ -297,7 +297,11 @@ export const Swiper = forwardRef<SwiperRef, SwiperProps>(
 
       const runTimeSwiper = () => {
         timeoutRef.current = window.setTimeout(() => {
-          swipeNext()
+          if (autoplay === 'reverse') {
+            swipePrev()
+          } else {
+            swipeNext()
+          }
           runTimeSwiper()
         }, autoplayInterval)
       }

diff --git a/src/components/swiper/tests/swiper.test.tsx b/src/components/swiper/tests/swiper.test.tsx
@@ -76,6 +76,23 @@ describe('Swiper', () => {
     jest.useRealTimers()
   })
 
+  test('auto play reverse', () => {
+    jest.useFakeTimers()
+    render(
+      <Swiper autoplay='reverse' defaultIndex={1}>
+        {items}
+      </Swiper>
+    )
+
+    // trigger once
+    act(() => {
+      jest.runOnlyPendingTimers()
+    })
+
+    expect($$(`.${classPrefix}-track-inner`)[0]).toHaveStyle('transform: none')
+    jest.useRealTimers()
+  })
+
   test('loop', async () => {
     const { container } = render(
       <Swiper loop defaultIndex={3}>