From 04b78e6c495d55727d3e20e3ac179b178eda2121 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Thu, 25 Jun 2020 17:34:58 +0800
Subject: [PATCH] refactor(Sku): rename indicator

---
 src/sku/components/SkuRow.js | 27 ++++++++++++++-------------
 src/sku/index.less           | 30 ++++++++++++++----------------
 2 files changed, 28 insertions(+), 29 deletions(-)

diff --git a/src/sku/components/SkuRow.js b/src/sku/components/SkuRow.js
index 9a039d2a2..960c59c3c 100644
--- a/src/sku/components/SkuRow.js
+++ b/src/sku/components/SkuRow.js
@@ -49,27 +49,28 @@ export default createComponent({
         this.present = content.scrollLeft / distance;
       });
     },
+
+    genIndicator() {
+      if (this.scrollable) {
+        return (
+          <div class={bem('indicator-wrapper')}>
+            <div class={bem('indicator')}>
+              <div class={bem('indicator-active')} style={this.scrollStyle} />
+            </div>
+          </div>
+        );
+      }
+    },
   },
 
   render() {
-    const { item, scrollable } = this;
+    const { item } = this;
     const { largeImageMode } = item;
 
     const multipleNode = item.is_multiple && (
       <span class={bem('title-multiple')}>（{t('multiple')}）</span>
     );
 
-    const SkuScroll = (
-      <div class={bem('scroll')}>
-        <div class={bem('scroll__content')} ref="skuScroll">
-          <div
-            class={bem('scroll__content--active')}
-            style={this.scrollStyle}
-          ></div>
-        </div>
-      </div>
-    );
-
     const SkuContent = (
       <div class={bem('content')} ref="content">
         <div class={bem('content__top')} ref="contentTop">
@@ -88,7 +89,7 @@ export default createComponent({
           {multipleNode}
         </div>
         {largeImageMode ? SkuContent : this.slots()}
-        {largeImageMode && scrollable && SkuScroll}
+        {this.genIndicator()}
       </div>
     );
   },
diff --git a/src/sku/index.less b/src/sku/index.less
index 040360651..b0db9ab1b 100644
--- a/src/sku/index.less
+++ b/src/sku/index.less
@@ -301,25 +301,23 @@
       }
     }
 
-    &__scroll {
-      display: flex;
-      justify-content: center;
+    &__indicator {
+      width: 40px;
       height: 4px;
-      padding-bottom: 16px;
+      background: @gray-3;
+      border-radius: 2px;
 
-      &__content {
-        position: relative;
-        width: 40px;
-        height: 4px;
-        background: #ebedf0;
+      &-wrapper {
+        display: flex;
+        justify-content: center;
+        padding-bottom: 16px;
+      }
+
+      &-active {
+        width: 50%;
+        height: 100%;
+        background-color: @red;
         border-radius: 2px;
-
-        &--active {
-          width: 20px;
-          height: 4px;
-          background: #f44;
-          border-radius: 2px;
-        }
       }
     }
   }