From 49f4be180f1cbcf2a8998887316b8389c3d0b462 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Thu, 18 Apr 2019 19:59:33 +0800
Subject: [PATCH] [new feature] NumberKeyboard: add safe-area-inset-bottom prop
 (#3173)

---
 packages/number-keyboard/en-US.md   | 1 +
 packages/number-keyboard/index.js   | 3 ++-
 packages/number-keyboard/index.less | 7 ++++++-
 packages/number-keyboard/zh-CN.md   | 1 +
 4 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/number-keyboard/en-US.md b/packages/number-keyboard/en-US.md
index fcb0807b0..c1ec3bb82 100644
--- a/packages/number-keyboard/en-US.md
+++ b/packages/number-keyboard/en-US.md
@@ -73,6 +73,7 @@ export default {
 | delete-button-text | Delete button text | `String` | `delete` |
 | show-delete-key | Whether to show delete button | `Boolean` | `true` |
 | hide-on-click-outside | Whether to hide keyboard when click outside | `Boolean` | `true` |
+| safe-area-inset-bottom | Whether to enable bottom safe area adaptation, to enable those features use `viewport-fit=cover` in the `viewport` meta tag | `Boolean` | `false` |
 
 ### Event
 
diff --git a/packages/number-keyboard/index.js b/packages/number-keyboard/index.js
index 57d6d4682..9a8b925cf 100644
--- a/packages/number-keyboard/index.js
+++ b/packages/number-keyboard/index.js
@@ -12,6 +12,7 @@ export default sfc({
     title: String,
     closeButtonText: String,
     deleteButtonText: String,
+    safeAreaInsetBottom: Boolean,
     theme: {
       type: String,
       default: 'default'
@@ -140,7 +141,7 @@ export default sfc({
         <div
           vShow={this.show}
           style={{ zIndex: this.zIndex }}
-          class={bem([theme])}
+          class={bem([theme, { 'safe-area-inset-bottom': this.safeAreaInsetBottom }])}
           onTouchstart={stop}
           onAnimationend={this.onAnimationEnd}
           onWebkitAnimationEnd={this.onAnimationEnd}
diff --git a/packages/number-keyboard/index.less b/packages/number-keyboard/index.less
index 381d10901..4e30e5528 100644
--- a/packages/number-keyboard/index.less
+++ b/packages/number-keyboard/index.less
@@ -35,8 +35,8 @@
   }
 
   &__sidebar {
+    top: 0;
     right: 0;
-    bottom: 0;
     width: 25%;
     position: absolute;
     height: @number-keyboard-key-height * 4;
@@ -47,6 +47,11 @@
       padding-right: 25%;
     }
   }
+
+  &--safe-area-inset-bottom {
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
 }
 
 .van-key {
diff --git a/packages/number-keyboard/zh-CN.md b/packages/number-keyboard/zh-CN.md
index e5371c56d..4d8b5eccb 100644
--- a/packages/number-keyboard/zh-CN.md
+++ b/packages/number-keyboard/zh-CN.md
@@ -73,6 +73,7 @@ export default {
 | delete-button-text | 删除按钮文字 | `String` | `删除` | 1.4.3 |
 | show-delete-key | 是否展示删除按钮 | `Boolean` | `true` | - |
 | hide-on-click-outside | 点击外部时是否收起键盘 | `Boolean` | `true` | - |
+| safe-area-inset-bottom | 是否开启 iPhone X 底部安全区适配，需要在 `viewport` meta 标签中设置 `viewport-fit=cover` | `Boolean` | `false` | 1.6.15 |
 
 ### Event