@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
177 lines • 8.37 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AdaptiveCardHost = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_1 = require("react");
var react_theme_provider_1 = require("@fluentui/react-theme-provider");
var theme_1 = require("@fluentui/theme");
var adaptivecards_1 = require("adaptivecards");
var adaptivecards_templating_1 = require("adaptivecards-templating");
var react_2 = require("@fluentui/react");
var FluentUIDefaultTheme_1 = require("../../common/fluentUIThemes/FluentUIDefaultTheme");
var AdaptiveCardHost_HostConfig_1 = require("./AdaptiveCardHost.HostConfig");
var AdaptiveCardHost_Utilities_1 = require("./AdaptiveCardHost.Utilities");
var fluentUI_1 = require("./fluentUI");
var AdaptiveCardHostThemeType_1 = require("./models/AdaptiveCardHostThemeType");
var AdaptiveCardHost = function (props) {
var renderElementRef = (0, react_1.useRef)(null);
var adaptiveCardInstanceRef = (0, react_1.useRef)(null);
var serializationContextInstanceRef = (0, react_1.useRef)(null);
var fluentUIThemeInstanceRef = (0, react_1.useRef)(null);
var fluentUICustomizerContext = React.useContext(react_2.CustomizerContext);
var adaptiveCardInstanceRefDependencies = [
props.card,
props.onSetCustomElements,
props.onSetCustomActions,
props.onUpdateHostCapabilities,
];
// Init Process Markdown
(0, react_1.useEffect)(function () {
(0, AdaptiveCardHost_Utilities_1.initProcessMarkdown)();
}, []);
// *****
// create the instance of AdaptiveCard & SerializationContext
(0, react_1.useEffect)(function () {
adaptiveCardInstanceRef.current = new adaptivecards_1.AdaptiveCard();
serializationContextInstanceRef.current = new adaptivecards_1.SerializationContext();
}, tslib_1.__spreadArray([], adaptiveCardInstanceRefDependencies, true));
// *****
// create executeAction
var invokeAction = (0, react_1.useCallback)(function (action) {
if (props.onInvokeAction) {
var actionResult = void 0;
var type = action.getJsonTypeName();
switch (type) {
case adaptivecards_1.OpenUrlAction.JsonTypeName:
{
var openUrlAction = action;
actionResult = {
type: type,
title: openUrlAction.title,
url: openUrlAction.url,
};
}
break;
case adaptivecards_1.SubmitAction.JsonTypeName:
{
var submitAction = action;
actionResult = {
type: type,
title: submitAction.title,
data: submitAction.data,
};
}
break;
case adaptivecards_1.ExecuteAction.JsonTypeName:
{
var executeAction = action;
actionResult = {
type: type,
title: executeAction.title,
data: executeAction.data,
verb: executeAction.verb,
};
}
break;
}
props.onInvokeAction(actionResult);
}
}, [props.onInvokeAction]);
// *****
// set hostConfig
(0, react_1.useEffect)(function () {
// set the input Fluent UI Theme
var inputFluentUITheme;
var inputThemeType = props.themeType;
if (!inputThemeType) {
inputThemeType = AdaptiveCardHostThemeType_1.AdaptiveCardHostThemeType.SharePoint;
}
// if this control is wrapped on "ThemeProvider" take the theme from the context
var contextTheme = fluentUICustomizerContext.customizations.settings.theme;
// *****
if (props.theme) {
inputFluentUITheme = props.theme;
}
else if (contextTheme) {
inputFluentUITheme = contextTheme;
}
else {
inputFluentUITheme = (0, FluentUIDefaultTheme_1.fluentUIDefaultTheme)();
}
// **********
var hostConfigResult = (0, AdaptiveCardHost_HostConfig_1.initializeAdaptiveCardHost)(inputThemeType, (0, theme_1.mergeThemes)((0, FluentUIDefaultTheme_1.fluentUIDefaultTheme)(), inputFluentUITheme));
var currentHostConfig = hostConfigResult.hostConfig;
fluentUIThemeInstanceRef.current = hostConfigResult.theme;
adaptiveCardInstanceRef.current.hostConfig = hostConfigResult.hostConfig;
if (props.onUpdateHostCapabilities) {
props.onUpdateHostCapabilities(currentHostConfig.hostCapabilities);
}
}, tslib_1.__spreadArray(tslib_1.__spreadArray([], adaptiveCardInstanceRefDependencies, true), [
fluentUICustomizerContext,
props.theme,
props.themeType,
props.hostConfig,
], false));
// *****
// set invokeAction
(0, react_1.useEffect)(function () {
adaptiveCardInstanceRef.current.onExecuteAction = invokeAction;
}, tslib_1.__spreadArray(tslib_1.__spreadArray([], adaptiveCardInstanceRefDependencies, true), [invokeAction], false));
// *****
// set elements & actions registry
(0, react_1.useEffect)(function () {
var elementRegistry = new adaptivecards_1.CardObjectRegistry();
var actionRegistry = new adaptivecards_1.CardObjectRegistry();
adaptivecards_1.GlobalRegistry.populateWithDefaultElements(elementRegistry);
adaptivecards_1.GlobalRegistry.populateWithDefaultActions(actionRegistry);
(0, fluentUI_1.registerFluentUIElements)(elementRegistry);
(0, fluentUI_1.registerFluentUIActions)(actionRegistry);
if (props.onSetCustomElements) {
props.onSetCustomElements(elementRegistry);
}
if (props.onSetCustomActions) {
props.onSetCustomActions(actionRegistry);
}
var currentSerializationContext = serializationContextInstanceRef.current;
currentSerializationContext.setElementRegistry(elementRegistry);
currentSerializationContext.setActionRegistry(actionRegistry);
}, tslib_1.__spreadArray([], adaptiveCardInstanceRefDependencies, true));
// *****
// set Adaptive Card
(0, react_1.useEffect)(function () {
var currentRenderElement = renderElementRef.current;
if (!currentRenderElement) {
return;
}
var currentAdaptiveCard = adaptiveCardInstanceRef.current;
try {
var template = new adaptivecards_templating_1.Template(props.card);
var evaluationContext = (0, AdaptiveCardHost_Utilities_1.injectContextProperty)(props.data, fluentUIThemeInstanceRef.current, props.context);
var cardPayload = template.expand(evaluationContext);
currentAdaptiveCard.parse(cardPayload, serializationContextInstanceRef.current);
var renderedElement = currentAdaptiveCard.render();
// If this isn't acceptable, we should compare the old template with the new template
if (renderedElement.outerHTML !== currentRenderElement.innerHTML) {
currentRenderElement.innerHTML = '';
currentRenderElement.appendChild(renderedElement);
}
}
catch (cardRenderError) {
if (props.onError) {
props.onError(cardRenderError);
}
}
}, tslib_1.__spreadArray(tslib_1.__spreadArray([], adaptiveCardInstanceRefDependencies, true), [
props.data,
props.hostConfig,
props.onError,
], false));
// *****
return (React.createElement(react_theme_provider_1.ThemeProvider, { theme: fluentUIThemeInstanceRef.current
? fluentUIThemeInstanceRef.current
: (0, FluentUIDefaultTheme_1.fluentUIDefaultTheme)() },
React.createElement("div", { ref: renderElementRef, className: "".concat(props.className ? props.className : ''), style: props.style })));
};
exports.AdaptiveCardHost = AdaptiveCardHost;
//# sourceMappingURL=AdaptiveCardHost.js.map