feat(NavBar): add safe-area-inset-top prop

youzan · Nov 8, 2020 · be25a47 · HydeSong · Nov 10, 2020 · HydeSong
1 parent f07d8e6
commit be25a47
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 36 deletions.
diff --git a/src/nav-bar/README.md b/src/nav-bar/README.md
@@ -63,6 +63,7 @@ export default {
 | fixed | Whether to fixed top | _boolean_ | `false` |
 | placeholder `v2.5.9` | Whether to generage a placeholder element when fixed | _boolean_ | `false` |
 | z-index | Z-index | _number \| string_ | `1` |
+| safe-area-inset-top `v2.10.13` | Whether to enable top safe area adaptation | _boolean_ | `false` |
 
 ### Slots
 

diff --git a/src/nav-bar/README.zh-CN.md b/src/nav-bar/README.zh-CN.md
@@ -64,7 +64,8 @@ export default {
 | border | 是否显示下边框 | _boolean_ | `true` |
 | fixed | 是否固定在顶部 | _boolean_ | `false` |
 | placeholder `v2.5.9` | 固定在顶部时，是否在标签位置生成一个等高的占位元素 | _boolean_ | `false` |
-| z-index | 元素 z-index | _number \| string_ | `1` |
+| z-index | 导航栏 z-index | _number \| string_ | `1` |
+| safe-area-inset-top `v2.10.13` | 是否开启顶部安全区适配 | _boolean_ | `false` |
 
 ### Slots
 

diff --git a/src/nav-bar/index.js b/src/nav-bar/index.js
@@ -16,6 +16,7 @@ export default createComponent({
     rightText: String,
     leftArrow: Boolean,
     placeholder: Boolean,
+    safeAreaInsetTop: Boolean,
     border: {
       type: Boolean,
       default: true,
@@ -65,17 +66,31 @@ export default createComponent({
         <div
           ref="navBar"
           style={{ zIndex: this.zIndex }}
-          class={[bem({ fixed: this.fixed }), { [BORDER_BOTTOM]: this.border }]}
+          class={[
+            bem({
+              fixed: this.fixed,
+              'safe-area-inset-top': this.safeAreaInsetTop,
+            }),
+            {
+              [BORDER_BOTTOM]: this.border,
+            },
+          ]}
         >
-          {this.hasLeft() && <div class={bem('left')} onClick={this.onClickLeft}>
-            {this.genLeft()}
-          </div>}
-          <div class={[bem('title'), 'van-ellipsis']}>
-            {this.slots('title') || this.title}
+          <div class={bem('content')}>
+            {this.hasLeft() && (
+              <div class={bem('left')} onClick={this.onClickLeft}>
+                {this.genLeft()}
+              </div>
+            )}
+            <div class={[bem('title'), 'van-ellipsis']}>
+              {this.slots('title') || this.title}
+            </div>
+            {this.hasRight() && (
+              <div class={bem('right')} onClick={this.onClickRight}>
+                {this.genRight()}
+              </div>
+            )}
           </div>
-          {this.hasRight() && <div class={bem('right')} onClick={this.onClickRight}>
-            {this.genRight()}
-          </div>}
         </div>
       );
     },

diff --git a/src/nav-bar/index.less b/src/nav-bar/index.less
@@ -1,32 +1,40 @@
 @import '../style/var';
 
 .van-nav-bar {
-  position: relative;
   z-index: @nav-bar-z-index;
-  display: flex;
-  align-items: center;
-  height: @nav-bar-height;
   line-height: 1.5;
   text-align: center;
   background-color: @nav-bar-background-color;
   user-select: none;
 
+  &--fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+  }
+
+  &--safe-area-inset-top {
+    padding-top: constant(safe-area-inset-bottom);
+    padding-top: env(safe-area-inset-bottom);
+  }
+
   .van-icon {
     color: @nav-bar-icon-color;
   }
 
+  &__content {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: @nav-bar-height;
+  }
+
   &__arrow {
     margin-right: @padding-base;
     font-size: @nav-bar-arrow-size;
   }
 
-  &--fixed {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-  }
-
   &__title {
     max-width: 60%;
     margin: 0 auto;

diff --git a/src/nav-bar/test/__snapshots__/index.spec.js.snap b/src/nav-bar/test/__snapshots__/index.spec.js.snap
@@ -1,23 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`placeholder prop 1`] = `
-<div class="van-nav-bar__placeholder" style="height: 50px;">
-  <div class="van-nav-bar van-nav-bar--fixed van-hairline--bottom">
+exports[`should allow render left/right slot 1`] = `
+<div class="van-nav-bar van-hairline--bottom">
+  <div class="van-nav-bar__content">
+    <div class="van-nav-bar__left">Custom Left</div>
     <div class="van-nav-bar__title van-ellipsis"></div>
+    <div class="van-nav-bar__right">Custom Right</div>
   </div>
 </div>
 `;
 
-exports[`render left & right slot 1`] = `
+exports[`should allow render title slot 1`] = `
 <div class="van-nav-bar van-hairline--bottom">
-  <div class="van-nav-bar__left">Custom Left</div>
-  <div class="van-nav-bar__title van-ellipsis"></div>
-  <div class="van-nav-bar__right">Custom Right</div>
+  <div class="van-nav-bar__content">
+    <div class="van-nav-bar__title van-ellipsis">Custom Title</div>
+  </div>
 </div>
 `;
 
-exports[`render title slot 1`] = `
-<div class="van-nav-bar van-hairline--bottom">
-  <div class="van-nav-bar__title van-ellipsis">Custom Title</div>
+exports[`should render placeholder element when enabling placeholder prop 1`] = `
+<div class="van-nav-bar__placeholder" style="height: 50px;">
+  <div class="van-nav-bar van-nav-bar--fixed van-hairline--bottom">
+    <div class="van-nav-bar__content">
+      <div class="van-nav-bar__title van-ellipsis"></div>
+    </div>
+  </div>
 </div>
 `;
diff --git a/src/nav-bar/test/index.spec.js b/src/nav-bar/test/index.spec.js
@@ -1,7 +1,7 @@
 import NavBar from '..';
 import { mount, mockGetBoundingClientRect } from '../../../test';
 
-test('render left & right slot', () => {
+test('should allow render left/right slot', () => {
   const wrapper = mount(NavBar, {
     scopedSlots: {
       left: () => 'Custom Left',
@@ -12,7 +12,7 @@ test('render left & right slot', () => {
   expect(wrapper).toMatchSnapshot();
 });
 
-test('render title slot', () => {
+test('should allow render title slot', () => {
   const wrapper = mount(NavBar, {
     scopedSlots: {
       title: () => 'Custom Title',
@@ -22,7 +22,7 @@ test('render title slot', () => {
   expect(wrapper).toMatchSnapshot();
 });
 
-test('placeholder prop', () => {
+test('should render placeholder element when enabling placeholder prop', () => {
   const restore = mockGetBoundingClientRect({ height: 50 });
 
   const wrapper = mount(NavBar, {
@@ -37,7 +37,7 @@ test('placeholder prop', () => {
   restore();
 });
 
-test('click-left event', () => {
+test('should emit click-left event when clicking left text', () => {
   const wrapper = mount(NavBar, {
     propsData: {
       leftText: 'left',
@@ -48,7 +48,7 @@ test('click-left event', () => {
   expect(wrapper.emitted('click-left')).toBeTruthy();
 });
 
-test('click-right event', () => {
+test('should emit click-right event when clicking right text', () => {
   const wrapper = mount(NavBar, {
     propsData: {
       rightText: 'right',
@@ -58,3 +58,13 @@ test('click-right event', () => {
   wrapper.find('.van-nav-bar__right').trigger('click');
   expect(wrapper.emitted('click-right')).toBeTruthy();
 });
+
+test('should add safe-area-inset-top classname when using safe-area-inset-top prop', () => {
+  const wrapper = mount(NavBar, {
+    propsData: {
+      safeAreaInsetTop: true,
+    },
+  });
+
+  expect(wrapper.contains('.van-nav-bar--safe-area-inset-top')).toBeTruthy();
+});