Skip to content

Commit c7492a0

Browse files
tangjinzhoutangjinzhou
authored
Refactor carousel (#5292)
* refactor: carousel * refactor: carousel * style: update vc-slick path
1 parent 5edc8ca commit c7492a0

18 files changed

+462
-322
lines changed

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

+6-6
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
exports[`renders ./components/carousel/demo/autoplay.vue correctly 1`] = `
44
<div class="ant-carousel">
5-
<div class="slick-slider slick-initialized">
5+
<div class="slick-slider slick-initialized" dir="ltr">
66
<!---->
77
<div class="slick-list">
88
<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`] = `
8484

8585
exports[`renders ./components/carousel/demo/basic.vue correctly 1`] = `
8686
<div class="ant-carousel">
87-
<div class="slick-slider slick-initialized">
87+
<div class="slick-slider slick-initialized" dir="ltr">
8888
<!---->
8989
<div class="slick-list">
9090
<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`] = `
166166

167167
exports[`renders ./components/carousel/demo/customArrows.vue correctly 1`] = `
168168
<div class="ant-carousel">
169-
<div class="slick-slider slick-initialized">
169+
<div class="slick-slider slick-initialized" dir="ltr">
170170
<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>
171171
<div class="slick-list">
172172
<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`] = `
248248

249249
exports[`renders ./components/carousel/demo/customPaging.vue correctly 1`] = `
250250
<div class="ant-carousel">
251-
<div class="slick-slider slick-initialized"><button type="button" data-role="none" class="slick-arrow slick-prev" style="display: block;"> Previous</button>
251+
<div class="slick-slider slick-initialized" dir="ltr"><button type="button" data-role="none" class="slick-arrow slick-prev" style="display: block;"> Previous</button>
252252
<div class="slick-list">
253253
<div class="slick-track" style="opacity: 1; transform: translate3d(0px, 0px, 0px);">
254254
<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`] = `
310310
311311
exports[`renders ./components/carousel/demo/fade.vue correctly 1`] = `
312312
<div class="ant-carousel">
313-
<div class="slick-slider slick-initialized">
313+
<div class="slick-slider slick-initialized" dir="ltr">
314314
<!---->
315315
<div class="slick-list">
316316
<div class="slick-track" style="opacity: 1;">
@@ -358,7 +358,7 @@ exports[`renders ./components/carousel/demo/fade.vue correctly 1`] = `
358358
exports[`renders ./components/carousel/demo/position.vue correctly 1`] = `
359359
<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>
360360
<div class="ant-carousel">
361-
<div class="slick-slider slick-initialized">
361+
<div class="slick-slider slick-initialized" dir="ltr">
362362
<!---->
363363
<div class="slick-list">
364364
<div class="slick-track" style="opacity: 1; transform: translate3d(0px, 0px, 0px);">

‎components/carousel/__tests__/index.test.js

+9-15
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,7 @@ describe('Carousel', () => {
2121
sync: false,
2222
};
2323
const wrapper = mount(Carousel, props);
24-
const { innerSlider, slick } = wrapper.vm;
25-
const innerSliderFromRefs = slick.innerSlider;
26-
expect(innerSlider).toBe(innerSliderFromRefs);
24+
const { innerSlider } = wrapper.componentVM;
2725
expect(typeof innerSlider.slickNext).toBe('function');
2826
});
2927

@@ -39,26 +37,25 @@ describe('Carousel', () => {
3937
sync: false,
4038
};
4139
const wrapper = mount(Carousel, props);
42-
const { prev, next, goTo } = wrapper.vm;
40+
const { prev, next, goTo, innerSlider } = wrapper.componentVM;
4341
expect(typeof prev).toBe('function');
4442
expect(typeof next).toBe('function');
4543
expect(typeof goTo).toBe('function');
46-
const slick = wrapper.vm.slick;
4744

48-
expect(slick.innerSlider.currentSlide).toBe(0);
45+
expect(innerSlider.currentSlide).toBe(0);
4946
wrapper.vm.goTo(2);
5047
await asyncExpect(() => {
51-
expect(slick.innerSlider.currentSlide).toBe(2);
48+
expect(innerSlider.currentSlide).toBe(2);
5249
}, 1000);
5350
prev();
5451
await asyncExpect(() => {
55-
expect(slick.innerSlider.currentSlide).toBe(1);
52+
expect(innerSlider.currentSlide).toBe(1);
5653
}, 1000);
5754

5855
next();
5956

6057
await asyncExpect(() => {
61-
expect(slick.innerSlider.currentSlide).toBe(2);
58+
expect(innerSlider.currentSlide).toBe(2);
6259
}, 1000);
6360
});
6461
// TODO
@@ -77,8 +74,8 @@ describe('Carousel', () => {
7774
// sync: false,
7875
// };
7976
// const wrapper = mount(Carousel, props);
80-
81-
// const spy = jest.spyOn(wrapper.vm.slick.innerSlider, 'handleAutoPlay');
77+
// await sleep(100);
78+
// const spy = jest.spyOn(wrapper.componentVM.innerSlider, 'handleAutoPlay');
8279
// window.resizeTo(1000);
8380
// expect(spy).not.toHaveBeenCalled();
8481
// await new Promise(resolve => setTimeout(resolve, 1000));
@@ -100,12 +97,9 @@ describe('Carousel', () => {
10097
sync: false,
10198
};
10299
const wrapper = mount(Carousel, props);
103-
const { onWindowResized } = wrapper.vm;
104-
const spy = jest.spyOn(wrapper.vm.onWindowResized, 'cancel');
105-
const spy2 = jest.spyOn(window, 'removeEventListener');
100+
const spy = jest.spyOn(window, 'removeEventListener');
106101
wrapper.unmount();
107102
expect(spy).toHaveBeenCalled();
108-
expect(spy2).toHaveBeenCalledWith('resize', onWindowResized);
109103
});
110104

111105
describe('should works for dotPosition', () => {

‎components/carousel/demo/customPaging.vue

+1
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ export default defineComponent({
7171
width: 100%;
7272
height: 100%;
7373
filter: grayscale(100%);
74+
display: block;
7475
}
7576
.ant-carousel :deep .slick-thumb li.slick-active img {
7677
filter: grayscale(0%);

‎components/carousel/index.en-US.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,14 @@ A carousel component. Scales with its container.
1717

1818
| Property | Description | Type | Default | Version |
1919
| --- | --- | --- | --- | --- |
20-
| afterChange | Callback function called after the current index changes | function(current) | - | |
2120
| autoplay | Whether to scroll automatically | boolean | `false` | |
22-
| beforeChange | Callback function called before the current index changes | function(from, to) | - | |
2321
| dots | Whether to show the dots at the bottom of the gallery | boolean | `true` | |
24-
| dotPosition | The position of the dots, which can be one of `top` `bottom` `left` `right` | string | bottom | 1.5.0 |
22+
| dotPosition | The position of the dots, which can be one of `top` `bottom` `left` `right` | string | `bottom` | 1.5.0 |
2523
| dotsClass | Class name of the dots | string | `slick-dots` | |
2624
| easing | Transition interpolation function name | string | `linear` | |
2725
| effect | Transition effect | `scrollx` \| `fade` | `scrollx` | |
26+
| afterChange | Callback function called after the current index changes | function(current) | - | |
27+
| beforeChange | Callback function called before the current index changes | function(from, to) | - | |
2828

2929
## Methods
3030

@@ -34,4 +34,4 @@ A carousel component. Scales with its container.
3434
| next() | Change current slide to next slide | |
3535
| prev() | Change current slide to previous slide | |
3636

37-
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)
37+
For more info on the props, refer to the [carousel props](https://github.com/vueComponent/ant-design-vue/blob/next/components/carousel/index.tsx)

0 commit comments

Comments
 (0)