From 9acfaa75feb6e9a244c982deeb93564e02e63b3b Mon Sep 17 00:00:00 2001
From: HaiboTang <42064613+gtangxiaobo@users.noreply.github.com>
Date: Mon, 17 Aug 2020 19:20:57 +0800
Subject: [PATCH] feat(scrollbar): css in js (#258)

* feat(scrollbar): css in js

* chore: fix code review

* chore: fix code review
---
 src/Cascader/src/CascaderSubmenu.vue          |   2 +-
 src/Layout/src/Layout.vue                     |   2 +-
 src/Layout/src/LayoutSider.vue                |   2 +-
 .../src/NotificationContainer.vue             |   2 +-
 src/Scrollbar/index.js                        |   8 -
 src/TimePicker/src/main.vue                   |   2 +-
 src/_base/select-menu/src/SelectMenu.vue      |   2 +-
 .../NimbusServiceLayout/src/main.vue          |   2 +-
 src/_styles/Scrollbar.scss                    | 162 +++++++++---------
 .../src/HeaderButton/FilterMenu.vue           |   2 +-
 src/data-table/src/TableParts/Body.vue        |   2 +-
 src/index.js                                  |   6 +-
 src/log/src/Log.vue                           |   2 +-
 src/modal/src/ModalContent.vue                |   2 +-
 src/scrollbar/index.js                        |   8 +
 .../main.vue => scrollbar/src/ScrollBar.vue}  |  12 +-
 src/scrollbar/src/styles/index.js             |   9 +
 src/scrollbar/src/styles/themed-base.cssr.js  | 114 ++++++++++++
 src/scrollbar/styles/dark.js                  |  16 ++
 src/scrollbar/styles/light.js                 |  16 ++
 src/transfer/src/Transfer.vue                 |   2 +-
 21 files changed, 270 insertions(+), 105 deletions(-)
 delete mode 100644 src/Scrollbar/index.js
 create mode 100644 src/scrollbar/index.js
 rename src/{Scrollbar/src/main.vue => scrollbar/src/ScrollBar.vue} (98%)
 create mode 100644 src/scrollbar/src/styles/index.js
 create mode 100644 src/scrollbar/src/styles/themed-base.cssr.js
 create mode 100644 src/scrollbar/styles/dark.js
 create mode 100644 src/scrollbar/styles/light.js

diff --git a/src/Cascader/src/CascaderSubmenu.vue b/src/Cascader/src/CascaderSubmenu.vue
index 1564cb202..d3ebf2d65 100644
--- a/src/Cascader/src/CascaderSubmenu.vue
+++ b/src/Cascader/src/CascaderSubmenu.vue
@@ -47,7 +47,7 @@
 
 <script>
 import NCascaderOption from './CascaderOption.vue'
-import NScrollbar from '../../Scrollbar'
+import NScrollbar from '../../scrollbar'
 import NBaseTrackingRect from '../../_base/tracking-rect'
 import debounce from 'lodash-es/debounce'
 import { itemSize } from '../../_styles-in-js/common'
diff --git a/src/Layout/src/Layout.vue b/src/Layout/src/Layout.vue
index 85c5b67f8..c7a21bfce 100644
--- a/src/Layout/src/Layout.vue
+++ b/src/Layout/src/Layout.vue
@@ -26,7 +26,7 @@
 import layoutModeMixin from './layoutModeMixin'
 import themeable from '../../_mixins/themeable'
 import withapp from '../../_mixins/withapp'
-import NScrollbar from '../../Scrollbar'
+import NScrollbar from '../../scrollbar'
 
 export default {
   name: 'NLayout',
diff --git a/src/Layout/src/LayoutSider.vue b/src/Layout/src/LayoutSider.vue
index 9497db8a5..ddb604dcb 100644
--- a/src/Layout/src/LayoutSider.vue
+++ b/src/Layout/src/LayoutSider.vue
@@ -51,7 +51,7 @@ import withapp from '../../_mixins/withapp'
 import themeable from '../../_mixins/themeable'
 import ToggleButton from './ToggleButton'
 import ToggleBar from './ToggleBar'
-import NScrollbar from '../../Scrollbar'
+import NScrollbar from '../../scrollbar'
 
 export default {
   name: 'NLayoutSider',
diff --git a/src/Notification/src/NotificationContainer.vue b/src/Notification/src/NotificationContainer.vue
index 7c9dd3884..2b02a011a 100644
--- a/src/Notification/src/NotificationContainer.vue
+++ b/src/Notification/src/NotificationContainer.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import NScrollbar from '../../Scrollbar'
+import NScrollbar from '../../scrollbar'
 
 export default {
   components: {
diff --git a/src/Scrollbar/index.js b/src/Scrollbar/index.js
deleted file mode 100644
index 78cc5e7b1..000000000
--- a/src/Scrollbar/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/* istanbul ignore file */
-import ScrollBar from './src/main.vue'
-
-ScrollBar.install = function (Vue) {
-  Vue.component(ScrollBar.name, ScrollBar)
-}
-
-export default ScrollBar
diff --git a/src/TimePicker/src/main.vue b/src/TimePicker/src/main.vue
index 0593effd0..df3896113 100644
--- a/src/TimePicker/src/main.vue
+++ b/src/TimePicker/src/main.vue
@@ -171,7 +171,7 @@
 </template>
 
 <script>
-import NScrollbar from '../../Scrollbar'
+import NScrollbar from '../../scrollbar'
 import NInput from '../../input'
 import NIcon from '../../icon'
 import detachable from '../../_mixins/detachable'
diff --git a/src/_base/select-menu/src/SelectMenu.vue b/src/_base/select-menu/src/SelectMenu.vue
index df0545f25..8f990493d 100644
--- a/src/_base/select-menu/src/SelectMenu.vue
+++ b/src/_base/select-menu/src/SelectMenu.vue
@@ -106,7 +106,7 @@
 </template>
 
 <script>
-import NScrollbar from '../../../Scrollbar'
+import NScrollbar from '../../../scrollbar'
 import NSelectOption from './SelectOption.vue'
 import NSelectGroupHeader from './SelectGroupHeader.vue'
 import NBaseTrackingRect from '../../tracking-rect'
diff --git a/src/_deprecated/NimbusServiceLayout/src/main.vue b/src/_deprecated/NimbusServiceLayout/src/main.vue
index 54c478548..78c98a6c2 100644
--- a/src/_deprecated/NimbusServiceLayout/src/main.vue
+++ b/src/_deprecated/NimbusServiceLayout/src/main.vue
@@ -1,6 +1,6 @@
 
 <script>
-import Scrollbar from '../../../Scrollbar'
+import Scrollbar from '../../../scrollbar'
 import withapp from '../../../_mixins/withapp'
 import themeable from '../../../_mixins/themeable'
 import getDefaultSlot from '../../../_utils/vue/getDefaultSlot'
diff --git a/src/_styles/Scrollbar.scss b/src/_styles/Scrollbar.scss
index 7d29c3efe..48970139c 100644
--- a/src/_styles/Scrollbar.scss
+++ b/src/_styles/Scrollbar.scss
@@ -1,82 +1,82 @@
-@import './mixins/mixins.scss';
+// @import './mixins/mixins.scss';
 
-@include themes-mixin {
-  @include b(scrollbar) {
-    @include once {
-      position: relative;
-      z-index: auto;
-      height: 100%;
-    }
-    & > {
-      @include once {
-        @include b(scrollbar-container) {
-          width: 100%;
-          overflow: scroll;
-          height: 100%;
-          max-height: inherit;
-          scrollbar-width: none;
-          &::-webkit-scrollbar {
-            width: 0;
-            height: 0;
-          }
-          & > {
-            @include b(scrollbar-content) {
-              width: fit-content;
-              overflow: hidden;
-              min-width: 100%;
-            }
-          }
-        }
-      }
-      @include b(scrollbar-rail) {
-        @include once {
-          position: absolute;
-          pointer-events: none;
-          user-select: none;
-          @include m(horizontal) {
-            left: 0;
-            right: 0;
-            bottom: 2.5px;
-            & > {
-              @include e(scrollbar) {
-                right: 0;
-              }
-            }
-          }
-          @include m(vertical) {
-            right: 2.5px;
-            top: 0;
-            bottom: 0;
-            & > {
-              @include e(scrollbar) {
-                bottom: 0;
-              }
-            }
-          }
-          @include m(disabled) {
-            & > {
-              @include e(scrollbar) {
-                pointer-events: none;
-              }
-            }
-          }
-        }
-        & > {
-          @include e(scrollbar) {
-            @include once {
-              @include fade-in-transition(scrollbar);
-              position: absolute;
-              cursor: pointer;
-              pointer-events: all;
-            }
-            background-color: map-get($--scrollbar-background-color, 'default');
-            transition: background-color .2s $--n-ease-in-out-cubic-bezier;
-            &:hover {
-              background-color: map-get($--scrollbar-background-color, 'hover');
-            }
-          }
-        }
-      }
-    }
-  }
-}
\ No newline at end of file
+// @include themes-mixin {
+//   @include b(scrollbar) {
+//     @include once {
+//       position: relative;
+//       z-index: auto;
+//       height: 100%;
+//     }
+//     & > {
+//       @include once {
+//         @include b(scrollbar-container) {
+//           width: 100%;
+//           overflow: scroll;
+//           height: 100%;
+//           max-height: inherit;
+//           scrollbar-width: none;
+//           &::-webkit-scrollbar {
+//             width: 0;
+//             height: 0;
+//           }
+//           & > {
+//             @include b(scrollbar-content) {
+//               width: fit-content;
+//               overflow: hidden;
+//               min-width: 100%;
+//             }
+//           }
+//         }
+//       }
+//       @include b(scrollbar-rail) {
+//         @include once {
+//           position: absolute;
+//           pointer-events: none;
+//           user-select: none;
+//           @include m(horizontal) {
+//             left: 0;
+//             right: 0;
+//             bottom: 2.5px;
+//             & > {
+//               @include e(scrollbar) {
+//                 right: 0;
+//               }
+//             }
+//           }
+//           @include m(vertical) {
+//             right: 2.5px;
+//             top: 0;
+//             bottom: 0;
+//             & > {
+//               @include e(scrollbar) {
+//                 bottom: 0;
+//               }
+//             }
+//           }
+//           @include m(disabled) {
+//             & > {
+//               @include e(scrollbar) {
+//                 pointer-events: none;
+//               }
+//             }
+//           }
+//         }
+//         & > {
+//           @include e(scrollbar) {
+//             @include once {
+//               @include fade-in-transition(scrollbar);
+//               position: absolute;
+//               cursor: pointer;
+//               pointer-events: all;
+//             }
+//             background-color: map-get($--scrollbar-background-color, 'default');
+//             transition: background-color .2s $--n-ease-in-out-cubic-bezier;
+//             &:hover {
+//               background-color: map-get($--scrollbar-background-color, 'hover');
+//             }
+//           }
+//         }
+//       }
+//     }
+//   }
+// }
\ No newline at end of file
diff --git a/src/data-table/src/HeaderButton/FilterMenu.vue b/src/data-table/src/HeaderButton/FilterMenu.vue
index 88c76e38a..1769474a0 100644
--- a/src/data-table/src/HeaderButton/FilterMenu.vue
+++ b/src/data-table/src/HeaderButton/FilterMenu.vue
@@ -65,7 +65,7 @@ import NRadioGroup from '../../../Radio/src/RadioGroup'
 import NRadio from '../../../Radio/src/Radio'
 import NDivider from '../../../divider'
 import NButton from '../../../button'
-import NScrollbar from '../../../Scrollbar'
+import NScrollbar from '../../../scrollbar'
 import { shouldUseArrayInSingleMode } from '../utils'
 
 function isEqual (value, oldValue) {
diff --git a/src/data-table/src/TableParts/Body.vue b/src/data-table/src/TableParts/Body.vue
index 0674b40f6..7b0f43b59 100644
--- a/src/data-table/src/TableParts/Body.vue
+++ b/src/data-table/src/TableParts/Body.vue
@@ -73,7 +73,7 @@
 <script>
 import cell from './Cell.vue'
 import { createCustomWidthStyle, setCheckStatusOfRow, createClassObject, createRowKey } from '../utils'
-import NScrollbar from '../../../Scrollbar'
+import NScrollbar from '../../../scrollbar'
 import formatLength from '../../../_utils/css/formatLength'
 
 export default {
diff --git a/src/index.js b/src/index.js
index fd54c24ce..d67b28927 100644
--- a/src/index.js
+++ b/src/index.js
@@ -49,7 +49,7 @@ import Popup from './Popover'
 import Progress from './progress'
 import Radio from './Radio'
 import Result from './result'
-import Scrollbar from './Scrollbar'
+import Scrollbar from './scrollbar'
 import Select from './Select'
 import Slider from './Slider'
 import Spin from './Spin'
@@ -152,6 +152,8 @@ import resultDarkStyle from './result/styles/dark'
 import resultLightStyle from './result/styles/light'
 import stepsDarkStyle from './steps/styles/dark'
 import stepsLightStyle from './steps/styles/light'
+import scrollBarLightStyle from './scrollbar/styles/light'
+import scrollBarDarkStyle from './scrollbar/styles/dark'
 
 // Can be remove after refactoring
 import baseSelectionLightStyle from './_base/selection/styles/light'
@@ -333,6 +335,8 @@ export default create({
     datePickerLightStyle,
     stepsDarkStyle,
     stepsLightStyle,
+    scrollBarLightStyle,
+    scrollBarDarkStyle,
     // Can be remove after refactoring
     baseSelectionLightStyle,
     baseSelectionDarkStyle
diff --git a/src/log/src/Log.vue b/src/log/src/Log.vue
index 36a0eec93..100af319e 100644
--- a/src/log/src/Log.vue
+++ b/src/log/src/Log.vue
@@ -31,7 +31,7 @@
 <script>
 import withapp from '../../_mixins/withapp'
 import themeable from '../../_mixins/themeable'
-import NScrollbar from '../../Scrollbar'
+import NScrollbar from '../../scrollbar'
 import NLogLoader from './LogLoader'
 import NLogLine from './LogLine'
 import NFadeInHeightExpandTransition from '../../_transition/FadeInHeightExpandTransition'
diff --git a/src/modal/src/ModalContent.vue b/src/modal/src/ModalContent.vue
index 58b53544e..5e0ee0e0e 100644
--- a/src/modal/src/ModalContent.vue
+++ b/src/modal/src/ModalContent.vue
@@ -78,7 +78,7 @@
 </template>
 
 <script>
-import NScrollbar from '../../Scrollbar'
+import NScrollbar from '../../scrollbar'
 import NConfirm from '../../confirm/src/Confirm'
 import NCard from '../../card'
 import themeable from '../../_mixins/themeable'
diff --git a/src/scrollbar/index.js b/src/scrollbar/index.js
new file mode 100644
index 000000000..287d1da9a
--- /dev/null
+++ b/src/scrollbar/index.js
@@ -0,0 +1,8 @@
+/* istanbul ignore file */
+import ScrollBar from './src/ScrollBar.vue'
+
+ScrollBar.install = function (Vue, naive) {
+  Vue.component(naive.componentPrefix + ScrollBar.name, ScrollBar)
+}
+
+export default ScrollBar
diff --git a/src/Scrollbar/src/main.vue b/src/scrollbar/src/ScrollBar.vue
similarity index 98%
rename from src/Scrollbar/src/main.vue
rename to src/scrollbar/src/ScrollBar.vue
index 568fc9122..0b90551ab 100644
--- a/src/Scrollbar/src/main.vue
+++ b/src/scrollbar/src/ScrollBar.vue
@@ -38,7 +38,7 @@
       }"
       :style="{...horizontalRailStyle, width: scrollbarSize }"
     >
-      <transition name="n-scrollbar-transition">
+      <transition name="n-fade-in-transition">
         <div
           v-if="needVerticalScrollbar && showVeriticalScrollbar"
           class="n-scrollbar-rail__scrollbar"
@@ -86,10 +86,16 @@
 import withapp from '../../_mixins/withapp'
 import themable from '../../_mixins/themeable'
 import resizeObserverDelagate from '../../_utils/delegate/resizeObserverDelegate'
+import usecssr from '../../_mixins/usecssr'
+import styles from './styles/index.js'
 
 export default {
-  name: 'NScrollbar',
-  mixins: [withapp, themable],
+  name: 'Scrollbar',
+  mixins: [
+    withapp,
+    themable,
+    usecssr(styles)
+  ],
   props: {
     width: {
       type: Number,
diff --git a/src/scrollbar/src/styles/index.js b/src/scrollbar/src/styles/index.js
new file mode 100644
index 000000000..958d3000d
--- /dev/null
+++ b/src/scrollbar/src/styles/index.js
@@ -0,0 +1,9 @@
+import baseStyle from './themed-base.cssr.js'
+
+export default [
+  {
+    key: 'syntheticTheme',
+    watch: ['syntheticTheme'],
+    CNode: baseStyle
+  }
+]
diff --git a/src/scrollbar/src/styles/themed-base.cssr.js b/src/scrollbar/src/styles/themed-base.cssr.js
new file mode 100644
index 000000000..603114775
--- /dev/null
+++ b/src/scrollbar/src/styles/themed-base.cssr.js
@@ -0,0 +1,114 @@
+import { cTB, c, cB, cM, cE } from '../../../_utils/cssr'
+import fadeInTransition from '../../../styles/_transitions/fade-in'
+
+export default c([
+  ({ props }) => {
+    const {
+      color,
+      colorHover
+    } = props.$local
+    const {
+      easeInOutCubicBezier
+    } = props.$base
+    return cTB('scrollbar', {
+      raw: `
+        position: relative;
+        z-index: auto;
+        height: 100%;
+      `
+    }, [
+      c('>', [
+        cB('scrollbar-container', {
+          raw: `
+            width: 100%;
+            overflow: scroll;
+            height: 100%;
+            max-height: inherit;
+            scrollbar-width: none;
+          `
+        }, [
+          c('&::-webkit-scrollbar', {
+            raw: `
+              width: 0;
+              height: 0;
+            `
+          }),
+          c('>', [
+            cB('scrollbar-content', {
+              raw: `
+                width: fit-content;
+                overflow: hidden;
+                min-width: 100%;
+              `
+            })
+          ])
+        ]),
+        cB('scrollbar-rail', {
+          raw: `
+            position: absolute;
+            pointer-events: none;
+            user-select: none;
+          `
+        }, [
+          cM('horizontal', {
+            raw: `
+              left: 0;
+              right: 0;
+              bottom: 2.5px;
+            `
+          }, [
+            c('>', [
+              cE('scrollbar', {
+                raw: `
+                  right: 0;
+                `
+              })
+            ])
+          ]),
+          cM('vertical', {
+            raw: `
+              right: 2.5px;
+              top: 0;
+              bottom: 0;
+            `
+          }, [
+            c('>', [
+              cE('scrollbar', {
+                raw: `
+                  bottom: 0;
+                `
+              })
+            ])
+          ]),
+          cM('disabled', [
+            c('>', [
+              cE('scrollbar', {
+                raw: `
+                  pointer-events: none;
+                `
+              })
+            ])
+          ]),
+          c('>', [
+            cE('scrollbar', {
+              raw: `
+                position: absolute;
+                cursor: pointer;
+                pointer-events: all;
+                background-color: ${color};
+                transition: background-color .2s ${easeInOutCubicBezier};
+              `
+            }, [
+              fadeInTransition(),
+              c('&:hover', {
+                raw: `
+                  background-color: ${colorHover}
+                `
+              })
+            ])
+          ])
+        ])
+      ])
+    ])
+  }
+])
diff --git a/src/scrollbar/styles/dark.js b/src/scrollbar/styles/dark.js
new file mode 100644
index 000000000..183ce2a60
--- /dev/null
+++ b/src/scrollbar/styles/dark.js
@@ -0,0 +1,16 @@
+import create from '../../styles/_utils/create-component-base'
+
+export default create({
+  name: 'Scrollbar',
+  theme: 'dark',
+  getDerivedVariables ({ base, derived }) {
+    const {
+      scrollbarBackgroundOverlayColor,
+      scrollbarHoverBackgroundOverlayColor
+    } = derived
+    return {
+      color: scrollbarBackgroundOverlayColor,
+      colorHover: scrollbarHoverBackgroundOverlayColor
+    }
+  }
+})
diff --git a/src/scrollbar/styles/light.js b/src/scrollbar/styles/light.js
new file mode 100644
index 000000000..306c2842e
--- /dev/null
+++ b/src/scrollbar/styles/light.js
@@ -0,0 +1,16 @@
+import create from '../../styles/_utils/create-component-base'
+
+export default create({
+  name: 'Scrollbar',
+  theme: 'light',
+  getDerivedVariables ({ base, derived }) {
+    const {
+      scrollbarBackgroundOverlayColor,
+      scrollbarHoverBackgroundOverlayColor
+    } = derived
+    return {
+      color: scrollbarBackgroundOverlayColor,
+      colorHover: scrollbarHoverBackgroundOverlayColor
+    }
+  }
+})
diff --git a/src/transfer/src/Transfer.vue b/src/transfer/src/Transfer.vue
index a1640d5f1..54e6a190d 100644
--- a/src/transfer/src/Transfer.vue
+++ b/src/transfer/src/Transfer.vue
@@ -182,7 +182,7 @@
 </template>
 
 <script>
-import NScrollbar from '../../Scrollbar'
+import NScrollbar from '../../scrollbar'
 import NTransferHeaderCheckbox from './TransferHeaderCheckbox'
 import NTransferHeaderExtra from './TransferHeaderExtra'
 import NTransferSourceListItem from './TransferSourceListItem'