[new feature]: support safe-area-inset-top

#1327

example/pages/notify/index.js

@@ -11,7 +11,12 @@ Page({
       duration: 1000,
       text: '通知内容',
       selector: '#custom-selector',
-      backgroundColor: '#1989fa'
+      backgroundColor: '#1989fa',
+      safeAreaInsetTop: true
     });
+  },
+
+  onClickLeft() {
+    wx.navigateBack();
   }
 });

example/pages/notify/index.json

@@ -1,3 +1,4 @@
 {
-  "navigationBarTitleText": "Notify 消息通知"
+  "navigationBarTitleText": "Notify 消息通知",
+  "navigationStyle": "custom"
 }

example/pages/notify/index.wxml

@@ -1,3 +1,10 @@
+<van-nav-bar
+  title="Notify 消息通知"
+  left-text="返回"
+  left-arrow
+  bind:click-left="onClickLeft"
+/>
+
 <demo-block padding title="基础用法">
   <van-button bind:click="showNotify">显示消息通知</van-button>
 </demo-block>
@@ -6,6 +13,5 @@
   <van-button bind:click="showNotify2">显示自定义消息通知</van-button>
 </demo-block>
 
-<van-notify id="van-notify" />
+<van-notify id="van-notify" safe-area-inset-top />
 <van-notify id="custom-selector" />
- 

example/pages/popup/index.js

@@ -41,5 +41,9 @@ Page({
     setTimeout(() => {
       this.toggle('top');
     }, 2000);
+  },
+
+  onClickLeft() {
+    wx.navigateBack();
   }
 });

example/pages/popup/index.json

@@ -1,3 +1,4 @@
 {
-  "navigationBarTitleText": "Popup 弹出层"
+  "navigationBarTitleText": "Popup 弹出层",
+  "navigationStyle": "custom"
 }

example/pages/popup/index.wxml

@@ -1,3 +1,10 @@
+<van-nav-bar
+  title="Popup 弹出层"
+  left-text="返回"
+  left-arrow
+  bind:click-left="onClickLeft"
+/>
+
 <demo-block title="基础用法" padding>
   <van-button bind:click="togglePopup">弹出 Popup</van-button>
   <van-popup
@@ -28,6 +35,7 @@
   <van-popup
     show="{{ show.top }}"
     position="top"
+    safe-area-inset-top
     overlay="{{ false }}"
     custom-class="top"
     bind:close="toggleTopPopup"
@@ -40,6 +48,7 @@
   <van-popup
     show="{{ show.right }}"
     position="right"
+    safe-area-inset-top
     custom-class="right"
     bind:close="toggleRightPopup"
     bind:transitionEnd="onTransitionEnd"
@@ -50,6 +59,7 @@
     <van-popup
       show="{{ show.right2 }}"
       position="right"
+      safe-area-inset-top
       custom-class="right"
       bind:close="toggleRightPopup2"
       bind:transitionEnd="onTransitionEnd"

packages/action-sheet/README.md

@@ -88,7 +88,7 @@ Page({
 | cancel-text | 取消按钮文字 | `String` | - |
 | overlay | 是否显示遮罩层 | `Boolean` | - |
 | close-on-click-overlay | 点击遮罩是否关闭菜单 | `Boolean` | - |
-| safe-area-inset-bottom | 是否适配iPhoneX | `Boolean` | `true` |
+| safe-area-inset-bottom | 是否为iPhoneX留出底部安全距离 | `Boolean` | `true` |
 
 ### Event
 
@@ -110,14 +110,3 @@ Page({
 | disabled | 是否为禁用状态 |
 | className | 为对应列添加额外的 class 类名 |
 | openType | 微信开放能力，具体支持可参考 [微信官方文档](https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html) |
-
-### 更新日志
-
-| 版本 | 类型 | 内容 |
-|-----------|-----------|-----------|
-| 0.0.1 | feature | 新增组件 |
-| 0.3.0 | breaking change | 由 Actionsheet 重命名为 ActionSheet |
-| 0.3.0 | feature | 支持微信开放能力 |
-| 0.3.0 | bugfix | 修复 subname 属性不生效的问题 |
-| 0.3.3 | feature | 新增 z-index 属性 |
-| 0.3.4 | bugfix | 修复边框缺失的问题 |

packages/action-sheet/index.ts

@@ -1,8 +1,8 @@
 import { VantComponent } from '../common/component';
-import { iphonex } from '../mixins/iphonex';
+import { safeArea } from '../mixins/safe-area';
 
 VantComponent({
-  mixins: [iphonex],
+  mixins: [safeArea()],
 
   props: {
     show: Boolean,

packages/common/style/var.less

@@ -118,3 +118,6 @@
 @stepper-button-disabled-color: #f7f8fa;
 @stepper-input-disabled-color: @active-color;
 @stepper-border-radius: 4px;
+
+// NavBar
+@nav-bar-height: 44px;

packages/goods-action/README.md

@@ -68,7 +68,7 @@ Page({
 
 | 参数 | 说明 | 类型 | 默认值 |
 |-----------|-----------|-----------|-------------|
-| safe-area-inset-bottom | 是否适配iPhoneX | `Boolean` | `true` |
+| safe-area-inset-bottom | 是否为iPhoneX留出底部安全距离 | `Boolean` | `true` |
 
 ### GoodsActionIcon API
 

packages/goods-action/index.ts

@@ -1,6 +1,6 @@
 import { VantComponent } from '../common/component';
-import { iphonex } from '../mixins/iphonex';
+import { safeArea } from '../mixins/safe-area';
 
 VantComponent({
-  mixins: [iphonex]
+  mixins: [safeArea()]
 });

packages/mixins/iphonex.ts

@@ -1,34 +0,0 @@
-let isIPhoneX = null;
-
-function getIsIPhoneX() {
-  return new Promise((resolve, reject) => {
-    if (isIPhoneX !== null) {
-      resolve(isIPhoneX);
-    } else {
-      wx.getSystemInfo({
-        success: ({ model, screenHeight }) => {
-          const iphoneX = /iphone x/i.test(model);
-          const iphoneNew = /iPhone11/i.test(model) && screenHeight === 812;
-          isIPhoneX = iphoneX || iphoneNew;
-          resolve(isIPhoneX);
-        },
-        fail: reject
-      });
-    }
-  });
-}
-
-export const iphonex = Behavior({
-  properties: {
-    safeAreaInsetBottom: {
-      type: Boolean,
-      value: true
-    }
-  },
-
-  created() {
-    getIsIPhoneX().then(isIPhoneX => {
-      this.set({ isIPhoneX });
-    });
-  }
-});

packages/mixins/safe-area.ts

@@ -0,0 +1,47 @@
+let cache = null;
+
+function getSafeArea() {
+  return new Promise((resolve, reject) => {
+    if (cache != null) {
+      resolve(cache);
+    } else {
+      wx.getSystemInfo({
+        success: ({ model, screenHeight, statusBarHeight }) => {
+          const iphoneX = /iphone x/i.test(model);
+          const iphoneNew = /iPhone11/i.test(model) && screenHeight === 812;
+
+          cache = {
+            isIPhoneX: iphoneX || iphoneNew,
+            statusBarHeight
+          };
+
+          resolve(cache);
+        },
+        fail: reject
+      });
+    }
+  });
+}
+
+export const safeArea = ({
+  safeAreaInsetBottom = true,
+  safeAreaInsetTop = false
+} = {}) =>
+  Behavior({
+    properties: {
+      safeAreaInsetTop: {
+        type: Boolean,
+        value: safeAreaInsetTop
+      },
+      safeAreaInsetBottom: {
+        type: Boolean,
+        value: safeAreaInsetBottom
+      }
+    },
+
+    created() {
+      getSafeArea().then(({ isIPhoneX, statusBarHeight }) => {
+        this.set({ isIPhoneX, statusBarHeight });
+      });
+    }
+  });

packages/nav-bar/README.md

@@ -56,6 +56,7 @@ Page({
 | fixed | 是否固定在顶部 | `Boolean` | `false` |
 | border | 是否显示下边框 | `Boolean` | `true` |
 | z-index | 元素 z-index | `Number` | `1` |
+| safe-area-inset-top | 是否留出顶部安全距离（状态栏高度） | `Boolean` | `true` |
 
 ### Slot
 
@@ -78,9 +79,3 @@ Page({
 |-----------|-----------|
 | custom-class | 根节点样式类 |
 | title-class | 标题样式类 |
-
-### 更新日志
-
-| 版本 | 类型 | 内容 |
-|-----------|-----------|-----------|
-| 0.0.1 | feature | 新增组件 |

packages/nav-bar/index.less

@@ -2,8 +2,8 @@
 
 .van-nav-bar {
   position: relative;
-  height: 46px;
+  height: @nav-bar-height;
-  line-height: 46px;
+  line-height: @nav-bar-height;
   text-align: center;
   background-color: @white;
   user-select: none;

packages/nav-bar/index.ts

@@ -1,6 +1,9 @@
 import { VantComponent } from '../common/component';
+import { safeArea } from '../mixins/safe-area';
 
 VantComponent({
+  mixins: [safeArea({ safeAreaInsetTop: true })],
+
   classes: ['title-class'],
 
   props: {
@@ -15,7 +18,7 @@ VantComponent({
     },
     zIndex: {
       type: Number,
-      value: 1
+      value: 120
     }
   },
 

packages/nav-bar/index.wxml

@@ -1,6 +1,8 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <view
-  class="custom-class van-nav-bar {{ border ? 'van-hairline--bottom' : '' }} {{ fixed ? 'van-nav-bar--fixed' : '' }}"
+  class="{{ utils.bem('nav-bar', { fixed }) }} custom-class {{ border ? 'van-hairline--bottom' : '' }}"
-  style="z-index: {{ zIndex }}"
+  style="z-index: {{ zIndex }}; {{ safeAreaInsetTop ? 'padding-top: ' + statusBarHeight + 'px;' : '' }}"
 >
   <view class="van-nav-bar__left" bind:tap="onClickLeft">
     <block wx:if="{{ leftArrow || leftText }}">

packages/notify/README.md

@@ -49,9 +49,4 @@ Notify({
 | color | 字体颜色 | `String` | `#fff` | |
 | backgroundColor | 背景色 | `String` | `#f44` |
 | context | 选择器的选择范围，可以传入自定义组件的 this 作为上下文 | `Object` | 当前页面 |
-
+| safe-area-inset-top | 是否留出顶部安全距离（状态栏高度 + 导航栏高度） | `Boolean` | `false` |
-### 更新日志
-
-| 版本 | 类型 | 内容 |
-|-----------|-----------|-----------|
-| 0.0.1 | feature | 新增组件 |

packages/notify/index.less

@@ -11,4 +11,8 @@
   text-align: center;
   word-break: break-all;
   box-sizing: border-box;
+
+  &__safe-top {
+    height: @nav-bar-height;
+  }
 }

packages/notify/index.ts

@@ -1,7 +1,10 @@
 import { VantComponent } from '../common/component';
 import { RED } from '../common/color';
+import { safeArea } from '../mixins/safe-area';
 
 VantComponent({
+  mixins: [safeArea()],
+
   props: {
     text: String,
     color: {

packages/notify/index.wxml

@@ -2,7 +2,8 @@
   name="slide-down"
   show="{{ show }}"
   custom-class="van-notify"
-  custom-style="background-color:{{ backgroundColor }}; color: {{ color }}"
+  custom-style="background-color:{{ backgroundColor }}; color: {{ color }};"
 >
+  <view wx:if="{{ safeAreaInsetTop }}" class="van-notify__safe-top" style="padding-top: {{ statusBarHeight }}px"></view>
   {{ text }}
 </van-transition>

packages/notify/notify.ts

@@ -1,9 +1,13 @@
 import { isObj } from '../common/utils';
 
 type NotifyOptions = {
-  selector?: string;
+  text: string;
+  color?: string;
+  backgroundColor?: string;
   duration?: number;
+  selector?: string;
   context?: any;
+  safeAreaInsetTop?: boolean;
 };
 
 const defaultOptions = {
@@ -11,8 +15,8 @@ const defaultOptions = {
   duration: 3000
 };
 
-function parseOptions(text) {
+function parseOptions(text: NotifyOptions | string): NotifyOptions {
-  return isObj(text) ? text : { text };
+  return isObj(text) ? text as NotifyOptions : { text } as NotifyOptions;
 }
 
 function getContext() {
@@ -20,7 +24,7 @@ function getContext() {
   return pages[pages.length - 1];
 }
 
-export default function Notify(options: NotifyOptions = {}) {
+export default function Notify(options: NotifyOptions | string) {
   options = Object.assign({}, defaultOptions, parseOptions(options));
 
   const context = options.context || getContext();

packages/popup/README.md

@@ -54,7 +54,8 @@ Page({
 | custom-style | 自定义弹出层样式 | `String` | `` |
 | overlay-style | 自定义背景蒙层样式 | `String` | `` |
 | close-on-click-overlay | 点击蒙层是否关闭 Popup | `Boolean` | `true` |
-| safe-area-inset-bottom | 是否适配iPhoneX | `Boolean` | `true` |
+| safe-area-inset-bottom | 是否为iPhoneX留出底部安全距离 | `Boolean` | `true` |
+| safe-area-inset-top | 是否留出顶部安全距离（状态栏高度 + 导航栏高度） | `Boolean` | `false` |
 
 ### Event
 

packages/popup/index.less

@@ -50,9 +50,20 @@
     transform: translate3d(0, -50%, 0);
   }
 
-  &--safe {
+  &--bottom&--safe {
     padding-bottom: @safe-area-inset-bottom;
   }
+
+  &--left &__safe-top,
+  &--right &__safe-top,
+  &--top &__safe-top {
+    height: @nav-bar-height;
+  }
+
+  &--center &__safe-top,
+  &--bottom &__safe-top {
+    padding-top: 0 !important;
+  }
 }
 
 .van-scale-enter-active,

packages/popup/index.ts

@@ -1,6 +1,6 @@
 import { VantComponent } from '../common/component';
 import { transition } from '../mixins/transition';
-import { iphonex } from '../mixins/iphonex';
+import { safeArea } from '../mixins/safe-area';
 
 VantComponent({
   classes: [
@@ -12,7 +12,7 @@ VantComponent({
     'leave-to-class'
   ],
 
-  mixins: [transition(false), iphonex],
+  mixins: [transition(false), safeArea()],
 
   props: {
     transition: {

packages/popup/index.wxml

@@ -11,9 +11,10 @@
 />
 <view
   wx:if="{{ inited }}"
-  class="custom-class {{ classes }} {{ utils.bem('popup', [position, { safe: isIPhoneX && safeAreaInsetBottom && position === 'bottom' }]) }}"
+  class="custom-class {{ classes }} {{ utils.bem('popup', [position, { safe: isIPhoneX && safeAreaInsetBottom }]) }}"
   style="z-index: {{ zIndex }}; -webkit-transition-duration:{{ currentDuration }}ms; transition-duration:{{ currentDuration }}ms; {{ display ? '' : 'display: none;' }} {{ customStyle }}"
   bind:transitionend="onTransitionEnd"
 >
+  <view wx:if="{{ safeAreaInsetTop }}" class="van-popup__safe-top" style="padding-top: {{ statusBarHeight }}px;"></view>
   <slot />
 </view>

packages/submit-bar/README.md

@@ -74,7 +74,7 @@
 | disabled | 是否禁用按钮 |  `Boolean` | `false` |
 | loading | 是否显示加载中的按钮 |  `Boolean` | `false` |
 | currency | 货币符号 |  `String` | `¥` |
-| safe-area-inset-bottom | 是否适配iPhoneX | `Boolean` | `true` |
+| safe-area-inset-bottom | 是否为iPhoneX留出底部安全距离 | `Boolean` | `true` |
 
 ### Event
 
@@ -98,10 +98,3 @@
 | price-class | 价格样式类 |
 | button-class | 按钮样式类 |
 | bar-class | 订单栏样式类 |
-
-### 更新日志
-
-| 版本 | 类型 | 内容 |
-|-----------|-----------|-----------|
-| 0.3.3 | feature | 新增组件 |
-| 0.3.4 | bugfix | 修复金额为空时仍然显示合计的问题 |

packages/submit-bar/index.ts

@@ -1,8 +1,8 @@
 import { VantComponent } from '../common/component';
-import { iphonex } from '../mixins/iphonex';
+import { safeArea } from '../mixins/safe-area';
 
 VantComponent({
-  mixins: [iphonex],
+  mixins: [safeArea()],
 
   classes: [
     'bar-class',

packages/tabbar/README.md

@@ -109,7 +109,7 @@ Page({
 | active-color | 选中标签的颜色 | `String` | `#1989fa` |
 | fixed | 是否固定在底部 | `Boolean` | `true` |
 | z-index | 元素 z-index | `Number` | `1` |
-| safe-area-inset-bottom | 是否适配iPhoneX | `Boolean` | `true` |
+| safe-area-inset-bottom | 是否为iPhoneX留出底部安全距离 | `Boolean` | `true` |
 
 ### Tabbar Event
 

packages/tabbar/index.ts

@@ -1,8 +1,8 @@
 import { VantComponent } from '../common/component';
-import { iphonex } from '../mixins/iphonex';
+import { safeArea } from '../mixins/safe-area';
 
 VantComponent({
-  mixins: [iphonex],
+  mixins: [safeArea()],
 
   relation: {
     name: 'tabbar-item',