style(action-sheet): make sure the layout is correct when actions is to much (#7401)

src/action-sheet/index.less

@@ -2,7 +2,10 @@
 @import '../style/mixins/hairline';
 
 .van-action-sheet {
+  display: flex;
+  flex-direction: column;
   max-height: @action-sheet-max-height;
+  overflow: hidden;
   color: @action-sheet-item-text-color;
 
   &__item,
@@ -42,6 +45,8 @@
   }
 
   &__cancel {
+    flex-shrink: 0;
+    box-sizing: border-box;
     color: @action-sheet-cancel-text-color;
   }
 
@@ -59,6 +64,7 @@
   }
 
   &__header {
+    flex-shrink: 0;
     font-weight: @font-weight-bold;
     font-size: @action-sheet-header-font-size;
     line-height: @action-sheet-header-height;
@@ -67,6 +73,7 @@
 
   &__description {
     position: relative;
+    flex-shrink: 0;
     padding: 20px @padding-md;
     color: @action-sheet-description-color;
     font-size: @action-sheet-description-font-size;
@@ -96,4 +103,16 @@
       color: @action-sheet-close-icon-active-color;
     }
   }
+
+  &__inner {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  &__main {
+    flex: 1;
+    overflow-y: scroll;
+  }
 }

src/action-sheet/index.tsx

@@ -159,11 +159,15 @@ function ActionSheet(
       safeAreaInsetBottom={props.safeAreaInsetBottom}
       {...inherit(ctx, true)}
     >
-      {Header()}
-      {Description()}
-      {props.actions && props.actions.map(Option)}
-      {Content()}
-      {CancelText()}
+      <div class={bem('inner')}>
+        {Header()}
+        {Description()}
+        <div class={bem('main')}>
+          {props.actions && props.actions.map(Option)}
+          {Content()}
+        </div>
+        {CancelText()}
+      </div>
     </Popup>
   );
 }

src/action-sheet/test/__snapshots__/index.spec.js.snap

@@ -1,53 +1,87 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`callback events 1`] = `
-<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-action-sheet__item--disabled"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-action-sheet__item--loading">
-    <div class="van-loading van-loading--circular van-action-sheet__loading-icon"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
-  </button><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span>
-    <div class="van-action-sheet__subname">Subname</div></button>
-  <div class="van-action-sheet__gap"></div><button type="button" class="van-action-sheet__cancel">Cancel</button>
+<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
+  <div class="van-action-sheet__inner">
+    <div class="van-action-sheet__main"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-action-sheet__item--disabled"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-action-sheet__item--loading">
+        <div class="van-loading van-loading--circular van-action-sheet__loading-icon"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+      </button><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span>
+        <div class="van-action-sheet__subname">Subname</div></button></div>
+    <div class="van-action-sheet__gap"></div><button type="button" class="van-action-sheet__cancel">Cancel</button>
+  </div>
 </div>
 `;
 
 exports[`close-icon prop 1`] = `
 <div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
-  <div class="van-action-sheet__header">Title<i class="van-icon van-icon-cross van-action-sheet__close">
-      <!----></i></div>
+  <div class="van-action-sheet__inner">
+    <div class="van-action-sheet__header">Title<i class="van-icon van-icon-cross van-action-sheet__close">
+        <!----></i></div>
+    <div class="van-action-sheet__main"></div>
+  </div>
 </div>
 `;
 
 exports[`closeable prop 1`] = `
 <div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
-  <div class="van-action-sheet__header">Title</div>
+  <div class="van-action-sheet__inner">
+    <div class="van-action-sheet__header">Title</div>
+    <div class="van-action-sheet__main"></div>
+  </div>
 </div>
 `;
 
-exports[`color option 1`] = `<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item" style="color: red;"><span class="van-action-sheet__name">Option</span></button></div>`;
+exports[`color option 1`] = `
+<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
+  <div class="van-action-sheet__inner">
+    <div class="van-action-sheet__main"><button type="button" class="van-action-sheet__item" style="color: red;"><span class="van-action-sheet__name">Option</span></button></div>
+  </div>
+</div>
+`;
 
 exports[`description prop 1`] = `
 <div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
-  <div class="van-action-sheet__description">This is a description</div><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button>
+  <div class="van-action-sheet__inner">
+    <div class="van-action-sheet__description">This is a description</div>
+    <div class="van-action-sheet__main"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button></div>
+  </div>
 </div>
 `;
 
 exports[`description slot 1`] = `
 <div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
-  <div class="van-action-sheet__description">Custom Description</div><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button>
+  <div class="van-action-sheet__inner">
+    <div class="van-action-sheet__description">Custom Description</div>
+    <div class="van-action-sheet__main"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button></div>
+  </div>
 </div>
 `;
 
 exports[`disable lazy-render 1`] = `
-<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" style="display: none;" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button>
-  <div class="van-action-sheet__gap"></div><button type="button" class="van-action-sheet__cancel">Cancel</button>
+<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" style="display: none;" name="van-popup-slide-bottom">
+  <div class="van-action-sheet__inner">
+    <div class="van-action-sheet__main"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button></div>
+    <div class="van-action-sheet__gap"></div><button type="button" class="van-action-sheet__cancel">Cancel</button>
+  </div>
 </div>
 `;
 
 exports[`render title and default slot 1`] = `
 <div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
-  <div class="van-action-sheet__header">Title<i class="van-icon van-icon-cross van-action-sheet__close">
-      <!----></i></div>
-  <div class="van-action-sheet__content">Default</div>
+  <div class="van-action-sheet__inner">
+    <div class="van-action-sheet__header">Title<i class="van-icon van-icon-cross van-action-sheet__close">
+        <!----></i></div>
+    <div class="van-action-sheet__main">
+      <div class="van-action-sheet__content">Default</div>
+    </div>
+  </div>
 </div>
 `;
 
-exports[`round prop 1`] = `<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button></div>`;
+exports[`round prop 1`] = `
+<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
+  <div class="van-action-sheet__inner">
+    <div class="van-action-sheet__main"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button></div>
+  </div>
+</div>
+`;