[improvement] SwipeCell: fix typo and adjust swipeLeaveTransition method's parameter values (#3048)

packages/swipe-cell/index.js

@@ -21,7 +21,7 @@ export default sfc({
   data() {
     return {
       offset: 0,
-      draging: false
+      dragging: false
     };
   },
 
@@ -55,13 +55,14 @@ export default sfc({
       const threshold = this.opened ? 1 - THRESHOLD : THRESHOLD;
 
       // right
-      if (direction > 0 && -offset > rightWidth * threshold && rightWidth > 0) {
+      if (direction === 'right' && -offset > rightWidth * threshold && rightWidth > 0) {
         this.open('right');
         // left
-      } else if (direction < 0 && offset > leftWidth * threshold && leftWidth > 0) {
+      } else if (direction === 'left' && offset > leftWidth * threshold && leftWidth > 0) {
         this.open('left');
+        // reset
       } else {
-        this.swipeMove();
+        this.swipeMove(0);
       }
     },
 
@@ -70,7 +71,7 @@ export default sfc({
         return;
       }
 
-      this.draging = true;
+      this.dragging = true;
       this.touchStart(event);
 
       if (this.opened) {
@@ -96,9 +97,9 @@ export default sfc({
         return;
       }
 
-      this.draging = false;
+      this.dragging = false;
       if (this.swiping) {
-        this.swipeLeaveTransition(this.offset > 0 ? -1 : 1);
+        this.swipeLeaveTransition(this.offset > 0 ? 'left' : 'right');
       }
     },
 
@@ -127,7 +128,7 @@ export default sfc({
 
     const wrapperStyle = {
       transform: `translate3d(${this.offset}px, 0, 0)`,
-      transition: this.draging ? 'none' : '.6s cubic-bezier(0.18, 0.89, 0.32, 1)'
+      transition: this.dragging ? 'none' : '.6s cubic-bezier(0.18, 0.89, 0.32, 1)'
     };
 
     return (
@@ -143,7 +144,7 @@ export default sfc({
           class={bem('wrapper')}
           style={wrapperStyle}
           onTransitionend={() => {
-            this.swipe = false;
+            this.swiping = false;
           }}
         >
           {this.leftWidth ? (

packages/swipe-cell/test/__snapshots__/index.spec.js.snap

@@ -36,7 +36,7 @@ exports[`drag and show left part 4`] = `
 </div>
 `;
 
-exports[`drag and show left part 5`] = `
+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>

packages/swipe-cell/test/index.spec.js

@@ -1,6 +1,7 @@
 import SwipeCell from '..';
 import { mount, triggerDrag } from '../../../test/utils';
 
+const THRESHOLD = 0.15;
 const defaultProps = {
   propsData: {
     leftWidth: 100,
@@ -24,14 +25,14 @@ it('drag and show left part', () => {
   expect(wrapper).toMatchSnapshot();
 });
 
-it('drag and show left part', () => {
+it('drag and show right part', () => {
   const wrapper = mount(SwipeCell, defaultProps);
 
   triggerDrag(wrapper, -50, 0);
   expect(wrapper).toMatchSnapshot();
 });
 
-test('on close prop', () => {
+it('on close prop', () => {
   let position;
   let instance;
 
@@ -74,3 +75,22 @@ it('width equals zero', () => {
   });
   expect(wrapper).toMatchSnapshot();
 });
+
+it('should reset after drag', () => {
+  const wrapper = mount(SwipeCell, defaultProps);
+
+  triggerDrag(wrapper, (defaultProps.leftWidth * THRESHOLD - 1), 0);
+  expect(wrapper.vm.offset).toEqual(0);
+});
+
+it('disabled prop', () => {
+  const wrapper = mount(SwipeCell, {
+    propsData: {
+      ...defaultProps.propsData,
+      disabled: true,
+    }
+  });
+
+  triggerDrag(wrapper, 50, 0);
+  expect(wrapper.vm.offset).toEqual(0);
+});