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

docs/markdown/changelog.zh-CN.md

@@ -7,6 +7,10 @@
 - 新增`gutter`属性
 - 支持`String`类型的`size`属性
 
+##### SwipeCell
+
+- 支持自动计算`left-width`和`right-width`
+
 ##### Toast
 
 - 新增`onOpened`属性

packages/swipe-cell/demo/index.vue

@@ -3,10 +3,7 @@
     <demo-section>
       <van-notice-bar>{{ $t('tips') }}</van-notice-bar>
       <demo-block :title="$t('basicUsage')">
-        <van-swipe-cell
+        <van-swipe-cell>
-          :right-width="60"
-          :left-width="60"
-        >
           <van-button
             square
             slot="left"
@@ -28,11 +25,7 @@
       </demo-block>
 
       <demo-block :title="$t('title2')">
-        <van-swipe-cell
+        <van-swipe-cell :on-close="onClose">
-          :right-width="60"
-          :left-width="60"
-          :on-close="onClose"
-        >
           <van-button
             square
             slot="left"

packages/swipe-cell/en-US.md

@@ -87,10 +87,10 @@ export default {
 
 | Attribute | Description | Type | Default |
 |------|------|------|------|
-| left-width | Width of the left scrollable area | `Number` | `0` |
-| right-width | Width of the right scrollable area | `Number` | `0` |
 | on-close | Callback function before close | `Function` | - |
 | 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` |
 
 ### Slots
 

packages/swipe-cell/index.js

@@ -7,10 +7,13 @@ const [sfc, bem] = use('swipe-cell');
 const THRESHOLD = 0.15;
 
 export default sfc({
-  mixins: [TouchMixin, ClickOutsideMixin({
+  mixins: [
+    TouchMixin,
+    ClickOutsideMixin({
       event: 'touchstart',
       method: 'onClick'
-  })],
+    })
+  ],
 
   props: {
     onClose: Function,
@@ -26,9 +29,29 @@ export default sfc({
     };
   },
 
+  computed: {
+    computedLeftWidth() {
+      if (this.leftWidth) {
+        return this.leftWidth;
+      }
+
+      const rect = this.$refs.left.getBoundingClientRect();
+      return rect.width;
+    },
+
+    computedRightWidth() {
+      if (this.rightWidth) {
+        return this.rightWidth;
+      }
+
+      const rect = this.$refs.right.getBoundingClientRect();
+      return rect.width;
+    }
+  },
+
   methods: {
     open(position) {
-      const offset = position === 'left' ? this.leftWidth : -this.rightWidth;
+      const offset = position === 'left' ? this.computedLeftWidth : -this.computedRightWidth;
       this.swipeMove(offset);
       this.resetSwipeStatus();
     },
@@ -43,7 +66,8 @@ export default sfc({
     },
 
     swipeMove(offset = 0) {
-      this.offset = range(offset, -this.rightWidth, this.leftWidth);
+      this.offset = range(offset, -this.computedRightWidth, this.computedLeftWidth);
+
       if (this.offset) {
         this.swiping = true;
       } else {
@@ -52,14 +76,22 @@ export default sfc({
     },
 
     swipeLeaveTransition(direction) {
-      const { offset, leftWidth, rightWidth } = this;
+      const { offset, computedLeftWidth, computedRightWidth } = this;
       const threshold = this.opened ? 1 - THRESHOLD : THRESHOLD;
 
       // right
-      if (direction === 'right' && -offset > rightWidth * threshold && rightWidth > 0) {
+      if (
+        direction === 'right' &&
+        -offset > computedRightWidth * threshold &&
+        computedRightWidth > 0
+      ) {
         this.open('right');
         // left
-      } else if (direction === 'left' && offset > leftWidth * threshold && leftWidth > 0) {
+      } else if (
+        direction === 'left' &&
+        offset > computedLeftWidth * threshold &&
+        computedLeftWidth > 0
+      ) {
         this.open('left');
         // reset
       } else {
@@ -145,17 +177,17 @@ export default sfc({
             this.swiping = false;
           }}
         >
-          {this.leftWidth ? (
+          {this.slots('left') && (
-            <div class={bem('left')} onClick={onClick('left', true)}>
+            <div ref="left" class={bem('left')} onClick={onClick('left', true)}>
               {this.slots('left')}
             </div>
-          ) : null}
+          )}
           {this.slots()}
-          {this.rightWidth ? (
+          {this.slots('right') && (
-            <div class={bem('right')} onClick={onClick('right', true)}>
+            <div ref="right" class={bem('right')} onClick={onClick('right', true)}>
               {this.slots('right')}
             </div>
-          ) : null}
+          )}
         </div>
       </div>
     );

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

@@ -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__left">Left</div>
-    <div class="van-swipe-cell__right"></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__left">Left</div>
-    <div class="van-swipe-cell__right"></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__left">Left</div>
-    <div class="van-swipe-cell__right"></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__left">Left</div>
-    <div class="van-swipe-cell__right"></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__left">Left</div>
-    <div class="van-swipe-cell__right"></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

@@ -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();
+});

packages/swipe-cell/zh-CN.md

@@ -87,10 +87,10 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
-| left-width | 左侧滑动区域宽度 | `Number` | `0` | - |
-| right-width | 右侧滑动区域宽度 | `Number` | `0` | - |
 | on-close | 关闭时的回调函数 | `Function` | - | - |
 | disabled | 是否禁用滑动 | `Boolean` | `false` | 1.3.4 |
+| left-width | 指定左侧滑动区域宽度 | `Number` | `auto` | - |
+| right-width | 指定右侧滑动区域宽度 | `Number` | `auto` | - |
 
 ### Slots