refactor: carousel

components/carousel/__tests__/__snapshots__/demo.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`renders ./components/carousel/demo/autoplay.vue correctly 1`] = `
 <div class="ant-carousel">
-  <div class="slick-slider slick-initialized">
+  <div class="slick-slider slick-initialized" dir="ltr">
     <!---->
     <div class="slick-list">
       <div class="slick-track" style="opacity: 1; transform: translate3d(0px, 0px, 0px);">
@@ -84,7 +84,7 @@ exports[`renders ./components/carousel/demo/autoplay.vue correctly 1`] = `
 
 exports[`renders ./components/carousel/demo/basic.vue correctly 1`] = `
 <div class="ant-carousel">
-  <div class="slick-slider slick-initialized">
+  <div class="slick-slider slick-initialized" dir="ltr">
     <!---->
     <div class="slick-list">
       <div class="slick-track" style="opacity: 1; transform: translate3d(0px, 0px, 0px);">
@@ -166,7 +166,7 @@ exports[`renders ./components/carousel/demo/basic.vue correctly 1`] = `
 
 exports[`renders ./components/carousel/demo/customArrows.vue correctly 1`] = `
 <div class="ant-carousel">
-  <div class="slick-slider slick-initialized">
+  <div class="slick-slider slick-initialized" dir="ltr">
     <div class="custom-slick-arrow slick-arrow slick-prev" style="left: 10px; z-index: 1; display: block;"><span role="img" aria-label="left-circle" class="anticon anticon-left-circle"><svg focusable="false" class="" data-icon="left-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M603.3 327.5l-246 178a7.95 7.95 0 000 12.9l246 178c5.3 3.8 12.7 0 12.7-6.5V643c0-10.2-4.9-19.9-13.2-25.9L457.4 512l145.4-105.2c8.3-6 13.2-15.6 13.2-25.9V334c0-6.5-7.4-10.3-12.7-6.5z"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg></span></div>
     <div class="slick-list">
       <div class="slick-track" style="opacity: 1; transform: translate3d(0px, 0px, 0px);">
@@ -248,7 +248,7 @@ exports[`renders ./components/carousel/demo/customArrows.vue correctly 1`] = `
 
 exports[`renders ./components/carousel/demo/customPaging.vue correctly 1`] = `
 <div class="ant-carousel">
-  <div class="slick-slider slick-initialized"><button type="button" data-role="none" class="slick-arrow slick-prev" style="display: block;"> Previous</button>
+  <div class="slick-slider slick-initialized" dir="ltr"><button type="button" data-role="none" class="slick-arrow slick-prev" style="display: block;"> Previous</button>
     <div class="slick-list">
       <div class="slick-track" style="opacity: 1; transform: translate3d(0px, 0px, 0px);">
         <div class="slick-slide slick-cloned" tabindex="-1" data-index="-1" aria-hidden="true" style="width: 0px;">
@@ -310,7 +310,7 @@ exports[`renders ./components/carousel/demo/customPaging.vue correctly 1`] = `
 
 exports[`renders ./components/carousel/demo/fade.vue correctly 1`] = `
 <div class="ant-carousel">
-  <div class="slick-slider slick-initialized">
+  <div class="slick-slider slick-initialized" dir="ltr">
     <!---->
     <div class="slick-list">
       <div class="slick-track" style="opacity: 1;">
@@ -358,7 +358,7 @@ exports[`renders ./components/carousel/demo/fade.vue correctly 1`] = `
 exports[`renders ./components/carousel/demo/position.vue correctly 1`] = `
 <div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" style="margin-bottom: 8px;"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="top"><span class="ant-radio-button-inner"></span></span><span>Top</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="bottom"><span class="ant-radio-button-inner"></span></span><span>Bottom</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="left"><span class="ant-radio-button-inner"></span></span><span>Left</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="right"><span class="ant-radio-button-inner"></span></span><span>Right</span></label></div>
 <div class="ant-carousel">
-  <div class="slick-slider slick-initialized">
+  <div class="slick-slider slick-initialized" dir="ltr">
     <!---->
     <div class="slick-list">
       <div class="slick-track" style="opacity: 1; transform: translate3d(0px, 0px, 0px);">

components/carousel/__tests__/index.test.js

@@ -21,9 +21,7 @@ describe('Carousel', () => {
       sync: false,
     };
     const wrapper = mount(Carousel, props);
-    const { innerSlider, slick } = wrapper.vm;
+    const { innerSlider } = wrapper.componentVM;
-    const innerSliderFromRefs = slick.innerSlider;
-    expect(innerSlider).toBe(innerSliderFromRefs);
     expect(typeof innerSlider.slickNext).toBe('function');
   });
 
@@ -39,26 +37,25 @@ describe('Carousel', () => {
       sync: false,
     };
     const wrapper = mount(Carousel, props);
-    const { prev, next, goTo } = wrapper.vm;
+    const { prev, next, goTo, innerSlider } = wrapper.componentVM;
     expect(typeof prev).toBe('function');
     expect(typeof next).toBe('function');
     expect(typeof goTo).toBe('function');
-    const slick = wrapper.vm.slick;
 
-    expect(slick.innerSlider.currentSlide).toBe(0);
+    expect(innerSlider.currentSlide).toBe(0);
     wrapper.vm.goTo(2);
     await asyncExpect(() => {
-      expect(slick.innerSlider.currentSlide).toBe(2);
+      expect(innerSlider.currentSlide).toBe(2);
     }, 1000);
     prev();
     await asyncExpect(() => {
-      expect(slick.innerSlider.currentSlide).toBe(1);
+      expect(innerSlider.currentSlide).toBe(1);
     }, 1000);
 
     next();
 
     await asyncExpect(() => {
-      expect(slick.innerSlider.currentSlide).toBe(2);
+      expect(innerSlider.currentSlide).toBe(2);
     }, 1000);
   });
   // TODO
@@ -77,8 +74,8 @@ describe('Carousel', () => {
   //     sync: false,
   //   };
   //   const wrapper = mount(Carousel, props);
-
+  //   await sleep(100);
-  //   const spy = jest.spyOn(wrapper.vm.slick.innerSlider, 'handleAutoPlay');
+  //   const spy = jest.spyOn(wrapper.componentVM.innerSlider, 'handleAutoPlay');
   //   window.resizeTo(1000);
   //   expect(spy).not.toHaveBeenCalled();
   //   await new Promise(resolve => setTimeout(resolve, 1000));
@@ -100,12 +97,9 @@ describe('Carousel', () => {
       sync: false,
     };
     const wrapper = mount(Carousel, props);
-    const { onWindowResized } = wrapper.vm;
+    const spy = jest.spyOn(window, 'removeEventListener');
-    const spy = jest.spyOn(wrapper.vm.onWindowResized, 'cancel');
-    const spy2 = jest.spyOn(window, 'removeEventListener');
     wrapper.unmount();
     expect(spy).toHaveBeenCalled();
-    expect(spy2).toHaveBeenCalledWith('resize', onWindowResized);
   });
 
   describe('should works for dotPosition', () => {

components/carousel/demo/customPaging.vue

@@ -71,6 +71,7 @@ export default defineComponent({
   width: 100%;
   height: 100%;
   filter: grayscale(100%);
+  display: block;
 }
 .ant-carousel :deep .slick-thumb li.slick-active img {
   filter: grayscale(0%);

components/carousel/index.en-US.md

@@ -17,14 +17,14 @@ A carousel component. Scales with its container.
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| afterChange | Callback function called after the current index changes | function(current) | - |  |
 | autoplay | Whether to scroll automatically | boolean | `false` |  |
-| beforeChange | Callback function called before the current index changes | function(from, to) | - |  |
 | dots | Whether to show the dots at the bottom of the gallery | boolean | `true` |  |
-| dotPosition | The position of the dots, which can be one of `top` `bottom` `left` `right` | string | bottom | 1.5.0 |
+| dotPosition | The position of the dots, which can be one of `top` `bottom` `left` `right` | string | `bottom` | 1.5.0 |
 | dotsClass | Class name of the dots | string | `slick-dots` |  |
 | easing | Transition interpolation function name | string | `linear` |  |
 | effect | Transition effect | `scrollx` \| `fade` | `scrollx` |  |
+| afterChange | Callback function called after the current index changes | function(current) | - |  |
+| beforeChange | Callback function called before the current index changes | function(from, to) | - |  |
 
 ## Methods
 
@@ -34,4 +34,4 @@ A carousel component. Scales with its container.
 | next() | Change current slide to next slide |  |
 | prev() | Change current slide to previous slide |  |
 
-For more info on the parameters, refer to the [vc-slick props](https://github.com/vueComponent/ant-design-vue/blob/next/components/vc-slick/src/default-props.js#L3)
+For more info on the props, refer to the [carousel props](https://github.com/vueComponent/ant-design-vue/blob/next/components/carousel/index.tsx)

components/carousel/index.tsx

@@ -1,13 +1,11 @@
 import type { ExtractPropTypes, PropType } from 'vue';
-import { defineComponent, inject } from 'vue';
+import { ref, computed, watchEffect, defineComponent } from 'vue';
 import PropTypes from '../_util/vue-types';
-import debounce from 'lodash-es/debounce';
-import hasProp, { getComponent } from '../_util/props-util';
-import { defaultConfigProvider } from '../config-provider';
 import warning from '../_util/warning';
 import classNames from '../_util/classNames';
 import SlickCarousel from '../vc-slick/src';
 import { withInstall } from '../_util/type';
+import useConfigInject from '../_util/hooks/useConfigInject';
 
 export type SwipeDirection = 'left' | 'down' | 'right' | 'up' | string;
 
@@ -20,7 +18,7 @@ export interface CarouselRef {
   goTo: (slide: number, dontAnimate?: boolean) => void;
   next: () => void;
   prev: () => void;
-  autoPlay: (palyType?: 'update' | 'leave' | 'blur') => void;
+  autoplay: (palyType?: 'update' | 'leave' | 'blur') => void;
   innerSlider: any;
 }
 
@@ -60,13 +58,14 @@ export const carouselProps = () => ({
   speed: Number,
   swipe: { type: Boolean, default: undefined },
   swipeToSlide: { type: Boolean, default: undefined },
+  swipeEvent: Function as PropType<(swipeDirection: SwipeDirection) => void>,
   touchMove: { type: Boolean, default: undefined },
   touchThreshold: Number,
   variableWidth: { type: Boolean, default: undefined },
   useCSS: { type: Boolean, default: undefined },
   slickGoTo: Number,
   responsive: Array,
-  dotPosition: String as PropType<DotPosition>,
+  dotPosition: { type: String as PropType<DotPosition>, default: undefined },
   verticalSwiping: { type: Boolean, default: false },
 });
 export type CarouselProps = Partial<ExtractPropTypes<ReturnType<typeof carouselProps>>>;
@@ -74,110 +73,76 @@ const Carousel = defineComponent({
   name: 'ACarousel',
   inheritAttrs: false,
   props: carouselProps(),
-  setup() {
+  setup(props, { slots, attrs, expose }) {
-    return {
+    const slickRef = ref();
-      configProvider: inject('configProvider', defaultConfigProvider),
+
-      slick: undefined,
+    const goTo = (slide: number, dontAnimate = false) => {
-      innerSlider: undefined,
+      slickRef.value?.slickGoTo(slide, dontAnimate);
     };
-  },
+
-  beforeMount() {
+    expose({
-    this.onWindowResized = debounce(this.onWindowResized, 500, {
+      goTo,
-      leading: false,
+      autoplay: palyType => {
-    });
+        slickRef.value?.innerSlider?.handleAutoPlay(palyType);
-  },
+      },
-  mounted() {
+      prev: () => {
-    if (hasProp(this, 'vertical')) {
+        slickRef.value?.slickPrev();
+      },
+      next: () => {
+        slickRef.value?.slickNext();
+      },
+      innerSlider: computed(() => {
+        return slickRef.value?.innerSlider;
+      }),
+    } as CarouselRef);
+    watchEffect(() => {
       warning(
-        !this.vertical,
+        props.vertical === undefined,
         'Carousel',
         '`vertical` is deprecated, please use `dotPosition` instead.',
       );
-    }
+    });
-    const { autoplay } = this;
+    const { prefixCls, direction } = useConfigInject('carousel', props);
-    if (autoplay) {
+    const dotPosition = computed(() => {
-      window.addEventListener('resize', this.onWindowResized);
+      if (props.dotPosition) return props.dotPosition;
-    }
+      if (props.vertical !== undefined) return props.vertical ? 'right' : 'bottom';
-    // https://github.com/ant-design/ant-design/issues/7191
-    this.innerSlider = this.slick && this.slick.innerSlider;
-  },
-  beforeUnmount() {
-    const { autoplay } = this;
-    if (autoplay) {
-      window.removeEventListener('resize', this.onWindowResized);
-      (this.onWindowResized as any).cancel();
-    }
-  },
-  methods: {
-    getDotPosition() {
-      if (this.dotPosition) {
-        return this.dotPosition;
-      }
-      if (hasProp(this, 'vertical')) {
-        return this.vertical ? 'right' : 'bottom';
-      }
       return 'bottom';
-    },
-    saveSlick(node: HTMLElement) {
-      this.slick = node;
-    },
-    onWindowResized() {
-      // Fix https://github.com/ant-design/ant-design/issues/2550
-      const { autoplay } = this;
-      if (autoplay && this.slick && this.slick.innerSlider && this.slick.innerSlider.autoPlay) {
-        this.slick.innerSlider.autoPlay();
-      }
-    },
-
-    next() {
-      this.slick.slickNext();
-    },
-
-    prev() {
-      this.slick.slickPrev();
-    },
-
-    goTo(slide: number, dontAnimate = false) {
-      this.slick.slickGoTo(slide, dontAnimate);
-    },
-  },
-
-  render() {
-    const props = { ...this.$props };
-    const { $slots } = this;
-
-    if (props.effect === 'fade') {
-      props.fade = true;
-    }
-    const { class: cls, style, ...restAttrs } = this.$attrs as any;
-    const getPrefixCls = this.configProvider.getPrefixCls;
-    let className = getPrefixCls('carousel', props.prefixCls);
-    const dotsClass = 'slick-dots';
-    const dotPosition = this.getDotPosition();
-    props.vertical = dotPosition === 'left' || dotPosition === 'right';
-    props.dotsClass = classNames(`${dotsClass}`, `${dotsClass}-${dotPosition || 'bottom'}`, {
-      [`${props.dotsClass}`]: !!props.dotsClass,
     });
-    className = classNames({
+    const vertical = computed(() => dotPosition.value === 'left' || dotPosition.value === 'right');
-      [cls]: !!cls,
+    const dsClass = computed(() => {
-      [className]: !!className,
+      const dotsClass = 'slick-dots';
-      [`${className}-vertical`]: props.vertical,
+      return classNames({
+        [dotsClass]: true,
+        [`${dotsClass}-${dotPosition.value}`]: true,
+        [`${props.dotsClass}`]: !!props.dotsClass,
+      });
     });
-    const SlickCarouselProps = {
+    return () => {
-      ...props,
+      const { dots, arrows, draggable, effect } = props;
-      ...restAttrs,
+      const { class: cls, style, ...restAttrs } = attrs;
-      nextArrow: getComponent(this, 'nextArrow'),
+      const fade = effect === 'fade' ? true : props.fade;
-      prevArrow: getComponent(this, 'prevArrow'),
+      const className = classNames(prefixCls.value, {
+        [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
+        [`${prefixCls.value}-vertical`]: vertical.value,
+        [`${cls}`]: !!cls,
+      });
+      return (
+        <div class={className} style={style}>
+          <SlickCarousel
+            ref={slickRef}
+            {...props}
+            {...restAttrs}
+            dots={!!dots}
+            dotsClass={dsClass.value}
+            arrows={arrows}
+            draggable={draggable}
+            fade={fade}
+            vertical={vertical.value}
+            v-slots={slots}
+          />
+        </div>
+      );
     };
-    return (
-      <div class={className} style={style}>
-        <SlickCarousel
-          ref={this.saveSlick}
-          {...SlickCarouselProps}
-          v-slots={$slots}
-        ></SlickCarousel>
-      </div>
-    );
   },
 });
 

components/carousel/index.zh-CN.md

@@ -18,14 +18,14 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/%24C9tmj978R/Carousel.svg
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| afterChange | 切换面板的回调 | function(current) | 无 |  |
 | autoplay | 是否自动切换 | boolean | false |  |
-| beforeChange | 切换面板的回调 | function(from, to) | 无 |  |
+| dotPosition | 面板指示点位置，可选 `top` `bottom` `left` `right` | string | `bottom` | 1.5.0 |
-| dotPosition | 面板指示点位置，可选 `top` `bottom` `left` `right` | string | bottom | 1.5.0 |
 | dots | 是否显示面板指示点 | boolean | true |  |
 | dotsClass | 面板指示点类名 | string | `slick-dots` |  |
-| easing | 动画效果 | string | linear |  |
+| easing | 动画效果 | string | `linear` |  |
-| effect | 动画效果函数，可取 scrollx, fade | string | scrollx |  |
+| effect | 动画效果函数 | `scrollx` \| `fade` | `scrollx` |  |
+| afterChange | 切换面板的回调 | function(current) | - |  |
+| beforeChange | 切换面板的回调 | function(from, to) | - |  |
 
 ## 方法
 
@@ -35,4 +35,4 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/%24C9tmj978R/Carousel.svg
 | next()                         | 切换到下一面板                                    |      |
 | prev()                         | 切换到上一面板                                    |      |
 
-更多参数可参考：[vc-slick props](https://github.com/vueComponent/ant-design-vue/blob/next/components/vc-slick/src/default-props.js#L3)
+更多属性可参考源码：[carousel props](https://github.com/vueComponent/ant-design-vue/blob/next/components/carousel/index.tsx)

components/vc-slick/src/inner-slider.jsx

@@ -164,7 +164,7 @@ export default {
     if (this.autoplayTimer) {
       clearInterval(this.autoplayTimer);
     }
-    this.ro.disconnect();
+    this.ro?.disconnect();
   },
   updated() {
     this.checkImagesLoad();

components/vc-slick/src/slider.jsx

@@ -77,19 +77,19 @@ export default defineComponent({
       this._responsiveMediaHandlers.push({ mql, query, listener });
     },
     slickPrev() {
-      this.innerSlider.slickPrev();
+      this.innerSlider?.slickPrev();
     },
     slickNext() {
-      this.innerSlider.slickNext();
+      this.innerSlider?.slickNext();
     },
     slickGoTo(slide, dontAnimate = false) {
-      this.innerSlider.slickGoTo(slide, dontAnimate);
+      this.innerSlider?.slickGoTo(slide, dontAnimate);
     },
     slickPause() {
-      this.innerSlider.pause('paused');
+      this.innerSlider?.pause('paused');
     },
     slickPlay() {
-      this.innerSlider.handleAutoPlay('play');
+      this.innerSlider?.handleAutoPlay('play');
     },
   },