-
Notifications
You must be signed in to change notification settings - Fork 747
/
CardBuilder.tsx
133 lines (106 loc) · 4.62 KB
/
CardBuilder.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
import { Attachment, CardAction, HeroCard, Thumbnail, CardImage } from '@bfemulator/custom-botframework-directlinejs';
import { AdaptiveCard, CardElement, Column, ColumnSet, Container, Image, OpenUrlAction, Size, SubmitAction, TextBlock, TextSize, TextWeight } from 'adaptivecards';
import { BotFrameworkCardAction } from './AdaptiveCardContainer';
export class AdaptiveCardBuilder {
private container: Container;
public card: AdaptiveCard;
constructor() {
this.card = new AdaptiveCard();
this.container = new Container();
this.card.addItem(this.container);
}
addColumnSet(sizes: number[], container?: Container) {
container = container || this.container;
const columnSet = new ColumnSet();
container.addItem(columnSet);
const columns = sizes.map(size => {
const column = new Column();
column.width = size;
columnSet.addColumn(column);
return column;
})
return columns;
}
addItems(cardElements: CardElement[], container?: Container) {
container = container || this.container;
cardElements.forEach(cardElement => container.addItem(cardElement));
}
addTextBlock(text: string, template: Partial<TextBlock>, container?: Container) {
container = container || this.container;
if (typeof text !== 'undefined') {
const textblock = new TextBlock();
for (let prop in template) {
(textblock as any)[prop] = (template as any)[prop];
}
textblock.text = text;
container.addItem(textblock);
}
}
addButtons(cardActions: CardAction[], includesOAuthButtons?: boolean) {
if (cardActions) {
cardActions.forEach(cardAction => {
this.card.addAction(AdaptiveCardBuilder.addCardAction(cardAction, includesOAuthButtons));
});
}
}
private static addCardAction(cardAction: CardAction, includesOAuthButtons?: boolean) {
if (cardAction.type === 'imBack' || cardAction.type === 'postBack') {
const action = new SubmitAction();
const botFrameworkCardAction: BotFrameworkCardAction = { __isBotFrameworkCardAction: true, ...cardAction };
action.data = botFrameworkCardAction;
action.title = cardAction.title;
return action;
} else if (cardAction.type === 'signin' && includesOAuthButtons) {
// Create a button specific for OAuthCard 'signin' actions (cardAction.type == signin and button action is Action.Submit)
const action = new SubmitAction();
const botFrameworkCardAction: BotFrameworkCardAction = { __isBotFrameworkCardAction: true, ...cardAction };
action.title = cardAction.title,
action.data = botFrameworkCardAction
return action;
} else {
const action = new OpenUrlAction();
const botFrameworkCardAction: BotFrameworkCardAction = { __isBotFrameworkCardAction: true, ...cardAction };
action.title = cardAction.title;
action.url = cardAction.type === 'call' ? 'tel:' + cardAction.value : cardAction.value;
return action;
}
}
addCommonHeaders(content: ICommonContent) {
this.addTextBlock(content.title, { size: TextSize.Medium, weight: TextWeight.Bolder });
this.addTextBlock(content.subtitle, { isSubtle: true, wrap: true });
this.addTextBlock(content.text, { wrap: true });
}
addCommon(content: ICommonContent) {
this.addCommonHeaders(content);
this.addButtons(content.buttons);
}
addImage(url: string, container?: Container, selectAction?: CardAction) {
container = container || this.container;
const image = new Image();
image.url = url;
image.size = Size.Stretch;
if (selectAction) {
image.selectAction = AdaptiveCardBuilder.addCardAction(selectAction);
}
container.addItem(image);
}
}
export interface ICommonContent {
title?: string,
subtitle?: string,
text?: string,
buttons?: CardAction[]
}
export const buildCommonCard = (content: ICommonContent): AdaptiveCard => {
if (!content) return null;
const cardBuilder = new AdaptiveCardBuilder();
cardBuilder.addCommon(content)
return cardBuilder.card;
};
export const buildOAuthCard = (content: ICommonContent): AdaptiveCard => {
if (!content) return null;
const cardBuilder = new AdaptiveCardBuilder();
cardBuilder.addCommonHeaders(content);
cardBuilder.addButtons(content.buttons, true);
return cardBuilder.card;
};