feat(comp:notification): 支持 contentProps (#1014)

IDuxFE · Jul 27, 2022 · dddfdc0 · dddfdc0
1 parent 70a6d4a
commit dddfdc0
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 5 deletions.
diff --git a/packages/components/notification/docs/Index.zh.md b/packages/components/notification/docs/Index.zh.md
@@ -104,6 +104,31 @@ export interface NotificationRef {
 }
 ```
 
+### 拿到 content 实例的引用
+
+当 content 为 VNode 时，可以通过 contentProps 传入一个 ref 引用。
+
+```html
+<template>
+  <IxButton @click="openNotification">Open</IxButton>
+</template>
+
+<script setup lang="ts">
+import { h, ref } from 'vue'
+import { useNotification } from '@idux/components/notification'
+
+const { open } = useNotification()
+
+const contentRef = ref()
+
+const openNotification = () => open({ 
+  title: 'Basic Notification', 
+  content: h('div', 'Some contents...'),
+  contentProps: { ref: contentRef }
+})
+</script>
+```
+
 <!--- insert less variable begin  --->
 ## 主题变量
 

diff --git a/packages/components/notification/src/NotificationProvider.tsx b/packages/components/notification/src/NotificationProvider.tsx
@@ -14,9 +14,8 @@ import type {
 } from './types'
 import type { VKey } from '@idux/cdk/utils'
 import type { CommonConfig, NotificationConfig } from '@idux/components/config'
-import type { ComputedRef, Ref } from 'vue'
 
-import { TransitionGroup, computed, defineComponent, provide, ref } from 'vue'
+import { ComputedRef, Ref, TransitionGroup, cloneVNode, computed, defineComponent, isVNode, provide, ref } from 'vue'
 
 import { isArray, isUndefined, pickBy } from 'lodash-es'
 
@@ -57,9 +56,14 @@ export default defineComponent({
     return () => {
       const getChild = (notifications: NotificationOptions[]) => {
         return notifications.map(item => {
-          const { key, visible = true } = item
+          const { key, visible = true, content, contentProps } = item
           const onClose = () => destroy(key!)
-          return <Notification {...item} onClose={onClose} visible={visible}></Notification>
+          const contentNode = isVNode(content) ? cloneVNode(content, contentProps, true) : content
+          return (
+            <Notification {...item} onClose={onClose} visible={visible}>
+              {contentNode}
+            </Notification>
+          )
         })
       }
 

diff --git a/packages/components/notification/src/types.ts b/packages/components/notification/src/types.ts
@@ -8,7 +8,7 @@
 import type { PortalTargetType } from '@idux/cdk/portal'
 import type { ExtractInnerPropTypes, ExtractPublicPropTypes, MaybeArray, VKey } from '@idux/cdk/utils'
 import type { ButtonProps } from '@idux/components/button'
-import type { DefineComponent, HTMLAttributes, PropType, VNode } from 'vue'
+import type { DefineComponent, HTMLAttributes, PropType, VNode, VNodeProps } from 'vue'
 
 // 挑出部分必填的属性
 type PickRequire<T, U extends keyof T> = Pick<T, Exclude<keyof T, U>> & Required<Pick<T, U>>
@@ -71,6 +71,7 @@ export type NotificationInstance = InstanceType<DefineComponent<NotificationProp
 
 // 通过useNotification的配置
 export interface NotificationOptions<K = VKey> extends PickRequire<NotificationProps, 'title' | 'content'> {
+  contentProps?: Record<string, unknown> | VNodeProps
   onDestroy?: (key: K) => void
 }
 export type NotificationPlacementMap = Record<NotificationPlacement, NotificationOptions[]>