refactor(drawer): css in js (#170)

* feat(drawer): css in js

* chore(drawer): fix code review

* chore(avator): update avatar icon

* chore(drawer): fix drawer code review

* chore(drawer): fix transition name

Co-authored-by: Lecong Zhang <50313260+tskirby@users.noreply.github.com>

src/Drawer/index.js

@@ -1,8 +0,0 @@
-/* istanbul ignore file */
-import Drawer from './src/main.vue'
-
-Drawer.install = function (Vue) {
-  Vue.component(Drawer.name, Drawer)
-}
-
-export default Drawer

src/_styles/Drawer.scss

@@ -1,61 +1,61 @@
-@import './mixins/mixins.scss';
+// @import './mixins/mixins.scss';
 
-@include themes-mixin {
-  @include b(drawer) {
-    @include once {
-      @include slide-in-from-right-transition($duration: .3s);
-      @include slide-in-from-left-transition($duration: .3s);
-      @include slide-in-from-top-transition($duration: .3s);
-      @include slide-in-from-bottom-transition($duration: .3s);
-      @include m(right-placement) {
-        top: 0;
-        bottom: 0;
-        right: 0;
-      }
-      @include m(left-placement) {
-        top: 0;
-        bottom: 0;
-        left: 0;
-      }
-      @include m(top-placement) {
-        top: 0;
-        left: 0;
-        right: 0;
-      }
-      @include m(bottom-placement) {
-        left: 0;
-        bottom: 0;
-        right: 0;
-      }
-      padding: 16px 24px;
-      position: absolute;
-      pointer-events: all;
-      transition:
-        background-color .3s $--n-ease-in-out-cubic-bezier,
-        color .3s $--n-ease-in-out-cubic-bezier;
-    }
-    background-color: $--drawer-background-color;
-    color: $--drawer-text-color;
-  }
-}
+// @include themes-mixin {
+//   @include b(drawer) {
+//     @include once {
+//       @include slide-in-from-right-transition($duration: .3s);
+//       @include slide-in-from-left-transition($duration: .3s);
+//       @include slide-in-from-top-transition($duration: .3s);
+//       @include slide-in-from-bottom-transition($duration: .3s);
+//       @include m(right-placement) {
+//         top: 0;
+//         bottom: 0;
+//         right: 0;
+//       }
+//       @include m(left-placement) {
+//         top: 0;
+//         bottom: 0;
+//         left: 0;
+//       }
+//       @include m(top-placement) {
+//         top: 0;
+//         left: 0;
+//         right: 0;
+//       }
+//       @include m(bottom-placement) {
+//         left: 0;
+//         bottom: 0;
+//         right: 0;
+//       }
+//       padding: 16px 24px;
+//       position: absolute;
+//       pointer-events: all;
+//       transition:
+//         background-color .3s $--n-ease-in-out-cubic-bezier,
+//         color .3s $--n-ease-in-out-cubic-bezier;
+//     }
+//     background-color: $--drawer-background-color;
+//     color: $--drawer-text-color;
+//   }
+// }
 
-@include b(drawer-overlay) {
-  @include fade-in-transition(drawer-overlay, $enter-duration: .3s, $leave-duration: .3s);
-  background-color: rgba(0, 0, 0, .3);
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  pointer-events: all;
-}
+// @include b(drawer-overlay) {
+//   @include fade-in-transition(drawer-overlay, $enter-duration: .3s, $leave-duration: .3s);
+//   background-color: rgba(0, 0, 0, .3);
+//   position: absolute;
+//   left: 0;
+//   right: 0;
+//   top: 0;
+//   bottom: 0;
+//   pointer-events: all;
+// }
 
-@include b(drawer-container) {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  pointer-events: none;
-  overflow: hidden;
-}
+// @include b(drawer-container) {
+//   position: absolute;
+//   left: 0;
+//   right: 0;
+//   top: 0;
+//   bottom: 0;
+//   pointer-events: none;
+//   overflow: hidden;
+// }

src/_styles/index.scss

@@ -37,7 +37,6 @@
 @import './Popselect.scss';
 @import './Transfer.scss';
 @import './Spin.scss';
-@import './Drawer.scss';
 @import './LoadingBar.scss';
 @import './Slider.scss';
 @import './Tree.scss';
@@ -50,7 +49,6 @@
 @import "./Code.scss";
 @import './List.scss';
 @import './Layout.scss';
-@import './Avatar.scss';
 @import "./Popover.scss";
 @import "./DataTable.scss";
 @import "./Confirm.scss";

src/avatar/src/Avatar.vue

@@ -37,7 +37,11 @@ import styles from './styles'
 
 export default {
   name: 'Avatar',
-  mixins: [withapp, themeable, usecssr(styles)],
+  mixins: [
+    withapp,
+    themeable,
+    usecssr(styles)
+  ],
   props: {
     size: {
       type: [String, Number],

src/avatar/src/styles/themed-base.cssr.js

@@ -38,6 +38,13 @@ export default c([
           left: 50%;
           top: 50%;
         `
+      }),
+      cTB('icon', {
+        raw: `
+          fill: #FFF;
+          stroke: #FFF;
+          vertical-align: bottom;
+        `
       })
     ])
   }])

src/drawer/index.js

@@ -0,0 +1,8 @@
+/* istanbul ignore file */
+import Drawer from './src/Drawer.vue'
+
+Drawer.install = function (Vue, naive) {
+  Vue.component(naive.componentPrefix + Drawer.name, Drawer)
+}
+
+export default Drawer

src/drawer/src/Drawer.vue

@@ -52,14 +52,21 @@ import themeable from '../../_mixins/themeable'
 import zindexable from '../../_mixins/zindexable'
 import formatLength from '../../_utils/css/formatLength'
 import NDrawerContent from './DrawerContent'
+import usecssr from '../../_mixins/usecssr'
+import styles from './styles/index'
 
 export default {
-  name: 'NDrawer',
+  name: 'Drawer',
   components: {
     NBasePortal,
     NDrawerContent
   },
-  mixins: [withapp, themeable, zindexable],
+  mixins: [
+    withapp,
+    themeable,
+    zindexable,
+    usecssr(styles)
+  ],
   model: {
     prop: 'show',
     event: 'hide'

src/drawer/src/styles/index.js

@@ -0,0 +1,11 @@
+import baseStyle from './themed-base.cssr.js'
+
+export default [
+  {
+    key: 'syntheticTheme',
+    watch: [
+      'syntheticTheme'
+    ],
+    CNode: baseStyle
+  }
+]

src/drawer/src/styles/themed-base.cssr.js

@@ -0,0 +1,104 @@
+import { c, cTB, cM } 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'
+import slideInFromBottomTransition from '../../../styles/_transitions/slide-in-from-bottom'
+import fadeInTransition from '../../../styles/_transitions/fade-in'
+
+export default c([
+  ({ props }) => {
+    const {
+      backgroundColor,
+      textColor
+    } = props.$local
+    const base = props.$base
+    const easeInOutCubicBezier = base.easeInOutCubicBezier
+    return [
+      cTB('drawer', {
+        raw: `
+          padding: 16px 24px;
+          position: absolute;
+          pointer-events: all;
+          transition:
+            background-color .3s ${easeInOutCubicBezier},
+            color .3s ${easeInOutCubicBezier};
+        `,
+        backgroundColor,
+        textColor
+      },
+      [
+        slideInFromRightTransition(),
+        slideInFromLeftTransition(),
+        slideInFromTopTransition(),
+        slideInFromBottomTransition(),
+        cM('right-placement', {
+          raw: `
+            top: 0;
+            bottom: 0;
+            right: 0;
+          `
+        }),
+        cM('left-placement', {
+          raw: `
+            top: 0;
+            bottom: 0;
+            left: 0;
+          `
+        }),
+        cM('top-placement', {
+          raw: `
+            top: 0;
+            left: 0;
+            right: 0;
+          `
+        }),
+        cM('bottom-placement', {
+          raw: `
+            left: 0;
+            bottom: 0;
+            right: 0;
+          `
+        })
+      ]),
+      cTB('drawer-overlay', {
+        raw: `
+          background-color: rgba(0, 0, 0, .3);
+          position: absolute;
+          left: 0;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          pointer-events: all;
+        `
+      }),
+      c('drawer-overlay', {
+        raw: `
+          background-color: rgba(0, 0, 0, .3);
+          position: absolute;
+          left: 0;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          pointer-events: all;
+        `
+      }, [
+        fadeInTransition({
+          name: 'drawer-overlay',
+          enterDuration: '0.3s',
+          leaveDuration: '0.3s'
+        })
+      ]),
+      c('darwer-container', {
+        raw: `
+          position: absolute;
+          left: 0;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          pointer-events: none;
+          overflow: hidden;
+        `
+      })
+    ]
+  }
+])

src/drawer/styles/dark.js

@@ -0,0 +1,12 @@
+import create from '../../styles/_utils/create-component-base'
+
+export default create({
+  theme: 'dark',
+  name: 'Drawer',
+  getDerivedVariables ({ derived }) {
+    return {
+      backgroundColor: derived.modalBackgroundColor,
+      textColor: derived.secondaryTextOverlayColor
+    }
+  }
+})

src/drawer/styles/light.js

@@ -0,0 +1,12 @@
+import create from '../../styles/_utils/create-component-base'
+
+export default create({
+  theme: 'light',
+  name: 'Drawer',
+  getDerivedVariables ({ derived }) {
+    return {
+      backgroundColor: derived.modalBackgroundColor,
+      textColor: derived.secondaryTextOverlayColor
+    }
+  }
+})

src/index.js

@@ -42,7 +42,7 @@ import Popselect from './Popselect'
 import ConfigProvider from './config-provider'
 import Transfer from './Transfer'
 import Spin from './Spin'
-import Drawer from './Drawer'
+import Drawer from './drawer'
 import Time from './Time'
 import LoadingBar from './LoadingBar'
 import Slider from './Slider'
@@ -97,6 +97,8 @@ import alertLightStyle from './alert/styles/light'
 import alertDarkStyle from './alert/styles/dark'
 import avatarDarkStyle from './avatar/styles/dark'
 import avatarLightStyle from './avatar/styles/light'
+import drawerDarkStyle from './drawer/styles/dark'
+import drawerLightStyle from './drawer/styles/light'
 
 // Can be remove after refactoring
 import baseSelectionLightStyle from './_base/selection/styles/light'
@@ -216,6 +218,8 @@ export default create({
     alertDarkStyle,
     avatarLightStyle,
     avatarDarkStyle,
+    drawerDarkStyle,
+    drawerLightStyle,
     // Can be remove after refactoring
     baseSelectionLightStyle,
     baseSelectionDarkStyle

src/styles/_transitions/fade-in.js

@@ -0,0 +1,29 @@
+import { c, namespace } from '../../_utils/cssr'
+import commonVariables from '../_common-style/base'
+
+const {
+  easeInOutCubicBezier
+} = commonVariables
+
+export default function ({
+  enterDuration = '0.2s',
+  leaveDuration = '0.2s',
+  name = 'fade-in'
+} = {}) {
+  return [
+    c(`&.${namespace}-${name}-transition-enter-active`, {
+      transition: `all ${enterDuration} ${easeInOutCubicBezier}!important`
+    }),
+    c(`&.${namespace}-${name}-transition-leave-active`, {
+      transition: `all ${leaveDuration} ${easeInOutCubicBezier}!important`
+    }),
+    c(`&.${namespace}-${name}-transition-enter,
+      &.${namespace}-${name}-transiton-leave-to`, {
+      opacity: 0
+    }),
+    c(`&.${namespace}-${name}-transition-enter-to,
+      &.${namespace}-${name}-transition-leave`, {
+      opacity: 1
+    })
+  ]
+}

src/styles/_transitions/slide-in-from-bottom.js

@@ -0,0 +1,34 @@
+import { c, namespace } from '../../_utils/cssr'
+import commonVariables from '../_common-style/base'
+
+const {
+  easeInCubicBezier,
+  easeOutCubicBezier
+} = commonVariables
+
+export default function ({
+  duration = '0.3s',
+  leaveDuration = '0.2s',
+  name = 'slide-in-from-bottom'
+} = {}) {
+  return [
+    c(`&.${namespace}-${name}-transition-leave-active`, {
+      transition: `transform ${leaveDuration} ${easeInCubicBezier}`
+    }),
+    c(`&.${namespace}-${name}-transition-enter-active`, {
+      transition: `transform ${duration} ${easeOutCubicBezier}`
+    }),
+    c(`&.${namespace}-${name}-transition-enter-to`, {
+      transform: `translateY(0)`
+    }),
+    c(`&.${namespace}-${name}-transition-enter`, {
+      transform: `translateY(100%)`
+    }),
+    c(`&.${namespace}-${name}-transition-leave`, {
+      transform: `translateY(0)`
+    }),
+    c(`&.${namespace}-${name}-transition-leave-to`, {
+      transform: `translateY(100%)`
+    })
+  ]
+}

src/styles/_transitions/slide-in-from-left.js

@@ -0,0 +1,34 @@
+import { c, namespace } from '../../_utils/cssr'
+import commonVariables from '../_common-style/base'
+
+const {
+  easeInCubicBezier,
+  easeOutCubicBezier
+} = commonVariables
+
+export default function ({
+  duration = '0.3s',
+  leaveDuration = '0.2s',
+  name = 'slide-in-from-left'
+} = {}) {
+  return [
+    c(`&.${namespace}-${name}-transition-leave-active`, {
+      transition: `transform ${leaveDuration} ${easeInCubicBezier}`
+    }),
+    c(`&.${namespace}-${name}-transition-enter-active`, {
+      transition: `transform ${duration} ${easeOutCubicBezier}`
+    }),
+    c(`&.${namespace}-${name}-transition-enter-to`, {
+      transform: `translateX(0)`
+    }),
+    c(`&.${namespace}-${name}-transition-enter`, {
+      transform: `translateX(-100%)`
+    }),
+    c(`&.${namespace}-${name}-transition-leave`, {
+      transform: `translateX(0)`
+    }),
+    c(`&.${namespace}-${name}-transition-leave-to`, {
+      transform: `translateX(-100%)`
+    })
+  ]
+}

src/styles/_transitions/slide-in-from-right.js

@@ -0,0 +1,34 @@
+import { c, namespace } from '../../_utils/cssr'
+import commonVariables from '../_common-style/base'
+
+const {
+  easeInCubicBezier,
+  easeOutCubicBezier
+} = commonVariables
+
+export default function ({
+  duration = '0.3s',
+  leaveDuration = '0.2s',
+  name = 'slide-in-from-right'
+} = {}) {
+  return [
+    c(`&.${namespace}-${name}-transition-leave-active`, {
+      transition: `transform ${leaveDuration} ${easeInCubicBezier}`
+    }),
+    c(`&.${namespace}-${name}-transition-enter-active`, {
+      transition: `transform ${duration} ${easeOutCubicBezier}`
+    }),
+    c(`&.${namespace}-${name}-transition-enter-to`, {
+      transform: `translateX(0)`
+    }),
+    c(`&.${namespace}-${name}-transition-enter`, {
+      transform: `translateX(100%)`
+    }),
+    c(`&.${namespace}-${name}-transition-leave`, {
+      transform: `translateX(0)`
+    }),
+    c(`&.${namespace}-${name}-transition-leave-to`, {
+      transform: `translateX(100%)`
+    })
+  ]
+}

src/styles/_transitions/slide-in-from-top.js

@@ -0,0 +1,34 @@
+import { c, namespace } from '../../_utils/cssr'
+import commonVariables from '../_common-style/base'
+
+const {
+  easeInCubicBezier,
+  easeOutCubicBezier
+} = commonVariables
+
+export default function ({
+  duration = '0.3s',
+  leaveDuration = '0.2s',
+  name = 'slide-in-from-top'
+} = {}) {
+  return [
+    c(`&.${namespace}-${name}-transition-leave-active`, {
+      transition: `transform ${leaveDuration} ${easeInCubicBezier}`
+    }),
+    c(`&.${namespace}-${name}-transition-enter-active`, {
+      transition: `transform ${duration} ${easeOutCubicBezier}`
+    }),
+    c(`&.${namespace}-${name}-transition-enter-to`, {
+      transform: `translateY(0)`
+    }),
+    c(`&.${namespace}-${name}-transition-enter`, {
+      transform: `translateY(-100%)`
+    }),
+    c(`&.${namespace}-${name}-transition-leave`, {
+      transform: `translateY(0)`
+    }),
+    c(`&.${namespace}-${name}-transition-leave-to`, {
+      transform: `translateY(-100%)`
+    })
+  ]
+}