diff --git a/package-lock.json b/package-lock.json index 772d9550c..bbfc54b2a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2979,6 +2979,23 @@ } } }, + "@microsoft/microsoft-graph-clientv1": { + "version": "npm:@microsoft/microsoft-graph-client@1.7.2-spfx", + "resolved": "https://registry.npmjs.org/@microsoft/microsoft-graph-client/-/microsoft-graph-client-1.7.2-spfx.tgz", + "integrity": "sha512-BQN50r3tohWYOaQ0de7LJ5eCRjI6eg4RQqLhGDlgRmZIZhWzH0bhR6QBMmmxtYtwKWifhPhJSxYDW+cP67TJVw==", + "requires": { + "es6-promise": "^4.2.6", + "isomorphic-fetch": "^3.0.0", + "tslib": "^1.9.3" + }, + "dependencies": { + "tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + } + } + }, "@microsoft/microsoft-graph-types": { "version": "2.25.0", "resolved": "https://registry.npmjs.org/@microsoft/microsoft-graph-types/-/microsoft-graph-types-2.25.0.tgz", @@ -3732,25 +3749,6 @@ "@microsoft/sp-http-base": "1.17.1", "@microsoft/sp-http-msgraph": "1.17.1", "tslib": "2.3.1" - }, - "dependencies": { - "@microsoft/microsoft-graph-clientv1": { - "version": "npm:@microsoft/microsoft-graph-client@1.7.2-spfx", - "resolved": "https://registry.npmjs.org/@microsoft/microsoft-graph-client/-/microsoft-graph-client-1.7.2-spfx.tgz", - "integrity": "sha512-BQN50r3tohWYOaQ0de7LJ5eCRjI6eg4RQqLhGDlgRmZIZhWzH0bhR6QBMmmxtYtwKWifhPhJSxYDW+cP67TJVw==", - "requires": { - "es6-promise": "^4.2.6", - "isomorphic-fetch": "^3.0.0", - "tslib": "^1.9.3" - }, - "dependencies": { - "tslib": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", - "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" - } - } - } } }, "@microsoft/sp-http-base": { @@ -3768,44 +3766,6 @@ "msalBrowserLegacy": "npm:@azure/msal-browser@2.22.0", "msalLegacy": "npm:msal@1.4.12", "tslib": "2.3.1" - }, - "dependencies": { - "@azure/msal-common": { - "version": "6.4.0", - "resolved": "https://registry.npmjs.org/@azure/msal-common/-/msal-common-6.4.0.tgz", - "integrity": "sha512-WZdgq9f9O8cbxGzdRwLLMM5xjmLJ2mdtuzgXeiGxIRkVVlJ9nZ6sWnDFKa2TX8j72UXD1IfL0p/RYNoTXYoGfg==" - }, - "@microsoft/teams-js-v2": { - "version": "npm:@microsoft/teams-js@2.9.1", - "resolved": "https://registry.npmjs.org/@microsoft/teams-js/-/teams-js-2.9.1.tgz", - "integrity": "sha512-+ch8SVKIkZB4anZF05oEbvcyRcEzIVlRlzh5jSxsJ3HjOrJBd1lgfxqz6pkaAEFsAaTBSLkdziN4qtwVp72Gww==", - "requires": { - "debug": "^4.3.3" - } - }, - "msalBrowserLegacy": { - "version": "npm:@azure/msal-browser@2.22.0", - "resolved": "https://registry.npmjs.org/@azure/msal-browser/-/msal-browser-2.22.0.tgz", - "integrity": "sha512-ZpnbnzjYGRGHjWDPOLjSp47CQvhK927+W9avtLoNNCMudqs2dBfwj76lnJwObDE7TAKmCUueTiieglBiPb1mgQ==", - "requires": { - "@azure/msal-common": "^6.1.0" - } - }, - "msalLegacy": { - "version": "npm:msal@1.4.12", - "resolved": "https://registry.npmjs.org/msal/-/msal-1.4.12.tgz", - "integrity": "sha512-gjupwQ6nvNL6mZkl5NIXyUmZhTiEMRu5giNdgHMh8l5EPOnV2Xj6nukY1NIxFacSTkEYUSDB47Pej9GxDYf+1w==", - "requires": { - "tslib": "^1.9.3" - }, - "dependencies": { - "tslib": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", - "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" - } - } - } } }, "@microsoft/sp-http-msgraph": { @@ -4614,6 +4574,14 @@ } } }, + "@microsoft/teams-js-v2": { + "version": "npm:@microsoft/teams-js@2.9.1", + "resolved": "https://registry.npmjs.org/@microsoft/teams-js/-/teams-js-2.9.1.tgz", + "integrity": "sha512-+ch8SVKIkZB4anZF05oEbvcyRcEzIVlRlzh5jSxsJ3HjOrJBd1lgfxqz6pkaAEFsAaTBSLkdziN4qtwVp72Gww==", + "requires": { + "debug": "^4.3.3" + } + }, "@microsoft/tsdoc": { "version": "0.12.24", "resolved": "https://registry.npmjs.org/@microsoft/tsdoc/-/tsdoc-0.12.24.tgz", @@ -7914,21 +7882,21 @@ } }, "adaptivecards": { - "version": "2.11.1", - "resolved": "https://registry.npmjs.org/adaptivecards/-/adaptivecards-2.11.1.tgz", - "integrity": "sha512-dyF23HK+lRMEreexJgHz4y9U5B0ZuGk66N8nhwXRnICyYjq8hE4A6n8rLoV/CNY2QAZ0iRjOIR2J8U7M1CKl8Q==" + "version": "2.11.2", + "resolved": "https://registry.npmjs.org/adaptivecards/-/adaptivecards-2.11.2.tgz", + "integrity": "sha512-yV+o272Xe+qVoz0yIaJAo0RwLtRUX8XyuXIaKepaS+Ei3BgU2w5yl2g0d1UbgoFAyRtk9mVZuvWtPiM8mj+FmA==" }, "adaptivecards-controls": { - "version": "0.9.0", - "resolved": "https://registry.npmjs.org/adaptivecards-controls/-/adaptivecards-controls-0.9.0.tgz", - "integrity": "sha512-8qh2DBgflFH8s4FJlcmrGgkMYrfY4BPyviDiBUd4mGGKzcA7bLkNdSxGU3K8JlIkqxXhTSCa2/j5qcfsphIBYQ==" + "version": "0.10.1", + "resolved": "https://registry.npmjs.org/adaptivecards-controls/-/adaptivecards-controls-0.10.1.tgz", + "integrity": "sha512-6Ec6lfYfgG0enzVzRPtNSuaLqImqz+L3jq3NL1z+7MfNXFtf3Evk9yfwx/I5OhN9fNXZhvi2Fss+cNpxg0gDxQ==" }, "adaptivecards-designer": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/adaptivecards-designer/-/adaptivecards-designer-2.3.0.tgz", - "integrity": "sha512-nbM9FHBf72ovlhFP5gmmaGXyKqc4miASAtFfe++73TPbE6a6tJDa0tkHqTYC7atm3+oY4Lm9U0uCZmdWT2iNOw==", + "version": "2.4.3", + "resolved": "https://registry.npmjs.org/adaptivecards-designer/-/adaptivecards-designer-2.4.3.tgz", + "integrity": "sha512-Nolojtbr5aRLRpvyJQCX3ChFeJkZ+pDWtxAxful6LD4/RIMI/LtjH0Cy9kEt53M7ckXdtMBNSmAeK2g50M9GNg==", "requires": { - "adaptivecards-controls": "^0.9.0", + "adaptivecards-controls": "^0.10.1", "clipboard": "^2.0.1" } }, @@ -12015,6 +11983,14 @@ } } }, + "dom7": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/dom7/-/dom7-4.0.6.tgz", + "integrity": "sha512-emjdpPLhpNubapLFdjNL9tP06Sr+GZkrIHEXLWvOGsytACUrkbeIdjO5g77m00BrHTznnlcNqgmn7pCN192TBA==", + "requires": { + "ssr-window": "^4.0.0" + } + }, "domain-browser": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz", @@ -19412,6 +19388,36 @@ } } }, + "msalBrowserLegacy": { + "version": "npm:@azure/msal-browser@2.22.0", + "resolved": "https://registry.npmjs.org/@azure/msal-browser/-/msal-browser-2.22.0.tgz", + "integrity": "sha512-ZpnbnzjYGRGHjWDPOLjSp47CQvhK927+W9avtLoNNCMudqs2dBfwj76lnJwObDE7TAKmCUueTiieglBiPb1mgQ==", + "requires": { + "@azure/msal-common": "^6.1.0" + }, + "dependencies": { + "@azure/msal-common": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@azure/msal-common/-/msal-common-6.4.0.tgz", + "integrity": "sha512-WZdgq9f9O8cbxGzdRwLLMM5xjmLJ2mdtuzgXeiGxIRkVVlJ9nZ6sWnDFKa2TX8j72UXD1IfL0p/RYNoTXYoGfg==" + } + } + }, + "msalLegacy": { + "version": "npm:msal@1.4.12", + "resolved": "https://registry.npmjs.org/msal/-/msal-1.4.12.tgz", + "integrity": "sha512-gjupwQ6nvNL6mZkl5NIXyUmZhTiEMRu5giNdgHMh8l5EPOnV2Xj6nukY1NIxFacSTkEYUSDB47Pej9GxDYf+1w==", + "requires": { + "tslib": "^1.9.3" + }, + "dependencies": { + "tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + } + } + }, "mu2": { "version": "0.5.21", "resolved": "https://registry.npmjs.org/mu2/-/mu2-0.5.21.tgz", @@ -26440,6 +26446,11 @@ "tweetnacl": "~0.14.0" } }, + "ssr-window": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz", + "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==" + }, "ssri": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.2.tgz", @@ -26926,6 +26937,15 @@ } } }, + "swiper": { + "version": "8.4.7", + "resolved": "https://registry.npmjs.org/swiper/-/swiper-8.4.7.tgz", + "integrity": "sha512-VwO/KU3i9IV2Sf+W2NqyzwWob4yX9Qdedq6vBtS0rFqJ6Fa5iLUJwxQkuD4I38w0WDJwmFl8ojkdcRFPHWD+2g==", + "requires": { + "dom7": "^4.0.4", + "ssr-window": "^4.0.2" + } + }, "symbol": { "version": "0.2.3", "resolved": "https://registry.npmjs.org/symbol/-/symbol-0.2.3.tgz", diff --git a/package.json b/package.json index 54de42ddb..12cb311bd 100644 --- a/package.json +++ b/package.json @@ -44,8 +44,9 @@ "@popperjs/core": "2.5.4", "@uifabric/icons": "7.9.5", "adaptive-expressions": "^4.15.0", - "adaptivecards": "^2.10.0", - "adaptivecards-designer": "2.3.0", + "adaptivecards": "2.11.2", + "swiper": "^8.2.6", + "adaptivecards-designer": "2.4.3", "adaptivecards-templating": "^2.2.0", "animate.css": "^4.1.1", "chart.js": "2.9.4", diff --git a/src/controls/adaptiveCardDesignerHost/AdaptiveCardDesigner.tsx b/src/controls/adaptiveCardDesignerHost/AdaptiveCardDesigner.tsx index c6041ae38..a51518611 100644 --- a/src/controls/adaptiveCardDesignerHost/AdaptiveCardDesigner.tsx +++ b/src/controls/adaptiveCardDesignerHost/AdaptiveCardDesigner.tsx @@ -15,218 +15,217 @@ import { IAdaptiveCardDesignerHostProps } from './IAdaptiveCardDesignerProps'; import type * as editor from 'monaco-editor'; export const EmptyCard = { - '$schema': 'http://adaptivecards.io/schemas/adaptive-card.json', - 'type': 'AdaptiveCard', - 'version': '1.5' + '$schema': 'http://adaptivecards.io/schemas/adaptive-card.json', + 'type': 'AdaptiveCard', + 'version': '1.5' }; export const AdaptiveCardDesigner = (props: IAdaptiveCardDesignerHostProps): JSX.Element => { - const adaptiveCardDesignerInstanceRef = useRef(null); - const renderElementRef = useRef(); - const currentBreakpointValueRef = useRef('100%'); - const [isMonacoLoaded, setIsMonacoLoaded] = useState(false); - const monacoRef = useRef(null); - - // updateLayout on windows resize - useEffect(() => { - function handleResize(): void { - adaptiveCardDesignerInstanceRef.current?.designerSurface?.updateLayout(true); + const adaptiveCardDesignerInstanceRef = useRef(null); + const renderElementRef = useRef(); + const currentBreakpointValueRef = useRef('100%'); + const [isMonacoLoaded, setIsMonacoLoaded] = useState(false); + const monacoRef = useRef(null); + + // updateLayout on windows resize + useEffect(() => { + function handleResize(): void { + adaptiveCardDesignerInstanceRef.current?.designerSurface?.updateLayout(true); + } + + window.addEventListener('resize', handleResize); + + return () => { + window.removeEventListener('resize', handleResize); + }; + }); + // ***** + + useEffect(() => { + CardDesigner.onProcessMarkdown = (text, result) => { + result.outputHtml = new markdownit().render(text); + result.didProcess = true; + }; + + applyAdaptiveCardDesignerStyles(); + + monacoLoader.default.init().then(monaco => { + // monaco as any => fix the problem with the type definition + monacoRef.current = monaco; + setIsMonacoLoaded(true); + }) + .catch(() => { /* no-op; */ }); + }, []); + + useEffect(() => { + + if (props.addDefaultAdaptiveCardHostContainer) { + initializeDesignerPeers(); + } + + GlobalSettings.enableDataBindingSupport = props.enableDataBindingSupport; + GlobalSettings.selectedHostContainerControlsTargetVersion = props.selectedHostContainerControlsTargetVersion; + GlobalSettings.showDataStructureToolbox = props.showDataStructureToolbox; + GlobalSettings.showSampleDataEditorToolbox = props.showSampleDataEditorToolbox; + GlobalSettings.showTargetVersionMismatchWarning = props.showTargetVersionMismatchWarning; + GlobalSettings.showVersionPicker = props.showVersionPicker; + GlobalSettings.supportedTargetVersions = props.supportedTargetVersions; + + }, [props.addDefaultAdaptiveCardHostContainer, + props.enableDataBindingSupport, + props.selectedHostContainerControlsTargetVersion, + props.showDataStructureToolbox, + props.showSampleDataEditorToolbox, + props.showTargetVersionMismatchWarning, + props.showVersionPicker, + props.supportedTargetVersions]); + + useEffect(() => { + + if (!isMonacoLoaded) { + return; + } + + const hosts: HostContainer[] = []; + + if (props.hostContainers) { + hosts.push(...props.hostContainers); + } + + if (props.addDefaultAdaptiveCardHostContainer) { + hosts.push(...[ + new AdaptiveCardHostContainer('ACH - Default', AdaptiveCardHostContainerType.Default), + new AdaptiveCardHostContainer('ACH - Teams', AdaptiveCardHostContainerType.TeamsDefault), + new AdaptiveCardHostContainer('ACH - Teams Dark', AdaptiveCardHostContainerType.TeamsDark), + new AdaptiveCardHostContainer('ACH - Teams High Contrast', AdaptiveCardHostContainerType.TeamsHighContrast) + ]); + } + + const cardDesigner = new CardDesigner(hosts); + + cardDesigner.bindingPreviewMode = (props.bindingPreviewMode) + ? props.bindingPreviewMode + : BindingPreviewMode.GeneratedData; + + addToolbarButton(cardDesigner, 'New Card', 'acd-icon-newCard', + CardDesigner.ToolbarCommands.NewCard, + true, + CardDesigner.ToolbarCommands.NewCard, + (sender) => { + const text = 'Do you want to create a new Card?'; + if (confirm(text) === true) { + cardDesigner.setCard((props.newCardPayload) ? props.newCardPayload : EmptyCard); + cardDesigner.clearUndoStack(); + cardDesigner.designerSurface.updateLayout(true); } - - window.addEventListener('resize', handleResize); - - return () => { - window.removeEventListener('resize', handleResize); - }; - }); - // ***** - - useEffect(() => { - CardDesigner.onProcessMarkdown = (text, result) => { - result.outputHtml = new markdownit().render(text); - result.didProcess = true; - }; - - applyAdaptiveCardDesignerStyles(); - - monacoLoader.default.init().then(monaco => { - // monaco as any => fix the problem with the type definition - monacoRef.current = monaco; - setIsMonacoLoaded(true); - }) - .catch(() => { /* no-op; */ }); - }, []); - - useEffect(() => { - - if (props.addDefaultAdaptiveCardHostContainer) { - initializeDesignerPeers(); - } - - GlobalSettings.enableDataBindingSupport = props.enableDataBindingSupport; - GlobalSettings.selectedHostContainerControlsTargetVersion = props.selectedHostContainerControlsTargetVersion; - GlobalSettings.showDataStructureToolbox = props.showDataStructureToolbox; - GlobalSettings.showSampleDataEditorToolbox = props.showSampleDataEditorToolbox; - GlobalSettings.showTargetVersionMismatchWarning = props.showTargetVersionMismatchWarning; - GlobalSettings.showVersionPicker = props.showVersionPicker; - GlobalSettings.supportedTargetVersions = props.supportedTargetVersions; - - }, [props.addDefaultAdaptiveCardHostContainer, - props.enableDataBindingSupport, - props.selectedHostContainerControlsTargetVersion, - props.showDataStructureToolbox, - props.showSampleDataEditorToolbox, - props.showTargetVersionMismatchWarning, - props.showVersionPicker, - props.supportedTargetVersions]); - - useEffect(() => { - - if (!isMonacoLoaded) { - return; - } - - const hosts: HostContainer[] = []; - - if (props.hostContainers) { - hosts.push(...props.hostContainers); - } - - if (props.addDefaultAdaptiveCardHostContainer) { - hosts.push(...[ - new AdaptiveCardHostContainer('ACH - Default', AdaptiveCardHostContainerType.Default), - new AdaptiveCardHostContainer('ACH - Teams', AdaptiveCardHostContainerType.TeamsDefault), - new AdaptiveCardHostContainer('ACH - Teams Dark', AdaptiveCardHostContainerType.TeamsDark), - new AdaptiveCardHostContainer('ACH - Teams High Contrast', AdaptiveCardHostContainerType.TeamsHighContrast) - ]); - } - - const cardDesigner = new CardDesigner(hosts); - - cardDesigner.bindingPreviewMode = (props.bindingPreviewMode) - ? props.bindingPreviewMode - : BindingPreviewMode.GeneratedData; - - addToolbarButton(cardDesigner, 'New Card', 'acd-icon-newCard', - CardDesigner.ToolbarCommands.NewCard, - true, - CardDesigner.ToolbarCommands.NewCard, - (sender) => { - const text = 'Do you want to create a new Card?'; - if (confirm(text) === true) { - cardDesigner.setCard((props.newCardPayload) ? props.newCardPayload : EmptyCard); - cardDesigner.clearUndoStack(); - cardDesigner.designerSurface.updateLayout(true); - } - }); - - if (props.onSave) { - addToolbarButton(cardDesigner, 'Save', 'acd-icon-save', - CardDesigner.ToolbarCommands.NewCard, - true, - null, - (sender) => { - const payload = cardDesigner.designerSurface.getCardPayloadAsObject(); - props.onSave(payload); - }); - } - - if (props.showFluentBreakpointsPicker) { - addToolbarChoicePicker(cardDesigner, 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' } - ], - (sender: ToolbarChoicePicker) => { - currentBreakpointValueRef.current = sender.value; - cardDesigner.designerSurface.context.hostContainer.cardHost.style.width = sender.value; - cardDesigner.designerSurface.updateLayout(false); - }); - } - - hideToolbarElement(cardDesigner, CardDesigner.ToolbarCommands.Help); - - if (props.showCopyToJsonToolbarCommand === false) - hideToolbarElement(cardDesigner, CardDesigner.ToolbarCommands.CopyJSON); - - - if (props.snippets) { - props.snippets.forEach(item => { - 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 : EmptyCard); - cardDesigner.clearUndoStack(); - cardDesigner.designerSurface.updateLayout(true); - - cardDesigner.onActiveHostContainerChanged = (designer: CardDesigner) => { - const 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(); - - const data = (props.data) ? props.data : { $root: {} }; - const dataObject = injectContextProperty(data, - fluentUIDefaultTheme(), - props.context); - - convertNullToEmptyString(dataObject); - cardDesigner.sampleData = dataObject?.$root || {}; - cardDesigner.dataStructure = FieldDefinition.deriveFrom(dataObject.$root); - }, [isMonacoLoaded, - props.addDefaultAdaptiveCardHostContainer, - props.onSave, - props.showFluentBreakpointsPicker, - props.showCopyToJsonToolbarCommand, - props.snippets]); - - return (<> -
- {!isMonacoLoaded && - - } - ); + }); + + if (props.onSave) { + addToolbarButton(cardDesigner, 'Save', 'acd-icon-save', + CardDesigner.ToolbarCommands.NewCard, + true, + null, + (sender) => { + const payload = cardDesigner.designerSurface.getCardPayloadAsObject(); + props.onSave(payload); + }); + } + + if (props.showFluentBreakpointsPicker) { + addToolbarChoicePicker(cardDesigner, 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' } + ], + (sender: ToolbarChoicePicker) => { + currentBreakpointValueRef.current = sender.value; + cardDesigner.designerSurface.context.hostContainer.cardHost.style.width = sender.value; + cardDesigner.designerSurface.updateLayout(false); + }); + } + + hideToolbarElement(cardDesigner, CardDesigner.ToolbarCommands.Help); + + if (props.showCopyToJsonToolbarCommand === false) + hideToolbarElement(cardDesigner, CardDesigner.ToolbarCommands.CopyJSON); + + + if (props.snippets) { + props.snippets.forEach(item => { + 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 : EmptyCard); + cardDesigner.clearUndoStack(); + cardDesigner.designerSurface.updateLayout(true); + + cardDesigner.onActiveHostContainerChanged = (designer: CardDesigner) => { + const 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(); + + const data = (props.data) ? props.data : { $root: {} }; + const dataObject = injectContextProperty(data, + fluentUIDefaultTheme(), + props.context); + + convertNullToEmptyString(dataObject); + cardDesigner.dataStructure = FieldDefinition.deriveFrom(dataObject.$root); + }, [isMonacoLoaded, + props.addDefaultAdaptiveCardHostContainer, + props.onSave, + props.showFluentBreakpointsPicker, + props.showCopyToJsonToolbarCommand, + props.snippets]); + + return (<> +
+ {!isMonacoLoaded && + + } + ); }; AdaptiveCardDesigner.defaultProps = { - newCardPayload: EmptyCard, - hostContainers: [], - supportedTargetVersions: [Versions.v1_5], - snippets: [], - bindingPreviewMode: BindingPreviewMode.GeneratedData, - enableDataBindingSupport: true, - selectedHostContainerControlsTargetVersion: false, - showTargetVersionMismatchWarning: true, - showVersionPicker: false, - showSampleDataEditorToolbox: false, - showDataStructureToolbox: true, - showFluentBreakpointsPicker: true, - showCopyToJsonToolbarCommand: false, - addDefaultAdaptiveCardHostContainer: true, - injectAdaptiveCardHostContextProperty: true + newCardPayload: EmptyCard, + hostContainers: [], + supportedTargetVersions: [Versions.v1_0, Versions.v1_1, Versions.v1_2, Versions.v1_3, Versions.v1_4, Versions.v1_5], + snippets: [], + bindingPreviewMode: BindingPreviewMode.GeneratedData, + enableDataBindingSupport: true, + selectedHostContainerControlsTargetVersion: false, + showTargetVersionMismatchWarning: true, + showVersionPicker: false, + showSampleDataEditorToolbox: false, + showDataStructureToolbox: true, + showFluentBreakpointsPicker: true, + showCopyToJsonToolbarCommand: false, + addDefaultAdaptiveCardHostContainer: true, + injectAdaptiveCardHostContextProperty: true }; diff --git a/src/controls/adaptiveCardDesignerHost/fluentUI/AdaptiveCardHostContainer.ts b/src/controls/adaptiveCardDesignerHost/fluentUI/AdaptiveCardHostContainer.ts index e8a5e73f9..0f137f034 100644 --- a/src/controls/adaptiveCardDesignerHost/fluentUI/AdaptiveCardHostContainer.ts +++ b/src/controls/adaptiveCardDesignerHost/fluentUI/AdaptiveCardHostContainer.ts @@ -18,7 +18,7 @@ export class AdaptiveCardHostContainer extends HostContainer { private type: AdaptiveCardHostContainerType; public constructor(name: string, type: AdaptiveCardHostContainerType) { - super(name, ""); + super(name); this.type = type; registerFluentUIElements(this.elementsRegistry); @@ -32,6 +32,10 @@ export class AdaptiveCardHostContainer extends HostContainer { hostElement.appendChild(container); } + public getCurrentStyleSheet(): string { + return ""; + } + public getHostConfig(): HostConfig { let hostThemeType: AdaptiveCardHostThemeType;