Skip to content

Commit 5800479

Browse files
Vivek KozhisseriIbrahim Sulaimanfrags51Supreet SinghIbrahimSulai
authored
Reactnative/release 2.2.11 (#20)
* Upgraded the version to 2.2.9 * [React-Native] Screen reader accessibility fixes (microsoft#5982) * acc fixes * Switch-Android accessibility * Change role of picker * Prevent focus on image in absence of altText Co-authored-by: Supreet Singh <supsing@microsoft.com> * Updated the alignment and margin styles for the container, columnset, column, wrapper and image component (microsoft#6041) Co-authored-by: Ibrahim Sulaiman <ibrahim.sulaiman@imaginea.com> * Added theme config support for picker and dateTimePicker (microsoft#6054) * 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> * 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> * 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> * Revert "Reactnative/handle vertical content alignment (#4)" This reverts commit f759c88. * Updated Author details (#8) * Revert "Revert "Reactnative/handle vertical content alignment (#4)"" (#9) This reverts commit eb65e81. * Handled the Vertical Content Alignment and bleed property is hgandled for padding space. Intentionally commiting the commented code in container and element wrapper class, we will remove once VCA for column set is handled (#10) Co-authored-by: Ibrahim Sulaiman <ibrahim.sulaiman@imaginea.com> * Handled the Vertical content alignment and padding for the root level component (#11) * Hdndled the Vertical content alignment and padding for the root level components * Handled VCA columnset in the conatiner * Removed the padding for intermidiate components. Applied only to root component Co-authored-by: Ibrahim Sulaiman <ibrahim.sulaiman@imaginea.com> * Updated version and repo * Implemented the underline property for thye textRun (#12) Co-authored-by: Ibrahim Sulaiman <ibrahim.sulaiman@imaginea.com> * Fixed padding issues and other alignment issues in `Input` elements (#14) * Fixed padding issues and other alighment issues * Resolved comments * Updated the margin and padding for the action items dynamically (#13) * Updated the margin and padding for the action items dynamically * Updated the horizobntal alignemnet with stretch scenario and isEnabled is handled for custom actions Co-authored-by: Ibrahim Sulaiman <ibrahim.sulaiman@imaginea.com> * Removed the underline color (#17) Co-authored-by: Ibrahim Sulaiman <ibrahim.sulaiman@imaginea.com> * rtb italic, strikethrough (#18) Co-authored-by: Mohd Zaid <zanaseem@microsoft.com> * Accessibility Fix (#6) * Accessibility Fix * single line link * double focus fix * add import * add back rtb without paragraph * Add rich text block hyperlink for validation * Update payload Co-authored-by: Supreet Singh <supsing@microsoft.com> Co-authored-by: Ibrahim Sulaiman <ibrahim.sulaiman@imaginea.com> Co-authored-by: Supreet Singh <supreet51.cs@gmail.com> Co-authored-by: Supreet Singh <supsing@microsoft.com> Co-authored-by: IbrahimSulai <33604125+IbrahimSulai@users.noreply.github.com> Co-authored-by: Vivek Kozhisseri <vivek@Viveks-MacBook-Pro.local> Co-authored-by: Zaid Naseem <72800429+Zaidos9@users.noreply.github.com> Co-authored-by: Mohd Zaid <zanaseem@microsoft.com>
1 parent 463eeb6 commit 5800479

37 files changed

+1348
-163
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/package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎source/community/reactnative/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "adaptivecards-reactnative",
33
"description": "AdaptiveCards implementation in ReactNative",
4-
"version": "2.2.7",
4+
"version": "2.2.11",
55
"keywords": [
66
"adaptivecards",
77
"cards",

‎source/community/reactnative/src/adaptive-card.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { ThemeConfig, defaultThemeConfig } from './utils/theme-config';
1919
import { ActionWrapper } from './components/actions/action-wrapper';
2020
import PropTypes from 'prop-types';
2121
import * as Utils from './utils/util';
22+
import * as Enums from './utils/enums';
2223
import { SelectAction } from './components/actions';
2324
import ResourceInformation from './utils/resource-information';
2425
import { ContainerWrapper } from './components/containers';
@@ -184,7 +185,10 @@ export default class AdaptiveCard extends React.Component {
184185
}
185186

186187
getAdaptiveCardContent() {
187-
let containerStyles = [styles.container]
188+
// padding
189+
const padding = this.hostConfig.getEffectiveSpacing(Enums.Spacing.Padding);
190+
let containerStyles = [{ padding: padding }]
191+
188192
//If containerStyle is passed by the user from adaptive card via props, we will override this style
189193
this.props.containerStyle && containerStyles.push(this.props.containerStyle)
190194

@@ -330,9 +334,6 @@ AdaptiveCard.defaultProps = {
330334
};
331335

332336
const styles = StyleSheet.create({
333-
container: {
334-
padding: 10
335-
},
336337
actionContainer: {
337338
marginVertical: 10
338339
},

‎source/community/reactnative/src/components/actions/action-button.js‎

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,10 @@ export class ActionButton extends React.Component {
6161
computedStyles.push({ flexGrow: 0 })
6262
} else computedStyles.push({ flexGrow: 1 })
6363
if (this.hostConfig.actions.actionsOrientation === Enums.Orientation.Horizontal) {
64-
computedStyles.push({ maxWidth: this.props.maxWidth })
64+
this.hostConfig.actions.actionAlignment != Enums.ActionAlignment.Stretch && computedStyles.push({ maxWidth: this.props.maxWidth })
65+
} else {
66+
//Vertical actionsOrientation and if it is stretch, the width will be 100%
67+
this.hostConfig.actions.actionAlignment === Enums.ActionAlignment.Stretch && computedStyles.push({ width: "100%" })
6568
}
6669
return computedStyles;
6770
}
@@ -72,7 +75,8 @@ export class ActionButton extends React.Component {
7275
}
7376
this.parsePayload();
7477
let computedStyle = [this.getActionAlignment()];
75-
computedStyle.push({ opacity: this.payload.isEnabled ? 1.0 : 0.4 })
78+
const isEnabled = this.payload.isEnabled == undefined ? true : this.payload.isEnabled //Defautl value is true...We are applying for handling the custom button property
79+
computedStyle.push({ opacity: isEnabled ? 1.0 : 0.4 })
7680
const ButtonComponent = Platform.OS === Constants.PlatformAndroid ? TouchableNativeFeedback : TouchableOpacity;
7781
return (<InputContextConsumer>
7882
{({ onExecuteAction, inputArray, addResourceInformation, toggleVisibilityForElementWithID }) => {
@@ -83,7 +87,7 @@ export class ActionButton extends React.Component {
8387

8488
return <ButtonComponent
8589
style={computedStyle}
86-
disabled={!this.payload.isEnabled}
90+
disabled={!isEnabled}
8791
accessible={true}
8892
accessibilityLabel={this.altText}
8993
accessibilityRole={Constants.Button}
@@ -186,6 +190,17 @@ export class ActionButton extends React.Component {
186190
getButtonStyles = () => {
187191
let computedStyles = [this.styleConfig.button,
188192
this.styleConfig.actionIconFlex, styles.button];
193+
if(this.hostConfig.actions.actionsOrientation === Enums.Orientation.Horizontal) {
194+
if(this.props.isFirst && this.props.isLast) {
195+
//Only one lement...Margin not required
196+
} else if(this.props.isFirst) {
197+
computedStyles.push({marginRight: 5})
198+
} else if(this.props.isLast) {
199+
computedStyles.push({marginLeft: 5})
200+
} else {
201+
computedStyles.push({marginRight:5, marginLeft: 5})
202+
}
203+
}
189204

190205
if (this.sentiment == Enums.Sentiment.Positive) {
191206
computedStyles.push(this.styleConfig.defaultPositiveButtonBackgroundColor);
@@ -245,8 +260,7 @@ const styles = StyleSheet.create({
245260
justifyContent: Constants.CenterString,
246261
padding: 10,
247262
marginBottom: 10,
248-
flexGrow: 1,
249-
marginHorizontal: 5
263+
flexGrow: 1
250264
},
251265
buttonIcon: {
252266
marginLeft: 5,

‎source/community/reactnative/src/components/actions/action-wrapper.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,21 +67,23 @@ export class ActionWrapper extends React.Component {
6767
}
6868
}
6969
if (isValid) {
70-
const isFirstElement = index == 0 || this.hostConfig.actions.actionsOrientation === Enums.Orientation.Vertical
70+
const isFirstElement = index == 0
71+
const isLastElement = index == (actions.length - 1)
7172
if (element.type === 'Action.ShowCard') {
7273
this.hasShowCard = true;
7374
renderedElement.push(
7475
<Element
7576
json={element}
7677
isFirst={isFirstElement}
78+
isLast={isLastElement}
7779
maxWidth={100 / actions.length + "%"}
7880
configManager={this.props.configManager}
7981
onShowCardTapped={this.onShowAdaptiveCard}
8082
key={`${element.type}-${index}`}
8183
/>);
8284
}
8385
else {
84-
renderedElement.push(<Element json={element} configManager={this.props.configManager} isFirst={isFirstElement} maxWidth={100 / actions.length + "%"} key={`${element.type}-${index}`} />);
86+
renderedElement.push(<Element json={element} configManager={this.props.configManager} isFirst={isFirstElement} isLast={isLastElement} maxWidth={100 / actions.length + "%"} key={`${element.type}-${index}`} />);
8587
}
8688
}
8789
} else {

‎source/community/reactnative/src/components/containers/column.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export class Column extends React.Component {
5454
}
5555
return children.map((ChildElement, index) => React.cloneElement(ChildElement, {
5656
containerStyle: this.column.style,
57-
isFirst: index === 0, columnWidth: this.column.width,
57+
isFirst: index === 0, columnWidth: this.column.width,
5858
configManager: this.props.configManager
5959
}));
6060
}
@@ -142,7 +142,7 @@ export class Column extends React.Component {
142142
if (!this.isForemostElement() && this.column.spacing) {
143143
spacingStyle.push({ marginLeft: this.spacing })
144144
}
145-
spacingStyle.push({ flexGrow: 1 });
145+
// spacingStyle.push({ flexGrow: 1 });
146146

147147
if (Utils.isPixelValue(this.column.width) && Utils.isaNumber(this.column.width)) {
148148
containerViewStyle.push({ width: parseInt(this.column.width) })
@@ -165,6 +165,14 @@ export class Column extends React.Component {
165165
separatorStyles = [containerViewStyle, styles.separatorStyle];
166166
}
167167

168+
if (!this.props.isFirst) {
169+
containerViewStyle.push({ marginLeft: this.spacing });
170+
}
171+
172+
const minHeight = Utils.convertStringToNumber(this.column.minHeight);
173+
//We will pass the style as array, since it can be updated in the container wrapper if required.
174+
typeof minHeight === "number" && containerViewStyle.push({ minHeight, backgroundColor:"green" });
175+
168176
return <ContainerWrapper configManager={this.props.configManager} json={this.column} hasBackgroundImage={this.props.hasBackgroundImage} isFirst={isFirst} isLast={isLast} style={[containerViewStyle]} containerStyle={this.props.containerStyle}>
169177
<ActionComponent {...actionComponentProps}>
170178
{separator && this.renderSeparator()}

‎source/community/reactnative/src/components/containers/columnset.js‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ import {
1212
import { SelectAction } from '../actions';
1313
import ElementWrapper from '../elements/element-wrapper';
1414
import { Column } from "./column";
15+
import * as Utils from '../../utils/util';
16+
import * as Enums from '../../utils/enums';
1517
import * as Constants from '../../utils/constants';
1618
import { ContainerWrapper } from './';
1719

@@ -50,9 +52,21 @@ export class ColumnSet extends React.PureComponent {
5052

5153
internalRenderer() {
5254
const payload = this.payload;
55+
const { hostConfig } = this.props.configManager;
5356

57+
// padding
58+
const spacingEnumValue = Utils.parseHostConfigEnum(
59+
Enums.Spacing,
60+
this.payload.spacing,
61+
Enums.Spacing.Default);
62+
const padding = hostConfig.getEffectiveSpacing(spacingEnumValue);
63+
64+
const minHeight = Utils.convertStringToNumber(this.payload.minHeight);
65+
//We will pass the style as array, since it can be updated in the container wrapper if required.
66+
const containerStyle = typeof minHeight === "number" ? { minHeight } : {};
67+
5468
var columnSetContent = (
55-
<ContainerWrapper configManager={this.props.configManager} style={{ flex: this.payload.columns.length }} json={payload} containerStyle={this.props.containerStyle}>
69+
<ContainerWrapper configManager={this.props.configManager} style={[{ flex: this.payload.columns.length, marginTop: padding }, containerStyle]} json={payload} containerStyle={this.props.containerStyle}>
5670
<ElementWrapper configManager={this.props.configManager} json={payload} style={styles.defaultBGStyle} isFirst={this.props.isFirst}>
5771
{this.parsePayload()}
5872
</ElementWrapper>

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

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -63,9 +63,15 @@ export class ContainerWrapper extends React.PureComponent {
6363
*/
6464
getComputedStyles = () => {
6565
let computedStyles = [];
66-
6766
const { hostConfig } = this.props.configManager;
6867

68+
//Constructing the vertical Content Alignment for columnSet
69+
if (this.payload.parent && this.payload.parent["verticalContentAlignment"]) {
70+
if(this.payload.type === Constants.TypeColumnSet) {
71+
this.payload.verticalContentAlignment = this.payload.parent["verticalContentAlignment"];
72+
}
73+
}
74+
6975
// vertical content alignment
7076
let verticalContentAlignment = Utils.parseHostConfigEnum(
7177
Enums.VerticalAlignment,
@@ -100,17 +106,16 @@ export class ContainerWrapper extends React.PureComponent {
100106
const borderColor = styleDefinition.borderColor;
101107
computedStyles.push({ borderWidth: borderThickness, borderColor: Utils.hexToRGB(borderColor) });
102108

109+
103110
// padding
104-
const padding = hostConfig.getEffectiveSpacing(Enums.Spacing.Padding);
105-
computedStyles.push({ padding: padding });
111+
// const padding = hostConfig.getEffectiveSpacing(Enums.Spacing.Padding);
112+
if (this.payload.style) {
113+
computedStyles.push({ padding: Constants.containerPadding});
114+
}
106115

107116
// bleed
108-
if (this.payload.bleed && this.props.containerStyle) {
109-
const { isFirst, isLast } = this.props;
110-
const marginLeft = isFirst ? -padding : 0;
111-
const marginRight = isLast ? -padding : 0;
112-
113-
computedStyles.push({ marginVertical: -padding, marginLeft, marginRight });
117+
if (this.payload.bleed && this.payload.style) {
118+
computedStyles.push({ padding: -Constants.containerPadding});
114119
}
115120

116121
// height

‎source/community/reactnative/src/components/containers/factset.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ export class FactSet extends React.Component {
9595
let valueConfig = this.hostConfig.factSet.value;
9696
factSetJson.facts.map((element, index) => {
9797
renderedElement.push(
98-
<View style={[styles.textContainer]} key={`FACT-${element.title}-${index}`}>
98+
<View style={[styles.textContainer]} key={`FACT-${element.title}-${index}`} accessible={true}>
9999
<Label
100100
text={element.title}
101101
size={titleConfig.size}

0 commit comments

Comments
 (0)