11import React from "react" ;
2- import { IconButton , ISemanticColors , ProgressIndicator , useTheme } from "@fluentui/react" ;
2+ import {
3+ Stack ,
4+ IconButton ,
5+ ISemanticColors ,
6+ ProgressIndicator ,
7+ DefaultButton ,
8+ PrimaryButton ,
9+ useTheme ,
10+ } from "@fluentui/react" ;
311import { FontIcon } from "@fluentui/react/lib/Icon" ;
412
513import "./Notification.css"
@@ -17,6 +25,13 @@ interface ProgressState {
1725 current ?: number
1826}
1927
28+ interface NotificationAction {
29+ label : string
30+ key : string
31+ primary ?: boolean
32+ onClick ?: ( ) => void
33+ }
34+
2035export interface NotificationProps {
2136 id : number | string
2237 type ?: NotificationType
@@ -25,6 +40,7 @@ export interface NotificationProps {
2540 canDismiss ?: boolean
2641 progress ?: ProgressState
2742 onClose ?: ( ) => void
43+ actions ?: NotificationAction [ ]
2844}
2945
3046const iconColorPaletteMap : { [ k in NotificationType ] : keyof ISemanticColors } = {
@@ -51,6 +67,19 @@ const getPercentComplete = (progress: NotificationProps['progress']): (number|un
5167 return percentage / 100 ;
5268}
5369
70+ const NotificationActionButton : React . FC < Omit < NotificationAction , 'key' > > = (
71+ { label, primary, onClick}
72+ ) => {
73+ const ButtonComponent = primary ? PrimaryButton : DefaultButton ;
74+ return (
75+ < ButtonComponent
76+ primary = { primary }
77+ onClick = { onClick }
78+ text = { label }
79+ />
80+ ) ;
81+ }
82+
5483const Notification : React . FunctionComponent < NotificationProps > = ( {
5584 id,
5685 title,
@@ -59,6 +88,7 @@ const Notification: React.FunctionComponent<NotificationProps> = ({
5988 canDismiss = true ,
6089 type = NotificationType . Info ,
6190 onClose,
91+ actions
6292} ) => {
6393 const { semanticColors, fonts, ...theme } = useTheme ( ) ;
6494 return (
@@ -121,6 +151,22 @@ const Notification: React.FunctionComponent<NotificationProps> = ({
121151 ) }
122152 </ div >
123153 ) }
154+ { actions ?. length && (
155+ < Stack
156+ horizontal
157+ className = "Notification__Actions"
158+ horizontalAlign = "end"
159+ tokens = {
160+ { childrenGap : 10 }
161+ }
162+ >
163+ {
164+ actions . map ( ( { key, ...props } , i ) => (
165+ < NotificationActionButton key = { key } { ...props } />
166+ ) )
167+ }
168+ </ Stack >
169+ ) }
124170
125171 </ div >
126172 ) ;
0 commit comments