From 0cb55c33e06bec985f77100fa4fdff0c34254c2d Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Thu, 29 Oct 2020 21:57:11 +0800
Subject: [PATCH] chore(ActionSheet): optimize dom (#7434)

* chore(ActionSheet): optimize dom

* chore: update snapshot
---
 src/action-sheet/index.less                   | 18 ++----
 src/action-sheet/index.tsx                    | 20 ++----
 .../test/__snapshots__/index.spec.js.snap     | 62 +++++++------------
 3 files changed, 33 insertions(+), 67 deletions(-)

diff --git a/src/action-sheet/index.less b/src/action-sheet/index.less
index d8b9fe81f..9928c7bcb 100644
--- a/src/action-sheet/index.less
+++ b/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;
-  }
 }
diff --git a/src/action-sheet/index.tsx b/src/action-sheet/index.tsx
index 94f77860d..590bd90b3 100644
--- a/src/action-sheet/index.tsx
+++ b/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')}>
-          {props.actions && props.actions.map(Option)}
-          {Content()}
-        </div>
-        {CancelText()}
+      {Header()}
+      {Description()}
+      <div class={bem('content')}>
+        {props.actions && props.actions.map(Option)}
+        {slots.default?.()}
       </div>
+      {CancelText()}
     </Popup>
   );
 }
diff --git a/src/action-sheet/test/__snapshots__/index.spec.js.snap b/src/action-sheet/test/__snapshots__/index.spec.js.snap
index 95fde23d8..932b1a226 100644
--- a/src/action-sheet/test/__snapshots__/index.spec.js.snap
+++ b/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__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 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-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>
 `;
 
 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>
+  <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"></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>
+  <div class="van-action-sheet__header">Title</div>
+  <div class="van-action-sheet__content"></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__main"><button type="button" class="van-action-sheet__item" style="color: red;"><span class="van-action-sheet__name">Option</span></button></div>
-  </div>
+  <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>
 `;
 
 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>
+  <div class="van-action-sheet__description">This is a description</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>
 `;
 
 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>
+  <div class="van-action-sheet__description">Custom Description</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>
 `;
 
 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__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 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__gap"></div><button type="button" class="van-action-sheet__cancel">Cancel</button>
 </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 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>
 `;
 
 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 class="van-action-sheet__content"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button></div>
 </div>
 `;