From 570b324de39dcb1534961f839806364aef5332bc Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Tue, 25 Aug 2020 17:41:58 +0800
Subject: [PATCH] fix(Calendar): row-height should work on selected month
 (#7046)

---
 src/calendar/components/Month.js              | 25 +++++++++++++------
 .../test/__snapshots__/index.spec.js.snap     |  4 +--
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/calendar/components/Month.js b/src/calendar/components/Month.js
index a04dfda3e..8161ca41b 100644
--- a/src/calendar/components/Month.js
+++ b/src/calendar/components/Month.js
@@ -1,4 +1,4 @@
-import { createNamespace } from '../../utils';
+import { createNamespace, addUnit } from '../../utils';
 import { setScrollTop } from '../../utils/dom/scroll';
 import {
   t,
@@ -42,6 +42,12 @@ export default createComponent({
       return formatMonthTitle(this.date);
     },
 
+    rowHeightWithUnit() {
+      if (this.rowHeight !== ROW_HEIGHT) {
+        return addUnit(this.rowHeight);
+      }
+    },
+
     offset() {
       const { firstDayOfWeek } = this;
 
@@ -209,16 +215,14 @@ export default createComponent({
     },
 
     getDayStyle(type, index) {
-      const style = {};
+      const style = {
+        height: this.rowHeightWithUnit,
+      };
 
       if (index === 0) {
         style.marginLeft = `${(100 * this.offset) / 7}%`;
       }
 
-      if (this.rowHeight !== ROW_HEIGHT) {
-        style.height = `${this.rowHeight}px`;
-      }
-
       if (this.color) {
         if (
           type === 'start' ||
@@ -287,7 +291,14 @@ export default createComponent({
             tabindex={-1}
             onClick={onClick}
           >
-            <div class={bem('selected-day')} style={{ background: this.color }}>
+            <div
+              class={bem('selected-day')}
+              style={{
+                width: this.rowHeightWithUnit,
+                height: this.rowHeightWithUnit,
+                background: this.color,
+              }}
+            >
               {TopInfo}
               {item.text}
               {BottomInfo}
diff --git a/src/calendar/test/__snapshots__/index.spec.js.snap b/src/calendar/test/__snapshots__/index.spec.js.snap
index 378b78307..f5af9ddcf 100644
--- a/src/calendar/test/__snapshots__/index.spec.js.snap
+++ b/src/calendar/test/__snapshots__/index.spec.js.snap
@@ -231,7 +231,7 @@ exports[`row-height prop 1`] = `
     <div class="van-calendar__month" style="padding-bottom: 300px;">
       <div role="grid" class="van-calendar__days">
         <div class="van-calendar__month-mark">1</div>
-        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%; height: 50px;">1</div>
+        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px; margin-left: 71.42857142857143%;">1</div>
         <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">2</div>
         <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">3</div>
         <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">4</div>
@@ -241,7 +241,7 @@ exports[`row-height prop 1`] = `
         <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">8</div>
         <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">9</div>
         <div role="gridcell" tabindex="-1" class="van-calendar__day" style="height: 50px;">
-          <div class="van-calendar__selected-day">10</div>
+          <div class="van-calendar__selected-day" style="width: 50px; height: 50px;">10</div>
         </div>
         <div role="gridcell" tabindex="-1" class="van-calendar__day" style="height: 50px;">11</div>
         <div role="gridcell" tabindex="-1" class="van-calendar__day" style="height: 50px;">12</div>