feat(message): css in js (#276)

* feat(message): css in js

* fix code review

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

src/_styles/index.scss

@@ -12,8 +12,8 @@
 // @import './Radio.scss';
 @import './Form.scss';
 // @import './Grid.scss';
+// @import './Message.scss';
 // @import './Layout.scss';
-@import './Message.scss';
 // @import './Notification.scss';
 @import './Pagination.scss';
 @import './Popconfirm.scss';

src/index.js

@@ -39,7 +39,7 @@ import List from './list'
 import LoadingBar from './loading-bar'
 import Log from './log'
 import Menu from './menu'
-import Message from './Message'
+import Message from './message'
 import Modal from './modal'
 import Notification from './notification'
 import Pagination from './Pagination'
@@ -170,6 +170,8 @@ import switchLightStyle from './switch/styles/light'
 import switchDarkStyle from './switch/styles/dark'
 import radioLightStyle from './radio/styles/light'
 import radioDarkStyle from './radio/styles/dark'
+import messageLightStyle from './message/styles/light'
+import messageDarkStyle from './message/styles/dark'
 import notificationLightStyle from './notification/styles/light'
 import notificationDarkStyle from './notification/styles/dark'
 import layoutDarkStyle from './layout/styles/dark'
@@ -373,6 +375,8 @@ export default create({
     switchDarkStyle,
     radioLightStyle,
     radioDarkStyle,
+    messageLightStyle,
+    messageDarkStyle,
     notificationLightStyle,
     notificationDarkStyle,
     layoutDarkStyle,

src/message/index.js

@@ -1,9 +1,9 @@
 import MessagePlugin from './src/MessagePlugin'
 import { install } from '../_utils/naive/installThemeAwarableProperty'
 
-MessagePlugin.install = function (Vue) {
+MessagePlugin.install = function (Vue, naive) {
   MessagePlugin.Vue = Vue
-  install(Vue, MessagePlugin, '$NMessage')
+  install(Vue, MessagePlugin, `$${naive.componentPrefix}Message`)
 }
 
 export default MessagePlugin

src/message/src/Message.vue

@@ -10,9 +10,16 @@ import IconSwitchTransition from '../../_transition/IconSwitchTransition'
 import render from '../../_utils/vue/render'
 import themeable from '../../_mixins/themeable'
 import asthemecontext from '../../_mixins/asthemecontext'
+import usecssr from '../../_mixins/usecssr'
+import styles from './styles'
 
 export default {
-  mixins: [ themeable, asthemecontext ],
+  mixins: [
+    themeable,
+    asthemecontext,
+    usecssr(styles)
+  ],
+  cssrName: 'Message',
   props: {
     icon: {
       type: [String, Function],

src/message/src/styles/index.js

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

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

@@ -0,0 +1,170 @@
+import { cTB, c, cB, cE, cM } from '../../../_utils/cssr'
+import iconSwitchTransition from '../../../styles/_transitions/icon-switch'
+
+function messageTypeMixin (type, textColor, color, boxShadow, iconColor, loadingCloseColor) {
+  return cM(`${type}-type`, {
+    raw: `
+      color: ${textColor[type]};
+      background-color: ${color[type]};
+      box-shadow: ${boxShadow[type]};
+    `
+  }, [
+    cE('icon', [
+      cB('icon', {
+        raw: `
+          fill: ${iconColor};
+          stroke: ${iconColor};
+        `
+      })
+    ]),
+    type === 'loading' && cE('close', [
+      cB('icon', {
+        raw: `
+          cursor: pointer;
+          fill: ${loadingCloseColor.default};
+          stroke: ${loadingCloseColor.default};
+        `
+      }, [
+        c('&:hover', {
+          raw: `
+            fill: ${loadingCloseColor.hover};
+            stroke: ${loadingCloseColor.hover};
+          `
+        }),
+        c('&:active', {
+          raw: `
+            fill: ${loadingCloseColor.active};
+            stroke: ${loadingCloseColor.active};
+          `
+        })
+      ])
+    ])
+  ])
+}
+export default c([
+  ({ props }) => {
+    const {
+      textColor,
+      iconColor,
+      closeColor,
+      loadingCloseColor,
+      color,
+      boxShadow
+    } = props.$local
+    const {
+      easeInOutCubicBezier
+    } = props.$base
+    return cTB('message', {
+      raw: `
+        display: flex;
+        transition:
+          color .3s ${easeInOutCubicBezier},
+          box-shadow .3s ${easeInOutCubicBezier},
+          background-color .3s ${easeInOutCubicBezier},
+          opacity .3s ${easeInOutCubicBezier},
+          transform .3s ${easeInOutCubicBezier},
+          max-height .3s ${easeInOutCubicBezier},
+          margin-bottom .3s ${easeInOutCubicBezier};
+        max-height: 40px;
+        opacity: 1;
+        margin-bottom: 12px;
+        padding: 0 40px;
+        height: 40px;
+        border-radius: 20px;
+        flex-shrink: 0;
+        font-weight: 400;
+        overflow: hidden;
+      `
+    }, [
+      c('&&-transition-enter, &&-transition-leave-to', {
+        raw: `
+          opacity: 0;
+          transform: translateY(-12px) scale(.5);
+          transform-origin: top center;
+          max-height: 0;
+          margin-bottom: 0;
+        `
+      }),
+      cE('content', {
+        raw: `
+          display: inline-block;
+          height: 40px;
+          line-height: 40px;
+          font-size: 15px;
+        `
+      }),
+      cE('icon', {
+        raw: `
+          margin-right: 10px;
+          display: inline-flex;
+          height: 40px;
+          line-height: 40px;
+          align-items: center;
+        `
+      }, [
+        cB('icon', {
+          raw: `
+            font-size: 20px;
+          `
+        }, [
+          cB('base-loading', [
+            iconSwitchTransition()
+          ]),
+          c('svg', [
+            iconSwitchTransition()
+          ])
+        ])
+      ]),
+      cE('close', {
+        raw: `
+          height: 40px;
+          display: flex;
+          align-items: center;
+          font-size: 19px;
+          margin-left: 12px;
+        `
+      }, [
+        cB('icon', {
+          raw: `
+            cursor: pointer;
+            fill: ${closeColor.default};
+            stroke: ${closeColor.default};
+          `
+        }, [
+          c('&:hover', {
+            raw: `
+              fill: ${closeColor.hover};
+              stroke: ${closeColor.hover};
+            `
+          }),
+          c('&:active', {
+            raw: `
+              fill: ${closeColor.active};
+              stroke: ${closeColor.active};
+            `
+          })
+        ])
+      ]),
+      cM('closable', {
+        raw: `
+          padding-right: 24px;
+        `
+      }),
+      ...['info', 'success', 'error', 'warning', 'loading'].map(type => messageTypeMixin(type, textColor, color, boxShadow, iconColor, loadingCloseColor))
+    ])
+  },
+  cB('message-container', {
+    raw: `
+      z-index: 6000;
+      position: fixed;
+      top: 12px;
+      left: 0;
+      right: 0;
+      height: 0;
+      overflow: visible;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    `
+  })
+])

src/message/styles/dark.js

@@ -0,0 +1,55 @@
+import create from '../../styles/_utils/create-component-base'
+import { changeColor } from '../../_utils/color'
+
+export default create({
+  name: 'Message',
+  theme: 'dark',
+  getDerivedVariables ({ base, derived }) {
+    const {
+      baseTextColor,
+      secondaryTextOverlayColor,
+      infoHsColor,
+      successHsColor,
+      errorHsColor,
+      warningHsColor,
+      popoverBackgroundColor
+    } = derived
+    const {
+      popmenuBoxShadow
+    } = base
+    return {
+      textColor: {
+        info: baseTextColor,
+        success: baseTextColor,
+        error: baseTextColor,
+        warning: baseTextColor,
+        loading: secondaryTextOverlayColor
+      },
+      iconColor: 'rgba(255, 255, 255, .5)',
+      closeColor: {
+        default: 'rgba(255, 255, 255, .5)',
+        hover: 'rgba(255, 255, 255, .6)',
+        active: 'rgba(255, 255, 255, .4)'
+      },
+      loadingCloseColor: {
+        default: 'rgba(255, 255, 255, .5)',
+        hover: 'rgba(255, 255, 255, .6)',
+        active: 'rgba(255, 255, 255, .4)'
+      },
+      color: {
+        info: infoHsColor,
+        success: successHsColor,
+        error: errorHsColor,
+        warning: warningHsColor,
+        loading: popoverBackgroundColor
+      },
+      boxShadow: {
+        info: `0 2px 12px 0 ${changeColor(infoHsColor, { alpha: '0.4' })}`,
+        success: `0 2px 12px 0 ${changeColor(successHsColor, { alpha: '0.4' })}`,
+        error: `0 2px 12px 0 ${changeColor(errorHsColor, { alpha: '0.4' })}`,
+        warning: `0 2px 12px 0 ${changeColor(warningHsColor, { alpha: '0.4' })}`,
+        loading: popmenuBoxShadow
+      }
+    }
+  }
+})

src/message/styles/light.js

@@ -0,0 +1,57 @@
+import create from '../../styles/_utils/create-component-base'
+
+export default create({
+  name: 'Message',
+  theme: 'light',
+  getDerivedVariables ({ base, derived }) {
+    const {
+      secondaryTextColor,
+      baseBackgroundColor,
+      closeColor,
+      closeHoverColor,
+      infoColor,
+      successColor,
+      errorColor,
+      warningColor,
+      popoverBackgroundColor
+    } = derived
+    const {
+      popmenuBoxShadow
+    } = base
+    const coloredBoxShadow = '0px 2px 18px 0px rgba(0, 0, 0, 0.27)'
+    return {
+      textColor: {
+        info: baseBackgroundColor,
+        success: baseBackgroundColor,
+        error: baseBackgroundColor,
+        warning: baseBackgroundColor,
+        loading: secondaryTextColor
+      },
+      iconColor: 'rgba(255, 255, 255, .45)',
+      closeColor: {
+        default: 'rgba(255, 255, 255, .5)',
+        hover: 'rgba(255, 255, 255, .6)',
+        active: 'rgba(255, 255, 255, .4)'
+      },
+      loadingCloseColor: {
+        default: closeColor,
+        hover: closeHoverColor,
+        active: closeColor
+      },
+      color: {
+        info: infoColor,
+        success: successColor,
+        error: errorColor,
+        warning: warningColor,
+        loading: popoverBackgroundColor
+      },
+      boxShadow: {
+        info: coloredBoxShadow,
+        success: coloredBoxShadow,
+        error: coloredBoxShadow,
+        warning: coloredBoxShadow,
+        loading: popmenuBoxShadow
+      }
+    }
+  }
+})