1- import type { VNodeTypes , CSSProperties } from 'vue' ;
1+ import type { CSSProperties } from 'vue' ;
22import Notification from '../vc-notification' ;
33import CheckCircleOutlined from '@ant-design/icons-vue/CheckCircleOutlined' ;
44import InfoCircleOutlined from '@ant-design/icons-vue/InfoCircleOutlined' ;
55import CloseCircleOutlined from '@ant-design/icons-vue/CloseCircleOutlined' ;
66import ExclamationCircleOutlined from '@ant-design/icons-vue/ExclamationCircleOutlined' ;
77import CloseOutlined from '@ant-design/icons-vue/CloseOutlined' ;
8+ import type { VueNode } from '../_util/type' ;
9+ import { renderHelper } from '../_util/util' ;
10+ import { globalConfig } from '../config-provider' ;
811
912export type NotificationPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' ;
1013
@@ -14,21 +17,26 @@ export interface ConfigProps {
1417 top ?: string | number ;
1518 bottom ?: string | number ;
1619 duration ?: number ;
20+ prefixCls ?: string ;
1721 placement ?: NotificationPlacement ;
1822 getContainer ?: ( ) => HTMLElement ;
19- closeIcon ?: VNodeTypes ;
23+ closeIcon ?: VueNode | ( ( ) => VueNode ) ;
2024}
2125
2226const notificationInstance : { [ key : string ] : any } = { } ;
2327let defaultDuration = 4.5 ;
2428let defaultTop = '24px' ;
2529let defaultBottom = '24px' ;
30+ let defaultPrefixCls = '' ;
2631let defaultPlacement : NotificationPlacement = 'topRight' ;
2732let defaultGetContainer = ( ) => document . body ;
2833let defaultCloseIcon = null ;
2934
3035function setNotificationConfig ( options : ConfigProps ) {
31- const { duration, placement, bottom, top, getContainer, closeIcon } = options ;
36+ const { duration, placement, bottom, top, getContainer, closeIcon, prefixCls } = options ;
37+ if ( prefixCls !== undefined ) {
38+ defaultPrefixCls = prefixCls ;
39+ }
3240 if ( duration !== undefined ) {
3341 defaultDuration = duration ;
3442 }
@@ -88,41 +96,37 @@ function getPlacementStyle(
8896 return style ;
8997}
9098
91- type NotificationInstanceProps = {
92- prefixCls : string ;
93- placement ?: NotificationPlacement ;
94- getContainer ?: ( ) => HTMLElement ;
95- top ?: string ;
96- bottom ?: string ;
97- closeIcon ?: VNodeTypes ;
98- } ;
99-
10099function getNotificationInstance (
101100 {
102- prefixCls,
101+ prefixCls : customizePrefixCls ,
103102 placement = defaultPlacement ,
104103 getContainer = defaultGetContainer ,
105104 top,
106105 bottom,
107106 closeIcon = defaultCloseIcon ,
108- } : NotificationInstanceProps ,
107+ appContext,
108+ } : NotificationArgsProps ,
109109 callback : ( n : any ) => void ,
110110) {
111+ const { getPrefixCls } = globalConfig ( ) ;
112+ const prefixCls = getPrefixCls ( 'notification' , customizePrefixCls || defaultPrefixCls ) ;
111113 const cacheKey = `${ prefixCls } ${ placement } ;
112114 if ( notificationInstance [ cacheKey ] ) {
113115 callback ( notificationInstance [ cacheKey ] ) ;
114116 return ;
115117 }
116118 Notification . newInstance (
117119 {
118- prefixCls,
120+ name : 'notification' ,
121+ prefixCls : customizePrefixCls || defaultPrefixCls ,
119122 class : `${ prefixCls } ${ placement } ,
120123 style : getPlacementStyle ( placement , top , bottom ) ,
124+ appContext,
121125 getContainer,
122- closeIcon : ( ) => {
126+ closeIcon : ( { prefixCls } ) => {
123127 const closeIconToRender = (
124128 < span class = { `${ prefixCls } } >
125- { closeIcon || < CloseOutlined class = { `${ prefixCls } } /> }
129+ { renderHelper ( closeIcon , { } , < CloseOutlined class = { `${ prefixCls } } /> ) }
126130 </ span >
127131 ) ;
128132 return closeIconToRender ;
@@ -143,13 +147,13 @@ const typeToIcon = {
143147} ;
144148
145149export interface NotificationArgsProps {
146- message : VNodeTypes ;
147- description ?: VNodeTypes ;
148- btn ?: VNodeTypes ;
150+ message : VueNode | ( ( ) => VueNode ) ;
151+ description ?: VueNode | ( ( ) => VueNode ) ;
152+ btn ?: VueNode | ( ( ) => VueNode ) ;
149153 key ?: string ;
150154 onClose ?: ( ) => void ;
151155 duration ?: number | null ;
152- icon ?: VNodeTypes ;
156+ icon ?: VueNode | ( ( ) => VueNode ) ;
153157 placement ?: NotificationPlacement ;
154158 style ?: CSSProperties ;
155159 prefixCls ?: string ;
@@ -159,57 +163,46 @@ export interface NotificationArgsProps {
159163 top ?: string ;
160164 bottom ?: string ;
161165 getContainer ?: ( ) => HTMLElement ;
162- closeIcon ?: VNodeTypes ;
166+ closeIcon ?: VueNode | ( ( ) => VueNode ) ;
167+ appContext ?: any ;
163168}
164169
165170function notice ( args : NotificationArgsProps ) {
166171 const { icon, type, description, message, btn } = args ;
167- const outerPrefixCls = args . prefixCls || 'ant-notification' ;
168- const prefixCls = `${ outerPrefixCls } ;
169172 const duration = args . duration === undefined ? defaultDuration : args . duration ;
170-
171- let iconNode = null ;
172- if ( icon ) {
173- iconNode = ( ) => < span class = { `${ prefixCls } } > { icon } </ span > ;
174- } else if ( type ) {
175- const Icon = typeToIcon [ type ] ;
176- iconNode = ( ) => < Icon class = { `${ prefixCls } ${ prefixCls } ${ type } } /> ;
177- }
178- const { placement, top, bottom, getContainer, closeIcon } = args ;
179- getNotificationInstance (
180- {
181- prefixCls : outerPrefixCls ,
182- placement,
183- top,
184- bottom,
185- getContainer,
186- closeIcon,
187- } ,
188- notification => {
189- notification . notice ( {
190- content : ( ) => (
173+ getNotificationInstance ( args , notification => {
174+ notification . notice ( {
175+ content : ( { prefixCls } ) => {
176+ let iconNode = null ;
177+ if ( icon ) {
178+ iconNode = ( ) => < span class = { `${ prefixCls } } > { renderHelper ( icon ) } </ span > ;
179+ } else if ( type ) {
180+ const Icon = typeToIcon [ type ] ;
181+ iconNode = ( ) => < Icon class = { `${ prefixCls } ${ prefixCls } ${ type } } /> ;
182+ }
183+ return (
191184 < div class = { iconNode ? `${ prefixCls } : '' } >
192185 { iconNode && iconNode ( ) }
193186 < div class = { `${ prefixCls } } >
194187 { ! description && iconNode ? (
195188 < span class = { `${ prefixCls } } />
196189 ) : null }
197- { message }
190+ { renderHelper ( message ) }
198191 </ div >
199- < div class = { `${ prefixCls } } > { description } </ div >
200- { btn ? < span class = { `${ prefixCls } } > { btn } </ span > : null }
192+ < div class = { `${ prefixCls } } > { renderHelper ( description ) } </ div >
193+ { btn ? < span class = { `${ prefixCls } } > { renderHelper ( btn ) } </ span > : null }
201194 </ div >
202- ) ,
203- duration ,
204- closable : true ,
205- onClose : args . onClose ,
206- onClick : args . onClick ,
207- key : args . key ,
208- style : args . style || { } ,
209- class : args . class ,
210- } ) ;
211- } ,
212- ) ;
195+ ) ;
196+ } ,
197+ duration ,
198+ closable : true ,
199+ onClose : args . onClose ,
200+ onClick : args . onClick ,
201+ key : args . key ,
202+ style : args . style || { } ,
203+ class : args . class ,
204+ } ) ;
205+ } ) ;
213206}
214207
215208const apiBase = {
0 commit comments