u

code/base-project/base-vue/packages/ao-design/src/notification/index.ts

@@ -0,0 +1,144 @@
+import type { VNode } from 'vue'
+import { createApp, h } from 'vue'
+import { getPrefixCls } from '../_utils/getPrefixCls'
+import MessageItem from './item'
+
+type Placement
+  = | 'top-start'
+    | 'top-end'
+    | 'bottom-start'
+    | 'bottom-end'
+
+type NotificationType = 'info' | 'success' | 'warning' | 'error' | 'loading' | 'question'
+
+interface NotificationOptions {
+  content: string | VNode | (() => VNode)
+
+  title: string
+  subTitle?: string
+  type?: NotificationType
+  placement?: Placement
+  duration?: number
+  showClose?: boolean
+}
+
+interface NotificationHandle {
+  close: () => void
+}
+
+interface MessageFn {
+  (msg: NotificationOptions): NotificationHandle
+  info: (msg: NotificationOptions) => NotificationHandle
+  success: (msg: NotificationOptions) => NotificationHandle
+  warning: (msg: NotificationOptions) => NotificationHandle
+  error: (msg: NotificationOptions) => NotificationHandle
+  closeAll: () => void
+}
+
+const prefixCls = getPrefixCls('notification')
+const containers: Partial<Record<Placement, HTMLElement>> = {}
+const instances: NotificationHandle[] = []
+
+function getContainer(placement: Placement = 'top-end') {
+  if (!containers[placement]) {
+    const wrapper = document.createElement('div')
+    wrapper.className = `${prefixCls}-wrapper ${prefixCls}-placement-${placement}`
+    document.body.appendChild(wrapper)
+    containers[placement] = wrapper
+  }
+  return containers[placement]!
+}
+
+function getTransform(placement: Placement, hidden: boolean) {
+  if (placement.startsWith('top'))
+    return hidden ? 'translateY(-10px)' : 'translateY(0)'
+  if (placement.startsWith('bottom'))
+    return hidden ? 'translateY(10px)' : 'translateY(0)'
+
+  return hidden ? 'translateY(-10px)' : 'translateY(0)'
+}
+
+export function useNotification(): MessageFn {
+  const createNotification = (
+    opts: NotificationOptions,
+    defaultType: NotificationType = 'info',
+  ): NotificationHandle => {
+    const { content, title, subTitle, type = defaultType, placement = 'top-end', duration = 3000, showClose } = opts
+
+    const container = getContainer(placement)
+    let timer: number | undefined
+    let handle: NotificationHandle
+
+    const app = createApp({
+      render() {
+        return h(MessageItem, {
+          type,
+          title,
+          subTitle,
+          content,
+          placement,
+          showClose,
+          style: {
+            opacity: 0,
+            transform: getTransform(placement, true),
+            transition: 'all 0.3s ease-in-out',
+          },
+          onClose: () => handle?.close?.(),
+        })
+      },
+    })
+
+    const vm = app.mount(document.createElement('div'))
+    container.appendChild(vm.$el)
+
+    // 出现动画
+    requestAnimationFrame(() => {
+      Object.assign(vm.$el.style, {
+        opacity: '1',
+        transform: getTransform(placement, false),
+      })
+    })
+
+    handle = {
+      close: () => {
+        if (timer)
+          clearTimeout(timer)
+
+        Object.assign(vm.$el.style, {
+          opacity: '0',
+          transform: getTransform(placement, true),
+        })
+
+        setTimeout(() => {
+          if (container.contains(vm.$el))
+            container.removeChild(vm.$el)
+          app.unmount()
+          const index = instances.indexOf(handle)
+          if (index !== -1)
+            instances.splice(index, 1)
+        }, 300)
+      },
+    }
+
+    instances.push(handle)
+
+    if (duration > 0) {
+      timer = window.setTimeout(() => {
+        handle.close()
+      }, duration)
+    }
+
+    return handle
+  }
+
+  const api = ((msg: NotificationOptions) => createNotification(msg)) as MessageFn
+  api.info = msg => createNotification(msg, 'info')
+  api.success = msg => createNotification(msg, 'success')
+  api.warning = msg => createNotification(msg, 'warning')
+  api.error = msg => createNotification(msg, 'error')
+  api.closeAll = () => {
+    instances.slice().forEach(instance => instance.close())
+  }
+
+  return api
+}