From 0b721fd87c9e991ad576b251f0cd87a4970512d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Wed, 25 Dec 2019 11:43:14 +0800
Subject: [PATCH] =?UTF-8?q?feat(Calendar):=20add=20safe-area-inset-bottom?=
 =?UTF-8?q?=20prop=E3=80=81footer=20slot?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/calendar/README.zh-CN.md |  2 ++
 src/calendar/index.js        | 46 ++++++++++++++++++++++++++----------
 src/calendar/index.less      |  9 ++++++-
 3 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/src/calendar/README.zh-CN.md b/src/calendar/README.zh-CN.md
index 3e678fed7..045dcec4b 100644
--- a/src/calendar/README.zh-CN.md
+++ b/src/calendar/README.zh-CN.md
@@ -35,6 +35,7 @@ Vue.use(Calendar);
 | button-text | 选择日期区间时，确认按钮的文字 | `string` | `确定` | - |
 | button-disabled-text | 选择日期区间时，确认按钮处于禁用状态时的文字 | `string` | `确定` | - |
 | show-mark | 是否显示月份背景水印 | `boolean` | `true` | - |
+| safe-area-inset-bottom | 是否开启底部安全区适配，[详细说明](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `true` | - |
 
 ### Events
 
@@ -47,6 +48,7 @@ Vue.use(Calendar);
 | 名称 | 说明 |
 |------|------|
 | title | 自定义标题 |
+| footer | 自定义底部区域内容 |
 
 ### 方法
 
diff --git a/src/calendar/index.js b/src/calendar/index.js
index 17cf4e398..004043e60 100644
--- a/src/calendar/index.js
+++ b/src/calendar/index.js
@@ -40,6 +40,10 @@ export default createComponent({
     showMark: {
       type: Boolean,
       default: true
+    },
+    safeAreaInsetBottom: {
+      type: Boolean,
+      default: true
     }
   },
 
@@ -214,26 +218,42 @@ export default createComponent({
       );
     },
 
-    genFooter() {
+    genFooterContent() {
+      const slot = this.slots('footer');
+
+      if (slot) {
+        return slot;
+      }
+
       if (this.type === 'range') {
         const disabled = !this.currentValue[1];
         const text = disabled ? this.buttonDisabledText : this.buttonText;
 
         return (
-          <div class={bem('footer')}>
-            <Button
-              round
-              block
-              type="danger"
-              disabled={disabled}
-              class={bem('confirm')}
-              onClick={this.onConfirmRange}
-            >
-              {text || t('confirm')}
-            </Button>
-          </div>
+          <Button
+            round
+            block
+            type="danger"
+            disabled={disabled}
+            class={bem('confirm')}
+            onClick={this.onConfirmRange}
+          >
+            {text || t('confirm')}
+          </Button>
         );
       }
+    },
+
+    genFooter() {
+      return (
+        <div
+          class={bem('footer', {
+            'safe-area-inset-bottom': this.safeAreaInsetBottom
+          })}
+        >
+          {this.genFooterContent()}
+        </div>
+      );
     }
   },
 
diff --git a/src/calendar/index.less b/src/calendar/index.less
index b540cd98b..901a39e62 100644
--- a/src/calendar/index.less
+++ b/src/calendar/index.less
@@ -118,11 +118,18 @@
   }
 
   &__footer {
-    padding: 7px @padding-md;
+    flex-shrink: 0;
+    padding: 0 @padding-md;
+
+    &--safe-area-inset-bottom {
+      padding-bottom: constant(safe-area-inset-bottom);
+      padding-bottom: env(safe-area-inset-bottom);
+    }
   }
 
   &__confirm {
     height: 36px;
+    margin: 7px 0;
     line-height: 34px;
   }
 }