From f701de9e58db5f88a582e3277c97a0c9ca99eec4 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Sun, 22 Mar 2020 07:48:16 +0800
Subject: [PATCH] refactor(Swipe): use flex layout

---
 .../test/__snapshots__/index.spec.js.snap     | 18 +++----
 src/swipe-item/index.js                       | 29 +++++++----
 src/swipe-item/index.less                     |  3 +-
 src/swipe/index.js                            |  6 ++-
 src/swipe/index.less                          |  5 ++
 .../test/__snapshots__/demo.spec.js.snap      | 50 +++++++++----------
 6 files changed, 66 insertions(+), 45 deletions(-)

diff --git a/src/image-preview/test/__snapshots__/index.spec.js.snap b/src/image-preview/test/__snapshots__/index.spec.js.snap
index 70e6f2736..c3326cf37 100644
--- a/src/image-preview/test/__snapshots__/index.spec.js.snap
+++ b/src/image-preview/test/__snapshots__/index.spec.js.snap
@@ -43,21 +43,21 @@ exports[`lazy-load prop 1`] = `
 <div class="van-image-preview" name="van-fade">
   <div class="van-swipe van-image-preview__swipe">
     <div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);">
-      <div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);">
+      <div class="van-swipe-item" style="width: 0px;">
         <div class="van-image van-image-preview__image" style="transition-duration: .3s;"><img class="van-image__img" style="object-fit: contain;">
           <div class="van-image__loading">
             <div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
           </div>
         </div>
       </div>
-      <div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);">
+      <div class="van-swipe-item" style="width: 0px;">
         <div class="van-image van-image-preview__image"><img class="van-image__img" style="object-fit: contain;">
           <div class="van-image__loading">
             <div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
           </div>
         </div>
       </div>
-      <div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);">
+      <div class="van-swipe-item" style="width: 0px;">
         <div class="van-image van-image-preview__image"><img class="van-image__img" style="object-fit: contain;">
           <div class="van-image__loading">
             <div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
@@ -74,21 +74,21 @@ exports[`render image 1`] = `
 <div class="van-image-preview" name="van-fade">
   <div class="van-swipe van-image-preview__swipe">
     <div class="van-swipe__track" style="width: 0px; transition-duration: 500ms; transform: translateX(0px);">
-      <div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);">
+      <div class="van-swipe-item" style="width: 0px;">
         <div class="van-image van-image-preview__image" style="transition-duration: .3s;"><img src="https://img.yzcdn.cn/1.png" class="van-image__img" style="object-fit: contain;">
           <div class="van-image__loading">
             <div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
           </div>
         </div>
       </div>
-      <div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);">
+      <div class="van-swipe-item" style="width: 0px;">
         <div class="van-image van-image-preview__image"><img src="https://img.yzcdn.cn/2.png" class="van-image__img" style="object-fit: contain;">
           <div class="van-image__loading">
             <div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
           </div>
         </div>
       </div>
-      <div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);">
+      <div class="van-swipe-item" style="width: 0px;">
         <div class="van-image van-image-preview__image"><img src="https://img.yzcdn.cn/3.png" class="van-image__img" style="object-fit: contain;">
           <div class="van-image__loading">
             <div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
@@ -113,21 +113,21 @@ exports[`zoom 1`] = `
 <div class="van-image-preview" name="van-fade">
   <div class="van-swipe van-image-preview__swipe">
     <div class="van-swipe__track" style="width: 300px; transition-duration: 0ms; transform: translateX(0px);">
-      <div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);">
+      <div class="van-swipe-item" style="width: 100px;">
         <div class="van-image van-image-preview__image" style="transition-duration: 0s; transform: scale3d(2, 2, 1) translate(0px, NaNpx);"><img src="https://img.yzcdn.cn/1.png" class="van-image__img" style="object-fit: contain;">
           <div class="van-image__loading">
             <div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
           </div>
         </div>
       </div>
-      <div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);">
+      <div class="van-swipe-item" style="width: 100px;">
         <div class="van-image van-image-preview__image"><img src="https://img.yzcdn.cn/2.png" class="van-image__img" style="object-fit: contain;">
           <div class="van-image__loading">
             <div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
           </div>
         </div>
       </div>
-      <div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);">
+      <div class="van-swipe-item" style="width: 100px;">
         <div class="van-image van-image-preview__image"><img src="https://img.yzcdn.cn/3.png" class="van-image__img" style="object-fit: contain;">
           <div class="van-image__loading">
             <div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
diff --git a/src/swipe-item/index.js b/src/swipe-item/index.js
index 4f6061906..d0e7ba973 100644
--- a/src/swipe-item/index.js
+++ b/src/swipe-item/index.js
@@ -12,17 +12,28 @@ export default createComponent({
     };
   },
 
+  computed: {
+    style() {
+      const style = {};
+      const { vertical, computedWidth, computedHeight } = this.parent;
+
+      if (vertical) {
+        style.height = `${computedHeight}px`;
+      } else {
+        style.width = `${computedWidth}px`;
+      }
+
+      if (this.offset) {
+        style.transform = `translate${vertical ? 'Y' : 'X'}(${this.offset}px)`;
+      }
+
+      return style;
+    },
+  },
+
   render() {
-    const { vertical, computedWidth, computedHeight } = this.parent;
-
-    const style = {
-      width: computedWidth + 'px',
-      height: vertical ? computedHeight + 'px' : '100%',
-      transform: `translate${vertical ? 'Y' : 'X'}(${this.offset}px)`,
-    };
-
     return (
-      <div class={bem()} style={style} {...{ on: this.$listeners }}>
+      <div class={bem()} style={this.style} {...{ on: this.$listeners }}>
         {this.slots()}
       </div>
     );
diff --git a/src/swipe-item/index.less b/src/swipe-item/index.less
index 2433c7f53..0fdb679e8 100644
--- a/src/swipe-item/index.less
+++ b/src/swipe-item/index.less
@@ -1,6 +1,7 @@
 @import '../style/var';
 
 .van-swipe-item {
-  float: left;
+  flex-shrink: 0;
+  width: 100%;
   height: 100%;
 }
diff --git a/src/swipe/index.js b/src/swipe/index.js
index fca882a6c..d754e4a58 100644
--- a/src/swipe/index.js
+++ b/src/swipe/index.js
@@ -382,7 +382,11 @@ export default createComponent({
   render() {
     return (
       <div class={bem()}>
-        <div ref="track" style={this.trackStyle} class={bem('track')}>
+        <div
+          ref="track"
+          style={this.trackStyle}
+          class={bem('track', { vertical: this.vertical })}
+        >
           {this.slots()}
         </div>
         {this.genIndicator()}
diff --git a/src/swipe/index.less b/src/swipe/index.less
index 41f10403e..af15d62cb 100644
--- a/src/swipe/index.less
+++ b/src/swipe/index.less
@@ -7,7 +7,12 @@
   user-select: none;
 
   &__track {
+    display: flex;
     height: 100%;
+
+    &--vertical {
+      flex-direction: column;
+    }
   }
 
   &__indicators {
diff --git a/src/swipe/test/__snapshots__/demo.spec.js.snap b/src/swipe/test/__snapshots__/demo.spec.js.snap
index 72a46aabd..799f7af64 100644
--- a/src/swipe/test/__snapshots__/demo.spec.js.snap
+++ b/src/swipe/test/__snapshots__/demo.spec.js.snap
@@ -5,10 +5,10 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-swipe">
       <div class="van-swipe__track" style="width: 400px; transition-duration: 0ms; transform: translateX(0px);">
-        <div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);">1</div>
-        <div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);">2</div>
-        <div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);">3</div>
-        <div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);">4</div>
+        <div class="van-swipe-item" style="width: 100px;">1</div>
+        <div class="van-swipe-item" style="width: 100px;">2</div>
+        <div class="van-swipe-item" style="width: 100px;">3</div>
+        <div class="van-swipe-item" style="width: 100px;">4</div>
       </div>
       <div class="van-swipe__indicators"><i class="van-swipe__indicator van-swipe__indicator--active" style="background-color: white;"></i><i class="van-swipe__indicator"></i><i class="van-swipe__indicator"></i><i class="van-swipe__indicator"></i></div>
     </div>
@@ -16,10 +16,10 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-swipe">
       <div class="van-swipe__track" style="width: 400px; transition-duration: 0ms; transform: translateX(0px);">
-        <div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);"><img data-src="https://img.yzcdn.cn/vant/apple-1.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div>
-        <div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);"><img data-src="https://img.yzcdn.cn/vant/apple-2.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div>
-        <div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);"><img data-src="https://img.yzcdn.cn/vant/apple-3.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div>
-        <div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);"><img data-src="https://img.yzcdn.cn/vant/apple-4.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div>
+        <div class="van-swipe-item" style="width: 100px;"><img data-src="https://img.yzcdn.cn/vant/apple-1.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div>
+        <div class="van-swipe-item" style="width: 100px;"><img data-src="https://img.yzcdn.cn/vant/apple-2.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div>
+        <div class="van-swipe-item" style="width: 100px;"><img data-src="https://img.yzcdn.cn/vant/apple-3.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div>
+        <div class="van-swipe-item" style="width: 100px;"><img data-src="https://img.yzcdn.cn/vant/apple-4.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div>
       </div>
       <div class="van-swipe__indicators"><i class="van-swipe__indicator van-swipe__indicator--active"></i><i class="van-swipe__indicator"></i><i class="van-swipe__indicator"></i><i class="van-swipe__indicator"></i></div>
     </div>
@@ -27,21 +27,21 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-swipe">
       <div class="van-swipe__track" style="width: 400px; transition-duration: 0ms; transform: translateX(0px);">
-        <div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);">1</div>
-        <div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);">2</div>
-        <div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);">3</div>
-        <div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);">4</div>
+        <div class="van-swipe-item" style="width: 100px;">1</div>
+        <div class="van-swipe-item" style="width: 100px;">2</div>
+        <div class="van-swipe-item" style="width: 100px;">3</div>
+        <div class="van-swipe-item" style="width: 100px;">4</div>
       </div>
       <div class="van-swipe__indicators"><i class="van-swipe__indicator van-swipe__indicator--active" style="background-color: white;"></i><i class="van-swipe__indicator"></i><i class="van-swipe__indicator"></i><i class="van-swipe__indicator"></i></div>
     </div>
   </div>
   <div>
     <div class="demo-swipe--vertical van-swipe" style="height: 200px;">
-      <div class="van-swipe__track" style="height: 400px; transition-duration: 0ms; transform: translateY(0px);">
-        <div class="van-swipe-item" style="width: 100px; height: 100px; transform: translateY(0px);">1</div>
-        <div class="van-swipe-item" style="width: 100px; height: 100px; transform: translateY(0px);">2</div>
-        <div class="van-swipe-item" style="width: 100px; height: 100px; transform: translateY(0px);">3</div>
-        <div class="van-swipe-item" style="width: 100px; height: 100px; transform: translateY(0px);">4</div>
+      <div class="van-swipe__track van-swipe__track--vertical" style="height: 400px; transition-duration: 0ms; transform: translateY(0px);">
+        <div class="van-swipe-item" style="height: 100px;">1</div>
+        <div class="van-swipe-item" style="height: 100px;">2</div>
+        <div class="van-swipe-item" style="height: 100px;">3</div>
+        <div class="van-swipe-item" style="height: 100px;">4</div>
       </div>
       <div class="van-swipe__indicators van-swipe__indicators--vertical"><i class="van-swipe__indicator van-swipe__indicator--active" style="background-color: white;"></i><i class="van-swipe__indicator"></i><i class="van-swipe__indicator"></i><i class="van-swipe__indicator"></i></div>
     </div>
@@ -49,10 +49,10 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-swipe">
       <div class="van-swipe__track" style="width: 1200px; transition-duration: 0ms; transform: translateX(0px);">
-        <div class="van-swipe-item" style="width: 300px; height: 100%; transform: translateX(0px);">1</div>
-        <div class="van-swipe-item" style="width: 300px; height: 100%; transform: translateX(0px);">2</div>
-        <div class="van-swipe-item" style="width: 300px; height: 100%; transform: translateX(0px);">3</div>
-        <div class="van-swipe-item" style="width: 300px; height: 100%; transform: translateX(0px);">4</div>
+        <div class="van-swipe-item" style="width: 300px;">1</div>
+        <div class="van-swipe-item" style="width: 300px;">2</div>
+        <div class="van-swipe-item" style="width: 300px;">3</div>
+        <div class="van-swipe-item" style="width: 300px;">4</div>
       </div>
       <div class="van-swipe__indicators"><i class="van-swipe__indicator van-swipe__indicator--active" style="background-color: white;"></i><i class="van-swipe__indicator"></i><i class="van-swipe__indicator"></i><i class="van-swipe__indicator"></i></div>
     </div>
@@ -60,10 +60,10 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-swipe">
       <div class="van-swipe__track" style="width: 400px; transition-duration: 0ms; transform: translateX(0px);">
-        <div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);">1</div>
-        <div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);">2</div>
-        <div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);">3</div>
-        <div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);">4</div>
+        <div class="van-swipe-item" style="width: 100px;">1</div>
+        <div class="van-swipe-item" style="width: 100px;">2</div>
+        <div class="van-swipe-item" style="width: 100px;">3</div>
+        <div class="van-swipe-item" style="width: 100px;">4</div>
       </div>
       <div class="custom-indicator">1/4</div>
     </div>