feat(SwipeCell): add open event (#5324)

src/swipe-cell/README.md

@@ -94,6 +94,7 @@ export default {
 |------|------|------|
 | click | Triggered when clicked | Click positon (`left` `right` `cell` `outside`) |
 | open | Triggered when opened | { position: 'left' \| 'right' , name: string } |
+| close | Triggered when closed | { position: string , name: string } |
 
 ### beforeClose Params
 

src/swipe-cell/README.zh-CN.md

@@ -100,6 +100,7 @@ export default {
 |------|------|------|
 | click | 点击时触发 | 关闭时的点击位置 (`left` `right` `cell` `outside`) |
 | open | 打开时触发 | { position: 'left' \| 'right' , name: string } |
+| close | 关闭时触发 | { position: string , name: string } |
 
 ### beforeClose 参数
 

src/swipe-cell/index.js

@@ -63,29 +63,28 @@ export default createComponent({
       const offset =
         position === 'left' ? this.computedLeftWidth : -this.computedRightWidth;
 
-      this.swipeMove(offset);
       this.opened = true;
+      this.offset = offset;
 
       this.$emit('open', {
         position,
+        name: this.name,
+        // @deprecated
+        // should be removed in next major version
         detail: this.name
       });
     },
 
     // @exposed-api
-    close() {
+    close(position) {
       this.offset = 0;
-    },
 
-    swipeMove(offset = 0) {
+      if (this.opened) {
-      this.offset = range(
-        offset,
-        -this.computedRightWidth,
-        this.computedLeftWidth
-      );
-
-      if (!this.offset) {
         this.opened = false;
+        this.$emit('close', {
+          position,
+          name: this.name
+        });
       }
     },
 
@@ -115,7 +114,11 @@ export default createComponent({
           preventDefault(event, this.stopPropagation);
         }
 
-        this.swipeMove(this.deltaX + this.startOffset);
+        this.offset = range(
+          this.deltaX + this.startOffset,
+          -this.computedRightWidth,
+          this.computedLeftWidth
+        );
       }
     },
 
@@ -153,7 +156,7 @@ export default createComponent({
       ) {
         this.open('left');
       } else {
-        this.swipeMove(0);
+        this.close();
       }
     },
 
@@ -170,7 +173,7 @@ export default createComponent({
         } else if (this.onClose) {
           this.onClose(position, this, { name: this.name });
         } else {
-          this.swipeMove(0);
+          this.close(position);
         }
       }
     },
@@ -185,28 +188,32 @@ export default createComponent({
     },
 
     genLeftPart() {
-      if (this.slots('left')) {
+      const content = this.slots('left');
+
+      if (content) {
         return (
           <div
             ref="left"
             class={bem('left')}
             onClick={this.getClickHandler('left', true)}
           >
-            {this.slots('left')}
+            {content}
           </div>
         );
       }
     },
 
     genRightPart() {
-      if (this.slots('right')) {
+      const content = this.slots('right');
+
+      if (content) {
         return (
           <div
             ref="right"
             class={bem('right')}
             onClick={this.getClickHandler('right', true)}
           >
-            {this.slots('right')}
+            {content}
           </div>
         );
       }

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

@@ -70,9 +70,10 @@ test('on-close prop', () => {
   expect(position).toEqual('right');
 
   instance.close();
-  expect(wrapper.vm.offset).toEqual(0);
+  expect(instance.offset).toEqual(0);
 
-  wrapper.setData({ offset: 100, onClose: null });
+  instance.open('left');
+  wrapper.setData({ onClose: null });
   wrapper.trigger('click');
   expect(wrapper.vm.offset).toEqual(0);
 });
@@ -108,7 +109,8 @@ test('before-close prop', () => {
   instance.close();
   expect(wrapper.vm.offset).toEqual(0);
 
-  wrapper.setData({ offset: 100, beforeClose: null });
+  instance.open('left');
+  wrapper.setData({ beforeClose: null });
   wrapper.trigger('click');
   expect(wrapper.vm.offset).toEqual(0);
 });
@@ -188,6 +190,7 @@ test('trigger open event when open left side', () => {
 
   triggerDrag(wrapper, 50, 0);
   expect(wrapper.emitted('open')[0][0]).toEqual({
+    name: '',
     detail: '',
     position: 'left'
   });
@@ -198,7 +201,29 @@ test('trigger open event when open right side', () => {
 
   triggerDrag(wrapper, -50, 0);
   expect(wrapper.emitted('open')[0][0]).toEqual({
+    name: '',
     detail: '',
     position: 'right'
   });
 });
+
+test('trigger close event when closed', () => {
+  const wrapper = mount(SwipeCell, defaultProps);
+
+  wrapper.vm.open('left');
+  wrapper.vm.close();
+
+  expect(wrapper.emitted('close')[0][0]).toEqual({
+    name: '',
+    position: undefined
+  });
+});
+
+test('should not trigger close event again when already closed', () => {
+  const wrapper = mount(SwipeCell, defaultProps);
+
+  wrapper.vm.open('left');
+  wrapper.vm.close();
+  wrapper.vm.close();
+  expect(wrapper.emitted('close').length).toEqual(1);
+});