Merged PR 786680: Mitigate the ButtonGroup design flaw.

Mitigate the ButtonGroup design flaw.
2018-09-29 02:34:27 +00:00 · 2018-09-29 02:34:27 +00:00 · 729f64d1f4
--- a/dist/Components/Containers/ButtonGroup.js
+++ b/dist/Components/Containers/ButtonGroup.js
@ -3,15 +3,25 @@ import { View } from 'react-native';
 import { StyleManager } from '../../Styles/StyleManager';
 export class ButtonGroup extends React.Component {
    render() {
-        return (React.createElement(View, { style: {
-                flexDirection: this.flexDirection,
-                alignSelf: 'stretch',
+        return (React.createElement(View, { style: [
+                {
+                    flexDirection: this.flexDirection,
+                    alignSelf: 'stretch',
+                },
+                this.topStyles
+            ] }, this.props.children));
+    }
+    get topStyles() {
+        if (this.props.hasSpacing) {
+            return {
                marginTop: StyleManager.actionSetSpacing,
                paddingTop: 12,
                justifyContent: 'center',
                borderTopWidth: StyleManager.separatorThickness,
                borderTopColor: StyleManager.separatorColor
-            } }, this.props.children));
+            };
+        }
+        return {};
    }
    get flexDirection() {
        return StyleManager.actionDirection === 'vertically' ? 'column' : 'row';
--- a/dist/Components/Inputs/DatePanel.js
+++ b/dist/Components/Inputs/DatePanel.js
@ -35,7 +35,7 @@ export class DatePanel extends React.Component {
            return (React.createElement(ModalBox, { show: this.show },
                React.createElement(Card, { flex: 0, fit: 'content' },
                    React.createElement(DatePickerIOS, { date: TimeUtils.extractDate(this.props.value), mode: 'date', onDateChange: this.onDateChange }),
-                    React.createElement(ButtonGroup, null,
+                    React.createElement(ButtonGroup, { hasSpacing: true },
                        this.renderCancelButton(),
                        this.renderSaveButton()))));
        }
--- a/dist/Components/Inputs/TimePanel.js
+++ b/dist/Components/Inputs/TimePanel.js
@ -40,7 +40,7 @@ export class TimePanel extends React.Component {
            return (React.createElement(ModalBox, { show: this.show },
                React.createElement(Card, { flex: 0, fit: 'content' },
                    React.createElement(DatePickerIOS, { date: TimeUtils.extractTime(this.props.value), mode: 'time', onDateChange: this.onTimeChangeIos }),
-                    React.createElement(ButtonGroup, null,
+                    React.createElement(ButtonGroup, { hasSpacing: true },
                        this.renderCancelButton(),
                        this.renderSaveButton()))));
        }
--- a/dist/Views/Cards/AdaptiveCard.js
+++ b/dist/Views/Cards/AdaptiveCard.js
@ -64,7 +64,7 @@ export class AdaptiveCardView extends React.Component {
        if (!model || !model.actions || model.actions.length === 0) {
            return undefined;
        }
-        return (React.createElement(ButtonGroup, null, this.renderActions()));
+        return (React.createElement(ButtonGroup, { hasSpacing: model && model.body && model.body.length > 0 }, this.renderActions()));
    }
    renderActions() {
        const { model, theme } = this.props;
--- a/examples/AdaptiveCards/Components/Containers/ButtonGroup.js
+++ b/examples/AdaptiveCards/Components/Containers/ButtonGroup.js
@ -3,15 +3,25 @@ import { View } from 'react-native';
 import { StyleManager } from '../../Styles/StyleManager';
 export class ButtonGroup extends React.Component {
    render() {
-        return (React.createElement(View, { style: {
-                flexDirection: this.flexDirection,
-                alignSelf: 'stretch',
+        return (React.createElement(View, { style: [
+                {
+                    flexDirection: this.flexDirection,
+                    alignSelf: 'stretch',
+                },
+                this.topStyles
+            ] }, this.props.children));
+    }
+    get topStyles() {
+        if (this.props.hasSpacing) {
+            return {
                marginTop: StyleManager.actionSetSpacing,
                paddingTop: 12,
                justifyContent: 'center',
                borderTopWidth: StyleManager.separatorThickness,
                borderTopColor: StyleManager.separatorColor
-            } }, this.props.children));
+            };
+        }
+        return {};
    }
    get flexDirection() {
        return StyleManager.actionDirection === 'vertically' ? 'column' : 'row';
--- a/examples/AdaptiveCards/Components/Inputs/DatePanel.js
+++ b/examples/AdaptiveCards/Components/Inputs/DatePanel.js
@ -35,7 +35,7 @@ export class DatePanel extends React.Component {
            return (React.createElement(ModalBox, { show: this.show },
                React.createElement(Card, { flex: 0, fit: 'content' },
                    React.createElement(DatePickerIOS, { date: TimeUtils.extractDate(this.props.value), mode: 'date', onDateChange: this.onDateChange }),
-                    React.createElement(ButtonGroup, null,
+                    React.createElement(ButtonGroup, { hasSpacing: true },
                        this.renderCancelButton(),
                        this.renderSaveButton()))));
        }
--- a/examples/AdaptiveCards/Components/Inputs/TimePanel.js
+++ b/examples/AdaptiveCards/Components/Inputs/TimePanel.js
@ -40,7 +40,7 @@ export class TimePanel extends React.Component {
            return (React.createElement(ModalBox, { show: this.show },
                React.createElement(Card, { flex: 0, fit: 'content' },
                    React.createElement(DatePickerIOS, { date: TimeUtils.extractTime(this.props.value), mode: 'time', onDateChange: this.onTimeChangeIos }),
-                    React.createElement(ButtonGroup, null,
+                    React.createElement(ButtonGroup, { hasSpacing: true },
                        this.renderCancelButton(),
                        this.renderSaveButton()))));
        }
--- a/examples/AdaptiveCards/Views/Cards/AdaptiveCard.js
+++ b/examples/AdaptiveCards/Views/Cards/AdaptiveCard.js
@ -64,7 +64,7 @@ export class AdaptiveCardView extends React.Component {
        if (!model || !model.actions || model.actions.length === 0) {
            return undefined;
        }
-        return (React.createElement(ButtonGroup, null, this.renderActions()));
+        return (React.createElement(ButtonGroup, { hasSpacing: model && model.body && model.body.length > 0 }, this.renderActions()));
    }
    renderActions() {
        const { model, theme } = this.props;
--- a/examples/App.js
+++ b/examples/App.js
@ -31,6 +31,8 @@ export default class App extends React.Component {
                    padding: 10,
                    backgroundColor: 'white',
                }}>
+                <AdaptiveCards adaptiveCard={mockData.button} onSubmit={this.onSubmit} onInfo={this.onInfo} onError={this.onError} onWarning={this.onWarning} onOpenUrl={this.onOpenUrl}/>
+                {this.renderGap()}
                <AdaptiveCards adaptiveCard={mockData.counter} onSubmit={this.onSubmit} onInfo={this.onInfo} onError={this.onError} onWarning={this.onWarning} onOpenUrl={this.onOpenUrl}/>
                {this.renderGap()}
                <AdaptiveCards adaptiveCard={mockData.inputs} onSubmit={this.onSubmit} onInfo={this.onInfo} onError={this.onError} onWarning={this.onWarning} onOpenUrl={this.onOpenUrl}/>
--- a/examples/mockData/button.json
+++ b/examples/mockData/button.json
@ -0,0 +1,39 @@
+{
+    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
+    "type": "AdaptiveCard",
+    "version": "1.0",
+    "body": [
+    ],
+    "actions": [
+        {
+            "type": "Action.Submit",
+            "title": "Submit",
+            "data": {
+                "id": "1234567890"
+            }
+        },
+        {
+            "type": "Action.ShowCard",
+            "title": "Show Card",
+            "card": {
+                "version": "1.0",
+                "type": "AdaptiveCard",
+                "body": [
+                    {
+                        "type": "Input.Text",
+                        "placeholder": "enter comment",
+                        "style": "text",
+                        "maxLength": 0,
+                        "id": "CommentVal"
+                    }
+                ],
+                "actions": [
+                    {
+                        "type": "Action.Submit",
+                        "title": "OK"
+                    }
+                ]
+            }
+        }
+    ]
+}
--- a/examples/mockData/index.js
+++ b/examples/mockData/index.js
@ -28,6 +28,7 @@ var dinning = require('./dinning.json');
 var bingMap = require('./bingMap.json');
 var bingFact = require('./bingFact.json');
 var counter = require('./counter.json');
+var button = require('./button.json');

 exports["default"] = {
    adaptiveUpdate: adaptiveUpdate,
@ -58,4 +59,5 @@ exports["default"] = {
    peopleSuggestion: peopleSuggestion,
    bingFact: bingFact,
    counter: counter,
+    button: button,
 };
--- a/src/Components/Containers/ButtonGroup.tsx
+++ b/src/Components/Containers/ButtonGroup.tsx
@ -3,27 +3,39 @@ import { View } from 'react-native';
 import { StyleManager } from '../../Styles/StyleManager';

 interface IProps {
+    hasSpacing: boolean;
 }

 export class ButtonGroup extends React.Component<IProps> {
    public render() {
        return (
            <View
-                style={{
-                    flexDirection: this.flexDirection,
-                    alignSelf: 'stretch',
-                    marginTop: StyleManager.actionSetSpacing,
-                    paddingTop: 12,
-                    justifyContent: 'center',
-                    borderTopWidth: StyleManager.separatorThickness,
-                    borderTopColor: StyleManager.separatorColor
-                }}
+                style={[
+                    {
+                        flexDirection: this.flexDirection,
+                        alignSelf: 'stretch',
+                    },
+                    this.topStyles
+                ]}
            >
                {this.props.children}
            </View>
        );
    }

+    private get topStyles() : any {
+        if (this.props.hasSpacing) {
+            return {
+                marginTop: StyleManager.actionSetSpacing,
+                paddingTop: 12,
+                justifyContent: 'center',
+                borderTopWidth: StyleManager.separatorThickness,
+                borderTopColor: StyleManager.separatorColor
+            };
+        }
+        return {};
+    }
+
    private get flexDirection() {
        return StyleManager.actionDirection === 'vertically' ? 'column' : 'row';
    }
--- a/src/Components/Inputs/DatePanel.tsx
+++ b/src/Components/Inputs/DatePanel.tsx
@ -38,7 +38,9 @@ export class DatePanel extends React.Component<IProps> {
                            mode='date'
                            onDateChange={this.onDateChange}
                        />
-                        <ButtonGroup>
+                        <ButtonGroup
+                            hasSpacing={true}
+                        >
                            {this.renderCancelButton()}
                            {this.renderSaveButton()}
                        </ButtonGroup>
--- a/src/Components/Inputs/TimePanel.tsx
+++ b/src/Components/Inputs/TimePanel.tsx
@ -38,7 +38,9 @@ export class TimePanel extends React.Component<IProps> {
                            mode='time'
                            onDateChange={this.onTimeChangeIos}
                        />
-                        <ButtonGroup>
+                        <ButtonGroup
+                            hasSpacing={true}
+                        >
                            {this.renderCancelButton()}
                            {this.renderSaveButton()}
                        </ButtonGroup>
--- a/src/Views/Cards/AdaptiveCard.tsx
+++ b/src/Views/Cards/AdaptiveCard.tsx
@ -1,5 +1,5 @@
 import * as React from 'react';
-import { LayoutChangeEvent, StyleProp, View, ViewStyle} from 'react-native';
+import { LayoutChangeEvent, StyleProp, View, ViewStyle } from 'react-native';
 import { ButtonGroup } from '../../Components/Containers/ButtonGroup';
 import { Card } from '../../Components/Containers/Card';
 import { CardModel } from '../../Models/Cards/Card';
@ -91,7 +91,9 @@ export class AdaptiveCardView extends React.Component<IProps, IState> {
        }

        return (
-            <ButtonGroup>
+            <ButtonGroup
+                hasSpacing={model && model.body && model.body.length > 0}
+            >
                {this.renderActions()}
            </ButtonGroup>
        );
--- a/tool/src/assets/AdaptiveCards/Components/Containers/ButtonGroup.js
+++ b/tool/src/assets/AdaptiveCards/Components/Containers/ButtonGroup.js
@ -3,15 +3,25 @@ import { View } from 'react-native';
 import { StyleManager } from '../../Styles/StyleManager';
 export class ButtonGroup extends React.Component {
    render() {
-        return (React.createElement(View, { style: {
-                flexDirection: this.flexDirection,
-                alignSelf: 'stretch',
+        return (React.createElement(View, { style: [
+                {
+                    flexDirection: this.flexDirection,
+                    alignSelf: 'stretch',
+                },
+                this.topStyles
+            ] }, this.props.children));
+    }
+    get topStyles() {
+        if (this.props.hasSpacing) {
+            return {
                marginTop: StyleManager.actionSetSpacing,
                paddingTop: 12,
                justifyContent: 'center',
                borderTopWidth: StyleManager.separatorThickness,
                borderTopColor: StyleManager.separatorColor
-            } }, this.props.children));
+            };
+        }
+        return {};
    }
    get flexDirection() {
        return StyleManager.actionDirection === 'vertically' ? 'column' : 'row';
--- a/tool/src/assets/AdaptiveCards/Components/Inputs/DatePanel.js
+++ b/tool/src/assets/AdaptiveCards/Components/Inputs/DatePanel.js
@ -35,7 +35,7 @@ export class DatePanel extends React.Component {
            return (React.createElement(ModalBox, { show: this.show },
                React.createElement(Card, { flex: 0, fit: 'content' },
                    React.createElement(DatePickerIOS, { date: TimeUtils.extractDate(this.props.value), mode: 'date', onDateChange: this.onDateChange }),
-                    React.createElement(ButtonGroup, null,
+                    React.createElement(ButtonGroup, { hasSpacing: true },
                        this.renderCancelButton(),
                        this.renderSaveButton()))));
        }
--- a/tool/src/assets/AdaptiveCards/Components/Inputs/TimePanel.js
+++ b/tool/src/assets/AdaptiveCards/Components/Inputs/TimePanel.js
@ -40,7 +40,7 @@ export class TimePanel extends React.Component {
            return (React.createElement(ModalBox, { show: this.show },
                React.createElement(Card, { flex: 0, fit: 'content' },
                    React.createElement(DatePickerIOS, { date: TimeUtils.extractTime(this.props.value), mode: 'time', onDateChange: this.onTimeChangeIos }),
-                    React.createElement(ButtonGroup, null,
+                    React.createElement(ButtonGroup, { hasSpacing: true },
                        this.renderCancelButton(),
                        this.renderSaveButton()))));
        }
--- a/tool/src/assets/AdaptiveCards/Views/Cards/AdaptiveCard.js
+++ b/tool/src/assets/AdaptiveCards/Views/Cards/AdaptiveCard.js
@ -64,7 +64,7 @@ export class AdaptiveCardView extends React.Component {
        if (!model || !model.actions || model.actions.length === 0) {
            return undefined;
        }
-        return (React.createElement(ButtonGroup, null, this.renderActions()));
+        return (React.createElement(ButtonGroup, { hasSpacing: model && model.body && model.body.length > 0 }, this.renderActions()));
    }
    renderActions() {
        const { model, theme } = this.props;