From 39179c23366733f3356f7628c591ffecd1ddf409 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Thu, 26 Dec 2019 10:23:56 +0800
Subject: [PATCH] feat(Calendar): add popable prop

---
 src/calendar/README.zh-CN.md | 19 ++++-----
 src/calendar/demo/index.vue  | 27 ++++---------
 src/calendar/index.js        | 77 ++++++++++++++++++++++++++++--------
 src/calendar/index.less      |  5 +++
 4 files changed, 80 insertions(+), 48 deletions(-)

diff --git a/src/calendar/README.zh-CN.md b/src/calendar/README.zh-CN.md
index 8f3d8ebf8..49270f25b 100644
--- a/src/calendar/README.zh-CN.md
+++ b/src/calendar/README.zh-CN.md
@@ -2,7 +2,7 @@
 
 ### 介绍
 
-日历组件用于选择日期或日期区间，可以与 [弹出层](#/zh-CN/popup)、[单元格](#/zh-CN/cell)、[输入框](#/zh-CN/field) 等组件配合使用
+日历组件用于选择日期或日期区间
 
 ### 引入
 
@@ -17,26 +17,19 @@ Vue.use(Calendar);
 
 ### 选择单个日期
 
-下面演示了结合单元格、弹出层来使用日历组件的用法。
+下面演示了结合单元格来使用日历组件的用法，点击单元格后唤起日历组件。
 
 ```html
-<!-- 点击单元格后唤起日历组件 -->
 <van-cell
   title="选择单个日期"
   :value="selectedDate"
   @click="showCalendar = true"
 />
 
-<!-- 使用弹出层组件作为日历的容器 -->
-<van-popup
+<van-calendar
   v-model="showCalendar"
-  round
-  closeable
-  position="bottom"
-  style="height: 80vh;"
->
-  <van-calendar @select="onSelect" />
-</van-popup>
+  @select="onSelect"
+/>
 ```
 
 ```js
@@ -87,6 +80,7 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
+| v-model | 是否显示日历弹窗 | *boolean* | `false` | - |
 | type | 选择类型，`single`表示选择单个日期，<br>`range`表示选择日期区间 | *string* | `single` | - |
 | title | 日历标题 | *string* | `日期选择` | - |
 | min-date | 最小日期 | *Date*  | 当前日期 | - |
@@ -95,6 +89,7 @@ export default {
 | row-height | 日期所在行的高度 | *number* | `64` | - |
 | button-text | 确认按钮的文字 | *string* | `确定` | - |
 | button-disabled-text | 确认按钮处于禁用状态时的文字 | *string* | `确定` | - |
+| poppable | 是否以弹层的形式展示日历 | *boolean* | `true` | - |
 | show-mark | 是否显示月份背景水印 | *boolean* | `true` | - |
 | safe-area-inset-bottom | 是否开启底部安全区适配，[详细说明](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `true` | - |
 
diff --git a/src/calendar/demo/index.vue b/src/calendar/demo/index.vue
index aebf87dfa..9788491fe 100644
--- a/src/calendar/demo/index.vue
+++ b/src/calendar/demo/index.vue
@@ -8,15 +8,11 @@
         @click="toggle('selectSingleDate', true)"
       />
 
-      <van-popup
+      <van-calendar
         v-model="show.selectSingleDate"
-        round
-        closeable
-        position="bottom"
-        style="height: 80vh;"
-      >
-        <van-calendar @select="onSelect($event, 'selectSingleDate')" />
-      </van-popup>
+        :poppable="false"
+        @select="onSelect($event, 'selectSingleDate')"
+      />
 
       <van-cell
         is-link
@@ -25,18 +21,11 @@
         @click="toggle('selectDateRange', true)"
       />
 
-      <van-popup
+      <van-calendar
         v-model="show.selectDateRange"
-        round
-        closeable
-        position="bottom"
-        style="height: 80vh;"
-      >
-        <van-calendar
-          type="range"
-          @select="onSelect($event, 'selectDateRange')"
-        />
-      </van-popup>
+        type="range"
+        @select="onSelect($event, 'selectDateRange')"
+      />
     </demo-block>
   </demo-section>
 </template>
diff --git a/src/calendar/index.js b/src/calendar/index.js
index 22b841705..1af30bf03 100644
--- a/src/calendar/index.js
+++ b/src/calendar/index.js
@@ -11,6 +11,7 @@ import {
   RENDER_OFFSET
 } from './utils';
 
+import Popup from '../popup';
 import Button from '../button';
 import Month from './components/Month';
 import Header from './components/Header';
@@ -18,6 +19,7 @@ import Header from './components/Header';
 export default createComponent({
   props: {
     title: String,
+    value: Boolean,
     buttonText: String,
     defaultDate: [Date, Array],
     buttonDisabledText: String,
@@ -42,6 +44,10 @@ export default createComponent({
       type: Number,
       default: ROW_HEIGHT
     },
+    poppable: {
+      type: Boolean,
+      default: true
+    },
     showMark: {
       type: Boolean,
       default: true
@@ -76,17 +82,31 @@ export default createComponent({
   },
 
   watch: {
+    value(val) {
+      if (val) {
+        this.initRect();
+      }
+    },
+
     defaultDate(val) {
       this.currentDate = val;
     }
   },
 
   mounted() {
-    this.bodyHeight = this.$refs.body.getBoundingClientRect().height;
-    this.onScroll();
+    if (!this.poppable) {
+      this.initRect();
+    }
   },
 
   methods: {
+    initRect() {
+      this.$nextTick(() => {
+        this.bodyHeight = this.$refs.body.getBoundingClientRect().height;
+        this.onScroll();
+      });
+    },
+
     getInitialDate() {
       const { type, defaultDate, minDate } = this;
 
@@ -155,6 +175,10 @@ export default createComponent({
       }
     },
 
+    togglePopup(val) {
+      this.$emit('input', val);
+    },
+
     onConfirmRange() {
       this.$emit('select', this.currentDate);
     },
@@ -213,24 +237,43 @@ export default createComponent({
           {this.genFooterContent()}
         </div>
       );
+    },
+
+    genCalendar() {
+      return (
+        <div class={bem()}>
+          <Header
+            title={this.title}
+            monthTitle={this.monthTitle}
+            scopedSlots={{
+              title: () => this.slots('title')
+            }}
+          />
+          <div ref="body" class={bem('body')} onScroll={this.onScroll}>
+            {this.months.map(this.genMonth)}
+          </div>
+          {this.genFooter()}
+        </div>
+      );
     }
   },
 
   render() {
-    return (
-      <div class={bem()}>
-        <Header
-          title={this.title}
-          monthTitle={this.monthTitle}
-          scopedSlots={{
-            title: () => this.slots('title')
-          }}
-        />
-        <div ref="body" class={bem('body')} onScroll={this.onScroll}>
-          {this.months.map(this.genMonth)}
-        </div>
-        {this.genFooter()}
-      </div>
-    );
+    if (this.poppable) {
+      return (
+        <Popup
+          round
+          closeable
+          value={this.value}
+          position="bottom"
+          class={bem('popup')}
+          onInput={this.togglePopup}
+        >
+          {this.genCalendar()}
+        </Popup>
+      );
+    }
+
+    return this.genCalendar();
   }
 });
diff --git a/src/calendar/index.less b/src/calendar/index.less
index 901a39e62..7803db958 100644
--- a/src/calendar/index.less
+++ b/src/calendar/index.less
@@ -4,6 +4,11 @@
   display: flex;
   flex-direction: column;
   height: 100%;
+  background-color: @white;
+
+  &__popup {
+    height: 80%;
+  }
 
   &__header {
     flex-shrink: 0;