Repository: ant-design/ant-design-mobile
Pull request #6589 (2024-04-07 07:32:45)

feat: add scrollReverse props, autoplay reverse
when I want auto play from right to left or top to bottom, it's useful

github-actions[bot]: PR preview has been successfully built and deployed to https://antd-mobile-preview-pr-6589.surge.sh

Patch:
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index 666c0026a..04dfb5555 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -29,7 +29,7 @@ export type ButtonProps = {
   disabled?: boolean
   onClick?: (
     event: React.MouseEvent<HTMLButtonElement, MouseEvent>
-  ) => void | Promise<void> | unknown
+  ) => void | Promise<void>
   type?: 'submit' | 'reset' | 'button'
   shape?: 'default' | 'rounded' | 'rectangular'
   children?: ReactNode
diff --git a/src/components/result-page/result-page.tsx b/src/components/result-page/result-page.tsx
index d896da6c6..34b8e4a70 100644
--- a/src/components/result-page/result-page.tsx
+++ b/src/components/result-page/result-page.tsx
@@ -34,7 +34,7 @@ type ResultPageDetails = ResultPageDetail[]
 
 type OnClick = (
   event: React.MouseEvent<HTMLButtonElement, MouseEvent>
-) => void | Promise<void> | unknown
+) => void | Promise<void>
 
 export type ResultPageProps = {
   status?: 'success' | 'error' | 'info' | 'waiting' | 'warning'
diff --git a/src/components/swiper/index.zh.md b/src/components/swiper/index.zh.md
index a5ec0755b..c7e91b5e9 100644
--- 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
index 3f602ad02..b7b814e66 100644
--- 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)
       }


Test patch:
diff --git a/src/components/swiper/tests/swiper.test.tsx b/src/components/swiper/tests/swiper.test.tsx
index 3c7239f05..adce8c686 100644
--- 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}>