From 43a9989673356bd06618c8612a27f38811022f28 Mon Sep 17 00:00:00 2001
From: rex <rexkaneki@gmail.com>
Date: Wed, 5 Dec 2018 17:41:48 +0800
Subject: [PATCH] feat: adapt iPhoneX @rex-zsd (#989)

---
 example/pages/goods-action/index.wxml |  4 ++--
 example/pages/submit-bar/index.wxml   |  4 ++++
 example/pages/tabbar/index.wxml       |  4 ++--
 packages/action-sheet/README.md       |  1 +
 packages/action-sheet/index.ts        |  4 ++++
 packages/action-sheet/index.wxml      |  1 +
 packages/common/style/var.less        |  3 +++
 packages/goods-action/README.md       |  6 ++++++
 packages/goods-action/index.less      |  9 +++++++--
 packages/goods-action/index.ts        | 18 +++++++++++++++++-
 packages/goods-action/index.wxml      |  2 +-
 packages/mixins/basic.ts              | 15 +++++++++++++++
 packages/popup/README.md              |  1 +
 packages/popup/index.less             |  4 ++++
 packages/popup/index.ts               | 14 ++++++++++++++
 packages/popup/index.wxml             |  2 +-
 packages/submit-bar/README.md         |  1 +
 packages/submit-bar/index.less        |  4 ++++
 packages/submit-bar/index.ts          | 11 +++++++++++
 packages/submit-bar/index.wxml        |  2 +-
 packages/tabbar/README.md             |  1 +
 packages/tabbar/index.less            | 10 +++++++---
 packages/tabbar/index.ts              | 14 ++++++++++++++
 packages/tabbar/index.wxml            |  2 +-
 24 files changed, 123 insertions(+), 14 deletions(-)

diff --git a/example/pages/goods-action/index.wxml b/example/pages/goods-action/index.wxml
index 322409da..4c71c0d2 100644
--- a/example/pages/goods-action/index.wxml
+++ b/example/pages/goods-action/index.wxml
@@ -1,5 +1,5 @@
 <demo-block title="基础用法">
-  <van-goods-action custom-class="goods-action">
+  <van-goods-action custom-class="goods-action" safe-area-inset-bottom="{{ false }}">
     <van-goods-action-icon
       icon="chat"
       text="客服"
@@ -23,7 +23,7 @@
 </demo-block>
 
 <demo-block title="图标提示">
-  <van-goods-action custom-class="goods-action">
+  <van-goods-action custom-class="goods-action" safe-area-inset-bottom="{{ false }}">
     <van-goods-action-icon icon="chat" text="客服" />
     <van-goods-action-icon icon="cart" text="购物车" info="5" />
     <van-goods-action-icon icon="shop" text="店铺" />
diff --git a/example/pages/submit-bar/index.wxml b/example/pages/submit-bar/index.wxml
index d9700da5..7547daa1 100644
--- a/example/pages/submit-bar/index.wxml
+++ b/example/pages/submit-bar/index.wxml
@@ -4,6 +4,7 @@
     button-text="提交订单"
     bind:submit="onClickButton"
     custom-class="van-submit-bar"
+    safe-area-inset-bottom="{{ false }}"
   />
 </demo-block>
 
@@ -15,6 +16,7 @@
     tip="您的收货地址不支持同城送, 我们已为您推荐快递"
     bind:submit="onClickButton"
     custom-class="van-submit-bar"
+    safe-area-inset-bottom="{{ false }}"
   />
 </demo-block>
 
@@ -25,6 +27,7 @@
     button-text="提交订单"
     bind:submit="onClickButton"
     custom-class="van-submit-bar"
+    safe-area-inset-bottom="{{ false }}"
   />
 </demo-block>
 
@@ -35,6 +38,7 @@
     bind:submit="onClickButton"
     custom-class="van-submit-bar"
     tip="{{ true }}"
+    safe-area-inset-bottom="{{ false }}"
   >
     <van-tag type="primary" custom-class="van-tag">标签</van-tag>
     <view slot="tip">
diff --git a/example/pages/tabbar/index.wxml b/example/pages/tabbar/index.wxml
index ba7881f8..0d7f220a 100644
--- a/example/pages/tabbar/index.wxml
+++ b/example/pages/tabbar/index.wxml
@@ -1,5 +1,5 @@
 <demo-block title="基础用法">
-  <van-tabbar active="{{ active }}" custom-class="tabbar" bind:change="onChange">
+  <van-tabbar active="{{ active }}" custom-class="tabbar" bind:change="onChange" safe-area-inset-bottom="{{ false }}">
     <van-tabbar-item icon="shop">标签</van-tabbar-item>
     <van-tabbar-item icon="chat" dot>标签</van-tabbar-item>
     <van-tabbar-item icon="records" info="5">标签</van-tabbar-item>
@@ -8,7 +8,7 @@
 </demo-block>
 
 <demo-block title="自定义图标">
-  <van-tabbar active="{{ active2 }}" custom-class="tabbar" bind:change="onChange">
+  <van-tabbar active="{{ active2 }}" custom-class="tabbar" bind:change="onChange" safe-area-inset-bottom="{{ false }}">
     <van-tabbar-item>
       <span>自定义</span>
       <image slot="icon" src="{{ icon.normal }}" class="icon" mode="aspectFit" />
diff --git a/packages/action-sheet/README.md b/packages/action-sheet/README.md
index 7ee47182..aff2563f 100644
--- a/packages/action-sheet/README.md
+++ b/packages/action-sheet/README.md
@@ -88,6 +88,7 @@ Page({
 | cancel-text | 取消按钮文字 | `String` | - |
 | overlay | 是否显示遮罩层 | `Boolean` | - |
 | close-on-click-overlay | 点击遮罩是否关闭菜单 | `Boolean` | - |
+| safe-area-inset-bottom | 是否适配iPhoneX | `Boolean` | `true` |
 
 ### Event
 
diff --git a/packages/action-sheet/index.ts b/packages/action-sheet/index.ts
index e43735a1..a1acd00f 100644
--- a/packages/action-sheet/index.ts
+++ b/packages/action-sheet/index.ts
@@ -20,6 +20,10 @@ VantComponent({
     closeOnClickOverlay: {
       type: Boolean,
       value: true
+    },
+    safeAreaInsetBottom: {
+      type: Boolean,
+      value: true
     }
   },
 
diff --git a/packages/action-sheet/index.wxml b/packages/action-sheet/index.wxml
index 5bfe879d..2435c5c1 100644
--- a/packages/action-sheet/index.wxml
+++ b/packages/action-sheet/index.wxml
@@ -4,6 +4,7 @@
   z-index="{{ zIndex }}"
   overlay="{{ overlay }}"
   custom-class="van-action-sheet"
+  safe-area-inset-bottom="{{ safeAreaInsetBottom }}"
   close-on-click-overlay="{{ closeOnClickOverlay }}"
   bind:close="onClose"
 >
diff --git a/packages/common/style/var.less b/packages/common/style/var.less
index 26186edc..b313db8e 100644
--- a/packages/common/style/var.less
+++ b/packages/common/style/var.less
@@ -55,3 +55,6 @@
 @toast-default-padding: 15px;
 @toast-default-width: 90px;
 @toast-default-min-height: 90px;
+
+// iPhoneX
+@safe-area-inset-bottom: 34px;
diff --git a/packages/goods-action/README.md b/packages/goods-action/README.md
index 764eb596..0b27ecb6 100644
--- a/packages/goods-action/README.md
+++ b/packages/goods-action/README.md
@@ -64,6 +64,12 @@ Page({
 </van-goods-action>
 ```
 
+### GoodsAction API
+
+| 参数 | 说明 | 类型 | 默认值 |
+|-----------|-----------|-----------|-------------|
+| safe-area-inset-bottom | 是否适配iPhoneX | `Boolean` | `true` |
+
 ### GoodsActionIcon API
 
 | 参数 | 说明 | 类型 | 默认值 |
diff --git a/packages/goods-action/index.less b/packages/goods-action/index.less
index f9bfb4e7..63f2d2e3 100644
--- a/packages/goods-action/index.less
+++ b/packages/goods-action/index.less
@@ -1,9 +1,14 @@
 @import '../common/style/var.less';
 
 .van-goods-action {
-  left: 0;
+  position: fixed;
   right: 0;
   bottom: 0;
+  left: 0;
   display: flex;
-  position: fixed;
+  background-color: @white;
+
+  &--safe {
+    padding-bottom: @safe-area-inset-bottom;
+  }
 }
diff --git a/packages/goods-action/index.ts b/packages/goods-action/index.ts
index 5d0c1360..4a9bf784 100644
--- a/packages/goods-action/index.ts
+++ b/packages/goods-action/index.ts
@@ -1,3 +1,19 @@
 import { VantComponent } from '../common/component';
 
-VantComponent();
+VantComponent({
+  props: {
+    safeAreaInsetBottom: {
+      type: Boolean,
+      value: true
+    }
+  },
+
+  computed: {
+    rootClass() {
+      const { safeAreaInsetBottom, isIPhoneX } = this.data;
+      return this.classNames('van-goods-action', 'custom-class', {
+        [`van-goods-action--safe`]: isIPhoneX && safeAreaInsetBottom
+      });
+    }
+  }
+});
diff --git a/packages/goods-action/index.wxml b/packages/goods-action/index.wxml
index 831d1685..cfc009c7 100644
--- a/packages/goods-action/index.wxml
+++ b/packages/goods-action/index.wxml
@@ -1,3 +1,3 @@
-<view class="van-goods-action custom-class">
+<view class="{{ rootClass }}">
   <slot />
 </view>
diff --git a/packages/mixins/basic.ts b/packages/mixins/basic.ts
index 50ede2fc..11236f47 100644
--- a/packages/mixins/basic.ts
+++ b/packages/mixins/basic.ts
@@ -1,6 +1,21 @@
 import { classNames } from '../common/class-names';
 
 export const basic = Behavior({
+  created() {
+    wx.getSystemInfo({
+      success: ({ model, screenHeight }) => {
+        const isIphoneX = /iphone x/i.test(model);
+        const isIphoneNew = /iPhone11/i.test(model) && screenHeight === 812;
+
+        if (isIphoneX || isIphoneNew) {
+          this.setData({
+            isIPhoneX: true
+          });
+        }
+      }
+    });
+  },
+
   methods: {
     classNames,
 
diff --git a/packages/popup/README.md b/packages/popup/README.md
index 5f14b0f0..53e02a20 100644
--- a/packages/popup/README.md
+++ b/packages/popup/README.md
@@ -54,6 +54,7 @@ Page({
 | custom-style | 自定义弹出层样式 | `String` | `` |
 | overlay-style | 自定义背景蒙层样式 | `String` | `` |
 | close-on-click-overlay | 点击蒙层是否关闭 Popup | `Boolean` | `true` |
+| safe-area-inset-bottom | 是否适配iPhoneX | `Boolean` | `true` |
 
 ### Event
 
diff --git a/packages/popup/index.less b/packages/popup/index.less
index 9fece23f..d57465b2 100644
--- a/packages/popup/index.less
+++ b/packages/popup/index.less
@@ -44,6 +44,10 @@
     bottom: auto;
     left: 0;
   }
+
+  &--safe {
+    padding-bottom: @safe-area-inset-bottom;
+  }
 }
 
 @keyframes van-center-enter {
diff --git a/packages/popup/index.ts b/packages/popup/index.ts
index 3eafdaad..d100fe0b 100644
--- a/packages/popup/index.ts
+++ b/packages/popup/index.ts
@@ -23,6 +23,20 @@ VantComponent({
     position: {
       type: String,
       value: 'center'
+    },
+    safeAreaInsetBottom: {
+      type: Boolean,
+      value: true
+    }
+  },
+
+  computed: {
+    popupClass() {
+      const { position, safeAreaInsetBottom, isIPhoneX } = this.data;
+      return this.classNames('custom-class', 'van-popup', {
+        [`van-popup--${position}`]: position,
+        [`van-popup--safe`]: isIPhoneX && safeAreaInsetBottom && position === 'bottom'
+      });
     }
   },
 
diff --git a/packages/popup/index.wxml b/packages/popup/index.wxml
index 95c07bbd..07bd1ae1 100644
--- a/packages/popup/index.wxml
+++ b/packages/popup/index.wxml
@@ -8,7 +8,7 @@
 />
 <view
   wx:if="{{ inited }}"
-  class="custom-class van-popup {{ position ? 'van-popup--' + position : '' }}"
+  class="{{ popupClass }}"
   style="z-index: {{ zIndex }}; -webkit-animation: van-{{ transition || position }}-{{ type }} {{ duration }}ms both; animation: van-{{ transition || position }}-{{ type }} {{ duration }}ms both; {{ display ? '' : 'display: none;' }}{{ customStyle }}"
   bind:animationend="onAnimationEnd"
 >
diff --git a/packages/submit-bar/README.md b/packages/submit-bar/README.md
index 71e23129..869e0423 100644
--- a/packages/submit-bar/README.md
+++ b/packages/submit-bar/README.md
@@ -74,6 +74,7 @@
 | disabled | 是否禁用按钮 |  `Boolean` | `false` |
 | loading | 是否显示加载中的按钮 |  `Boolean` | `false` |
 | currency | 货币符号 |  `String` | `¥` |
+| safe-area-inset-bottom | 是否适配iPhoneX | `Boolean` | `true` |
 
 ### Event
 
diff --git a/packages/submit-bar/index.less b/packages/submit-bar/index.less
index b692c372..10e1de0f 100644
--- a/packages/submit-bar/index.less
+++ b/packages/submit-bar/index.less
@@ -22,6 +22,10 @@
     height: 50px;
     background-color: @white;
     font-size: 14px;
+
+    &--safe {
+      padding-bottom: @safe-area-inset-bottom;
+    }
   }
 
   &__text {
diff --git a/packages/submit-bar/index.ts b/packages/submit-bar/index.ts
index 55bbeff0..8cf54459 100644
--- a/packages/submit-bar/index.ts
+++ b/packages/submit-bar/index.ts
@@ -22,6 +22,10 @@ VantComponent({
     buttonType: {
       type: String,
       value: 'danger'
+    },
+    safeAreaInsetBottom: {
+      type: Boolean,
+      value: true
     }
   },
 
@@ -37,6 +41,13 @@ VantComponent({
     tipStr() {
       const { tip } = this.data;
       return typeof tip === 'string' ? tip : '';
+    },
+
+    barClass() {
+      const { isIPhoneX, safeAreaInsetBottom } = this.data;
+      return this.classNames('van-submit-bar__bar', 'bar-class', {
+        'van-submit-bar__bar--safe': safeAreaInsetBottom && isIPhoneX
+      });
     }
   },
 
diff --git a/packages/submit-bar/index.wxml b/packages/submit-bar/index.wxml
index 53ae8335..a2bc998d 100644
--- a/packages/submit-bar/index.wxml
+++ b/packages/submit-bar/index.wxml
@@ -5,7 +5,7 @@
     {{ tipStr }}<slot name="tip" />
   </view>
 
-  <view class="van-submit-bar__bar bar-class">
+  <view class="{{ barClass }}">
     <slot />
     <view class="van-submit-bar__text">
       <block wx:if="{{ hasPrice }}">
diff --git a/packages/tabbar/README.md b/packages/tabbar/README.md
index d8547f5b..75851724 100644
--- a/packages/tabbar/README.md
+++ b/packages/tabbar/README.md
@@ -75,6 +75,7 @@ Page({
 | active | 当前选中标签的索引 | `Number` | - |
 | fixed | 是否固定在底部 | `Boolean` | `true` |
 | z-index | 元素 z-index | `Number` | `1` |
+| safe-area-inset-bottom | 是否适配iPhoneX | `Boolean` | `true` |
 
 ### Tabbar Event
 
diff --git a/packages/tabbar/index.less b/packages/tabbar/index.less
index 3fd7e4fc..c94aeb91 100644
--- a/packages/tabbar/index.less
+++ b/packages/tabbar/index.less
@@ -1,14 +1,18 @@
 @import '../common/style/var.less';
 
 .van-tabbar {
+  display: flex;
   width: 100%;
   height: 50px;
-  display: flex;
   background-color: @white;
 
   &--fixed {
-    left: 0;
-    bottom: 0;
     position: fixed;
+    bottom: 0;
+    left: 0;
+  }
+
+  &--safe {
+    padding-bottom: @safe-area-inset-bottom;
   }
 }
diff --git a/packages/tabbar/index.ts b/packages/tabbar/index.ts
index bc44e527..065395c2 100644
--- a/packages/tabbar/index.ts
+++ b/packages/tabbar/index.ts
@@ -27,6 +27,10 @@ VantComponent({
     zIndex: {
       type: Number,
       value: 1
+    },
+    safeAreaInsetBottom: {
+      type: Boolean,
+      value: true
     }
   },
 
@@ -35,6 +39,16 @@ VantComponent({
     currentActive: -1
   },
 
+  computed: {
+    tabbarClass() {
+      const { fixed, isIPhoneX, safeAreaInsetBottom } = this.data;
+      return this.classNames('custom-class', 'van-tabbar', 'van-hairline--top-bottom', {
+        'van-tabbar--fixed': fixed,
+        'van-tabbar--safe': isIPhoneX && safeAreaInsetBottom
+      });
+    }
+  },
+
   watch: {
     active(active) {
       this.setData({ currentActive: active });
diff --git a/packages/tabbar/index.wxml b/packages/tabbar/index.wxml
index 76b1b46b..b8eb8e47 100644
--- a/packages/tabbar/index.wxml
+++ b/packages/tabbar/index.wxml
@@ -1,5 +1,5 @@
 <view
-  class="custom-class van-tabbar van-hairline--top-bottom {{ fixed ? 'van-tabbar--fixed' : '' }}"
+  class="{{ tabbarClass }}"
   style="{{ zIndex ? 'z-index: ' + zIndex : '' }}"
 >
   <slot />