fix: Carousel GoTo is ignored if animation is in progress (#41969)

* refactor: rewrite with waitForAnimate

* docs: update Carousel docs

* test: add waitForAnimate test

components/carousel/__tests__/index.test.tsx

@@ -139,4 +139,33 @@ describe('Carousel', () => {
       expect(container.querySelector('.slick-dots')).toHaveClass('customDots');
     });
   });
+
+  it('should not wait for the animation', async () => {
+    const ref = React.createRef<CarouselRef>();
+    render(
+      <Carousel ref={ref}>
+        <div>1</div>
+        <div>2</div>
+        <div>3</div>
+      </Carousel>,
+    );
+    const { prev, next, goTo } = ref.current || {};
+    expect(typeof prev).toBe('function');
+    expect(typeof next).toBe('function');
+    expect(typeof goTo).toBe('function');
+    expect(ref.current?.innerSlider.state.currentSlide).toBe(0);
+    ref.current?.goTo(1);
+    ref.current?.goTo(2);
+    ref.current?.goTo(1);
+    await waitFakeTimer();
+    expect(ref.current?.innerSlider.state.currentSlide).toBe(1);
+    ref.current?.prev();
+    ref.current?.next();
+    ref.current?.next();
+    await waitFakeTimer();
+    expect(ref.current?.innerSlider.state.currentSlide).toBe(2);
+    ref.current?.prev();
+    await waitFakeTimer();
+    expect(ref.current?.innerSlider.state.currentSlide).toBe(1);
+  });
 });

components/carousel/index.en-US.md

@@ -31,6 +31,7 @@ A carousel component. Scales with its container.
 | autoplay | Whether to scroll automatically | boolean | false |  |
 | dotPosition | The position of the dots, which can be one of `top` `bottom` `left` `right` | string | `bottom` |  |
 | dots | Whether to show the dots at the bottom of the gallery, `object` for `dotsClass` and any others | boolean \| { className?: string } | true |  |
+| waitForAnimate | Whether to wait for the animation when switching | boolean | false |  |
 | easing | Transition interpolation function name | string | `linear` |  |
 | effect | Transition effect | `scrollx` \| `fade` | `scrollx` |  |
 | afterChange | Callback function called after the current index changes | (current: number) => void | - |  |

components/carousel/index.tsx

@@ -18,6 +18,7 @@ export interface CarouselProps extends Omit<Settings, 'dots' | 'dotsClass'> {
   dotPosition?: DotPosition;
   children?: React.ReactNode;
   dots?: boolean | { className?: string };
+  waitForAnimate?: boolean;
 }
 
 export interface CarouselRef {
@@ -34,6 +35,7 @@ const Carousel = React.forwardRef<CarouselRef, CarouselProps>(
       dots = true,
       arrows = false,
       draggable = false,
+      waitForAnimate = false,
       dotPosition = 'bottom',
       vertical = dotPosition === 'left' || dotPosition === 'right',
       rootClassName,
@@ -109,6 +111,7 @@ const Carousel = React.forwardRef<CarouselRef, CarouselProps>(
           dotsClass={dsClass}
           arrows={arrows}
           draggable={draggable}
+          waitForAnimate={waitForAnimate}
         />
       </div>,
     );

components/carousel/index.zh-CN.md

@@ -32,6 +32,7 @@ demo:
 | autoplay | 是否自动切换 | boolean | false |  |
 | dotPosition | 面板指示点位置，可选 `top` `bottom` `left` `right` | string | `bottom` |  |
 | dots | 是否显示面板指示点，如果为 `object` 则同时可以指定 `dotsClass` 或者 | boolean \| { className?: string } | true |  |
+| waitForAnimate | 是否等待切换动画 | boolean | false |  |
 | easing | 动画效果 | string | `linear` |  |
 | effect | 动画效果函数 | `scrollx` \| `fade` | `scrollx` |  |
 | afterChange | 切换面板的回调 | (current: number) => void | - |  |