chore(ActionSheet): optimize dom (#7434)

* chore(ActionSheet): optimize dom

* chore: update snapshot

src/action-sheet/index.less

@@ -8,6 +8,12 @@
   overflow: hidden;
   color: @action-sheet-item-text-color;
 
+  &__content {
+    flex: 1;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
   &__item,
   &__cancel {
     display: block;
@@ -103,16 +109,4 @@
       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

@@ -75,12 +75,6 @@ function ActionSheet(
     }
   }
 
-  function Content() {
-    if (slots.default) {
-      return <div class={bem('content')}>{slots.default()}</div>;
-    }
-  }
-
   function Option(item: ActionSheetItem, index: number) {
     const { disabled, loading, callback } = item;
 
@@ -159,15 +153,13 @@ function ActionSheet(
       safeAreaInsetBottom={props.safeAreaInsetBottom}
       {...inherit(ctx, true)}
     >
-      <div class={bem('inner')}>
       {Header()}
       {Description()}
-        <div class={bem('main')}>
+      <div class={bem('content')}>
         {props.actions && props.actions.map(Option)}
-          {Content()}
+        {slots.default?.()}
       </div>
       {CancelText()}
-      </div>
     </Popup>
   );
 }

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

@@ -2,86 +2,66 @@
 
 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">
-  <div class="van-action-sheet__inner">
+  <div class="van-action-sheet__content"><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-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__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 class="van-action-sheet__content"></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__inner">
   <div class="van-action-sheet__header">Title</div>
-    <div class="van-action-sheet__main"></div>
+  <div class="van-action-sheet__content"></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">
-  <div class="van-action-sheet__inner">
+  <div class="van-action-sheet__content"><button type="button" class="van-action-sheet__item" style="color: red;"><span class="van-action-sheet__name">Option</span></button></div>
-    <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__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 class="van-action-sheet__content"><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__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 class="van-action-sheet__content"><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">
-  <div class="van-action-sheet__inner">
+  <div class="van-action-sheet__content"><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__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__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">
-  <div class="van-action-sheet__inner">
+  <div class="van-action-sheet__content"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button></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>
 `;