1- import { ThemeProvider } from '@fluentui/react-theme-provider' ;
2- import { mergeThemes } from '@fluentui/theme/lib/mergeThemes' ;
3- import { Action , AdaptiveCard , CardElement , CardObjectRegistry , ExecuteAction , GlobalRegistry , OpenUrlAction , SerializationContext , SubmitAction } from 'adaptivecards' ;
4- import { Template } from 'adaptivecards-templating' ;
5- import { IPartialTheme , ITheme } from '@fluentui/react/lib/Styling' ;
6- import { CustomizerContext } from '@fluentui/react/lib/Utilities' ;
71import * as React from 'react' ;
2+ import { useCallback , useEffect , useRef } from 'react' ;
3+ import { ThemeProvider } from '@fluentui/react-theme-provider' ;
4+ import { mergeThemes } from '@fluentui/theme' ;
85import {
9- useCallback ,
10- useEffect ,
11- useRef
12- } from 'react' ;
6+ Action ,
7+ AdaptiveCard ,
8+ CardElement ,
9+ CardObjectRegistry ,
10+ ExecuteAction ,
11+ GlobalRegistry ,
12+ OpenUrlAction ,
13+ SerializationContext ,
14+ SubmitAction ,
15+ } from 'adaptivecards' ;
16+ import { Template } from 'adaptivecards-templating' ;
17+ import { IPartialTheme , ITheme , CustomizerContext } from '@fluentui/react' ;
1318import { fluentUIDefaultTheme } from '../../common/fluentUIThemes/FluentUIDefaultTheme' ;
1419import { initializeAdaptiveCardHost } from './AdaptiveCardHost.HostConfig' ;
15- import { initProcessMarkdown , injectContextProperty } from './AdaptiveCardHost.Utilities' ;
20+ import {
21+ initProcessMarkdown ,
22+ injectContextProperty ,
23+ } from './AdaptiveCardHost.Utilities' ;
1624import { registerFluentUIActions , registerFluentUIElements } from './fluentUI' ;
1725import { IAdaptiveCardHostProps } from './IAdaptiveCardHostProps' ;
1826import { AdaptiveCardHostThemeType } from './models/AdaptiveCardHostThemeType' ;
1927import { IAdaptiveCardHostActionResult } from './models/IAdaptiveCardHostActionResult' ;
2028
21- export const AdaptiveCardHost = ( props : IAdaptiveCardHostProps ) : JSX . Element => {
29+ export const AdaptiveCardHost = (
30+ props : IAdaptiveCardHostProps
31+ ) : JSX . Element => {
2232 const renderElementRef = useRef < HTMLDivElement > ( null ) ;
2333 const adaptiveCardInstanceRef = useRef < AdaptiveCard > ( null ) ;
2434 const serializationContextInstanceRef = useRef < SerializationContext > ( null ) ;
2535 const fluentUIThemeInstanceRef = useRef < ITheme > ( null ) ;
2636 const fluentUICustomizerContext = React . useContext ( CustomizerContext ) ;
27- const adaptiveCardInstanceRefDependencies = [ props . card , props . onSetCustomElements , props . onSetCustomActions , props . onUpdateHostCapabilities ] ;
37+ const adaptiveCardInstanceRefDependencies = [
38+ props . card ,
39+ props . onSetCustomElements ,
40+ props . onSetCustomActions ,
41+ props . onUpdateHostCapabilities ,
42+ ] ;
2843
2944 // Init Process Markdown
3045 useEffect ( ( ) => {
@@ -40,31 +55,50 @@ export const AdaptiveCardHost = (props: IAdaptiveCardHostProps): JSX.Element =>
4055 // *****
4156
4257 // create executeAction
43- const invokeAction = useCallback ( ( action : Action ) => {
44- if ( props . onInvokeAction ) {
45- let actionResult : IAdaptiveCardHostActionResult ;
46- const type = action . getJsonTypeName ( ) ;
47- switch ( type ) {
48- case OpenUrlAction . JsonTypeName : {
49- const openUrlAction = action as OpenUrlAction ;
50- actionResult = { type : type , title : openUrlAction . title , url : openUrlAction . url } ;
51- }
52- break ;
53- case SubmitAction . JsonTypeName : {
54- const submitAction = action as SubmitAction ;
55- actionResult = { type : type , title : submitAction . title , data : submitAction . data } ;
58+ const invokeAction = useCallback (
59+ ( action : Action ) => {
60+ if ( props . onInvokeAction ) {
61+ let actionResult : IAdaptiveCardHostActionResult ;
62+ const type = action . getJsonTypeName ( ) ;
63+ switch ( type ) {
64+ case OpenUrlAction . JsonTypeName :
65+ {
66+ const openUrlAction = action as OpenUrlAction ;
67+ actionResult = {
68+ type : type ,
69+ title : openUrlAction . title ,
70+ url : openUrlAction . url ,
71+ } ;
72+ }
73+ break ;
74+ case SubmitAction . JsonTypeName :
75+ {
76+ const submitAction = action as SubmitAction ;
77+ actionResult = {
78+ type : type ,
79+ title : submitAction . title ,
80+ data : submitAction . data ,
81+ } ;
82+ }
83+ break ;
84+ case ExecuteAction . JsonTypeName :
85+ {
86+ const executeAction = action as ExecuteAction ;
87+ actionResult = {
88+ type : type ,
89+ title : executeAction . title ,
90+ data : executeAction . data ,
91+ verb : executeAction . verb ,
92+ } ;
93+ }
94+ break ;
5695 }
57- break ;
58- case ExecuteAction . JsonTypeName : {
59- const executeAction = action as ExecuteAction ;
60- actionResult = { type : type , title : executeAction . title , data : executeAction . data , verb : executeAction . verb } ;
61- }
62- break ;
63- }
6496
65- props . onInvokeAction ( actionResult ) ;
66- }
67- } , [ props . onInvokeAction ] ) ;
97+ props . onInvokeAction ( actionResult ) ;
98+ }
99+ } ,
100+ [ props . onInvokeAction ]
101+ ) ;
68102 // *****
69103
70104 // set hostConfig
@@ -78,7 +112,8 @@ export const AdaptiveCardHost = (props: IAdaptiveCardHostProps): JSX.Element =>
78112 }
79113
80114 // if this control is wrapped on "ThemeProvider" take the theme from the context
81- const contextTheme : ITheme | IPartialTheme = fluentUICustomizerContext . customizations . settings . theme ;
115+ const contextTheme : ITheme | IPartialTheme =
116+ fluentUICustomizerContext . customizations . settings . theme ;
82117 // *****
83118
84119 if ( props . theme ) {
@@ -90,18 +125,25 @@ export const AdaptiveCardHost = (props: IAdaptiveCardHostProps): JSX.Element =>
90125 }
91126 // **********
92127
93- const hostConfigResult = initializeAdaptiveCardHost ( inputThemeType , mergeThemes ( fluentUIDefaultTheme ( ) , inputFluentUITheme ) ) ;
128+ const hostConfigResult = initializeAdaptiveCardHost (
129+ inputThemeType ,
130+ mergeThemes ( fluentUIDefaultTheme ( ) , inputFluentUITheme )
131+ ) ;
94132 const currentHostConfig = hostConfigResult . hostConfig ;
95133
96134 fluentUIThemeInstanceRef . current = hostConfigResult . theme ;
97135 adaptiveCardInstanceRef . current . hostConfig = hostConfigResult . hostConfig ;
98136
99-
100137 if ( props . onUpdateHostCapabilities ) {
101138 props . onUpdateHostCapabilities ( currentHostConfig . hostCapabilities ) ;
102139 }
103-
104- } , [ ...adaptiveCardInstanceRefDependencies , fluentUICustomizerContext , props . theme , props . themeType , props . hostConfig ] ) ;
140+ } , [
141+ ...adaptiveCardInstanceRefDependencies ,
142+ fluentUICustomizerContext ,
143+ props . theme ,
144+ props . themeType ,
145+ props . hostConfig ,
146+ ] ) ;
105147 // *****
106148
107149 // set invokeAction
@@ -132,7 +174,6 @@ export const AdaptiveCardHost = (props: IAdaptiveCardHostProps): JSX.Element =>
132174 const currentSerializationContext = serializationContextInstanceRef . current ;
133175 currentSerializationContext . setElementRegistry ( elementRegistry ) ;
134176 currentSerializationContext . setActionRegistry ( actionRegistry ) ;
135-
136177 } , [ ...adaptiveCardInstanceRefDependencies ] ) ;
137178 // *****
138179
@@ -147,30 +188,48 @@ export const AdaptiveCardHost = (props: IAdaptiveCardHostProps): JSX.Element =>
147188 const currentAdaptiveCard = adaptiveCardInstanceRef . current ;
148189 try {
149190 const template = new Template ( props . card ) ;
150- const evaluationContext = injectContextProperty ( props . data , fluentUIThemeInstanceRef . current , props . context ) ;
191+ const evaluationContext = injectContextProperty (
192+ props . data ,
193+ fluentUIThemeInstanceRef . current ,
194+ props . context
195+ ) ;
151196 const cardPayload = template . expand ( evaluationContext ) ;
152197
153- currentAdaptiveCard . parse ( cardPayload , serializationContextInstanceRef . current ) ;
198+ currentAdaptiveCard . parse (
199+ cardPayload ,
200+ serializationContextInstanceRef . current
201+ ) ;
154202
155203 const renderedElement = currentAdaptiveCard . render ( ) ;
156204 // If this isn't acceptable, we should compare the old template with the new template
157205 if ( renderedElement . outerHTML !== currentRenderElement . innerHTML ) {
158- currentRenderElement . innerHTML = "" ;
206+ currentRenderElement . innerHTML = '' ;
159207 currentRenderElement . appendChild ( renderedElement ) ;
160208 }
161209 } catch ( cardRenderError ) {
162210 if ( props . onError ) {
163211 props . onError ( cardRenderError ) ;
164212 }
165213 }
166- } , [ ...adaptiveCardInstanceRefDependencies , props . data , props . hostConfig , props . onError ] ) ;
214+ } , [
215+ ...adaptiveCardInstanceRefDependencies ,
216+ props . data ,
217+ props . hostConfig ,
218+ props . onError ,
219+ ] ) ;
167220 // *****
168221
169222 return (
170- < ThemeProvider theme = { ( fluentUIThemeInstanceRef . current ) ? fluentUIThemeInstanceRef . current : fluentUIDefaultTheme ( ) } >
223+ < ThemeProvider
224+ theme = {
225+ fluentUIThemeInstanceRef . current
226+ ? fluentUIThemeInstanceRef . current
227+ : fluentUIDefaultTheme ( )
228+ }
229+ >
171230 < div
172231 ref = { renderElementRef }
173- className = { `${ ( props . className ) ? props . className : "" } }
232+ className = { `${ props . className ? props . className : '' } }
174233 style = { props . style }
175234 />
176235 </ ThemeProvider >
0 commit comments