Refactor carousel (#5292)

* refactor: carousel

* refactor: carousel

* style: update vc-slick path

Author: tangjinzhou

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 innerSliderFromRefs = slick.innerSlider;
-    expect(innerSlider).toBe(innerSliderFromRefs);
+    const { innerSlider } = wrapper.componentVM;
     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);
-
-  //   const spy = jest.spyOn(wrapper.vm.slick.innerSlider, 'handleAutoPlay');
+  //   await sleep(100);
+  //   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(wrapper.vm.onWindowResized, 'cancel');
-    const spy2 = jest.spyOn(window, 'removeEventListener');
+    const spy = 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)