From 2205285b38deeb4f8b3250e2e44e09d55d7d2e74 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Fri, 23 Aug 2019 15:16:42 +0800
Subject: [PATCH] feat(DropdownMenu): add
 @dropdown-menu-title-active-text-color less var (#4208)

---
 src/dropdown-menu/index.js                    |  8 +-
 src/dropdown-menu/index.less                  |  4 +
 .../test/__snapshots__/index.spec.js.snap     | 92 ++++++++++++-------
 src/dropdown-menu/test/index.spec.js          |  9 ++
 src/style/var.less                            |  1 +
 5 files changed, 74 insertions(+), 40 deletions(-)

diff --git a/src/dropdown-menu/index.js b/src/dropdown-menu/index.js
index 913990da9..376cb07fa 100644
--- a/src/dropdown-menu/index.js
+++ b/src/dropdown-menu/index.js
@@ -1,5 +1,5 @@
 import { createNamespace } from '../utils';
-import { BLUE, BORDER_TOP_BOTTOM } from '../utils/constant';
+import { BORDER_TOP_BOTTOM } from '../utils/constant';
 import { ParentMixin } from '../mixins/relation';
 import { ClickOutsideMixin } from '../mixins/click-outside';
 
@@ -15,6 +15,7 @@ export default createComponent({
   ],
 
   props: {
+    activeColor: String,
     overlay: {
       type: Boolean,
       default: true
@@ -31,10 +32,6 @@ export default createComponent({
       type: String,
       default: 'down'
     },
-    activeColor: {
-      type: String,
-      default: BLUE
-    },
     closeOnClickOverlay: {
       type: Boolean,
       default: true
@@ -91,6 +88,7 @@ export default createComponent({
         <span
           class={[
             bem('title', {
+              active: item.showPopup,
               down: item.showPopup === (this.direction === 'down')
             }),
             item.titleClass
diff --git a/src/dropdown-menu/index.less b/src/dropdown-menu/index.less
index d35f43d49..7dd11cb71 100644
--- a/src/dropdown-menu/index.less
+++ b/src/dropdown-menu/index.less
@@ -49,6 +49,10 @@
       content: '';
     }
 
+    &--active {
+      color: @dropdown-menu-title-active-text-color;
+    }
+
     &--down {
       &::after {
         margin-top: -1px;
diff --git a/src/dropdown-menu/test/__snapshots__/index.spec.js.snap b/src/dropdown-menu/test/__snapshots__/index.spec.js.snap
index fd98d6ab6..9f085570f 100644
--- a/src/dropdown-menu/test/__snapshots__/index.spec.js.snap
+++ b/src/dropdown-menu/test/__snapshots__/index.spec.js.snap
@@ -2,17 +2,17 @@
 
 exports[`click option 1`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style=""><div class="van-ellipsis">B</div></span></div>
+  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">B</div></span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">B</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-overlay" style="z-index: 2011; animation-duration: 0.2s; position: absolute;" name="van-fade"></div>
-    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none; z-index: 2012;" name="van-popup-slide-top">
-      <div class="van-cell van-cell--clickable van-dropdown-item__option" style="">
+    <div class="van-overlay" style="z-index: 2013; animation-duration: 0.2s; position: absolute;" name="van-fade"></div>
+    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none; z-index: 2014;" name="van-popup-slide-top">
+      <div class="van-cell van-cell--clickable van-dropdown-item__option">
         <div class="van-cell__title"><span>A</span></div>
       </div>
-      <div class="van-cell van-cell--clickable van-dropdown-item__option" style="color: rgb(25, 137, 250);">
+      <div class="van-cell van-cell--clickable van-dropdown-item__option">
         <div class="van-cell__title"><span>B</span></div>
-        <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
+        <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
             <!----></i></div>
       </div>
     </div>
@@ -25,13 +25,13 @@ exports[`click option 1`] = `
 
 exports[`close-on-click-outside 1`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style=""><div class="van-ellipsis">A</div></span></div>
+  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
-      <div class="van-cell van-cell--clickable van-dropdown-item__option" style="color: rgb(25, 137, 250);">
+      <div class="van-cell van-cell--clickable van-dropdown-item__option">
         <div class="van-cell__title"><span>A</span></div>
-        <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
+        <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
             <!----></i></div>
       </div>
       <div class="van-cell van-cell--clickable van-dropdown-item__option">
@@ -81,15 +81,37 @@ exports[`direction up 1`] = `
 </div>
 `;
 
+exports[`direction up 2`] = `
+<div class="van-dropdown-menu van-hairline--top-bottom">
+  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active"><div class="van-ellipsis">A</div></span></div>
+  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
+  <div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 1000px;">
+    <div class="van-popup van-popup--bottom van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-bottom">
+      <div class="van-cell van-cell--clickable van-dropdown-item__option">
+        <div class="van-cell__title"><span>A</span></div>
+        <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
+            <!----></i></div>
+      </div>
+      <div class="van-cell van-cell--clickable van-dropdown-item__option">
+        <div class="van-cell__title"><span>B</span></div>
+      </div>
+    </div>
+  </div>
+  <div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 1000px; display: none;">
+    <!---->
+  </div>
+</div>
+`;
+
 exports[`disable close-on-click-outside 1`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down" style="color: rgb(25, 137, 250);"><div class="van-ellipsis">A</div></span></div>
+  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
-      <div class="van-cell van-cell--clickable van-dropdown-item__option" style="color: rgb(25, 137, 250);">
+      <div class="van-cell van-cell--clickable van-dropdown-item__option">
         <div class="van-cell__title"><span>A</span></div>
-        <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
+        <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
             <!----></i></div>
       </div>
       <div class="van-cell van-cell--clickable van-dropdown-item__option">
@@ -114,14 +136,14 @@ exports[`disable dropdown item 1`] = `
 
 exports[`render option icon 1`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down" style="color: rgb(25, 137, 250);"><div class="van-ellipsis">A</div></span></div>
+  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
-      <div class="van-cell van-cell--clickable van-dropdown-item__option" style="color: rgb(25, 137, 250);"><i class="van-icon van-icon-success van-cell__left-icon">
+      <div class="van-cell van-cell--clickable van-dropdown-item__option"><i class="van-icon van-icon-success van-cell__left-icon">
           <!----></i>
         <div class="van-cell__title"><span>A</span></div>
-        <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
+        <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
             <!----></i></div>
       </div>
       <div class="van-cell van-cell--clickable van-dropdown-item__option"><i class="van-icon van-icon-success van-cell__left-icon">
@@ -138,13 +160,13 @@ exports[`render option icon 1`] = `
 
 exports[`show dropdown item 1`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down" style="color: rgb(25, 137, 250);"><div class="van-ellipsis">A</div></span></div>
+  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
-      <div class="van-cell van-cell--clickable van-dropdown-item__option" style="color: rgb(25, 137, 250);">
+      <div class="van-cell van-cell--clickable van-dropdown-item__option">
         <div class="van-cell__title"><span>A</span></div>
-        <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
+        <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
             <!----></i></div>
       </div>
       <div class="van-cell van-cell--clickable van-dropdown-item__option">
@@ -160,13 +182,13 @@ exports[`show dropdown item 1`] = `
 
 exports[`show dropdown item 2`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style=""><div class="van-ellipsis">A</div></span></div>
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down" style="color: rgb(25, 137, 250);"><div class="van-ellipsis">A</div></span></div>
+  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
+  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; display: none;" name="van-popup-slide-top">
-      <div class="van-cell van-cell--clickable van-dropdown-item__option" style="color: rgb(25, 137, 250);">
+      <div class="van-cell van-cell--clickable van-dropdown-item__option">
         <div class="van-cell__title"><span>A</span></div>
-        <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
+        <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
             <!----></i></div>
       </div>
       <div class="van-cell van-cell--clickable van-dropdown-item__option">
@@ -176,9 +198,9 @@ exports[`show dropdown item 2`] = `
   </div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
-      <div class="van-cell van-cell--clickable van-dropdown-item__option" style="color: rgb(25, 137, 250);">
+      <div class="van-cell van-cell--clickable van-dropdown-item__option">
         <div class="van-cell__title"><span>A</span></div>
-        <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
+        <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
             <!----></i></div>
       </div>
       <div class="van-cell van-cell--clickable van-dropdown-item__option">
@@ -191,13 +213,13 @@ exports[`show dropdown item 2`] = `
 
 exports[`show dropdown item 3`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style=""><div class="van-ellipsis">A</div></span></div>
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style=""><div class="van-ellipsis">A</div></span></div>
+  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
+  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; display: none;" name="van-popup-slide-top">
-      <div class="van-cell van-cell--clickable van-dropdown-item__option" style="color: rgb(25, 137, 250);">
+      <div class="van-cell van-cell--clickable van-dropdown-item__option">
         <div class="van-cell__title"><span>A</span></div>
-        <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
+        <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
             <!----></i></div>
       </div>
       <div class="van-cell van-cell--clickable van-dropdown-item__option">
@@ -207,9 +229,9 @@ exports[`show dropdown item 3`] = `
   </div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
-      <div class="van-cell van-cell--clickable van-dropdown-item__option" style="color: rgb(25, 137, 250);">
+      <div class="van-cell van-cell--clickable van-dropdown-item__option">
         <div class="van-cell__title"><span>A</span></div>
-        <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
+        <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
             <!----></i></div>
       </div>
       <div class="van-cell van-cell--clickable van-dropdown-item__option">
@@ -235,19 +257,19 @@ exports[`title prop 1`] = `
 
 exports[`toggle method 1`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down" style="color: rgb(25, 137, 250);"><div class="van-ellipsis"></div></span></div>
+  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis"></div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-overlay" style="z-index: 2015; animation-duration: 0s; position: absolute;" name="van-fade"></div>
-    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2016;" name="van-popup-slide-top"></div>
+    <div class="van-overlay" style="z-index: 2017; animation-duration: 0s; position: absolute;" name="van-fade"></div>
+    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2018;" name="van-popup-slide-top"></div>
   </div>
 </div>
 `;
 
 exports[`toggle method 2`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style=""><div class="van-ellipsis"></div></span></div>
+  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis"></div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2016; display: none;" name="van-popup-slide-top"></div>
+    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2018; display: none;" name="van-popup-slide-top"></div>
   </div>
 </div>
 `;
diff --git a/src/dropdown-menu/test/index.spec.js b/src/dropdown-menu/test/index.spec.js
index 74581a158..6b6000b79 100644
--- a/src/dropdown-menu/test/index.spec.js
+++ b/src/dropdown-menu/test/index.spec.js
@@ -88,12 +88,21 @@ test('disable close-on-click-outside', async () => {
 });
 
 test('direction up', async () => {
+  const { innerHeight } = window;
+  window.innerHeight = 1000;
+
   const wrapper = renderWrapper({
     direction: 'up'
   });
 
   await later();
   expect(wrapper).toMatchSnapshot();
+
+  const titles = wrapper.findAll('.van-dropdown-menu__title');
+  titles.at(0).trigger('click');
+  expect(wrapper).toMatchSnapshot();
+
+  window.innerHeight = innerHeight;
 });
 
 test('click option', async () => {
diff --git a/src/style/var.less b/src/style/var.less
index e524d9cc7..164625631 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -256,6 +256,7 @@
 @dropdown-menu-background-color: @white;
 @dropdown-menu-title-font-size: 15px;
 @dropdown-menu-title-text-color: @text-color;
+@dropdown-menu-title-active-text-color: @blue;
 @dropdown-menu-title-disabled-text-color: @gray-dark;
 @dropdown-menu-title-padding: 0 @padding-xs;
 @dropdown-menu-title-line-height: 18px;