Skip to content

Commit 86faaf5

Browse files
AJIXuMuKAJIXuMuK
committed
wip
1 parent 4bec615 commit 86faaf5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+1299
-1390
lines changed

‎src/controls/adaptiveCardDesignerHost/AdaptiveCardDesigner.tsx

+14-12
Original file line numberDiff line numberDiff line change
@@ -12,23 +12,24 @@ import { applyAdaptiveCardDesignerStyles } from './AdaptiveCardDesigner.Styles';
1212
import { AdaptiveCardHostContainer, AdaptiveCardHostContainerType } from './fluentUI/AdaptiveCardHostContainer';
1313
import { initializeDesignerPeers } from './fluentUI/peers/DesignerPeers';
1414
import { IAdaptiveCardDesignerHostProps } from './IAdaptiveCardDesignerProps';
15+
import type * as editor from 'monaco-editor';
1516

1617
export const EmptyCard = {
1718
'$schema': 'http://adaptivecards.io/schemas/adaptive-card.json',
1819
'type': 'AdaptiveCard',
1920
'version': '1.5'
2021
};
2122

22-
export const AdaptiveCardDesigner = (props: IAdaptiveCardDesignerHostProps) => {
23+
export const AdaptiveCardDesigner = (props: IAdaptiveCardDesignerHostProps): JSX.Element => {
2324
const adaptiveCardDesignerInstanceRef = useRef<CardDesigner>(null);
2425
const renderElementRef = useRef<HTMLDivElement>();
2526
const currentBreakpointValueRef = useRef<string>('100%');
2627
const [isMonacoLoaded, setIsMonacoLoaded] = useState(false);
27-
const monacoRef = useRef<HTMLDivElement>(null);
28+
const monacoRef = useRef<typeof editor>(null);
2829

2930
// updateLayout on windows resize
3031
useEffect(() => {
31-
function handleResize() {
32+
function handleResize(): void {
3233
adaptiveCardDesignerInstanceRef.current?.designerSurface?.updateLayout(true);
3334
}
3435

@@ -50,9 +51,10 @@ export const AdaptiveCardDesigner = (props: IAdaptiveCardDesignerHostProps) => {
5051

5152
monacoLoader.default.init().then(monaco => {
5253
// monaco as any => fix the problem with the type definition
53-
monacoRef.current = monaco as any;
54+
monacoRef.current = monaco;
5455
setIsMonacoLoaded(true);
55-
});
56+
})
57+
.catch(() => { /* no-op; */ });
5658
}, []);
5759

5860
useEffect(() => {
@@ -84,7 +86,7 @@ export const AdaptiveCardDesigner = (props: IAdaptiveCardDesignerHostProps) => {
8486
return;
8587
}
8688

87-
let hosts: HostContainer[] = [];
89+
const hosts: HostContainer[] = [];
8890

8991
if (props.hostContainers) {
9092
hosts.push(...props.hostContainers);
@@ -99,7 +101,7 @@ export const AdaptiveCardDesigner = (props: IAdaptiveCardDesignerHostProps) => {
99101
]);
100102
}
101103

102-
let cardDesigner = new CardDesigner(hosts);
104+
const cardDesigner = new CardDesigner(hosts);
103105

104106
cardDesigner.bindingPreviewMode = (props.bindingPreviewMode)
105107
? props.bindingPreviewMode
@@ -110,7 +112,7 @@ export const AdaptiveCardDesigner = (props: IAdaptiveCardDesignerHostProps) => {
110112
true,
111113
CardDesigner.ToolbarCommands.NewCard,
112114
(sender) => {
113-
let text = 'Do you want to create a new Card?';
115+
const text = 'Do you want to create a new Card?';
114116
if (confirm(text) === true) {
115117
cardDesigner.setCard((props.newCardPayload) ? props.newCardPayload : EmptyCard);
116118
cardDesigner.clearUndoStack();
@@ -124,7 +126,7 @@ export const AdaptiveCardDesigner = (props: IAdaptiveCardDesignerHostProps) => {
124126
true,
125127
null,
126128
(sender) => {
127-
let payload = cardDesigner.designerSurface.getCardPayloadAsObject();
129+
const payload = cardDesigner.designerSurface.getCardPayloadAsObject();
128130
props.onSave(payload);
129131
});
130132
}
@@ -169,7 +171,7 @@ export const AdaptiveCardDesigner = (props: IAdaptiveCardDesignerHostProps) => {
169171
cardDesigner.designerSurface.updateLayout(true);
170172

171173
cardDesigner.onActiveHostContainerChanged = (designer: CardDesigner) => {
172-
let hostConfig = designer.hostContainer.getHostConfig();
174+
const hostConfig = designer.hostContainer.getHostConfig();
173175
cardDesigner.designerSurface.context.hostContainer.cardHost.style.width = currentBreakpointValueRef.current;
174176
cardDesigner.designerSurface.updateLayout(false);
175177
console.log(hostConfig);
@@ -178,8 +180,8 @@ export const AdaptiveCardDesigner = (props: IAdaptiveCardDesignerHostProps) => {
178180
cardDesigner.designerSurface.context.hostContainer.cardHost.style.width = '100%';
179181
cardDesigner.dataToolbox.collapse();
180182

181-
let data = (props.data) ? props.data : { $root: {} };
182-
let dataObject = injectContextProperty(data,
183+
const data = (props.data) ? props.data : { $root: {} };
184+
const dataObject = injectContextProperty(data,
183185
fluentUIDefaultTheme(),
184186
props.context);
185187

‎src/controls/adaptiveCardDesignerHost/AdaptiveCardDesignerHost.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { IStyleFunctionOrObject } from "office-ui-fabric-react";
1+
import { IStyleFunctionOrObject } from "office-ui-fabric-react/lib/Utilities";
22
import { DefaultButton } from "office-ui-fabric-react/lib/Button";
33
import { ThemeProvider } from "office-ui-fabric-react/lib/Foundation";
44
import { IPanelStyleProps, IPanelStyles, Panel, PanelType } from "office-ui-fabric-react/lib/Panel";
@@ -22,7 +22,7 @@ const panelStyles:IStyleFunctionOrObject<IPanelStyleProps, IPanelStyles> = {
2222
commands: { marginBottom: 15 }
2323
};
2424

25-
export const AdaptiveCardDesignerHost = (props: IAdaptiveCardDesignerHostProps) => {
25+
export const AdaptiveCardDesignerHost = (props: IAdaptiveCardDesignerHostProps): JSX.Element => {
2626
const [isOpen, setIsOpen] = useState(false);
2727

2828
return (
@@ -50,4 +50,4 @@ export const AdaptiveCardDesignerHost = (props: IAdaptiveCardDesignerHostProps)
5050
</ThemeProvider>
5151
</>
5252
);
53-
};
53+
};

‎src/controls/adaptiveCardDesignerHost/fluentUI/AdaptiveCardHostContainer.ts

+43-47
Original file line numberDiff line numberDiff line change
@@ -8,57 +8,53 @@ import { AdaptiveCardHostThemeType } from "../../adaptiveCardHost/models/Adaptiv
88
import { fluentUIDefaultTheme } from "../../../common/fluentUIThemes/FluentUIDefaultTheme";
99

1010
export enum AdaptiveCardHostContainerType {
11-
Default = "default",
12-
TeamsDefault = "TeamsDefault",
13-
TeamsDark = "TeamsDark",
14-
TeamsHighContrast = "TeamsHighContrast"
11+
Default = "default",
12+
TeamsDefault = "TeamsDefault",
13+
TeamsDark = "TeamsDark",
14+
TeamsHighContrast = "TeamsHighContrast"
1515
}
1616

1717
export class AdaptiveCardHostContainer extends HostContainer {
18-
private type: AdaptiveCardHostContainerType;
19-
20-
public constructor(name: string, type: AdaptiveCardHostContainerType) {
21-
super(name, "");
22-
this.type = type;
23-
24-
registerFluentUIElements(this.elementsRegistry);
25-
registerFluentUIActions(this.actionsRegistry);
26-
}
27-
28-
public renderTo(hostElement: HTMLElement) {
29-
let container = document.createElement("div");
30-
container.className = "adaptiveCardHostContainer";
31-
container.appendChild(this.cardHost);
32-
hostElement.appendChild(container);
18+
private type: AdaptiveCardHostContainerType;
19+
20+
public constructor(name: string, type: AdaptiveCardHostContainerType) {
21+
super(name, "");
22+
this.type = type;
23+
24+
registerFluentUIElements(this.elementsRegistry);
25+
registerFluentUIActions(this.actionsRegistry);
26+
}
27+
28+
public renderTo(hostElement: HTMLElement): void {
29+
const container = document.createElement("div");
30+
container.className = "adaptiveCardHostContainer";
31+
container.appendChild(this.cardHost);
32+
hostElement.appendChild(container);
33+
}
34+
35+
public getHostConfig(): HostConfig {
36+
let hostThemeType: AdaptiveCardHostThemeType;
37+
38+
switch (this.type) {
39+
case AdaptiveCardHostContainerType.Default:
40+
hostThemeType = AdaptiveCardHostThemeType.SharePoint;
41+
break;
42+
case AdaptiveCardHostContainerType.TeamsDefault:
43+
hostThemeType = AdaptiveCardHostThemeType.Teams;
44+
break;
45+
case AdaptiveCardHostContainerType.TeamsDark:
46+
hostThemeType = AdaptiveCardHostThemeType.TeamsDark;
47+
break;
48+
case AdaptiveCardHostContainerType.TeamsHighContrast:
49+
hostThemeType = AdaptiveCardHostThemeType.TeamsHighContrast;
50+
break;
3351
}
3452

35-
public getHostConfig(): HostConfig {
36-
let hostThemeType: AdaptiveCardHostThemeType;
53+
const adaptiveCardHostConfigResult = initializeAdaptiveCardHost(hostThemeType, fluentUIDefaultTheme());
54+
return adaptiveCardHostConfigResult.hostConfig;
55+
}
3756

38-
switch (this.type) {
39-
case AdaptiveCardHostContainerType.Default: {
40-
hostThemeType = AdaptiveCardHostThemeType.SharePoint;
41-
}
42-
break;
43-
case AdaptiveCardHostContainerType.TeamsDefault: {
44-
hostThemeType = AdaptiveCardHostThemeType.Teams;
45-
}
46-
break;
47-
case AdaptiveCardHostContainerType.TeamsDark: {
48-
hostThemeType = AdaptiveCardHostThemeType.TeamsDark;
49-
}
50-
break;
51-
case AdaptiveCardHostContainerType.TeamsHighContrast: {
52-
hostThemeType = AdaptiveCardHostThemeType.TeamsHighContrast;
53-
}
54-
break;
55-
}
56-
57-
let adaptiveCardHostConfigResult = initializeAdaptiveCardHost(hostThemeType, fluentUIDefaultTheme());
58-
return adaptiveCardHostConfigResult.hostConfig;
59-
}
60-
61-
get targetVersion(): Version {
62-
return Versions.v1_5;
63-
}
57+
get targetVersion(): Version {
58+
return Versions.v1_5;
59+
}
6460
}

‎src/controls/adaptiveCardDesignerHost/fluentUI/peers/ActionPeers.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export class SubmitActionPeer extends BaseSubmitActionPeer<FluentUISubmitAction>
88
export class ExecuteActionPeer extends BaseSubmitActionPeer<FluentUIExecuteAction> {
99
public static readonly verbProperty = new StringPropertyEditor(Adaptive.Versions.v1_4, "verb", "Verb");
1010

11-
public populatePropertySheet(propertySheet: PropertySheet, defaultCategory: string = PropertySheetCategory.DefaultCategory) {
11+
public populatePropertySheet(propertySheet: PropertySheet, defaultCategory: string = PropertySheetCategory.DefaultCategory): void {
1212
super.populatePropertySheet(propertySheet, defaultCategory);
1313

1414
propertySheet.add(defaultCategory, ExecuteActionPeer.verbProperty);
@@ -18,7 +18,7 @@ export class ExecuteActionPeer extends BaseSubmitActionPeer<FluentUIExecuteActio
1818
export class OpenUrlActionPeer extends TypedActionPeer<FluentUIOpenUrlAction> {
1919
public static readonly urlProperty = new StringPropertyEditor(Adaptive.Versions.v1_0, "url", "Url");
2020

21-
public populatePropertySheet(propertySheet: PropertySheet, defaultCategory: string = PropertySheetCategory.DefaultCategory) {
21+
public populatePropertySheet(propertySheet: PropertySheet, defaultCategory: string = PropertySheetCategory.DefaultCategory): void {
2222
super.populatePropertySheet(propertySheet, defaultCategory);
2323

2424
propertySheet.add(
@@ -34,4 +34,4 @@ export class ShowCardActionPeer extends TypedActionPeer<FluentUIShowCardAction>
3434
}
3535

3636
export class ToggleVisibilityActionPeer extends TypedActionPeer<FluentUIToggleVisibilityAction> {
37-
}
37+
}

‎src/controls/adaptiveCardDesignerHost/fluentUI/peers/DesignerPeers.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { FluentUIChoiceSetInput, FluentUIDateInput, FluentUINumberInput, FluentU
55
import { ChoiceSetInputPeer, DateInputPeer, NumberInputPeer, TextInputPeer, TimeInputPeer, ToggleInputPeer } from "./InputPeers";
66
import { DesignerPeerCategory } from "./Shared";
77

8-
export function initializeDesignerPeers() {
8+
export function initializeDesignerPeers(): void {
99
//https://github.com/microsoft/AdaptiveCards/blob/87e44941433326a9238de2161124fc246f12a1b6/source/nodejs/adaptivecards-designer/src/card-designer-surface.ts
1010
CardDesignerSurface.cardElementPeerRegistry.registerPeer(FluentUITextInput, TextInputPeer, DesignerPeerCategory.Inputs, "acd-icon-inputText");
1111
CardDesignerSurface.cardElementPeerRegistry.registerPeer(FluentUINumberInput, NumberInputPeer, DesignerPeerCategory.Inputs, "acd-icon-inputNumber");
@@ -19,4 +19,4 @@ export function initializeDesignerPeers() {
1919
CardDesignerSurface.actionPeerRegistry.registerPeer(FluentUIShowCardAction, ShowCardActionPeer, DesignerPeerCategory.Actions, "acd-icon-actionShowCard");
2020
CardDesignerSurface.actionPeerRegistry.registerPeer(FluentUIToggleVisibilityAction, ToggleVisibilityActionPeer, DesignerPeerCategory.Actions, "acd-icon-actionToggleVisibility");
2121
CardDesignerSurface.actionPeerRegistry.registerPeer(FluentUIExecuteAction, ExecuteActionPeer, DesignerPeerCategory.Actions, "acd-icon-actionSubmit");
22-
}
22+
}

‎src/controls/adaptiveCardDesignerHost/fluentUI/peers/InputPeers.ts

+11-11
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export class TextInputPeer extends InputPeer<FluentUITextInput> {
1313
public static readonly regexProperty = new StringPropertyEditor(Adaptive.Versions.v1_3, "regex", "Pattern");
1414

1515

16-
public populatePropertySheet(propertySheet: PropertySheet, defaultCategory: string = PropertySheetCategory.DefaultCategory) {
16+
public populatePropertySheet(propertySheet: PropertySheet, defaultCategory: string = PropertySheetCategory.DefaultCategory): void {
1717
super.populatePropertySheet(propertySheet, defaultCategory);
1818

1919
propertySheet.add(
@@ -55,7 +55,7 @@ export class TextInputPeer extends InputPeer<FluentUITextInput> {
5555
TextInputPeer.regexProperty);
5656
}
5757

58-
public initializeCardElement() {
58+
public initializeCardElement(): void {
5959
super.initializeCardElement();
6060

6161
this.cardElement.placeholder = "Placeholder text";
@@ -68,7 +68,7 @@ export class NumberInputPeer extends InputPeer<FluentUINumberInput> {
6868
public static readonly minProperty = new NumberPropertyEditor(Adaptive.Versions.v1_0, "min", "Minimum value");
6969
public static readonly maxProperty = new NumberPropertyEditor(Adaptive.Versions.v1_0, "max", "Maximum value");
7070

71-
public populatePropertySheet(propertySheet: PropertySheet, defaultCategory: string = PropertySheetCategory.DefaultCategory) {
71+
public populatePropertySheet(propertySheet: PropertySheet, defaultCategory: string = PropertySheetCategory.DefaultCategory): void {
7272
super.populatePropertySheet(propertySheet, defaultCategory);
7373

7474
propertySheet.add(
@@ -79,7 +79,7 @@ export class NumberInputPeer extends InputPeer<FluentUINumberInput> {
7979
NumberInputPeer.maxProperty);
8080
}
8181

82-
public initializeCardElement() {
82+
public initializeCardElement(): void {
8383
super.initializeCardElement();
8484

8585
this.cardElement.placeholder = "Placeholder text";
@@ -92,7 +92,7 @@ export class DateInputPeer extends InputPeer<FluentUIDateInput> {
9292
public static readonly minProperty = new StringPropertyEditor(Adaptive.Versions.v1_0, "min", "Minimum value");
9393
public static readonly maxProperty = new StringPropertyEditor(Adaptive.Versions.v1_0, "max", "Maximum value");
9494

95-
public populatePropertySheet(propertySheet: PropertySheet, defaultCategory: string = PropertySheetCategory.DefaultCategory) {
95+
public populatePropertySheet(propertySheet: PropertySheet, defaultCategory: string = PropertySheetCategory.DefaultCategory): void {
9696
super.populatePropertySheet(propertySheet, defaultCategory);
9797

9898
propertySheet.add(
@@ -108,7 +108,7 @@ export class TimeInputPeer extends InputPeer<FluentUITimeInput> {
108108
public static readonly minProperty = new StringPropertyEditor(Adaptive.Versions.v1_0, "min", "Minimum value");
109109
public static readonly maxProperty = new StringPropertyEditor(Adaptive.Versions.v1_0, "max", "Maximum value");
110110

111-
public populatePropertySheet(propertySheet: PropertySheet, defaultCategory: string = PropertySheetCategory.DefaultCategory) {
111+
public populatePropertySheet(propertySheet: PropertySheet, defaultCategory: string = PropertySheetCategory.DefaultCategory): void {
112112
super.populatePropertySheet(propertySheet, defaultCategory);
113113

114114
propertySheet.add(
@@ -126,7 +126,7 @@ export class ToggleInputPeer extends InputPeer<FluentUIToggleInput> {
126126
public static readonly valueOffProperty = new StringPropertyEditor(Adaptive.Versions.v1_0, "valueOff", "Value when off");
127127
public static readonly wrapProperty = new BooleanPropertyEditor(Adaptive.Versions.v1_2, "wrap", "Wrap");
128128

129-
public populatePropertySheet(propertySheet: PropertySheet, defaultCategory: string = PropertySheetCategory.DefaultCategory) {
129+
public populatePropertySheet(propertySheet: PropertySheet, defaultCategory: string = PropertySheetCategory.DefaultCategory): void {
130130
super.populatePropertySheet(propertySheet, defaultCategory);
131131

132132
propertySheet.add(
@@ -141,7 +141,7 @@ export class ToggleInputPeer extends InputPeer<FluentUIToggleInput> {
141141
ToggleInputPeer.wrapProperty);
142142
}
143143

144-
public initializeCardElement() {
144+
public initializeCardElement(): void {
145145
this.cardElement.title = "New Input.Toggle";
146146
}
147147
}
@@ -172,7 +172,7 @@ export class ChoiceSetInputPeer extends InputPeer<FluentUIChoiceSetInput> {
172172
"Add a new choice",
173173
"This ChoiceSet is empty");
174174

175-
public populatePropertySheet(propertySheet: PropertySheet, defaultCategory: string = PropertySheetCategory.DefaultCategory) {
175+
public populatePropertySheet(propertySheet: PropertySheet, defaultCategory: string = PropertySheetCategory.DefaultCategory): void {
176176
super.populatePropertySheet(propertySheet, defaultCategory);
177177

178178
propertySheet.add(
@@ -191,12 +191,12 @@ export class ChoiceSetInputPeer extends InputPeer<FluentUIChoiceSetInput> {
191191
ChoiceSetInputPeer.choicesProperty);
192192
}
193193

194-
public initializeCardElement() {
194+
public initializeCardElement(): void {
195195
this.cardElement.placeholder = "Placeholder text";
196196

197197
this.cardElement.choices.push(
198198
new Adaptive.Choice("Choice 1", "Choice 1"),
199199
new Adaptive.Choice("Choice 2", "Choice 2")
200200
);
201201
}
202-
}
202+
}

0 commit comments

Comments
 (0)