adaptivecards-react
Version:
React.js Adaptive Cards Javascript library for HTML Clients
128 lines • 6.18 kB
JavaScript
;
// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.AdaptiveCard = void 0;
var AdaptiveCards = __importStar(require("adaptivecards"));
var react_1 = __importStar(require("react"));
var PropTypes = __importStar(require("prop-types"));
var markdown = __importStar(require("markdown-it"));
var propTypes = {
/** The card schema. It must comply with the card schema. [More Info](https://docs.microsoft.com/en-us/adaptive-cards/create/cardschema) */
payload: PropTypes.object.isRequired,
/** Method that will be invoked anytime a card action is executed. [More Info](https://docs.microsoft.com/en-us/adaptive-cards/display/implementingrenderer#actions) */
onExecuteAction: PropTypes.func,
/** Method that will be invoked when a Submit action is executed. [More Info](https://docs.microsoft.com/en-us/adaptive-cards/display/implementingrenderer#actionsubmit) */
onActionSubmit: PropTypes.func,
/** Method that will be invoked when an Open Url action is executed. [More Info](https://docs.microsoft.com/en-us/adaptive-cards/display/implementingrenderer#actionopenurl) */
onActionOpenUrl: PropTypes.func,
/** Method that will be invoked when a Show Card action is executed. [More Info](https://docs.microsoft.com/en-us/adaptive-cards/display/implementingrenderer#actionshowcard) */
onActionShowCard: PropTypes.func,
/** Method that will be invoked if an error is thrown while trying to render a card. */
onError: PropTypes.func,
/** JSX styles that will be applied to the card conatiner */
style: PropTypes.object,
/** HostConfig. [More Info](https://docs.microsoft.com/en-us/adaptive-cards/rendering-cards/host-config) */
hostConfig: PropTypes.object,
};
var defaultOpenUrlHandler = function (action) {
window.open(action.url, '_blank');
};
var setUpMarkdownIt = function () {
if (!AdaptiveCards.AdaptiveCard.onProcessMarkdown) {
AdaptiveCards.AdaptiveCard.onProcessMarkdown = function (text, result) {
result.outputHtml = new markdown.default().render(text);
result.didProcess = true;
};
}
};
setUpMarkdownIt();
var AdaptiveCard = function (_a) {
var payload = _a.payload, onExecuteAction = _a.onExecuteAction, onActionSubmit = _a.onActionSubmit, onActionOpenUrl = _a.onActionOpenUrl, onActionShowCard = _a.onActionShowCard, onError = _a.onError, style = _a.style, hostConfig = _a.hostConfig;
var _b = (0, react_1.useState)(), error = _b[0], setError = _b[1];
var targetRef = (0, react_1.useRef)(null);
var cardRef = (0, react_1.useRef)(new AdaptiveCards.AdaptiveCard());
var executeAction = (0, react_1.useCallback)(function (a) {
var type = a.getJsonTypeName();
switch (type) {
case AdaptiveCards.OpenUrlAction.JsonTypeName: {
if (onActionOpenUrl) {
onActionOpenUrl(a);
}
else {
defaultOpenUrlHandler(a);
}
break;
}
case AdaptiveCards.ShowCardAction.JsonTypeName: {
if (onActionShowCard) {
onActionShowCard(a);
}
break;
}
case AdaptiveCards.SubmitAction.JsonTypeName: {
if (onActionSubmit) {
onActionSubmit(a);
}
break;
}
}
// TODO: Why is there a global action handler when we have specific
// handlers for the above cases? Can we simplify to one approach?
if (onExecuteAction) {
onExecuteAction(a);
}
}, [onActionOpenUrl, onActionShowCard, onActionSubmit, onExecuteAction]);
(0, react_1.useEffect)(function () {
cardRef.current.onExecuteAction = executeAction;
}, [executeAction]);
(0, react_1.useEffect)(function () {
cardRef.current.hostConfig = new AdaptiveCards.HostConfig(hostConfig);
}, [hostConfig]);
(0, react_1.useEffect)(function () {
var _a, _b;
if (!targetRef.current) {
return;
}
var card = cardRef.current;
try {
card.parse(payload);
var result = card.render();
var trustedHtml = (typeof window === 'undefined') ? "" : ((_b = (_a = window.trustedTypes) === null || _a === void 0 ? void 0 : _a.emptyHTML) !== null && _b !== void 0 ? _b : "");
targetRef.current.innerHTML = trustedHtml;
targetRef.current.appendChild(result);
}
catch (cardRenderError) {
if (onError) {
onError(cardRenderError);
setError(cardRenderError);
}
}
}, [hostConfig, payload, onError]);
if (error) {
return react_1.default.createElement("div", { style: { color: 'red' } }, error.message);
}
return react_1.default.createElement("div", { style: style, ref: targetRef });
};
exports.AdaptiveCard = AdaptiveCard;
exports.AdaptiveCard.propTypes = propTypes;
//# sourceMappingURL=adaptive-card.js.map