fix(ActionSheet): safe-area-inset-bottom not work

youzan · Feb 5, 2021 · abefdc8 · abefdc8
1 parent aeeeae8
commit abefdc8
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 4 deletions.
diff --git a/src/action-sheet/index.tsx b/src/action-sheet/index.tsx
@@ -157,6 +157,7 @@ export default createComponent({
         class={bem()}
         round={props.round}
         position="bottom"
+        safeAreaInsetBottom={props.safeAreaInsetBottom}
         {...{
           ...pick(props, popupPropKeys),
           'onUpdate:show': onUpdateShow,

diff --git a/src/action-sheet/test/__snapshots__/index.spec.js.snap b/src/action-sheet/test/__snapshots__/index.spec.js.snap
@@ -11,7 +11,7 @@ exports[`should render default slot correctly 1`] = `
   </div>
 </transition-stub>
 <transition-stub>
-  <div class="van-popup van-popup--round van-popup--bottom van-action-sheet">
+  <div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet">
     <div class="van-action-sheet__header">
       Title
       <i class="van-badge__wrapper van-icon van-icon-cross van-action-sheet__close">

diff --git a/src/action-sheet/test/index.spec.js b/src/action-sheet/test/index.spec.js
@@ -217,3 +217,22 @@ test('should emit click-overlay event and closed after clicking the overlay', ()
   expect(wrapper.emitted('update:show')[0][0]).toEqual(false);
   expect(onClickOverlay).toHaveBeenCalledTimes(1);
 });
+
+test('should allow to control safe-area with safe-area-inset-bottom prop', async () => {
+  const wrapper = mount(ActionSheet, {
+    props: {
+      show: true,
+    },
+  });
+
+  expect(wrapper.find('.van-action-sheet').classes()).toContain(
+    'van-popup--safe-area-inset-bottom'
+  );
+
+  await wrapper.setProps({
+    safeAreaInsetBottom: false,
+  });
+  expect(wrapper.find('.van-action-sheet').classes()).not.toContain(
+    'van-popup--safe-area-inset-bottom'
+  );
+});
diff --git a/src/nav-bar/test/index.spec.js b/src/nav-bar/test/index.spec.js
@@ -74,9 +74,7 @@ test('should have safe-area-inset-top class when using safe-area-inset-top prop'
     },
   });
 
-  expect(
-    wrapper.find('.van-nav-bar--safe-area-inset-top').exists()
-  ).toBeTruthy();
+  expect(wrapper.classes()).toContain('van-nav-bar--safe-area-inset-top');
 });
 
 test('should change z-index when using z-index prop', () => {