From cb21b1d8a953cf7f2d34d696045282fbe73e26bf Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Mon, 16 Nov 2020 01:12:04 +0800
Subject: [PATCH] refactor(drawer): remove body-wrapper prop & simplify dom

---
 .../drawer/enUS/index.demo-entry.md           |  3 +-
 .../drawer/zhCN/index.demo-entry.md           |  3 +-
 src/drawer/src/Drawer.vue                     | 20 ++++----
 src/drawer/src/DrawerBodyWrapper.vue          | 46 ++++++++++---------
 src/drawer/src/styles/themed-base.cssr.js     | 11 ++++-
 src/scrollbar/src/ScrollBar.vue               |  9 +++-
 6 files changed, 53 insertions(+), 39 deletions(-)

diff --git a/demo/documentation/components/drawer/enUS/index.demo-entry.md b/demo/documentation/components/drawer/enUS/index.demo-entry.md
index 70df0fa94..4395cd7fc 100644
--- a/demo/documentation/components/drawer/enUS/index.demo-entry.md
+++ b/demo/documentation/components/drawer/enUS/index.demo-entry.md
@@ -13,9 +13,8 @@ target
 |-|-|-|-|
 |body-class|`string`|`undefined`||
 |body-style|`Object`|`undefined`||
-|body-wrapper-class|`string`|`undefined`||
-|body-wrapper-style|`Object`|`undefined`||
 |height|`number \| string`|`251`|Works when placement is `top` and `bottom`.|
+|native-scrollbar|`boolean`|`true`||
 |mask-closable|`boolean`|`true`|Whether to emit `hide` event when click mask.|
 |placement|`'top' \| 'right' \| 'bottom' \| 'left'`|`'right'`||
 |show|`boolean`|`false`||
diff --git a/demo/documentation/components/drawer/zhCN/index.demo-entry.md b/demo/documentation/components/drawer/zhCN/index.demo-entry.md
index 143a0db65..e60bfe891 100644
--- a/demo/documentation/components/drawer/zhCN/index.demo-entry.md
+++ b/demo/documentation/components/drawer/zhCN/index.demo-entry.md
@@ -17,10 +17,9 @@ dark-4-debug
 |-|-|-|-|
 |body-class|`string`|`undefined`||
 |body-style|`Object`|`undefined`||
-|body-wrapper-class|`string`|`undefined`||
-|body-wrapper-style|`Object`|`undefined`||
 |height|`number \| string`|`251`|在位置是 `top` 和 `bottom` 时生效|
 |mask-closable|`boolean`|`true`|点击遮罩时是否发出 `update:show` 事件|
+|native-scrollbar|`boolean`|`true`||
 |placement|`'top' \| 'right' \| 'bottom' \| 'left'`|`'right'`||
 |show|`boolean`|`false`||
 |themed-style|`{ [themeName: string]: Object }`|`undefined`||
diff --git a/src/drawer/src/Drawer.vue b/src/drawer/src/Drawer.vue
index e61740c1e..894d5b301 100644
--- a/src/drawer/src/Drawer.vue
+++ b/src/drawer/src/Drawer.vue
@@ -22,12 +22,12 @@
       </transition>
       <n-drawer-body-wrapper
         :placement="placement"
-        :body-wrapper-class="bodyWrapperClass"
-        :body-wrapper-style="mergedBodyWrapperStyle"
         :body-style="compitableBodyStyle"
         :body-class="compitableBodyClass"
+        :scrollbar-props="scrollbarProps"
         :show="show"
         :display-directive="displayDirective"
+        :native-scrollbar="nativeScrollbar"
         :theme="mergedTheme"
       >
         <slot />
@@ -100,14 +100,6 @@ export default {
       type: Object,
       default: undefined
     },
-    bodyWrapperClass: {
-      type: String,
-      default: undefined
-    },
-    bodyWrapperStyle: {
-      type: Object,
-      default: undefined
-    },
     to: {
       type: [String, Object],
       default: undefined
@@ -118,6 +110,14 @@ export default {
       },
       default: 'if'
     },
+    nativeScrollbar: {
+      type: Boolean,
+      default: true
+    },
+    scrollbarProps: {
+      type: Object,
+      default: undefined
+    },
     // eslint-disable-next-line vue/prop-name-casing
     'onUpdate:show': {
       type: Function,
diff --git a/src/drawer/src/DrawerBodyWrapper.vue b/src/drawer/src/DrawerBodyWrapper.vue
index 545b47e67..d76949f76 100644
--- a/src/drawer/src/DrawerBodyWrapper.vue
+++ b/src/drawer/src/DrawerBodyWrapper.vue
@@ -11,27 +11,29 @@
     >
       <div
         v-show="show"
+        ref="bodyRef"
         class="n-drawer"
         :class="[
+          bodyClass,
           `n-drawer--${placement}-placement`,
           {
+            [`n-drawer--native-scrollbar`]: nativeScrollbar,
             [`n-${theme}-theme`]: theme,
-            [bodyWrapperClass]: bodyWrapperClass
           }
         ]"
-        :style="bodyWrapperStyle"
+        :style="bodyStyle"
       >
-        <n-scrollbar>
-          <div
-            ref="bodyRef"
-            class="n-drawer-body"
-            :class="{
-              [bodyClass]: bodyClass
-            }"
-            :style="bodyStyle"
-          >
-            <slot />
-          </div>
+        <template
+          v-if="nativeScrollbar"
+        >
+          <slot />
+        </template>
+        <n-scrollbar
+          v-else
+          v-bind="scrollbarProps"
+          content-class="n-drawer-scroll-content"
+        >
+          <slot />
         </n-scrollbar>
       </div>
     </transition>
@@ -63,14 +65,6 @@ export default {
       type: String,
       default: undefined
     },
-    bodyWrapperClass: {
-      type: String,
-      default: undefined
-    },
-    bodyWrapperStyle: {
-      type: Object,
-      default: undefined
-    },
     bodyStyle: {
       type: Object,
       default: undefined
@@ -90,6 +84,14 @@ export default {
     placement: {
       type: String,
       required: true
+    },
+    nativeScrollbar: {
+      type: Boolean,
+      required: true
+    },
+    scrollbarProps: {
+      type: Object,
+      default: undefined
     }
   },
   setup (props) {
@@ -99,7 +101,7 @@ export default {
     })
     return {
       displayed: displayedRef,
-      bodyRef: ref(null),
+      bodyRef: ref(null), // used for detached content
       transitionName: computed(() => {
         return ({
           right: 'n-slide-in-from-right-transition',
diff --git a/src/drawer/src/styles/themed-base.cssr.js b/src/drawer/src/styles/themed-base.cssr.js
index 052bb165d..e84cf8b81 100644
--- a/src/drawer/src/styles/themed-base.cssr.js
+++ b/src/drawer/src/styles/themed-base.cssr.js
@@ -1,4 +1,4 @@
-import { c, cTB, cB, cM } from '../../../_utils/cssr'
+import { c, cTB, cB, cM, cNotM } from '../../../_utils/cssr'
 import slideInFromRightTransition from '../../../_styles/transitions/slide-in-from-right'
 import slideInFromLeftTransition from '../../../_styles/transitions/slide-in-from-left'
 import slideInFromTopTransition from '../../../_styles/transitions/slide-in-from-top'
@@ -19,6 +19,7 @@ export default c([
     return [
       cTB('drawer', {
         raw: `
+          overflow: auto;
           position: absolute;
           pointer-events: all;
           transition:
@@ -33,10 +34,16 @@ export default c([
         slideInFromLeftTransition(),
         slideInFromTopTransition(),
         slideInFromBottomTransition(),
-        cB('drawer-body', {
+        cM('native-scrollbar', {
           boxSizing: 'border-box',
           padding: '16px 24px'
         }),
+        cNotM('native-scrollbar', [
+          cB('drawer-scroll-content', {
+            boxSizing: 'border-box',
+            padding: '16px 24px'
+          })
+        ]),
         cM('right-placement', {
           raw: `
             top: 0;
diff --git a/src/scrollbar/src/ScrollBar.vue b/src/scrollbar/src/ScrollBar.vue
index b858c33ef..294370c28 100644
--- a/src/scrollbar/src/ScrollBar.vue
+++ b/src/scrollbar/src/ScrollBar.vue
@@ -29,7 +29,10 @@
                 width: xScrollable ? 'fit-content' : null,
               }
             ]"
-            class="n-scrollbar-content"
+            :class="[
+              'n-scrollbar-content',
+              contentClass
+            ]"
           >
             <slot />
           </div>
@@ -147,6 +150,10 @@ export default {
       type: Object,
       default: undefined
     },
+    contentClass: {
+      type: String,
+      default: undefined
+    },
     contentStyle: {
       type: Object,
       default: undefined