@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
182 lines • 10.8 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.AdaptiveCardDesigner = exports.EmptyCard = void 0;
var tslib_1 = require("tslib");
var monacoLoader = tslib_1.__importStar(require("@monaco-editor/loader"));
var adaptivecards_1 = require("adaptivecards");
var adaptivecards_designer_1 = require("adaptivecards-designer");
var markdown_it_1 = tslib_1.__importDefault(require("markdown-it"));
var Spinner_1 = require("@fluentui/react/lib/Spinner");
var React = tslib_1.__importStar(require("react"));
var react_1 = require("react");
var AdaptiveCardHost_Utilities_1 = require("../adaptiveCardHost/AdaptiveCardHost.Utilities");
var FluentUIDefaultTheme_1 = require("../../common/fluentUIThemes/FluentUIDefaultTheme");
var AdaptiveCardDesigner_Helpers_1 = require("./AdaptiveCardDesigner.Helpers");
var AdaptiveCardDesigner_Styles_1 = require("./AdaptiveCardDesigner.Styles");
var AdaptiveCardHostContainer_1 = require("./fluentUI/AdaptiveCardHostContainer");
var DesignerPeers_1 = require("./fluentUI/peers/DesignerPeers");
exports.EmptyCard = {
'$schema': 'http://adaptivecards.io/schemas/adaptive-card.json',
'type': 'AdaptiveCard',
'version': '1.5'
};
var AdaptiveCardDesigner = function (props) {
var adaptiveCardDesignerInstanceRef = (0, react_1.useRef)(null);
var renderElementRef = (0, react_1.useRef)();
var currentBreakpointValueRef = (0, react_1.useRef)('100%');
var _a = (0, react_1.useState)(false), isMonacoLoaded = _a[0], setIsMonacoLoaded = _a[1];
var monacoRef = (0, react_1.useRef)(null);
// updateLayout on windows resize
(0, react_1.useEffect)(function () {
function handleResize() {
var _a, _b;
(_b = (_a = adaptiveCardDesignerInstanceRef.current) === null || _a === void 0 ? void 0 : _a.designerSurface) === null || _b === void 0 ? void 0 : _b.updateLayout(true);
}
window.addEventListener('resize', handleResize);
return function () {
window.removeEventListener('resize', handleResize);
};
});
// *****
(0, react_1.useEffect)(function () {
adaptivecards_designer_1.CardDesigner.onProcessMarkdown = function (text, result) {
result.outputHtml = new markdown_it_1.default().render(text);
result.didProcess = true;
};
(0, AdaptiveCardDesigner_Styles_1.applyAdaptiveCardDesignerStyles)();
monacoLoader.default.init().then(function (monaco) {
// monaco as any => fix the problem with the type definition
monacoRef.current = monaco;
setIsMonacoLoaded(true);
})
.catch(function () { });
}, []);
(0, react_1.useEffect)(function () {
if (props.addDefaultAdaptiveCardHostContainer) {
(0, DesignerPeers_1.initializeDesignerPeers)();
}
adaptivecards_designer_1.GlobalSettings.enableDataBindingSupport = props.enableDataBindingSupport;
adaptivecards_designer_1.GlobalSettings.selectedHostContainerControlsTargetVersion = props.selectedHostContainerControlsTargetVersion;
adaptivecards_designer_1.GlobalSettings.showDataStructureToolbox = props.showDataStructureToolbox;
adaptivecards_designer_1.GlobalSettings.showSampleDataEditorToolbox = props.showSampleDataEditorToolbox;
adaptivecards_designer_1.GlobalSettings.showTargetVersionMismatchWarning = props.showTargetVersionMismatchWarning;
adaptivecards_designer_1.GlobalSettings.showVersionPicker = props.showVersionPicker;
adaptivecards_designer_1.GlobalSettings.supportedTargetVersions = props.supportedTargetVersions;
}, [props.addDefaultAdaptiveCardHostContainer,
props.enableDataBindingSupport,
props.selectedHostContainerControlsTargetVersion,
props.showDataStructureToolbox,
props.showSampleDataEditorToolbox,
props.showTargetVersionMismatchWarning,
props.showVersionPicker,
props.supportedTargetVersions]);
(0, react_1.useEffect)(function () {
if (!isMonacoLoaded) {
return;
}
var hosts = [];
if (props.hostContainers) {
hosts.push.apply(hosts, props.hostContainers);
}
if (props.addDefaultAdaptiveCardHostContainer) {
hosts.push.apply(hosts, [
new AdaptiveCardHostContainer_1.AdaptiveCardHostContainer('ACH - Default', AdaptiveCardHostContainer_1.AdaptiveCardHostContainerType.Default),
new AdaptiveCardHostContainer_1.AdaptiveCardHostContainer('ACH - Teams', AdaptiveCardHostContainer_1.AdaptiveCardHostContainerType.TeamsDefault),
new AdaptiveCardHostContainer_1.AdaptiveCardHostContainer('ACH - Teams Dark', AdaptiveCardHostContainer_1.AdaptiveCardHostContainerType.TeamsDark),
new AdaptiveCardHostContainer_1.AdaptiveCardHostContainer('ACH - Teams High Contrast', AdaptiveCardHostContainer_1.AdaptiveCardHostContainerType.TeamsHighContrast)
]);
}
var cardDesigner = new adaptivecards_designer_1.CardDesigner(hosts);
cardDesigner.bindingPreviewMode = (props.bindingPreviewMode)
? props.bindingPreviewMode
: adaptivecards_designer_1.BindingPreviewMode.GeneratedData;
(0, AdaptiveCardDesigner_Helpers_1.addToolbarButton)(cardDesigner, 'New Card', 'acd-icon-newCard', adaptivecards_designer_1.CardDesigner.ToolbarCommands.NewCard, true, adaptivecards_designer_1.CardDesigner.ToolbarCommands.NewCard, function (sender) {
var text = 'Do you want to create a new Card?';
if (confirm(text) === true) {
cardDesigner.setCard((props.newCardPayload) ? props.newCardPayload : exports.EmptyCard);
cardDesigner.clearUndoStack();
cardDesigner.designerSurface.updateLayout(true);
}
});
if (props.onSave) {
(0, AdaptiveCardDesigner_Helpers_1.addToolbarButton)(cardDesigner, 'Save', 'acd-icon-save', adaptivecards_designer_1.CardDesigner.ToolbarCommands.NewCard, true, null, function (sender) {
var payload = cardDesigner.designerSurface.getCardPayloadAsObject();
props.onSave(payload);
});
}
if (props.showFluentBreakpointsPicker) {
(0, AdaptiveCardDesigner_Helpers_1.addToolbarChoicePicker)(cardDesigner, adaptivecards_designer_1.CardDesigner.ToolbarCommands.HostAppPicker, true, 'Breakpoints:', [
{ name: 'Fluid (fit content)', value: '100%' },
{ name: 'Small (>= 320px)', value: '320px' },
{ name: 'Medium (>= 480px)', value: '480px' },
{ name: 'Large (>= 640px)', value: '640px' },
{ name: 'Extra large (>= 1024px)', value: '1024px' },
{ name: 'Extra extra large (>= 1366px)', value: '1366px' },
{ name: 'Extra extra extra large (>= 1920px)', value: '1920px' }
], function (sender) {
currentBreakpointValueRef.current = sender.value;
cardDesigner.designerSurface.context.hostContainer.cardHost.style.width = sender.value;
cardDesigner.designerSurface.updateLayout(false);
});
}
(0, AdaptiveCardDesigner_Helpers_1.hideToolbarElement)(cardDesigner, adaptivecards_designer_1.CardDesigner.ToolbarCommands.Help);
if (props.showCopyToJsonToolbarCommand === false)
(0, AdaptiveCardDesigner_Helpers_1.hideToolbarElement)(cardDesigner, adaptivecards_designer_1.CardDesigner.ToolbarCommands.CopyJSON);
if (props.snippets) {
props.snippets.forEach(function (item) {
(0, AdaptiveCardDesigner_Helpers_1.addToolboxSnippet)(cardDesigner, item.category, item.name, item.payload);
});
}
adaptiveCardDesignerInstanceRef.current = cardDesigner;
cardDesigner.attachTo(renderElementRef.current);
cardDesigner.monacoModuleLoaded(monacoRef.current);
cardDesigner.setCard((props.card) ? props.card : (props.newCardPayload) ? props.newCardPayload : exports.EmptyCard);
cardDesigner.clearUndoStack();
cardDesigner.designerSurface.updateLayout(true);
cardDesigner.onActiveHostContainerChanged = function (designer) {
var hostConfig = designer.hostContainer.getHostConfig();
cardDesigner.designerSurface.context.hostContainer.cardHost.style.width = currentBreakpointValueRef.current;
cardDesigner.designerSurface.updateLayout(false);
console.log(hostConfig);
};
cardDesigner.designerSurface.context.hostContainer.cardHost.style.width = '100%';
cardDesigner.dataToolbox.collapse();
var data = (props.data) ? props.data : { $root: {} };
var dataObject = (0, AdaptiveCardHost_Utilities_1.injectContextProperty)(data, (0, FluentUIDefaultTheme_1.fluentUIDefaultTheme)(), props.context);
(0, AdaptiveCardDesigner_Helpers_1.convertNullToEmptyString)(dataObject);
cardDesigner.dataStructure = adaptivecards_designer_1.FieldDefinition.deriveFrom(dataObject.$root);
}, [isMonacoLoaded,
props.addDefaultAdaptiveCardHostContainer,
props.onSave,
props.showFluentBreakpointsPicker,
props.showCopyToJsonToolbarCommand,
props.snippets]);
return (React.createElement(React.Fragment, null,
React.createElement("div", { ref: renderElementRef }),
!isMonacoLoaded &&
React.createElement(Spinner_1.Spinner, { style: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '100%'
}, size: Spinner_1.SpinnerSize.medium, label: 'loading...', ariaLive: 'assertive', labelPosition: 'bottom' })));
};
exports.AdaptiveCardDesigner = AdaptiveCardDesigner;
exports.AdaptiveCardDesigner.defaultProps = {
newCardPayload: exports.EmptyCard,
hostContainers: [],
supportedTargetVersions: [adaptivecards_1.Versions.v1_0, adaptivecards_1.Versions.v1_1, adaptivecards_1.Versions.v1_2, adaptivecards_1.Versions.v1_3, adaptivecards_1.Versions.v1_4, adaptivecards_1.Versions.v1_5],
snippets: [],
bindingPreviewMode: adaptivecards_designer_1.BindingPreviewMode.GeneratedData,
enableDataBindingSupport: true,
selectedHostContainerControlsTargetVersion: false,
showTargetVersionMismatchWarning: true,
showVersionPicker: false,
showSampleDataEditorToolbox: false,
showDataStructureToolbox: true,
showFluentBreakpointsPicker: true,
showCopyToJsonToolbarCommand: false,
addDefaultAdaptiveCardHostContainer: true,
injectAdaptiveCardHostContextProperty: true
};
//# sourceMappingURL=AdaptiveCardDesigner.js.map