refactor: compatible with iphone by env

example/app.json

@@ -1,18 +1,4 @@
 {
-  "tabBar": {
-    "custom": true,
-    "color": "#000000",
-    "selectedColor": "#000000",
-    "backgroundColor": "#000000",
-    "list": [
-      {
-        "pagePath": "pages/tabbar/index"
-      },
-      {
-        "pagePath": "pages/tabbar1/index"
-      }
-    ]
-  },
   "pages": [
     "pages/dashboard/index",
     "pages/action-sheet/index",
@@ -39,7 +25,6 @@
     "pages/sidebar/index",
     "pages/tab/index",
     "pages/tabbar/index",
-    "pages/tabbar1/index",
     "pages/tag/index",
     "pages/toast/index",
     "pages/transition/index",

example/custom-tab-bar/index.js

@@ -1,33 +0,0 @@
-Component({
-  data: {
-    active: 0,
-    list: [
-      {
-        icon: 'home-o',
-        text: 'tabbar示例1',
-        url: '/pages/tabbar/index'
-      },
-      {
-        icon: 'search',
-        text: 'tabbar示例2',
-        url: '/pages/tabbar1/index'
-      }
-    ]
-  },
-
-  methods: {
-    onChange(event) {
-      this.setData({ active: event.detail });
-      wx.switchTab({
-        url: this.data.list[event.detail].url
-      });
-    },
-
-    init() {
-      const page = getCurrentPages().pop();
-      this.setData({
-        active: this.data.list.findIndex(item => item.url === `/${page.route}`)
-      });
-    }
-  }
-});

example/custom-tab-bar/index.json

@@ -1,7 +0,0 @@
-{
-  "component": true,
-  "usingComponents": {
-    "van-tabbar": "../dist/tabbar/index",
-    "van-tabbar-item": "../dist/tabbar-item/index"
-  }
-}

example/custom-tab-bar/index.wxml

@@ -1,5 +0,0 @@
-<van-tabbar active="{{ active }}" bind:change="onChange">
-  <van-tabbar-item wx:for="{{ list }}" wx:key="text" icon="{{ item.icon }}">
-    {{ item.text }}
-  </van-tabbar-item>
-</van-tabbar>

example/pages/tabbar/index.js

@@ -7,10 +7,6 @@ Page({
     active3: 0
   },
 
-  onShow() {
-    this.getTabBar().init();
-  },
-
   onChange(event) {
     const { key } = event.currentTarget.dataset;
     this.setData({ [key]: event.detail });

example/pages/tabbar1/index.js

@@ -1,23 +0,0 @@
-import Page from '../../common/page';
-
-Page({
-  data: {
-    active: 0,
-    active2: 0,
-    icon: {
-      normal:
-        'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png',
-      active:
-        'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png'
-    }
-  },
-
-  onShow() {
-    this.getTabBar().init();
-  },
-
-  onChange(event) {
-    const { key } = event.currentTarget.dataset;
-    this.setData({ [key]: event.detail });
-  }
-});

example/pages/tabbar1/index.json

@@ -1,3 +0,0 @@
-{
-  "navigationBarTitleText": "Tabbar 标签栏"
-}

example/pages/tabbar1/index.wxml

@@ -1,43 +0,0 @@
-
-<demo-block title="自定义图标">
-  <van-tabbar
-    active="{{ active2 }}"
-    data-key="active2"
-    custom-class="tabbar"
-    safe-area-inset-bottom="{{ false }}"
-    bind:change="onChange"
-  >
-    <van-tabbar-item info="3">
-      <image
-        slot="icon"
-        src="{{ icon.normal }}"
-        mode="aspectFit"
-      />
-      <image
-        slot="icon-active"
-        src="{{ icon.active }}"
-        mode="aspectFit"
-      />
-      自定义
-    </van-tabbar-item>
-    <van-tabbar-item icon="search">标签</van-tabbar-item>
-    <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
-  </van-tabbar>
-</demo-block>
-
-<demo-block title="自定义颜色">
-  <van-tabbar
-    active="{{ active }}"
-    data-key="active"
-    custom-class="tabbar"
-    safe-area-inset-bottom="{{ false }}"
-    active-color="#07c160"
-    inactive-color="#000"
-    bind:change="onChange"
-  >
-    <van-tabbar-item icon="home-o">标签</van-tabbar-item>
-    <van-tabbar-item icon="search">标签</van-tabbar-item>
-    <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
-    <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
-  </van-tabbar>
-</demo-block>

example/pages/tabbar1/index.wxss

@@ -1,3 +0,0 @@
-.tabbar {
-  position: relative !important;
-}

packages/action-sheet/index.ts

@@ -1,10 +1,7 @@
 import { VantComponent } from '../common/component';
-import { safeArea } from '../mixins/safe-area';
 import { Weapp } from 'definitions/weapp';
 
 VantComponent({
-  mixins: [safeArea()],
-
   props: {
     show: Boolean,
     title: String,
@@ -32,6 +29,10 @@ VantComponent({
     closeOnClickAction: {
       type: Boolean,
       value: true
+    },
+    safeAreaInsetBottom: {
+      type: Boolean,
+      value: true
     }
   },
 

packages/common/style/var.less

@@ -193,9 +193,6 @@
 @toast-default-width: 90px;
 @toast-default-min-height: 90px;
 
-// iPhoneX
-@safe-area-inset-bottom: 34px;
-
 // GridItem
 @grid-item-content-padding: @padding-md @padding-xs;
 @grid-item-content-background-color: @white;

packages/goods-action/index.less

@@ -10,6 +10,7 @@
   .theme(background-color, '@white');
 
   &--safe {
-    .theme(padding-bottom, '@safe-area-inset-bottom');
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
   }
 }

packages/goods-action/index.ts

@@ -1,6 +1,10 @@
 import { VantComponent } from '../common/component';
-import { safeArea } from '../mixins/safe-area';
 
 VantComponent({
-  mixins: [safeArea()]
+  props: {
+    safeAreaInsetBottom: {
+      type: Boolean,
+      value: true
+    }
+  }
 });

packages/goods-action/index.wxml

@@ -1,5 +1,5 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
 
-<view class="custom-class {{ utils.bem('goods-action', { safe: isIPhoneX && safeAreaInsetBottom }) }}">
+<view class="custom-class {{ utils.bem('goods-action', { safe: safeAreaInsetBottom }) }}">
   <slot />
 </view>

packages/mixins/safe-area.ts

@@ -1,47 +0,0 @@
-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.setData({ isIPhoneX, statusBarHeight });
-      });
-    }
-  });

packages/nav-bar/index.less

@@ -9,6 +9,11 @@
   .theme(line-height, '@nav-bar-height');
   .theme(background-color, '@white');
 
+  &--safe {
+    padding-top: constant(safe-area-inset-top);
+    padding-top: env(safe-area-inset-top);
+  }
+
   &__text {
     display: inline-block;
     margin: 0 -15px;

packages/nav-bar/index.ts

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

packages/nav-bar/index.wxml

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

packages/notify/index.less

@@ -2,29 +2,37 @@
 @import '../common/style/theme.less';
 
 .van-notify {
-  position: fixed;
-  top: 0;
-  box-sizing: border-box;
-  width: 100%;
   text-align: center;
   word-wrap: break-word;
   .theme(padding, '@notify-padding');
   .theme(font-size, '@notify-font-size');
   .theme(line-height, '@notify-line-height');
 
+  &__container {
+    position: fixed;
+    top: 0;
+    box-sizing: border-box;
+    width: 100%;
+  }
+
+  &__safe-area {
+    height: constant(safe-area-inset-top);
+    height: env(safe-area-inset-top);
+  }
+
   &--primary {
-    .theme(background-color, "@notify-primary-background-color");
+    .theme(background-color, '@notify-primary-background-color');
   }
 
   &--success {
-    .theme(background-color, "@notify-success-background-color");
+    .theme(background-color, '@notify-success-background-color');
   }
 
   &--danger {
-    .theme(background-color, "@notify-danger-background-color");
+    .theme(background-color, '@notify-danger-background-color');
   }
 
   &--warning {
-    .theme(background-color, "@notify-warning-background-color");
+    .theme(background-color, '@notify-warning-background-color');
   }
 }

packages/notify/index.ts

@@ -2,11 +2,8 @@
 import { Weapp } from 'definitions/weapp';
 import { VantComponent } from '../common/component';
 import { WHITE } from '../common/color';
-import { safeArea } from '../mixins/safe-area';
 
 VantComponent({
-  mixins: [safeArea()],
-
   props: {
     message: String,
     background: String,
@@ -25,6 +22,10 @@ VantComponent({
     zIndex: {
       type: Number,
       value: 110
+    },
+    safeAreaInsetTop: {
+      type: Boolean,
+      value: false
     }
   },
 

packages/notify/index.wxml

@@ -1,10 +1,15 @@
 <van-transition
   name="slide-down"
   show="{{ show }}"
-  custom-class="van-notify van-notify--{{ type }}"
+  custom-class="van-notify__container"
-  custom-style="background:{{ background }}; color: {{ color }}; z-index: {{ zIndex }};"
+  custom-style="z-index: {{ zIndex }};"
   bind:tap="onTap"
 >
-  <view wx:if="{{ safeAreaInsetTop }}" style="padding-top: {{ statusBarHeight }}px"></view>
+  <view
-  <text>{{ message }}</text>
+    class="van-notify van-notify--{{ type }}"
+    style="background:{{ background }};color:{{ color }};"
+  >
+    <view wx:if="{{ safeAreaInsetTop }}" class="van-notify__safe-area"></view>
+    <text>{{ message }}</text>
+  </view>
 </van-transition>

packages/popup/index.less

@@ -84,7 +84,13 @@
   }
 
   &--bottom&--safe {
-    .theme(padding-bottom, '@safe-area-inset-bottom');
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+
+  &--safeTop {
+    padding-top: constant(safe-area-inset-top);
+    padding-top: env(safe-area-inset-top);
   }
 
   &__close-icon {

packages/popup/index.ts

@@ -1,6 +1,5 @@
 import { VantComponent } from '../common/component';
 import { transition } from '../mixins/transition';
-import { safeArea } from '../mixins/safe-area';
 
 VantComponent({
   classes: [
@@ -12,7 +11,7 @@ VantComponent({
     'leave-to-class'
   ],
 
-  mixins: [transition(false), safeArea()],
+  mixins: [transition(false)],
 
   props: {
     round: Boolean,
@@ -47,6 +46,14 @@ VantComponent({
       type: String,
       value: 'center',
       observer: 'observeClass'
+    },
+    safeAreaInsetBottom: {
+      type: Boolean,
+      value: true
+    },
+    safeAreaInsetTop: {
+      type: Boolean,
+      value: false
     }
   },
 

packages/popup/index.wxml

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

packages/submit-bar/index.less

@@ -42,7 +42,8 @@
     .theme(background-color, '@submit-bar-background-color');
 
     &--safe {
-      .theme(padding-bottom, '@safe-area-inset-bottom');
+      padding-bottom: constant(safe-area-inset-bottom);
+      padding-bottom: env(safe-area-inset-bottom);
     }
   }
 

packages/submit-bar/index.ts

@@ -1,10 +1,7 @@
 import { VantComponent } from '../common/component';
-import { safeArea } from '../mixins/safe-area';
 import { Weapp } from 'definitions/weapp';
 
 VantComponent({
-  mixins: [safeArea()],
-
   classes: [
     'bar-class',
     'price-class',
@@ -39,7 +36,11 @@ VantComponent({
       value: 2,
       observer: 'updatePrice'
     },
-    suffixLabel: String
+    suffixLabel: String,
+    safeAreaInsetBottom: {
+      type: Boolean,
+      value: true
+    }
   },
 
   methods: {

packages/submit-bar/index.wxml

@@ -16,7 +16,7 @@
     <slot name="tip" />
   </view>
 
-  <view class="bar-class {{ utils.bem('submit-bar__bar', { safe: safeAreaInsetBottom && isIPhoneX }) }}">
+  <view class="bar-class {{ utils.bem('submit-bar__bar', { safe: safeAreaInsetBottom }) }}">
     <slot />
     <view wx:if="{{ hasPrice }}" class="van-submit-bar__text">
       <text>{{ label || '合计：' }}</text>

packages/tabbar/index.less

@@ -14,6 +14,7 @@
   }
 
   &--safe {
-    .theme(padding-bottom, '@safe-area-inset-bottom');
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
   }
 }

packages/tabbar/index.ts

@@ -1,9 +1,6 @@
 import { VantComponent } from '../common/component';
-import { safeArea } from '../mixins/safe-area';
 
 VantComponent({
-  mixins: [safeArea()],
-
   relation: {
     name: 'tabbar-item',
     type: 'descendant',
@@ -44,6 +41,10 @@ VantComponent({
     zIndex: {
       type: Number,
       value: 1
+    },
+    safeAreaInsetBottom: {
+      type: Boolean,
+      value: true
     }
   },
 

packages/tabbar/index.wxml

@@ -1,7 +1,7 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
 
 <view
-  class="custom-class {{ border ? 'van-hairline--top-bottom' : '' }} {{ utils.bem('tabbar', { fixed, safe: isIPhoneX && safeAreaInsetBottom }) }}"
+  class="custom-class {{ border ? 'van-hairline--top-bottom' : '' }} {{ utils.bem('tabbar', { fixed, safe: safeAreaInsetBottom }) }}"
   style="{{ zIndex ? 'z-index: ' + zIndex : '' }}"
 >
   <slot />