Skip to content

Commit f759c88

Browse files
IbrahimSulaifrags51Supreet SinghIbrahim SulaimanVivek Kozhisseri
authored
Reactnative/handle vertical content alignment (#4)
* Accessibility fix for inline-actions on inputs (microsoft#6060) * Fix for inline-actions * Input label * fact - set Co-authored-by: Supreet Singh <supsing@microsoft.com> * Handled the bleed property. In web its not having condition for fist and last. so removed this condition (microsoft#6084) Co-authored-by: Ibrahim Sulaiman <ibrahim.sulaiman@imaginea.com> * bg image shouldnt be focussed if altText is not present (microsoft#6096) Co-authored-by: Supreet Singh <supsing@microsoft.com> * Reactnative/handle bleed (microsoft#6163) * Handled the bleed property. In web its not having condition for fist and last. so removed this condition * Handled vertical content alignment and spacing none for the column * Handled the rich text block with/without paragraph Co-authored-by: Ibrahim Sulaiman <ibrahim.sulaiman@imaginea.com> * Resolved android picker styling issues (microsoft#6179) * Theming suppor to Input.Toggle (microsoft#6191) * Theming to switch? * comment Co-authored-by: Supreet Singh <supsing@microsoft.com> * Handled the vertical content alignment for container, column and columnset * Updated the snapshot Co-authored-by: Supreet Singh <supreet51.cs@gmail.com> Co-authored-by: Supreet Singh <supsing@microsoft.com> Co-authored-by: Ibrahim Sulaiman <ibrahim.sulaiman@imaginea.com> Co-authored-by: Vivek Kozhisseri <vivekvijayakrishnan@gmail.com>
1 parent dc18899 commit f759c88

File tree

7 files changed

+176
-7
lines changed

7 files changed

+176
-7
lines changed

‎source/community/reactnative/__test__/__snapshots__/adaptive-card.test.js.snap‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,6 @@ exports[`renders correctly 1`] = `
2626
"borderColor": undefined,
2727
"borderWidth": 0,
2828
},
29-
Object {
30-
"padding": 5,
31-
},
3229
],
3330
Array [
3431
Object {

‎source/community/reactnative/src/components/containers/container-wrapper.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -75,15 +75,19 @@ export class ContainerWrapper extends React.PureComponent {
7575
);
7676
switch (verticalContentAlignment) {
7777
case Enums.VerticalAlignment.Center:
78-
computedStyles.push({ justifyContent: Constants.CenterString });
78+
computedStyles.push({ flex:1, justifyContent: Constants.CenterString });
7979
break;
8080
case Enums.VerticalAlignment.Bottom:
81-
computedStyles.push({ justifyContent: Constants.FlexEnd });
81+
computedStyles.push({ flex:1, justifyContent: Constants.FlexEnd });
8282
break;
8383
default:
84-
computedStyles.push({ justifyContent: Constants.FlexStart });
84+
computedStyles.push({ flex:1, justifyContent: Constants.FlexStart });
8585
break;
8686
}
87+
//Constructing the vertical Content Alignment for nested containers
88+
if(this.payload.parent.type === Constants.TypeContainer && this.payload.type === Constants.TypeContainer) {
89+
this.payload.verticalContentAlignment = this.payload.parent["verticalContentAlignment"];
90+
}
8791
} else {
8892
// vertical content alignment - Default is top
8993
computedStyles.push({ justifyContent: Constants.FlexStart });

‎source/community/reactnative/src/components/elements/element-wrapper.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export default class ElementWrapper extends React.Component {
5959

6060
let computedStyles = [styles.inputContainer, receivedStyles];
6161

62-
if (payload.parent && payload.parent["verticalContentAlignment"] && payload.parent.type === Constants.TypeColumn) {
62+
if (payload.parent && payload.parent["verticalContentAlignment"] && payload.type !== Constants.TypeColumnSet) {
6363
// vertical content alignment
6464
let verticalContentAlignment = Utils.parseHostConfigEnum(
6565
Enums.VerticalAlignment,

‎source/community/reactnative/src/utils/constants.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ export const TypeAdaptiveCard = "AdaptiveCard";
6464
export const TypeTextBlock = "TextBlock";
6565
export const TypeRichTextBlock = "RichTextBlock";
6666
export const TypeColumn = "Column";
67+
export const TypeContainer = "Container";
6768

6869
export const TypeString = "string";
6970
export const TypeObject = "object"

‎source/community/reactnative/src/visualizer/payloads/data-binding/VerticalContentAlignment_Container.json‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
2+
{
3+
"type": "AdaptiveCard",
4+
"name": "containersNestedVerticalContentAlignment",
5+
"body": [
6+
{
7+
"type": "Container",
8+
"items": [
9+
{
10+
"type": "TextBlock",
11+
"size": "Medium",
12+
"weight": "Bolder",
13+
"text": "${cafeName}"
14+
}
15+
],
16+
"minHeight": "100px",
17+
"verticalContentAlignment": "Center"
18+
},
19+
{
20+
"type": "Container",
21+
"items": [
22+
{
23+
"type": "ColumnSet",
24+
"columns": [
25+
{
26+
"type": "Column",
27+
"items": [
28+
{
29+
"type": "Image",
30+
"style": "Person",
31+
"url": "${cafeteriaImage}",
32+
"size": "Small"
33+
}
34+
],
35+
"width": "auto"
36+
},
37+
{
38+
"type": "Column",
39+
"items": [
40+
{
41+
"type": "TextBlock",
42+
"weight": "Bolder",
43+
"text": "${creator.name}",
44+
"wrap": true
45+
},
46+
{
47+
"type": "TextBlock",
48+
"spacing": "None",
49+
"text": "Created {{DATE(${createdUtc},SHORT)}}",
50+
"isSubtle": true,
51+
"wrap": true
52+
}
53+
],
54+
"width": "stretch"
55+
}
56+
]
57+
}
58+
],
59+
"minHeight": "100px",
60+
"verticalContentAlignment": "Center"
61+
},
62+
{
63+
"type": "Container",
64+
"items": [
65+
{
66+
"type": "Container",
67+
"items": [
68+
{
69+
"type": "TextBlock",
70+
"text": "${description}",
71+
"wrap": true
72+
}
73+
],
74+
"minHeight": "100px",
75+
"verticalContentAlignment": "Center"
76+
}
77+
],
78+
"minHeight": "200px",
79+
"verticalContentAlignment": "Center"
80+
},
81+
{
82+
"type": "Container",
83+
"items": [
84+
{
85+
"type": "FactSet",
86+
"facts": [
87+
{
88+
"$data": "${properties}",
89+
"title": "${key}:",
90+
"value": "${value}"
91+
}
92+
]
93+
}
94+
],
95+
"minHeight": "300px",
96+
"verticalContentAlignment": "Center"
97+
}
98+
],
99+
"actions": [
100+
{
101+
"type": "Action.ShowCard",
102+
"title": "Set due date",
103+
"card": {
104+
"type": "AdaptiveCard",
105+
"body": [
106+
{
107+
"type": "Input.Date",
108+
"id": "dueDate"
109+
},
110+
{
111+
"type": "Input.Text",
112+
"id": "comment",
113+
"placeholder": "Add a comment",
114+
"isMultiline": true
115+
}
116+
],
117+
"actions": [
118+
{
119+
"type": "Action.Submit",
120+
"title": "OK"
121+
}
122+
],
123+
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
124+
}
125+
},
126+
{
127+
"type": "Action.OpenUrl",
128+
"title": "View",
129+
"url": "${viewUrl}"
130+
}
131+
],
132+
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
133+
"version": "1.3"
134+
}

‎source/community/reactnative/src/visualizer/payloads/data-binding/index.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,5 +14,9 @@ export default payloads = [
1414
{
1515
"title": "Stock Update",
1616
"json": require('./stock-update.json')
17+
},
18+
{
19+
"title": "Vertical Alignment Container",
20+
"json": require('./VerticalContentAlignment_Container.json')
1721
}
1822
]

‎source/community/reactnative/src/visualizer/renderer.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,35 @@ export default class Renderer extends React.Component {
115115
{ "key": "List", "value": "Backlog" },
116116
{ "key": "Assigned to", "value": "Matt Hidinger" },
117117
{ "key": "Due date", "value": "Not set" }
118+
],
119+
"cafeName": "Cafe 34",
120+
"cafeDescription": "Open Mon-Fri from 9am - 2pm",
121+
"cafeteriaImage": "https://th.bing.com/th/id/R.f70650f59a71616da0d8f4b5c73e9f60?rik=g02xYdIzQX5Img&riu=http%3a%2f%2fwww.designtechnikblog.ch%2fwp-content%2fuploads%2f2018%2f02%2f7486f09c-1dce-478b-99aa-0a142c9e9165.jpg&ehk=wNERHkKGpde%2bmt9lefTeLF88%2br6OFdhUKNG8oEExDg8%3d&risl=&pid=ImgRaw&r=0",
122+
"menu":[
123+
{
124+
"image": "https://i.pinimg.com/originals/22/28/af/2228afa177aa08b6664c76bd9d7ec56c.jpg",
125+
"station": "Station 1",
126+
"name": "Korean",
127+
"description": "Chili Pickled Cabbage, Pork Bulgogi, Korean Barbecue, Fried..."
128+
},
129+
{
130+
"image": "https://th.bing.com/th/id/R.611dd20fbfc894b973b662498027721f?rik=Ev8dUaRZCrpnTg&riu=http%3a%2f%2fdimondcafeoakland.com%2fuploads%2f3%2f4%2f7%2f7%2f34778011%2f8770113.jpg&ehk=ZSUEdr0fuSpjM22rivCpa7O8UlMNQfRozIW9UKogB1o%3d&risl=&pid=ImgRaw&r=0",
131+
"station": "Station 2",
132+
"name": "Mexican",
133+
"description": "Enchiladas, Street tacos, Guacamole"
134+
},
135+
{
136+
"image": "https://th.bing.com/th/id/OIP.NqBIh7UiCM7KRxnn6ijgRwAAAA?pid=ImgDet&rs=1",
137+
"station": "Station 3",
138+
"name": "Grille",
139+
"description": "Selection of burgers, French fries, Fountain drinks."
140+
},
141+
{
142+
"image": "https://th.bing.com/th/id/OIP.gHJJCykFexBZTex15nhCPAAAAA?pid=ImgDet&w=300&h=300&rs=1",
143+
"station": "Station 3",
144+
"name": "in.gredients",
145+
"description": "Enchiladas, Street tacos, Guacamole"
146+
}
118147
]
119148
}
120149
}

0 commit comments

Comments
 (0)