feat(SwipeCell): add before-close prop (#5320)

src/swipe-cell/README.md

@@ -31,7 +31,7 @@ Vue.use(SwipeCell);
 ### Async close
 
 ```html
-<van-swipe-cell :on-close="onClose">
+<van-swipe-cell :before-close="beforeClose">
   <template slot="left">
     <van-button square type="primary" text="Select" />
   </template>
@@ -47,8 +47,8 @@ Vue.use(SwipeCell);
 ```js
 export default {
   methods: {
-    onClose(clickPosition, instance) {
+    beforeClose({ position, instance }) {
-      switch (clickPosition) {
+      switch (position) {
         case 'left':
         case 'cell':
         case 'outside':
@@ -74,7 +74,7 @@ export default {
 | Attribute | Description | Type | Default | Version |
 |------|------|------|------|------|
 | name | Identifier of SwipeCell | *string \| number* | - | 2.0.4 |
-| on-close | Callback function before close | *Function* | - | - |
+| before-close | Callback function before close | *Function* | - | 2.3.0 |
 | disabled | Whether to disabled swipe | *boolean* | `false` | - |
 | left-width | Width of the left swipe area | *number* | `auto` | - |
 | right-width | Width of the right swipe area | *number* | `auto` | - |
@@ -95,13 +95,13 @@ export default {
 | click | Triggered when clicked | Click positon (`left` `right` `cell` `outside`) |
 | open | Triggered when opened | { position: 'left' \| 'right' , name: string } |
 
-### onClose Params
+### beforeClose Params
 
 | Attribute | Description | Type |
 |------|------|------|
-| clickPosition | Click positon (`left` `right` `cell` `outside`) | *string* |
+| name | Name | *string* |
-| instance | SwipeCell instance | *object* |
+| position | Click positon (`left` `right` `cell` `outside`) | *string* |
-| detail | Detail info | *object* |
+| instance | SwipeCell instance | *SwipeCell* |
 
 ### Methods
 

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

@@ -32,10 +32,10 @@ Vue.use(SwipeCell);
 
 ### 异步关闭
 
-通过传入`on-close`回调函数，可以自定义两侧滑动内容关闭时的行为
+通过传入`before-close`回调函数，可以自定义两侧滑动内容关闭时的行为
 
 ```html
-<van-swipe-cell :on-close="onClose">
+<van-swipe-cell :before-close="beforeClose">
   <template slot="left">
     <van-button square type="primary" text="选择" />
   </template>
@@ -51,9 +51,10 @@ Vue.use(SwipeCell);
 ```js
 export default {
   methods: {
-    // clickPosition 表示关闭时点击的位置
+    // position 为关闭时点击的位置
-    onClose(clickPosition, instance) {
+    // instance 为对应的 SwipeCell 实例
-      switch (clickPosition) {
+    beforeClose({ position, instance }) {
+      switch (position) {
         case 'left':
         case 'cell':
         case 'outside':
@@ -78,8 +79,8 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
-| name | 标识符，可以在 onClose 的参数中获取到 | *string \| number* | - | 2.0.4 |
+| name | 标识符，可以在事件参数中获取到 | *string \| number* | - | 2.0.4 |
-| on-close | 关闭时的回调函数 | *Function* | - | - |
+| before-close | 关闭前的回调函数 | *Function* | - | 2.3.0 |
 | disabled | 是否禁用滑动 | *boolean* | `false` | - |
 | left-width | 指定左侧滑动区域宽度 | *number* | `auto` | - |
 | right-width | 指定右侧滑动区域宽度 | *number* | `auto` | - |
@@ -100,13 +101,15 @@ export default {
 | click | 点击时触发 | 关闭时的点击位置 (`left` `right` `cell` `outside`) |
 | open | 打开时触发 | { position: 'left' \| 'right' , name: string } |
 
-### onClose 参数
+### beforeClose 参数
+
+beforeClose 的第一个参数为对象，对象中包含以下属性：
 
 | 参数名 | 说明 | 类型 |
 |------|------|------|
-| clickPosition | 关闭时的点击位置 (`left` `right` `cell` `outside`) | *string* |
+| name | 标识符 | *string* |
-| instance | SwipeCell 实例，用于调用实例方法 | *object* |
+| position | 关闭时的点击位置 (`left` `right` `cell` `outside`) | *string* |
-| detail | 额外信息，包含 name 字段 | *object* |
+| instance | SwipeCell 实例，用于调用实例方法 | *SwipeCell* |
 
 ### 方法
 

src/swipe-cell/demo/index.vue

@@ -31,7 +31,7 @@
       </demo-block>
 
       <demo-block :title="$t('title2')">
-        <van-swipe-cell :on-close="onClose">
+        <van-swipe-cell :before-close="beforeClose">
           <template #left>
             <van-button
               square
@@ -79,8 +79,8 @@ export default {
   },
 
   methods: {
-    onClose(clickPosition, instance) {
+    beforeClose({ position, instance }) {
-      switch (clickPosition) {
+      switch (position) {
         case 'left':
         case 'cell':
         case 'outside':

src/swipe-cell/index.js

@@ -17,7 +17,10 @@ export default createComponent({
   ],
 
   props: {
+    // @deprecated
+    // should be removed in next major version, use beforeClose instead
     onClose: Function,
+    beforeClose: Function,
     disabled: Boolean,
     leftWidth: Number,
     rightWidth: Number,
@@ -158,7 +161,13 @@ export default createComponent({
       this.$emit('click', position);
 
       if (this.opened && !this.lockClick) {
-        if (this.onClose) {
+        if (this.beforeClose) {
+          this.beforeClose({
+            position,
+            name: this.name,
+            instance: this
+          });
+        } else if (this.onClose) {
           this.onClose(position, this, { name: this.name });
         } else {
           this.swipeMove(0);

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

@@ -18,7 +18,7 @@ const defaultProps = {
   }
 };
 
-it('drag and show left part', () => {
+test('drag and show left part', () => {
   const wrapper = mount(SwipeCell, defaultProps);
 
   triggerDrag(wrapper, 10, 0);
@@ -34,14 +34,14 @@ it('drag and show left part', () => {
   expect(wrapper).toMatchSnapshot();
 });
 
-it('drag and show right part', () => {
+test('drag and show right part', () => {
   const wrapper = mount(SwipeCell, defaultProps);
 
   triggerDrag(wrapper, -50, 0);
   expect(wrapper).toMatchSnapshot();
 });
 
-it('on-close prop', () => {
+test('on-close prop', () => {
   let position;
   let instance;
 
@@ -77,7 +77,43 @@ it('on-close prop', () => {
   expect(wrapper.vm.offset).toEqual(0);
 });
 
-it('name prop', done => {
+test('before-close prop', () => {
+  let position;
+  let instance;
+
+  const wrapper = mount(SwipeCell, {
+    ...defaultProps,
+    propsData: {
+      ...defaultProps.propsData,
+      beforeClose(params) {
+        ({ position } = params);
+        ({ instance } = params);
+      }
+    }
+  });
+
+  wrapper.trigger('click');
+  expect(position).toEqual(undefined);
+
+  wrapper.vm.open('left');
+  wrapper.trigger('click');
+  expect(position).toEqual('cell');
+
+  wrapper.find('.van-swipe-cell__left').trigger('click');
+  expect(position).toEqual('left');
+
+  wrapper.find('.van-swipe-cell__right').trigger('click');
+  expect(position).toEqual('right');
+
+  instance.close();
+  expect(wrapper.vm.offset).toEqual(0);
+
+  wrapper.setData({ offset: 100, beforeClose: null });
+  wrapper.trigger('click');
+  expect(wrapper.vm.offset).toEqual(0);
+});
+
+test('name prop', done => {
   const wrapper = mount(SwipeCell, {
     ...defaultProps,
     propsData: {
@@ -94,14 +130,14 @@ it('name prop', done => {
   wrapper.trigger('click');
 });
 
-it('should reset after drag', () => {
+test('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', () => {
+test('disabled prop', () => {
   const wrapper = mount(SwipeCell, {
     propsData: {
       ...defaultProps.propsData,
@@ -113,7 +149,7 @@ it('disabled prop', () => {
   expect(wrapper.vm.offset).toEqual(0);
 });
 
-it('auto calc width', async () => {
+test('auto calc width', async () => {
   const restoreMock = mockGetBoundingClientRect({
     width: 50
   });
@@ -129,7 +165,7 @@ it('auto calc width', async () => {
   restoreMock();
 });
 
-it('render one side', async () => {
+test('render one side', async () => {
   const restoreMock = mockGetBoundingClientRect({
     width: 50
   });
@@ -147,7 +183,7 @@ it('render one side', async () => {
   restoreMock();
 });
 
-it('trigger open event when open left side', () => {
+test('trigger open event when open left side', () => {
   const wrapper = mount(SwipeCell, defaultProps);
 
   triggerDrag(wrapper, 50, 0);
@@ -157,7 +193,7 @@ it('trigger open event when open left side', () => {
   });
 });
 
-it('trigger open event when open right side', () => {
+test('trigger open event when open right side', () => {
   const wrapper = mount(SwipeCell, defaultProps);
 
   triggerDrag(wrapper, -50, 0);