refactor(message): use use-container

src/_utils/composition/index.js

@@ -44,3 +44,4 @@ export function useIsMounted () {
 }
 
 export { default as useLastClickPosition } from './use-last-click-position'
+export { default as useContainer } from './use-container'

src/_utils/composition/use-container.js

@@ -0,0 +1,31 @@
+import { computed } from 'vue'
+
+export default function useContainer (
+  toRef,
+  containerClassNameRef
+) {
+  const getContainerTarget = computed(
+    () => typeof toRef.value === 'string' ? () => document.querySelector(toRef.value) : () => toRef.value
+  )
+  const getContainer = computed(
+    () => () => getContainerTarget.value().querySelector('.' + containerClassNameRef.value)
+  )
+  const mountIfNotExist = () => {
+    const targetEl = getContainerTarget.value()
+    if (!targetEl.querySelector('.' + containerClassNameRef.value)) {
+      const containerEl = document.createElement('div')
+      containerEl.className = containerClassNameRef.value
+      targetEl.appendChild(containerEl)
+    }
+  }
+  const unmountIfEmpty = () => {
+    const container = getContainer.value()
+    if (!container.childElementCount) {
+      container.parentNode.removeChild(container)
+    }
+  }
+  return [
+    mountIfNotExist,
+    unmountIfEmpty
+  ]
+}

src/message/src/Message.js

@@ -21,14 +21,10 @@ export default {
     themeable,
     usecssr(styles)
   ],
-  cssrName: 'Message',
-  emits: [
-    'close'
-  ],
   props,
   methods: {
     handleClose () {
-      this.$emit('close')
+      this.onClose()
     }
   },
   render () {

src/message/src/MessageController.js

@@ -1,30 +1,20 @@
-import { Fragment, ref, h, nextTick } from 'vue'
+import { Fragment, ref, h, nextTick, toRef } from 'vue'
 import createId from '../../_utils/vue/createId'
 import MessageEnvironment from './MessageEnvironment.js'
-
-function getContainerTarget (to) {
-  return typeof to === 'string' ? document.querySelector(to) : to
-}
-
-function getContainer (to) {
-  return getContainerTarget(to).querySelector('.n-message-container')
-}
-
-function mountContainer (to) {
-  const targetEl = getContainerTarget(to)
-  if (!targetEl.querySelector('.n-message-container')) {
-    const containerEl = document.createElement('div')
-    containerEl.className = 'n-message-container'
-    targetEl.appendChild(containerEl)
-  }
-}
+import { useContainer } from '../../_utils/composition'
 
 export default {
   name: 'MessageController',
-  setup () {
+  setup (props) {
     const messageListRef = ref([])
+    const [mountContainerIfNotExist, unmountContainerIfEmpty] = useContainer(
+      toRef(props, 'to'),
+      ref('n-message-container')
+    )
     return {
-      messageList: messageListRef
+      messageList: messageListRef,
+      mountContainerIfNotExist,
+      unmountContainerIfEmpty
     }
   },
   props: {
@@ -35,7 +25,7 @@ export default {
   },
   methods: {
     create (content, options = {}) {
-      mountContainer(this.to)
+      this.mountContainerIfNotExist()
       const key = createId()
       const messageReactive = {
         ...options,
@@ -65,10 +55,7 @@ export default {
         1
       )
       nextTick(() => {
-        const container = getContainer(this.to)
-        if (!container.childElementCount) {
-          container.parentNode.removeChild(container)
-        }
+        this.unmountContainerIfEmpty()
       })
     }
   },

src/message/src/MessageEnvironment.js

@@ -5,9 +5,6 @@ import props from './message-props'
 
 export default {
   name: 'MessageEnvironment',
-  emits: [
-    'internal-after-leave'
-  ],
   props: {
     ...props,
     duration: {
@@ -16,33 +13,33 @@ export default {
     },
     onClose: {
       type: Function,
-      default: null
+      default: () => {}
     },
     onAfterLeave: {
       type: Function,
-      default: null
-    },
-    destroy: {
-      type: Function,
-      default: null
+      default: () => {}
     },
     // private
     controller: {
       type: Object,
       required: true
     },
-    onInternalAfterLeave: {
+    destroy: {
       type: Function,
       default: null
     },
+    onInternalAfterLeave: {
+      type: Function,
+      default: () => {}
+    },
     // deprecated
     onHide: {
       type: Function,
-      default: null
+      default: () => {}
     },
     onAfterHide: {
       type: Function,
-      default: null
+      default: () => {}
     }
   },
   data () {
@@ -71,9 +68,9 @@ export default {
       if (timerId) {
         window.clearTimeout(timerId)
       }
-      if (onClose) onClose()
+      onClose()
       // deprecated
-      if (onHide) onHide()
+      onHide()
     },
     handleClose () {
       this.hide()
@@ -84,10 +81,10 @@ export default {
         onInternalAfterLeave,
         onAfterHide
       } = this
-      if (onAfterLeave) onAfterLeave()
-      if (onInternalAfterLeave) onInternalAfterLeave(this._.vnode.key)
+      onAfterLeave()
+      onInternalAfterLeave(this._.vnode.key)
       // deprecated
-      if (onAfterHide) onAfterHide()
+      onAfterHide()
     },
     // deprecated
     deactivate () {

src/message/src/message-props.js

@@ -18,5 +18,9 @@ export default {
   theme: {
     type: String,
     default: null
+  },
+  onClose: {
+    type: Function,
+    default: () => {}
   }
 }