Skip to content

Refactor carousel #5292

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Feb 25, 2022
Merged

Refactor carousel #5292

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7a4965f
refactor: carousel
tangjinzhou Feb 24, 2022
a6fa226
refactor: carousel
tangjinzhou Feb 25, 2022
49c2b7a
style: update vc-slick path
tangjinzhou Feb 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions components/carousel/__tests__/__snapshots__/demo.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);">
Expand Down Expand Up @@ -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);">
Expand Down Expand Up @@ -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);">
Expand Down Expand Up @@ -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;">
Expand Down Expand Up @@ -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;">
Expand Down Expand Up @@ -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);">
Expand Down
24 changes: 9 additions & 15 deletions components/carousel/__tests__/index.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});

Expand All @@ -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
Expand All @@ -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));
Expand All @@ -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', () => {
Expand Down
1 change: 1 addition & 0 deletions components/carousel/demo/customPaging.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%);
Expand Down
8 changes: 4 additions & 4 deletions components/carousel/index.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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)
Loading