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

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({
-    event: 'touchstart',
-    method: 'onClick'
-  })],
+  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 ? (
-            <div class={bem('left')} onClick={onClick('left', true)}>
+          {this.slots('left') && (
+            <div ref="left" class={bem('left')} onClick={onClick('left', true)}>
               {this.slots('left')}
             </div>
-          ) : null}
+          )}
           {this.slots()}
-          {this.rightWidth ? (
-            <div class={bem('right')} onClick={onClick('right', true)}>
+          {this.slots('right') && (
+            <div ref="right" class={bem('right')} onClick={onClick('right', true)}>
               {this.slots('right')}
             </div>
-          ) : null}
+          )}
         </div>
       </div>
     );