From 4c2cf8e2cb855474bcbb3020dd9208a4d61fbd15 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sat, 19 Oct 2019 21:25:30 +0800
Subject: [PATCH] feat(Picker): add @picker-loading-icon-color var (#4787)

---
 src/loading/index.less                          | 2 +-
 src/picker/index.js                             | 4 ++--
 src/picker/index.less                           | 4 ++--
 src/picker/test/__snapshots__/demo.spec.js.snap | 2 +-
 src/style/var.less                              | 2 ++
 src/toast/index.less                            | 5 +----
 6 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/loading/index.less b/src/loading/index.less
index abc72de46..ff2ed370a 100644
--- a/src/loading/index.less
+++ b/src/loading/index.less
@@ -2,6 +2,7 @@
 
 .van-loading {
   position: relative;
+  color: @loading-spinner-color;
   font-size: 0;
   vertical-align: middle;
 
@@ -13,7 +14,6 @@
     max-width: 100%;
     height: @loading-spinner-size;
     max-height: 100%;
-    color: @loading-spinner-color;
     vertical-align: middle;
     animation: van-rotate @loading-spinner-animation-duration linear infinite;
 
diff --git a/src/picker/index.js b/src/picker/index.js
index 54717e636..39d20d9c3 100644
--- a/src/picker/index.js
+++ b/src/picker/index.js
@@ -2,7 +2,7 @@ import { createNamespace } from '../utils';
 import { preventDefault } from '../utils/dom/event';
 import { deepClone } from '../utils/deep-clone';
 import { pickerProps } from './shared';
-import { BLUE, BORDER_TOP_BOTTOM, BORDER_UNSET_TOP_BOTTOM } from '../utils/constant';
+import { BORDER_TOP_BOTTOM, BORDER_UNSET_TOP_BOTTOM } from '../utils/constant';
 import Loading from '../loading';
 import PickerColumn from './PickerColumn';
 
@@ -182,7 +182,7 @@ export default createComponent({
     return (
       <div class={bem()}>
         {this.toolbarPosition === 'top' ? Toolbar : h()}
-        {this.loading ? <Loading class={bem('loading')} color={BLUE} /> : h()}
+        {this.loading ? <Loading class={bem('loading')} /> : h()}
         {this.slots('columns-top')}
         <div class={bem('columns')} style={columnsStyle} onTouchmove={preventDefault}>
           {columns.map((item, index) => (
diff --git a/src/picker/index.less b/src/picker/index.less
index a2463f858..5108cbfb7 100644
--- a/src/picker/index.less
+++ b/src/picker/index.less
@@ -48,10 +48,10 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: rgba(255, 255, 255, .9);
+    color: @picker-loading-icon-color;
+    background-color: @picker-loading-mask-color;
   }
 
-  &__loading .van-loading,
   &__frame {
     position: absolute;
     top: 50%;
diff --git a/src/picker/test/__snapshots__/demo.spec.js.snap b/src/picker/test/__snapshots__/demo.spec.js.snap
index b6cfef2f8..5d427bec3 100644
--- a/src/picker/test/__snapshots__/demo.spec.js.snap
+++ b/src/picker/test/__snapshots__/demo.spec.js.snap
@@ -115,7 +115,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-picker">
-      <div class="van-loading van-loading--circular van-picker__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(25, 137, 250);"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+      <div class="van-loading van-loading--circular van-picker__loading"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column column1">
           <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
diff --git a/src/style/var.less b/src/style/var.less
index 4cb0bcbb0..c8026ef28 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -461,6 +461,8 @@
 @picker-option-font-size: @font-size-lg;
 @picker-option-text-color: @black;
 @picker-option-disabled-opacity: .3;
+@picker-loading-icon-color: @blue;
+@picker-loading-mask-color: rgba(255, 255, 255, .9);
 
 // Popup
 @popup-background-color: @white;
diff --git a/src/toast/index.less b/src/toast/index.less
index 27d713ead..cbf6bd64c 100644
--- a/src/toast/index.less
+++ b/src/toast/index.less
@@ -62,10 +62,7 @@
 
   &__loading {
     padding: @padding-base;
-
-    .van-loading__spinner {
-      color: @toast-loading-icon-color;
-    }
+    color: @toast-loading-icon-color;
   }
 
   &__text {