alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

[new feature] SwipeCell: support auto calc left-width & right-width

Browse Source
This commit is contained in:
陈嘉涵
2019-05-29 15:25:39 +08:00
parent a2fc0e91c2
commit 6ab565920e
7 changed files with 101 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/swipe-cell/test/__snapshots__/index.spec.js.snap
+19 -16
View File
@@ -1,10 +1,19 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`auto calc width 1`] = `
<div class="van-swipe-cell">
<div class="van-swipe-cell__wrapper" style="transform: translate3d(50px, 0, 0); transition: .6s cubic-bezier(0.18, 0.89, 0.32, 1);">
<div class="van-swipe-cell__left">Left</div>
<div class="van-swipe-cell__right">Right</div>
</div>
</div>
`;
exports[`drag and show left part 1`] = `
<div class="van-swipe-cell">
<div class="van-swipe-cell__wrapper" style="transform: translate3d(0px, 0, 0); transition: .6s cubic-bezier(0.18, 0.89, 0.32, 1);">
<div class="van-swipe-cell__left"></div>
<div class="van-swipe-cell__right"></div>
<div class="van-swipe-cell__left">Left</div>
<div class="van-swipe-cell__right">Right</div>
</div>
</div>
`;
@@ -12,8 +21,8 @@ exports[`drag and show left part 1`] = `
exports[`drag and show left part 2`] = `
<div class="van-swipe-cell">
<div class="van-swipe-cell__wrapper" style="transform: translate3d(100px, 0, 0); transition: .6s cubic-bezier(0.18, 0.89, 0.32, 1);">
<div class="van-swipe-cell__left"></div>
<div class="van-swipe-cell__right"></div>
<div class="van-swipe-cell__left">Left</div>
<div class="van-swipe-cell__right">Right</div>
</div>
</div>
`;
@@ -21,8 +30,8 @@ exports[`drag and show left part 2`] = `
exports[`drag and show left part 3`] = `
<div class="van-swipe-cell">
<div class="van-swipe-cell__wrapper" style="transform: translate3d(100px, 0, 0); transition: .6s cubic-bezier(0.18, 0.89, 0.32, 1);">
<div class="van-swipe-cell__left"></div>
<div class="van-swipe-cell__right"></div>
<div class="van-swipe-cell__left">Left</div>
<div class="van-swipe-cell__right">Right</div>
</div>
</div>
`;
@@ -30,8 +39,8 @@ exports[`drag and show left part 3`] = `
exports[`drag and show left part 4`] = `
<div class="van-swipe-cell">
<div class="van-swipe-cell__wrapper" style="transform: translate3d(100px, 0, 0); transition: .6s cubic-bezier(0.18, 0.89, 0.32, 1);">
<div class="van-swipe-cell__left"></div>
<div class="van-swipe-cell__right"></div>
<div class="van-swipe-cell__left">Left</div>
<div class="van-swipe-cell__right">Right</div>
</div>
</div>
`;
@@ -39,14 +48,8 @@ exports[`drag and show left part 4`] = `
exports[`drag and show right part 1`] = `
<div class="van-swipe-cell">
<div class="van-swipe-cell__wrapper" style="transform: translate3d(-100px, 0, 0); transition: .6s cubic-bezier(0.18, 0.89, 0.32, 1);">
<div class="van-swipe-cell__left"></div>
<div class="van-swipe-cell__right"></div>
<div class="van-swipe-cell__left">Left</div>
<div class="van-swipe-cell__right">Right</div>
</div>
</div>
`;
exports[`width equals zero 1`] = `
<div class="van-swipe-cell">
<div class="van-swipe-cell__wrapper" style="transform: translate3d(0px, 0, 0); transition: .6s cubic-bezier(0.18, 0.89, 0.32, 1);"></div>
</div>
`;
packages/swipe-cell/test/index.spec.js
+25 -11
View File
@@ -1,14 +1,24 @@
import SwipeCell from '..';
import { mount, triggerDrag } from '../../../test/utils';
import { mount, triggerDrag, later } from '../../../test/utils';
const THRESHOLD = 0.15;
const defaultProps = {
propsData: {
leftWidth: 100,
rightWidth: 100
},
scopedSlots: {
left: () => 'Left',
right: () => 'Right'
}
};
function mockGetBoundingClientRect(vertical) {
Element.prototype.getBoundingClientRect = jest.fn(() => ({
width: 50
}));
}
it('drag and show left part', () => {
const wrapper = mount(SwipeCell, defaultProps);
@@ -37,6 +47,7 @@ it('on close prop', () => {
let instance;
const wrapper = mount(SwipeCell, {
...defaultProps,
propsData: {
...defaultProps.propsData,
onClose(pos, ins) {
@@ -45,6 +56,7 @@ it('on close prop', () => {
}
}
});
wrapper.trigger('click');
expect(position).toEqual(undefined);
@@ -66,16 +78,6 @@ it('on close prop', () => {
expect(wrapper.vm.offset).toEqual(0);
});
it('width equals zero', () => {
const wrapper = mount(SwipeCell, {
propsData: {
leftWidth: 0,
rightWidth: 0
}
});
expect(wrapper).toMatchSnapshot();
});
it('should reset after drag', () => {
const wrapper = mount(SwipeCell, defaultProps);
@@ -94,3 +96,15 @@ it('disabled prop', () => {
triggerDrag(wrapper, 50, 0);
expect(wrapper.vm.offset).toEqual(0);
});
it('auto calc width', async () => {
mockGetBoundingClientRect();
const wrapper = mount(SwipeCell, {
scopedSlots: defaultProps.scopedSlots
});
await later();
triggerDrag(wrapper, 100, 0);
expect(wrapper).toMatchSnapshot();
});