Add Action support to Containers

AdaptiveCardsExample/AdaptiveCards/example/App.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { ScrollView, View, } from 'react-native';
+import mockData from './mockData';
+import AdaptiveCard from '../src/index';
+const cardGap = 20;
+const cardOverrideStyle = {
+    image: {
+        imageSize: {
+            small: 32,
+            medium: 64,
+        }
+    },
+};
+export default class App extends React.Component {
+    render() {
+        return React.createElement(ScrollView, { style: {
+                marginTop: 24,
+                flex: 1,
+            }, contentContainerStyle: {
+                padding: 10,
+                backgroundColor: 'whitesmoke',
+            } },
+            React.createElement(AdaptiveCard, { adaptiveCard: mockData.adaptiveUpdate, overrideStyle: cardOverrideStyle }),
+            this.renderGap(),
+            React.createElement(AdaptiveCard, { adaptiveCard: mockData.flightItinerary, overrideStyle: cardOverrideStyle }),
+            this.renderGap(),
+            React.createElement(AdaptiveCard, { adaptiveCard: mockData.flightUpdate, overrideStyle: cardOverrideStyle }),
+            this.renderGap(),
+            React.createElement(AdaptiveCard, { adaptiveCard: mockData.foodOrder, overrideStyle: cardOverrideStyle }),
+            this.renderGap(),
+            React.createElement(AdaptiveCard, { adaptiveCard: mockData.imageGallery, overrideStyle: cardOverrideStyle }),
+            this.renderGap(),
+            React.createElement(AdaptiveCard, { adaptiveCard: mockData.inputForm, overrideStyle: cardOverrideStyle }),
+            this.renderGap(),
+            React.createElement(AdaptiveCard, { adaptiveCard: mockData.inputs, overrideStyle: cardOverrideStyle }),
+            this.renderGap(),
+            React.createElement(AdaptiveCard, { adaptiveCard: mockData.restaurant, overrideStyle: cardOverrideStyle }),
+            this.renderGap(),
+            React.createElement(AdaptiveCard, { adaptiveCard: mockData.solitaire, overrideStyle: cardOverrideStyle }),
+            this.renderGap(),
+            React.createElement(AdaptiveCard, { adaptiveCard: mockData.sportsGameUpdate, overrideStyle: cardOverrideStyle }),
+            this.renderGap(),
+            React.createElement(AdaptiveCard, { adaptiveCard: mockData.stockUpdate, overrideStyle: cardOverrideStyle }),
+            this.renderGap(),
+            React.createElement(AdaptiveCard, { adaptiveCard: mockData.weatherCompact, overrideStyle: cardOverrideStyle }),
+            this.renderGap(),
+            React.createElement(AdaptiveCard, { adaptiveCard: mockData.weatherLarge, overrideStyle: cardOverrideStyle }));
+    }
+    renderGap() {
+        return React.createElement(View, { style: { height: cardGap } });
+    }
+}

AdaptiveCardsExample/AdaptiveCards/example/mockData/index.js

@@ -0,0 +1,28 @@
+const adaptiveUpdate = require('./adaptiveUpdate.json');
+const flightItinerary = require('./flightItinerary.json');
+const flightUpdate = require('./flightUpdate.json');
+const foodOrder = require('./foodOrder.json');
+const imageGallery = require('./imageGallery.json');
+const inputForm = require('./inputForm.json');
+const inputs = require('./inputs.json');
+const restaurant = require('./restaurant.json');
+const solitaire = require('./solitaire.json');
+const sportsGameUpdate = require('./sportsGameUpdate.json');
+const stockUpdate = require('./stockUpdate.json');
+const weatherCompact = require('./weatherCompact.json');
+const weatherLarge = require('./weatherLarge.json');
+export default {
+    adaptiveUpdate,
+    flightItinerary,
+    flightUpdate,
+    foodOrder,
+    imageGallery,
+    inputForm,
+    inputs,
+    restaurant,
+    solitaire,
+    sportsGameUpdate,
+    stockUpdate,
+    weatherCompact,
+    weatherLarge
+};

AdaptiveCardsExample/AdaptiveCards/src/Context/ActionContext.js

@@ -0,0 +1,38 @@
+import { ActionType } from '../Schema/Actions/ActionType';
+export class ActionContext {
+    constructor() { }
+    static getInstance() {
+        if (ActionContext.sharedInstance === undefined) {
+            ActionContext.sharedInstance = new ActionContext();
+        }
+        return ActionContext.sharedInstance;
+    }
+    registerOpenUrlHandler(handler) {
+        this.onOpenUrl = handler;
+    }
+    registerShowCardHandler(handler) {
+        this.onShowCard = handler;
+    }
+    registerSubmitHandler(handler) {
+        this.onSubmit = handler;
+    }
+    getActionHandler() {
+        return (action) => {
+            let callback;
+            switch (action.type) {
+                case ActionType.OpenUrl:
+                    callback = this.onOpenUrl;
+                    break;
+                case ActionType.ShowCard:
+                    callback = this.onShowCard;
+                    break;
+                case ActionType.Submit:
+                    callback = this.onSubmit;
+                    break;
+            }
+            if (callback && typeof callback === 'function') {
+                callback(action);
+            }
+        };
+    }
+}

AdaptiveCardsExample/AdaptiveCards/src/Schema/Actions/Action.js

@@ -0,0 +1,12 @@
+import { TypedElement } from '../TypedElement';
+export class ActionElement extends TypedElement {
+    constructor(json) {
+        super(json);
+        if (this.isValidJSON) {
+            this.title = json.title;
+        }
+    }
+    supportAction() {
+        return true;
+    }
+}

AdaptiveCardsExample/AdaptiveCards/src/Schema/Actions/ActionFactory.js

@@ -0,0 +1,39 @@
+import { ActionType } from './ActionType';
+import { OpenUrlActionElement } from './OpenUrlAction';
+import { ShowCardActionElement } from './ShowCardAction';
+import { SubmitActionElement } from './SubmitAction';
+export class ActionFactory {
+    static create(json) {
+        if (!json) {
+            return undefined;
+        }
+        let action;
+        switch (json.type) {
+            case ActionType.OpenUrl:
+                action = new OpenUrlActionElement(json);
+                break;
+            case ActionType.Submit:
+                action = new SubmitActionElement(json);
+                break;
+            case ActionType.ShowCard:
+                action = new ShowCardActionElement(json);
+                break;
+            default:
+                action = undefined;
+                break;
+        }
+        return action;
+    }
+    static createSet(json) {
+        let actionSet = [];
+        if (json && json.length > 0) {
+            json.forEach((item) => {
+                let action = ActionFactory.create(item);
+                if (action && action.isValidJSON) {
+                    actionSet.push(action);
+                }
+            });
+        }
+        return actionSet;
+    }
+}

AdaptiveCardsExample/AdaptiveCards/src/Schema/Actions/ActionType.js

@@ -0,0 +1,6 @@
+export var ActionType;
+(function (ActionType) {
+    ActionType["OpenUrl"] = "Action.OpenUrl";
+    ActionType["Submit"] = "Action.Submit";
+    ActionType["ShowCard"] = "Action.ShowCard";
+})(ActionType || (ActionType = {}));

AdaptiveCardsExample/AdaptiveCards/src/Schema/Actions/OpenUrlAction.js

@@ -1,6 +1,6 @@
-import Action from './Action';
-import ActionType from './ActionType';
-export default class ActionOpenUrl extends Action {
+import { ActionElement } from './Action';
+import { ActionType } from './ActionType';
+export class OpenUrlActionElement extends ActionElement {
     constructor(json) {
         super(json);
         if (this.isValidJSON) {
@@ -13,4 +13,10 @@ export default class ActionOpenUrl extends Action {
     getRequiredProperties() {
         return ['url'];
     }
+    getAction() {
+        return this;
+    }
+    getActions() {
+        return [this.getAction()];
+    }
 }

AdaptiveCardsExample/AdaptiveCards/src/Schema/Actions/ShowCardAction.js

@@ -0,0 +1,23 @@
+import { AdaptiveCardElement } from '../AdaptiveCard';
+import { ActionElement } from './Action';
+import { ActionType } from './ActionType';
+export class ShowCardActionElement extends ActionElement {
+    constructor(json) {
+        super(json);
+        if (this.isValidJSON) {
+            this.card = new AdaptiveCardElement(json.card);
+        }
+    }
+    getTypeName() {
+        return ActionType.ShowCard;
+    }
+    getRequiredProperties() {
+        return ['card'];
+    }
+    getAction() {
+        return this;
+    }
+    getActions() {
+        return [this.getAction()];
+    }
+}

AdaptiveCardsExample/AdaptiveCards/src/Schema/Actions/SubmitAction.js

@@ -0,0 +1,22 @@
+import { ActionElement } from './Action';
+import { ActionType } from './ActionType';
+export class SubmitActionElement extends ActionElement {
+    constructor(json) {
+        super(json);
+        if (this.isValidJSON) {
+            this.data = json.data;
+        }
+    }
+    getTypeName() {
+        return ActionType.Submit;
+    }
+    getRequiredProperties() {
+        return [];
+    }
+    getAction() {
+        return this;
+    }
+    getActions() {
+        return [this.getAction()];
+    }
+}

AdaptiveCardsExample/AdaptiveCards/src/Schema/AdaptiveCard.js

@@ -0,0 +1,31 @@
+import { ActionFactory } from './Actions/ActionFactory';
+import { CardElementFactory } from './Elements/CardElementFactory';
+import { TypedElement } from './TypedElement';
+export class AdaptiveCardElement extends TypedElement {
+    constructor(json) {
+        super(json);
+        this.actions = [];
+        this.body = [];
+        if (this.isValidJSON) {
+            this.version = json.version;
+            this.minVersion = json.minVersion;
+            this.fallbackText = json.fallbackText;
+            this.backgroundImage = json.backgroundImage;
+            this.speak = json.speak;
+            this.actions = ActionFactory.createSet(json.actions);
+            this.body = CardElementFactory.createSet(json.body);
+        }
+    }
+    getTypeName() {
+        return 'AdaptiveCard';
+    }
+    getRequiredProperties() {
+        return ['version'];
+    }
+    hasActions() {
+        return this.actions && this.actions.length > 0;
+    }
+    hasBody() {
+        return this.body && this.body.length > 0;
+    }
+}

AdaptiveCardsExample/AdaptiveCards/src/Schema/Containers/Column.js

@@ -0,0 +1,51 @@
+import { Utils } from '../../utils';
+import { ActionFactory } from '../Actions/ActionFactory';
+import { CardElement } from '../Elements/CardElement';
+import { CardElementFactory } from '../Elements/CardElementFactory';
+import { CardElementType } from '../Elements/CardElementType';
+import { ColumnWidth } from '../enums';
+export class ColumnElement extends CardElement {
+    constructor(json) {
+        super(json);
+        if (this.isValidJSON) {
+            this.items = CardElementFactory.createSet(json.items);
+            this.selectAction = ActionFactory.create(json.selectAction);
+            if (json.width && !isNaN(json.width)) {
+                let columnWidth = parseInt(json.width, 10);
+                if (columnWidth > 100) {
+                    this.width = 100;
+                }
+                else if (columnWidth < 0) {
+                    this.width = 0;
+                }
+                else {
+                    this.width = columnWidth;
+                }
+            }
+            else {
+                this.width = Utils.getStringEnumValueOrDefault(ColumnWidth, json.width, ColumnWidth.Auto);
+            }
+        }
+    }
+    getTypeName() {
+        return CardElementType.Column;
+    }
+    getRequiredProperties() {
+        return ['items'];
+    }
+    supportAction() {
+        return true;
+    }
+    getAction() {
+        return this.selectAction;
+    }
+    getActions() {
+        return [this.getAction()];
+    }
+    hasItems() {
+        return this.items && this.items.length > 0;
+    }
+    isFixedWidth() {
+        return typeof this.width === 'number';
+    }
+}

AdaptiveCardsExample/AdaptiveCards/src/Schema/Containers/ColumnSet.js

@@ -0,0 +1,43 @@
+import { ActionFactory } from '../Actions/ActionFactory';
+import { CardElement } from '../Elements/CardElement';
+import { CardElementType } from '../Elements/CardElementType';
+import { ColumnElement } from './Column';
+export class ColumnSetElement extends CardElement {
+    constructor(json) {
+        super(json);
+        if (this.isValidJSON) {
+            this.columns = this.createColumnSet(json.columns);
+            this.selectAction = ActionFactory.create(json.selectAction);
+        }
+    }
+    getTypeName() {
+        return CardElementType.ColumnSet;
+    }
+    getRequiredProperties() {
+        return [];
+    }
+    supportAction() {
+        return true;
+    }
+    getAction() {
+        return this.selectAction;
+    }
+    getActions() {
+        return [this.getAction()];
+    }
+    createColumnSet(json) {
+        let columnSet = [];
+        if (json && json.length > 0) {
+            json.forEach((item) => {
+                let column = new ColumnElement(item);
+                if (column && column.isValidJSON) {
+                    columnSet.push(column);
+                }
+            });
+        }
+        return columnSet;
+    }
+    hasColumns() {
+        return this.columns && this.columns.length > 0;
+    }
+}

AdaptiveCardsExample/AdaptiveCards/src/Schema/Containers/Container.js

@@ -0,0 +1,35 @@
+import { Utils } from '../../utils';
+import { ActionFactory } from '../Actions/ActionFactory';
+import { CardElement } from '../Elements/CardElement';
+import { CardElementFactory } from '../Elements/CardElementFactory';
+import { CardElementType } from '../Elements/CardElementType';
+import { ContainerStyle } from '../enums';
+export class ContainerElement extends CardElement {
+    constructor(json) {
+        super(json);
+        this.items = [];
+        if (this.isValidJSON) {
+            this.items = CardElementFactory.createSet(json.items);
+            this.selectAction = ActionFactory.create(json.selectAction);
+            this.style = Utils.getStringEnumValueOrDefault(ContainerStyle, json.style, ContainerStyle.Default);
+        }
+    }
+    getTypeName() {
+        return CardElementType.Container;
+    }
+    getRequiredProperties() {
+        return ['items'];
+    }
+    supportAction() {
+        return true;
+    }
+    getAction() {
+        return this.selectAction;
+    }
+    getActions() {
+        return [this.getAction()];
+    }
+    hasItems() {
+        return this.items && this.items.length > 0;
+    }
+}

AdaptiveCardsExample/AdaptiveCards/src/Schema/Containers/Fact.js

@@ -0,0 +1,16 @@
+import { TypedElement } from '../TypedElement';
+export class FactElement extends TypedElement {
+    constructor(json) {
+        super(json);
+        if (this.isValidJSON) {
+            this.title = json.title;
+            this.value = json.value;
+        }
+    }
+    getTypeName() {
+        return 'Fact';
+    }
+    getRequiredProperties() {
+        return ['title', 'value'];
+    }
+}

AdaptiveCardsExample/AdaptiveCards/src/Schema/Containers/FactSet.js

@@ -0,0 +1,33 @@
+import { CardElement } from '../Elements/CardElement';
+import { CardElementType } from '../Elements/CardElementType';
+import { FactElement } from './Fact';
+export class FactSetElement extends CardElement {
+    constructor(json) {
+        super(json);
+        this.facts = [];
+        if (this.isValidJSON) {
+            this.facts = this.createFactSet(json.facts);
+        }
+    }
+    getTypeName() {
+        return CardElementType.FactSet;
+    }
+    getRequiredProperties() {
+        return ['facts'];
+    }
+    createFactSet(json) {
+        let factSet = [];
+        if (json && json.length > 0) {
+            json.forEach((item) => {
+                let fact = new FactElement(item);
+                if (fact && fact.isValidJSON) {
+                    factSet.push(fact);
+                }
+            });
+        }
+        return factSet;
+    }
+    hasFacts() {
+        return this.facts && this.facts.length > 0;
+    }
+}

AdaptiveCardsExample/AdaptiveCards/src/Schema/Containers/ImageSet.js

@@ -0,0 +1,40 @@
+import { Utils } from '../../utils';
+import { CardElement } from '../Elements/CardElement';
+import { CardElementType } from '../Elements/CardElementType';
+import { ImageElement } from '../Elements/Image';
+import { ImageSize } from '../enums';
+export class ImageSetElement extends CardElement {
+    constructor(json) {
+        super(json);
+        this.images = [];
+        this.imageSize = ImageSize.Auto;
+        if (this.isValidJSON) {
+            this.images = this.createImageSet(json.images);
+            this.imageSize = Utils.getStringEnumValueOrDefault(ImageSize, json.imageSize, ImageSize.Auto);
+        }
+    }
+    getTypeName() {
+        return CardElementType.ImageSet;
+    }
+    getRequiredProperties() {
+        return ['images'];
+    }
+    supportAction() {
+        return false;
+    }
+    createImageSet(json) {
+        let imageSet = [];
+        if (json && json.length > 0) {
+            json.forEach((item) => {
+                let image = new ImageElement(item);
+                if (image && image.isValidJSON) {
+                    imageSet.push(image);
+                }
+            });
+        }
+        return imageSet;
+    }
+    hasImages() {
+        return this.images && this.images.length > 0;
+    }
+}

AdaptiveCardsExample/AdaptiveCards/src/Schema/Elements/CardElement.js

@@ -0,0 +1,14 @@
+import { Utils } from '../../utils';
+import { Spacing } from '../enums';
+import { TypedElement } from '../TypedElement';
+export class CardElement extends TypedElement {
+    constructor(json) {
+        super(json);
+        this.separator = false;
+        if (this.isValidJSON) {
+            this.id = json.id;
+            this.spacing = Utils.getStringEnumValueOrDefault(Spacing, json.spacing, Spacing.Default);
+            this.separator = json.separator || false;
+        }
+    }
+}

AdaptiveCardsExample/AdaptiveCards/src/Schema/Elements/CardElementFactory.js

@@ -0,0 +1,67 @@
+import { ColumnElement } from '../Containers/Column';
+import { ColumnSetElement } from '../Containers/ColumnSet';
+import { ContainerElement } from '../Containers/Container';
+import { FactSetElement } from '../Containers/FactSet';
+import { ImageSetElement } from '../Containers/ImageSet';
+import { DateInputElement } from '../Inputs/DateInput';
+import { TextInputElement } from '../Inputs/TextInput';
+import { TimeInputElement } from '../Inputs/TimeInput';
+import { CardElementType } from './CardElementType';
+import { ImageElement } from './Image';
+import { TextBlockElement } from './TextBlock';
+export class CardElementFactory {
+    static create(json) {
+        if (!json) {
+            return null;
+        }
+        let cardElement;
+        switch (json.type) {
+            case CardElementType.Image:
+                cardElement = new ImageElement(json);
+                break;
+            case CardElementType.TextBlock:
+                cardElement = new TextBlockElement(json);
+                break;
+            case CardElementType.Column:
+                cardElement = new ColumnElement(json);
+                break;
+            case CardElementType.ColumnSet:
+                cardElement = new ColumnSetElement(json);
+                break;
+            case CardElementType.Container:
+                cardElement = new ContainerElement(json);
+                break;
+            case CardElementType.FactSet:
+                cardElement = new FactSetElement(json);
+                break;
+            case CardElementType.ImageSet:
+                cardElement = new ImageSetElement(json);
+                break;
+            case CardElementType.InputText:
+                cardElement = new TextInputElement(json);
+                break;
+            case CardElementType.DateInput:
+                cardElement = new DateInputElement(json);
+                break;
+            case CardElementType.TimeInput:
+                cardElement = new TimeInputElement(json);
+                break;
+            default:
+                cardElement = null;
+                break;
+        }
+        return cardElement;
+    }
+    static createSet(json) {
+        let cardElementSet = [];
+        if (json && json.length > 0) {
+            json.forEach((item) => {
+                let cardElement = CardElementFactory.create(item);
+                if (cardElement && cardElement.isValidJSON) {
+                    cardElementSet.push(cardElement);
+                }
+            });
+        }
+        return cardElementSet;
+    }
+}

AdaptiveCardsExample/AdaptiveCards/src/Schema/Elements/CardElementType.js

@@ -0,0 +1,16 @@
+export var CardElementType;
+(function (CardElementType) {
+    CardElementType["Column"] = "Column";
+    CardElementType["ColumnSet"] = "ColumnSet";
+    CardElementType["Container"] = "Container";
+    CardElementType["FactSet"] = "FactSet";
+    CardElementType["Image"] = "Image";
+    CardElementType["ImageSet"] = "ImageSet";
+    CardElementType["TextBlock"] = "TextBlock";
+    CardElementType["InputText"] = "Input.Text";
+    CardElementType["InputNumber"] = "Input.Number";
+    CardElementType["DateInput"] = "Input.Date";
+    CardElementType["TimeInput"] = "Input.Time";
+    CardElementType["InputToggle"] = "Input.Toggle";
+    CardElementType["InputChoiceSet"] = "Input.ChoiceSet";
+})(CardElementType || (CardElementType = {}));

AdaptiveCardsExample/AdaptiveCards/src/Schema/Elements/Image.js

@@ -0,0 +1,41 @@
+import { Utils } from '../../utils';
+import { ActionFactory } from '../Actions/ActionFactory';
+import { HorizontalAlignment, ImageSize, ImageStyle, } from '../enums';
+import { CardElement } from './CardElement';
+import { CardElementType } from './CardElementType';
+export class ImageElement extends CardElement {
+    constructor(json) {
+        super(json);
+        this.size = ImageSize.Auto;
+        if (this.isValidJSON) {
+            this.url = json.url;
+            this.altText = json.altText;
+            this.horizontalAlignment =
+                Utils.getStringEnumValueOrDefault(HorizontalAlignment, json.horizontalAlignment, HorizontalAlignment.Left);
+            this.selectAction = ActionFactory.create(json.selectAction);
+            this.size = Utils.getStringEnumValueOrDefault(ImageSize, json.size, ImageSize.Auto);
+            this.style = Utils.getStringEnumValueOrDefault(ImageStyle, json.style, ImageStyle.Default);
+        }
+    }
+    getTypeName() {
+        return CardElementType.Image;
+    }
+    getRequiredProperties() {
+        return ['url'];
+    }
+    supportAction() {
+        return true;
+    }
+    getAction() {
+        return this.selectAction;
+    }
+    getActions() {
+        return [this.getAction()];
+    }
+    setSize(size) {
+        this.size = Utils.getStringEnumValueOrDefault(ImageSize, size, ImageSize.Auto);
+    }
+    isFixedSize() {
+        return this.size !== ImageSize.Auto && this.size !== ImageSize.Stretch;
+    }
+}

AdaptiveCardsExample/AdaptiveCards/src/Schema/Elements/TextBlock.js

@@ -0,0 +1,26 @@
+import { Utils } from '../../utils';
+import { FontSize, FontWeight, HorizontalAlignment, TextColor } from '../enums';
+import { CardElement } from './CardElement';
+import { CardElementType } from './CardElementType';
+export class TextBlockElement extends CardElement {
+    constructor(json) {
+        super(json);
+        if (this.isValidJSON) {
+            this.text = json.text;
+            this.color = Utils.getStringEnumValueOrDefault(TextColor, json.color, TextColor.Default);
+            this.horizontalAlignment =
+                Utils.getStringEnumValueOrDefault(HorizontalAlignment, json.horizontalAlignment, HorizontalAlignment.Left);
+            this.isSubtle = json.isSubtle || false;
+            this.maxLines = json.maxLines;
+            this.size = Utils.getStringEnumValueOrDefault(FontSize, json.size, FontSize.Default);
+            this.weight = Utils.getStringEnumValueOrDefault(FontWeight, json.weight, FontWeight.Default);
+            this.wrap = json.wrap || false;
+        }
+    }
+    getTypeName() {
+        return CardElementType.TextBlock;
+    }
+    getRequiredProperties() {
+        return ['text'];
+    }
+}

AdaptiveCardsExample/AdaptiveCards/src/Schema/Inputs/ChoiceInput.js

@@ -1,5 +1,5 @@
-import TypedElement from '../TypedElement';
-export default class InputChoice extends TypedElement {
+import { TypedElement } from '../TypedElement';
+export class ChoiceInputElement extends TypedElement {
     constructor(json) {
         super(json);
         if (this.isValidJSON) {

AdaptiveCardsExample/AdaptiveCards/src/Schema/Inputs/ChoiceInputSet.js

@@ -1,15 +1,15 @@
-import { ChoiceSetStyle, } from '../enums';
-import { getEnumValueOrDefault } from '../../utils';
-import CardElementType from '../Elements/CardElementType';
-import Input from './Input';
-import InputChoice from './InputChoice';
-export default class InputChoiceSet extends Input {
+import { Utils } from '../../utils';
+import { CardElementType } from '../Elements/CardElementType';
+import { ChoiceSetStyle } from '../enums';
+import { ChoiceInputElement } from './ChoiceInput';
+import { InputElement } from './Input';
+export class ChoiceInputSetElement extends InputElement {
     constructor(json) {
         super(json);
         this.choices = [];
         if (this.isValidJSON) {
             this.isMultiSelect = json.isMultiSelect || false;
-            this.style = getEnumValueOrDefault(ChoiceSetStyle, json.style, ChoiceSetStyle.Compact);
+            this.style = Utils.getEnumValueOrDefault(ChoiceSetStyle, json.style, ChoiceSetStyle.Compact);
             this.choices = this.createChoiceSet(json.choices);
         }
     }
@@ -23,7 +23,7 @@ export default class InputChoiceSet extends Input {
         let inputChoiceSet = [];
         if (json && json.length > 0) {
             json.forEach((item) => {
-                let inputChoice = new InputChoice(item);
+                let inputChoice = new ChoiceInputElement(item);
                 if (inputChoice && inputChoice.isValidJSON) {
                     inputChoiceSet.push(inputChoice);
                 }

AdaptiveCardsExample/AdaptiveCards/src/Schema/Inputs/DateInput.js

@@ -1,6 +1,6 @@
-import CardElementType from '../Elements/CardElementType';
-import Input from './Input';
-export default class InputDate extends Input {
+import { CardElementType } from '../Elements/CardElementType';
+import { InputElement } from './Input';
+export class DateInputElement extends InputElement {
     constructor(json) {
         super(json);
         if (this.isValidJSON) {
@@ -10,7 +10,7 @@ export default class InputDate extends Input {
         }
     }
     getTypeName() {
-        return CardElementType.InputDate;
+        return CardElementType.DateInput;
     }
     getRequiredProperties() {
         return ['id'];

AdaptiveCardsExample/AdaptiveCards/src/Schema/Inputs/Input.js

@@ -0,0 +1,10 @@
+import { CardElement } from '../Elements/CardElement';
+export class InputElement extends CardElement {
+    constructor(json) {
+        super(json);
+        if (this.isValidJSON) {
+            this.id = json.id;
+            this.value = json.value;
+        }
+    }
+}

AdaptiveCardsExample/AdaptiveCards/src/Schema/Inputs/NumberInput.js

@@ -1,6 +1,6 @@
-import CardElementType from '../Elements/CardElementType';
-import Input from './Input';
-export default class InputNumber extends Input {
+import { CardElementType } from '../Elements/CardElementType';
+import { InputElement } from './Input';
+export class NumberInputElement extends InputElement {
     constructor(json) {
         super(json);
         if (this.isValidJSON) {

AdaptiveCardsExample/AdaptiveCards/src/Schema/Inputs/TextInput.js

@@ -1,15 +1,15 @@
-import { InputTextStyle, } from '../enums';
-import { getEnumValueOrDefault } from '../../utils';
-import CardElementType from '../Elements/CardElementType';
-import Input from './Input';
-export default class InputText extends Input {
+import { Utils } from '../../utils';
+import { CardElementType } from '../Elements/CardElementType';
+import { InputTextStyle } from '../enums';
+import { InputElement } from './Input';
+export class TextInputElement extends InputElement {
     constructor(json) {
         super(json);
         if (this.isValidJSON) {
             this.isMultiline = json.isMultiline || false;
             this.maxLength = json.maxLength;
             this.placeholder = json.placeholder;
-            this.style = getEnumValueOrDefault(InputTextStyle, json.style, InputTextStyle.Text);
+            this.style = Utils.getEnumValueOrDefault(InputTextStyle, json.style, InputTextStyle.Text);
         }
     }
     getTypeName() {

AdaptiveCardsExample/AdaptiveCards/src/Schema/Inputs/TimeInput.js

@@ -1,6 +1,6 @@
-import CardElementType from '../Elements/CardElementType';
-import Input from './Input';
-export default class InputDate extends Input {
+import { CardElementType } from '../Elements/CardElementType';
+import { InputElement } from './Input';
+export class TimeInputElement extends InputElement {
     constructor(json) {
         super(json);
         if (this.isValidJSON) {
@@ -10,7 +10,7 @@ export default class InputDate extends Input {
         }
     }
     getTypeName() {
-        return CardElementType.InputDate;
+        return CardElementType.TimeInput;
     }
     getRequiredProperties() {
         return ['id'];

AdaptiveCardsExample/AdaptiveCards/src/Schema/Inputs/ToggleInput.js

@@ -1,6 +1,6 @@
-import CardElementType from '../Elements/CardElementType';
-import Input from './Input';
-export default class InputToggle extends Input {
+import { CardElementType } from '../Elements/CardElementType';
+import { InputElement } from './Input';
+export class ToggleInputElement extends InputElement {
     constructor(json) {
         super(json);
         if (this.isValidJSON) {

AdaptiveCardsExample/AdaptiveCards/src/Schema/TypedElement.js

@@ -0,0 +1,49 @@
+import { Utils } from '../utils';
+export class TypedElement {
+    constructor(json) {
+        this.isValidJSON = true;
+        this.type = this.getTypeName();
+        if (!this.type) {
+            this.noTypeName();
+        }
+        this.validateJSON(json, this.getRequiredProperties());
+    }
+    supportAction() {
+        return false;
+    }
+    getAction() {
+        return undefined;
+    }
+    getActions() {
+        return [];
+    }
+    noTypeName() {
+        this.isValidJSON = false;
+        console.error('Please return a valid type name in \'getTypeName()\' method.');
+    }
+    noDataFound() {
+        this.isValidJSON = false;
+        console.error(this.getTypeName() + ': data not found');
+    }
+    invalidRequiredProperty(property) {
+        this.isValidJSON = false;
+        console.error(this.getTypeName() + ': ' + property + ' is required');
+    }
+    validateJSON(json, requiredProperties) {
+        if (!json) {
+            this.noDataFound();
+        }
+        if (requiredProperties) {
+            for (let i = 0; i < requiredProperties.length; i++) {
+                let property = requiredProperties[i];
+                if (!Utils.isValidValue(json[property])) {
+                    this.invalidRequiredProperty(property);
+                    return;
+                }
+            }
+        }
+    }
+    isValid() {
+        return this.isValidJSON;
+    }
+}

AdaptiveCardsExample/AdaptiveCards/src/Schema/enums.js

@@ -0,0 +1,151 @@
+export var FlexDirection;
+(function (FlexDirection) {
+    FlexDirection["Row"] = "row";
+    FlexDirection["Column"] = "column";
+})(FlexDirection || (FlexDirection = {}));
+export var HorizontalAlignment;
+(function (HorizontalAlignment) {
+    HorizontalAlignment["Left"] = "left";
+    HorizontalAlignment["Center"] = "center";
+    HorizontalAlignment["Right"] = "right";
+})(HorizontalAlignment || (HorizontalAlignment = {}));
+export var Spacing;
+(function (Spacing) {
+    Spacing["None"] = "none";
+    Spacing["Small"] = "small";
+    Spacing["Default"] = "default";
+    Spacing["Medium"] = "medium";
+    Spacing["Large"] = "large";
+    Spacing["ExtraLarge"] = "extraLarge";
+    Spacing["Padding"] = "padding";
+})(Spacing || (Spacing = {}));
+export var FontSize;
+(function (FontSize) {
+    FontSize["Small"] = "small";
+    FontSize["Default"] = "default";
+    FontSize["Medium"] = "medium";
+    FontSize["Large"] = "large";
+    FontSize["ExtraLarge"] = "extraLarge";
+})(FontSize || (FontSize = {}));
+export var FontWeight;
+(function (FontWeight) {
+    FontWeight["Lighter"] = "lighter";
+    FontWeight["Default"] = "default";
+    FontWeight["Bolder"] = "bolder";
+})(FontWeight || (FontWeight = {}));
+export var TextColor;
+(function (TextColor) {
+    TextColor["Default"] = "default";
+    TextColor["Dark"] = "dark";
+    TextColor["Light"] = "light";
+    TextColor["Accent"] = "accent";
+    TextColor["Good"] = "good";
+    TextColor["Warning"] = "warning";
+    TextColor["Attention"] = "attention";
+})(TextColor || (TextColor = {}));
+export var FlexWrap;
+(function (FlexWrap) {
+    FlexWrap["Wrap"] = "wrap";
+    FlexWrap["NoWrap"] = "nowrap";
+})(FlexWrap || (FlexWrap = {}));
+export var ImageSize;
+(function (ImageSize) {
+    ImageSize["Auto"] = "auto";
+    ImageSize["Stretch"] = "stretch";
+    ImageSize["Small"] = "small";
+    ImageSize["Medium"] = "medium";
+    ImageSize["Large"] = "large";
+})(ImageSize || (ImageSize = {}));
+export var ImageStyle;
+(function (ImageStyle) {
+    ImageStyle["Default"] = "default";
+    ImageStyle["Person"] = "person";
+})(ImageStyle || (ImageStyle = {}));
+export var FlexImageAlignment;
+(function (FlexImageAlignment) {
+    FlexImageAlignment["FlexStart"] = "flex-start";
+    FlexImageAlignment["FlexEnd"] = "flex-end";
+    FlexImageAlignment["Center"] = "center";
+    FlexImageAlignment["Stretch"] = "stretch";
+})(FlexImageAlignment || (FlexImageAlignment = {}));
+export var ColumnWidth;
+(function (ColumnWidth) {
+    ColumnWidth["Auto"] = "auto";
+    ColumnWidth["Stretch"] = "stretch";
+})(ColumnWidth || (ColumnWidth = {}));
+export var ContainerStyle;
+(function (ContainerStyle) {
+    ContainerStyle["Default"] = "default";
+    ContainerStyle["Emphasis"] = "emphasis";
+})(ContainerStyle || (ContainerStyle = {}));
+export var Size;
+(function (Size) {
+    Size[Size["Auto"] = 0] = "Auto";
+    Size[Size["Stretch"] = 1] = "Stretch";
+    Size[Size["Small"] = 2] = "Small";
+    Size[Size["Medium"] = 3] = "Medium";
+    Size[Size["Large"] = 4] = "Large";
+})(Size || (Size = {}));
+export var Padding;
+(function (Padding) {
+    Padding[Padding["None"] = 0] = "None";
+    Padding[Padding["Default"] = 1] = "Default";
+})(Padding || (Padding = {}));
+export var VerticalAlignment;
+(function (VerticalAlignment) {
+    VerticalAlignment[VerticalAlignment["Top"] = 0] = "Top";
+    VerticalAlignment[VerticalAlignment["Center"] = 1] = "Center";
+    VerticalAlignment[VerticalAlignment["Bottom"] = 2] = "Bottom";
+})(VerticalAlignment || (VerticalAlignment = {}));
+export var ActionAlignment;
+(function (ActionAlignment) {
+    ActionAlignment[ActionAlignment["Left"] = 0] = "Left";
+    ActionAlignment[ActionAlignment["Center"] = 1] = "Center";
+    ActionAlignment[ActionAlignment["Right"] = 2] = "Right";
+    ActionAlignment[ActionAlignment["Stretch"] = 3] = "Stretch";
+})(ActionAlignment || (ActionAlignment = {}));
+export var ShowCardActionMode;
+(function (ShowCardActionMode) {
+    ShowCardActionMode[ShowCardActionMode["Inline"] = 0] = "Inline";
+    ShowCardActionMode[ShowCardActionMode["Popup"] = 1] = "Popup";
+})(ShowCardActionMode || (ShowCardActionMode = {}));
+export var Orientation;
+(function (Orientation) {
+    Orientation[Orientation["Horizontal"] = 0] = "Horizontal";
+    Orientation[Orientation["Vertical"] = 1] = "Vertical";
+})(Orientation || (Orientation = {}));
+export var BackgroundImageMode;
+(function (BackgroundImageMode) {
+    BackgroundImageMode[BackgroundImageMode["Stretch"] = 0] = "Stretch";
+    BackgroundImageMode[BackgroundImageMode["RepeatHorizontally"] = 1] = "RepeatHorizontally";
+    BackgroundImageMode[BackgroundImageMode["RepeatVertically"] = 2] = "RepeatVertically";
+    BackgroundImageMode[BackgroundImageMode["Repeat"] = 3] = "Repeat";
+})(BackgroundImageMode || (BackgroundImageMode = {}));
+export var ValidationError;
+(function (ValidationError) {
+    ValidationError[ValidationError["Hint"] = 0] = "Hint";
+    ValidationError[ValidationError["ActionTypeNotAllowed"] = 1] = "ActionTypeNotAllowed";
+    ValidationError[ValidationError["CollectionCantBeEmpty"] = 2] = "CollectionCantBeEmpty";
+    ValidationError[ValidationError["Deprecated"] = 3] = "Deprecated";
+    ValidationError[ValidationError["ElementTypeNotAllowed"] = 4] = "ElementTypeNotAllowed";
+    ValidationError[ValidationError["InteractivityNotAllowed"] = 5] = "InteractivityNotAllowed";
+    ValidationError[ValidationError["InvalidPropertyValue"] = 6] = "InvalidPropertyValue";
+    ValidationError[ValidationError["MissingCardType"] = 7] = "MissingCardType";
+    ValidationError[ValidationError["PropertyCantBeNull"] = 8] = "PropertyCantBeNull";
+    ValidationError[ValidationError["TooManyActions"] = 9] = "TooManyActions";
+    ValidationError[ValidationError["UnknownActionType"] = 10] = "UnknownActionType";
+    ValidationError[ValidationError["UnknownElementType"] = 11] = "UnknownElementType";
+    ValidationError[ValidationError["UnsupportedCardVersion"] = 12] = "UnsupportedCardVersion";
+})(ValidationError || (ValidationError = {}));
+export var InputTextStyle;
+(function (InputTextStyle) {
+    InputTextStyle[InputTextStyle["Text"] = 0] = "Text";
+    InputTextStyle[InputTextStyle["Tel"] = 1] = "Tel";
+    InputTextStyle[InputTextStyle["Url"] = 2] = "Url";
+    InputTextStyle[InputTextStyle["Email"] = 3] = "Email";
+})(InputTextStyle || (InputTextStyle = {}));
+export var ChoiceSetStyle;
+(function (ChoiceSetStyle) {
+    ChoiceSetStyle[ChoiceSetStyle["Compact"] = 0] = "Compact";
+    ChoiceSetStyle[ChoiceSetStyle["Expanded"] = 1] = "Expanded";
+})(ChoiceSetStyle || (ChoiceSetStyle = {}));

AdaptiveCardsExample/AdaptiveCards/src/View/Actions/ActionView.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { TouchableOpacity, } from 'react-native';
+import { ActionContext } from '../../Context/ActionContext';
+import { AdaptiveCardText } from '../Shared/AdaptiveCardText';
+import { styleManager } from '../Styles/StyleManager';
+export class ActionView extends React.Component {
+    constructor(props) {
+        super(props);
+        this.onPress = () => {
+            let actionContext = ActionContext.getInstance();
+            let callback = actionContext.getActionHandler();
+            if (callback) {
+                callback(this.props.action);
+            }
+        };
+        this.styleConfig = styleManager.getStyle();
+    }
+    render() {
+        const { action, index } = this.props;
+        if (!action || !action.isValid()) {
+            return;
+        }
+        return (React.createElement(TouchableOpacity, { style: [{
+                    flex: 1,
+                    flexDirection: 'row',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    paddingVertical: this.styleConfig.action.button.paddingVertical,
+                    paddingHorizontal: this.styleConfig.action.button.paddingHorizontal,
+                    borderRadius: this.styleConfig.action.button.borderRadius,
+                    backgroundColor: this.styleConfig.action.button.backgroundColor,
+                },
+                styleManager.getActionButtonSpacingStyle(index)
+            ], onPress: this.onPress },
+            React.createElement(AdaptiveCardText, { style: {
+                    fontSize: this.styleConfig.action.button.fontSize,
+                    color: this.styleConfig.action.button.textColor,
+                }, numberOfLines: 1 }, action.title)));
+    }
+}
+ActionView.defaultProps = {
+    index: 0,
+};

AdaptiveCardsExample/AdaptiveCards/src/View/AdaptiveCardSingleView.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import { View, } from 'react-native';
+import { AdaptiveCardElement } from '../Schema/AdaptiveCard';
+import { ActionView } from './Actions/ActionView';
+import { CardElementView } from './Elements/CardElementView';
+import { ImageBackground } from './Shared/ImageBackground';
+import { styleManager } from './Styles/StyleManager';
+export class AdaptiveCardSingleView extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        this.styleConfig = styleManager.getStyle();
+        this.adaptiveCard = new AdaptiveCardElement(props.adaptiveCard);
+        console.log('AdaptiveCard', this.adaptiveCard);
+    }
+    componentWillReceiveProps(nextProps) {
+        if (nextProps.adaptiveCard) {
+            this.adaptiveCard = new AdaptiveCardElement(nextProps.adaptiveCard);
+        }
+    }
+    render() {
+        if (!this.adaptiveCard.isValid()) {
+            return null;
+        }
+        const cardStyle = Object.assign({
+            flex: 1,
+            backgroundColor: this.styleConfig.card.backgroundColor,
+            borderWidth: this.styleConfig.card.borderWidth,
+            borderColor: this.styleConfig.card.borderColor,
+            borderRadius: this.styleConfig.card.borderRadius,
+        }, this.props.style);
+        if (this.adaptiveCard.backgroundImage) {
+            return (React.createElement(ImageBackground, { containerStyle: cardStyle, imageStyle: {
+                    borderRadius: this.styleConfig.card.borderRadius,
+                }, source: { uri: this.adaptiveCard.backgroundImage } },
+                React.createElement(View, { style: { flex: 1, padding: this.styleConfig.card.padding } },
+                    this.renderBody(),
+                    this.renderActions())));
+        }
+        else {
+            return (React.createElement(View, { style: [cardStyle, {
+                        padding: this.styleConfig.card.padding,
+                    }] },
+                this.renderBody(),
+                this.renderActions()));
+        }
+    }
+    renderBody() {
+        if (!this.adaptiveCard.hasBody()) {
+            return null;
+        }
+        return (React.createElement(View, { style: { flex: 1 } }, this.adaptiveCard.body.map((cardElement, index) => React.createElement(CardElementView, { key: 'body' + index, index: index, cardElement: cardElement }))));
+    }
+    renderActions() {
+        if (!this.adaptiveCard.hasActions()) {
+            return null;
+        }
+        return (React.createElement(View, { style: {
+                flex: 1,
+                flexDirection: styleManager.getActionSetFlexDirectionValue(),
+                alignItems: 'stretch',
+                marginTop: this.styleConfig.action.actionSet.spacing,
+            } }, this.adaptiveCard.actions.map((action, index) => React.createElement(ActionView, { key: index, action: action, index: index }))));
+    }
+}

AdaptiveCardsExample/AdaptiveCards/src/View/AdaptiveCardView.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Linking, View, } from 'react-native';
+import { ActionContext } from '../Context/ActionContext';
+import { AdaptiveCardSingleView } from './AdaptiveCardSingleView';
+import { styleManager } from './Styles/StyleManager';
+export class AdaptiveCardView extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        this.onOpenUrl = (action) => {
+            Linking.canOpenURL(action.url).then((supported) => {
+                if (supported) {
+                    Linking.openURL(action.url);
+                }
+            });
+        };
+        this.onShowCard = (action) => {
+            if (!this.isComponentUnmounted) {
+                this.setState({
+                    actionCard: action.card,
+                });
+            }
+        };
+        this.onSubmit = (action) => {
+            if (this.props.onSubmit) {
+                this.props.onSubmit(action.data);
+            }
+        };
+        this.styleConfig = styleManager.addStyle(props.overrideStyle);
+        this.state = {
+            actionCard: null,
+        };
+        let actionContext = ActionContext.getInstance();
+        actionContext.registerOpenUrlHandler(this.onOpenUrl);
+        actionContext.registerShowCardHandler(this.onShowCard);
+        actionContext.registerSubmitHandler(this.onSubmit);
+    }
+    componentWillReceiveProps(nextProps) {
+        this.styleConfig = styleManager.addStyle(nextProps.overrideStyle);
+    }
+    componentWillUnmount() {
+        this.isComponentUnmounted = true;
+    }
+    render() {
+        const { adaptiveCard } = this.props;
+        if (!adaptiveCard) {
+            return null;
+        }
+        return (React.createElement(View, { style: { flex: 1 } },
+            React.createElement(AdaptiveCardSingleView, { formId: 'root', adaptiveCard: adaptiveCard }),
+            this.state.actionCard ?
+                React.createElement(AdaptiveCardSingleView, { formId: 'first', adaptiveCard: this.state.actionCard, style: {
+                        marginTop: this.styleConfig.card.spacing,
+                    } })
+                :
+                    null));
+    }
+}

AdaptiveCardsExample/AdaptiveCards/src/View/Containers/ColumnSetView.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { View, } from 'react-native';
+import { CardElementView } from '../Elements/CardElementView';
+import { CardElementWrapper } from '../Shared/CardElementWrapper';
+export class ColumnSetView extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        this.renderColumn = (column, index) => {
+            return (React.createElement(CardElementView, { key: 'column' + index, index: index, containerWidth: this.state.viewWidth, cardElement: column }));
+        };
+        this.onLayout = (event) => {
+            if (!this.isComponentUnmounted && !this.state.viewWidth && this.hasFixedWidthColumns) {
+                this.setState({
+                    viewWidth: event.nativeEvent.layout.width,
+                });
+            }
+        };
+        this.state = {
+            viewWidth: 0,
+        };
+        const { columnSet } = props;
+        this.hasFixedWidthColumns = columnSet.columns.some(item => item.isFixedWidth());
+        this.isEqualDistribution = columnSet.columns.every(item => item.isFixedWidth());
+    }
+    componentWillUnmount() {
+        this.isComponentUnmounted = true;
+    }
+    render() {
+        const { columnSet, index } = this.props;
+        if (!columnSet || !columnSet.isValid() || !columnSet.hasColumns()) {
+            return null;
+        }
+        return (React.createElement(CardElementWrapper, { cardElement: columnSet, index: index, style: {
+                flex: 1,
+            } },
+            React.createElement(View, { style: {
+                    flex: 1,
+                    flexDirection: 'row',
+                    justifyContent: this.isEqualDistribution ? 'space-between' : 'flex-start',
+                }, onLayout: this.onLayout }, columnSet.columns.map(this.renderColumn))));
+    }
+}
+ColumnSetView.defaultProps = {
+    isComponentUnmounted: false,
+    hasFixedWidthColumns: false,
+    isEqualDistribution: true,
+};

AdaptiveCardsExample/AdaptiveCards/src/View/Containers/ColumnView.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { View, } from 'react-native';
+import { ColumnWidth, } from '../../Schema/enums';
+import { CardElementView } from '../Elements/CardElementView';
+import { CardElementWrapper } from '../Shared/CardElementWrapper';
+export class ColumnView extends React.PureComponent {
+    render() {
+        const { column, index } = this.props;
+        if (!column || !column.isValid() || !column.hasItems()) {
+            return null;
+        }
+        return (React.createElement(CardElementWrapper, { cardElement: column, index: index, style: this.getViewStyle() },
+            React.createElement(View, { style: { flex: 1 } }, column.items.map((cardElement, index) => React.createElement(CardElementView, { key: 'containerItems' + index, index: index, cardElement: cardElement })))));
+    }
+    getViewStyle() {
+        const { column, containerWidth } = this.props;
+        if (column.isFixedWidth()) {
+            if (column.width < 10) {
+                return {
+                    flex: column.width,
+                };
+            }
+            else if (containerWidth) {
+                return {
+                    width: containerWidth * (column.width / 100),
+                };
+            }
+            else {
+                return;
+            }
+        }
+        else {
+            return {
+                flex: column.width === ColumnWidth.Auto ? 0 : 1,
+                alignSelf: column.width,
+            };
+        }
+    }
+}

AdaptiveCardsExample/AdaptiveCards/src/View/Containers/ContainerView.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { View, } from 'react-native';
+import { ContainerStyle } from '../../Schema/enums';
+import { CardElementView } from '../Elements/CardElementView';
+import { CardElementWrapper } from '../Shared/CardElementWrapper';
+import { styleManager } from '../Styles/StyleManager';
+export class ContainerView extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        this.styleConfig = styleManager.getStyle();
+    }
+    render() {
+        const { container, index } = this.props;
+        if (!container || !container.isValid() || !container.hasItems()) {
+            return null;
+        }
+        return (React.createElement(CardElementWrapper, { cardElement: container, index: index, style: {
+                flex: 1,
+            } },
+            React.createElement(View, { style: [{
+                        flex: 1,
+                    },
+                    this.getContainerStyle(container.style)
+                ] }, container.items.map((cardElement, index) => React.createElement(CardElementView, { key: 'containerItems' + index, index: index, cardElement: cardElement })))));
+    }
+    getContainerStyle(style) {
+        let containerStyle;
+        switch (style) {
+            case ContainerStyle.Emphasis:
+                containerStyle = {
+                    backgroundColor: this.styleConfig.container.backgroundColor,
+                };
+                break;
+            case ContainerStyle.Default:
+            default:
+                break;
+        }
+        return containerStyle;
+    }
+}

AdaptiveCardsExample/AdaptiveCards/src/View/Containers/FactSetView.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { View } from 'react-native';
+import { CardElementWrapper } from '../Shared/CardElementWrapper';
+import { FactView } from './FactView';
+export class FactSetView extends React.PureComponent {
+    render() {
+        const { factSet, index } = this.props;
+        if (!factSet || !factSet.isValid() || !factSet.hasFacts()) {
+            return null;
+        }
+        return (React.createElement(CardElementWrapper, { cardElement: factSet, index: index, style: {
+                flex: 1,
+            } },
+            React.createElement(View, { style: {
+                    flex: 1,
+                } }, factSet.facts.map((fact, index) => React.createElement(FactView, { key: 'fact' + index, fact: fact })))));
+    }
+}

AdaptiveCardsExample/AdaptiveCards/src/View/Containers/FactView.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { View } from 'react-native';
+import { AdaptiveCardText } from '../Shared/AdaptiveCardText';
+import { styleManager } from '../Styles/StyleManager';
+export class FactView extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        this.styleConfig = styleManager.getStyle();
+    }
+    render() {
+        const { fact } = this.props;
+        if (!fact || !fact.isValid()) {
+            return null;
+        }
+        return (React.createElement(View, { style: {
+                flex: 1,
+                flexDirection: 'row',
+                justifyContent: 'flex-start'
+            } },
+            React.createElement(AdaptiveCardText, { style: {
+                    color: this.styleConfig.fact.titleColor,
+                    marginRight: this.styleConfig.fact.spacing,
+                } }, fact.title),
+            React.createElement(AdaptiveCardText, { style: {
+                    color: this.styleConfig.fact.valueColor,
+                    marginLeft: this.styleConfig.fact.spacing,
+                } }, fact.value)));
+    }
+}

AdaptiveCardsExample/AdaptiveCards/src/View/Containers/ImageSetView.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { FlatList, View, } from 'react-native';
+import { CardElementView } from '../Elements/CardElementView';
+import { CardElementWrapper } from '../Shared/CardElementWrapper';
+import { styleManager } from '../Styles/StyleManager';
+export class ImageSetView extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this.renderImage = (image, index) => {
+            const { imageSet } = this.props;
+            image.setSize(imageSet.imageSize);
+            return (React.createElement(CardElementView, { key: 'image' + index, index: index, cardElement: image }));
+        };
+    }
+    render() {
+        const { imageSet, index } = this.props;
+        if (!imageSet || !imageSet.isValid() || !imageSet.hasImages()) {
+            return null;
+        }
+        return (React.createElement(CardElementWrapper, { cardElement: imageSet, index: index, style: {
+                flex: 1,
+            } }, styleManager.isHorizontalImageSet() ?
+            React.createElement(FlatList, { style: { flex: 1 }, horizontal: true, data: imageSet.images, renderItem: ({ item, index }) => this.renderImage(item, index), keyExtractor: (item, index) => 'image' + index, showsHorizontalScrollIndicator: false })
+            :
+                React.createElement(View, { style: {
+                        flex: 1,
+                        flexWrap: 'wrap',
+                    } }, imageSet.images.map(this.renderImage))));
+    }
+}

AdaptiveCardsExample/AdaptiveCards/src/View/Elements/CardElementView.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { CardElementType } from '../../Schema/Elements/CardElementType';
+import { ColumnSetView } from '../Containers/ColumnSetView';
+import { ColumnView } from '../Containers/ColumnView';
+import { ContainerView } from '../Containers/ContainerView';
+import { FactSetView } from '../Containers/FactSetView';
+import { ImageSetView } from '../Containers/ImageSetView';
+import { DateInputView } from '../Inputs/DateInputView';
+import { TextInputView } from '../Inputs/TextInputView';
+import { TimeInputView } from '../Inputs/TimeInputView';
+import { ImageView } from './ImageView';
+import { TextBlockView } from './TextBlockView';
+export class CardElementView extends React.PureComponent {
+    render() {
+        const { cardElement, index, containerWidth } = this.props;
+        if (!cardElement || !cardElement.isValid()) {
+            return null;
+        }
+        switch (cardElement.type) {
+            case CardElementType.TextBlock:
+                return (React.createElement(TextBlockView, { textBlock: cardElement, index: index }));
+            case CardElementType.Image:
+                return (React.createElement(ImageView, { image: cardElement, index: index }));
+            case CardElementType.ImageSet:
+                return (React.createElement(ImageSetView, { imageSet: cardElement, index: index }));
+            case CardElementType.Container:
+                return (React.createElement(ContainerView, { container: cardElement, index: index }));
+            case CardElementType.Column:
+                return (React.createElement(ColumnView, { column: cardElement, containerWidth: containerWidth, index: index }));
+            case CardElementType.ColumnSet:
+                return (React.createElement(ColumnSetView, { columnSet: cardElement, index: index }));
+            case CardElementType.FactSet:
+                return (React.createElement(FactSetView, { factSet: cardElement, index: index }));
+            case CardElementType.InputText:
+                return (React.createElement(TextInputView, { inputFieldId: cardElement.id, containerId: this.props.containerId, inputText: cardElement, index: index }));
+            case CardElementType.DateInput:
+                return (React.createElement(DateInputView, { inputFieldId: cardElement.id, containerId: this.props.containerId, inputDate: cardElement, index: index }));
+            case CardElementType.TimeInput:
+                return (React.createElement(TimeInputView, { inputFieldId: cardElement.id, containerId: this.props.containerId, inputTime: cardElement, index: index }));
+            default:
+                return null;
+        }
+    }
+}

AdaptiveCardsExample/AdaptiveCards/src/View/Elements/ImageView.js

@@ -0,0 +1,156 @@
+import React from 'react';
+import { Image, StyleSheet, Text, View, } from 'react-native';
+import { FlexImageAlignment, HorizontalAlignment, ImageSize, ImageStyle, } from '../../Schema/enums';
+import { CardElementWrapper } from '../Shared/CardElementWrapper';
+import { styleManager } from '../Styles/StyleManager';
+const IMAGEMINSIZE = 18;
+var ImageFit;
+(function (ImageFit) {
+    ImageFit[ImageFit["FlexibleWidth"] = 0] = "FlexibleWidth";
+    ImageFit[ImageFit["FlexibleHeight"] = 1] = "FlexibleHeight";
+})(ImageFit || (ImageFit = {}));
+export class ImageView extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        this.onLayout = (event) => {
+            const { image } = this.props;
+            if (image.isFixedSize()) {
+                return;
+            }
+            let width = event.nativeEvent.layout.width;
+            let height = event.nativeEvent.layout.height;
+            console.log('AdaptiveCard Image onLayout', width, height);
+            if (!this.fitStyle) {
+                this.fitStyle = width !== 0 && height === 0 ? 1 : 0;
+            }
+            this.setState({
+                viewWidth: width,
+                viewHeight: height
+            });
+        };
+        this.onLoad = () => {
+            const { image } = this.props;
+            Image.getSize(image.url, (width, height) => {
+                console.log('AdaptiveCard Image getSize', width, height);
+                if (!this.isComponentUnmounted && width) {
+                    this.setState({
+                        imageAspectRatio: height / width
+                    });
+                }
+            }, (error) => {
+                console.error('failed to get image size of commute url, error');
+            });
+        };
+        this.onError = () => {
+            if (!this.isComponentUnmounted) {
+                this.setState({
+                    imageLoadSuccess: false,
+                });
+            }
+        };
+        this.getDimensionsForBestFit = () => {
+            if (this.state.imageAspectRatio) {
+                switch (this.fitStyle) {
+                    case 1:
+                        if (this.state.viewWidth) {
+                            return {
+                                height: Math.floor(this.state.viewWidth * this.state.imageAspectRatio),
+                                width: this.state.viewWidth
+                            };
+                        }
+                        break;
+                    case 0:
+                        if (this.state.viewHeight) {
+                            let dimensions = {
+                                width: Math.floor(this.state.viewHeight / this.state.imageAspectRatio),
+                                height: this.state.viewHeight
+                            };
+                            if (this.state.viewWidth && dimensions.width > this.state.viewWidth) {
+                                dimensions.width = this.state.viewWidth;
+                            }
+                            return dimensions;
+                        }
+                        break;
+                }
+            }
+            else if (this.fitStyle !== undefined) {
+                return {
+                    width: this.state.viewWidth || IMAGEMINSIZE,
+                    height: this.state.viewHeight || IMAGEMINSIZE
+                };
+            }
+            return undefined;
+        };
+        this.state = {
+            viewWidth: 0,
+            viewHeight: 0,
+            imageAspectRatio: 1,
+            imageLoadSuccess: true,
+        };
+    }
+    componentWillUnmount() {
+        this.isComponentUnmounted = true;
+    }
+    render() {
+        const { image, index } = this.props;
+        if (!image || !image.isValid()) {
+            return null;
+        }
+        const dimensions = image.isFixedSize() ?
+            {
+                width: styleManager.getImageSize(image.size),
+                height: styleManager.getImageSize(image.size),
+            } :
+            this.getDimensionsForBestFit();
+        const borderRadius = image.style === ImageStyle.Person && dimensions ?
+            dimensions.width / 2 :
+            undefined;
+        return (React.createElement(CardElementWrapper, { cardElement: image, index: index, style: styleManager.isHorizontalImageSet() ? undefined : { flex: 1 } },
+            React.createElement(View, { style: { flex: 1 }, onLayout: this.onLayout },
+                this.state.imageLoadSuccess ?
+                    undefined :
+                    this.renderPlaceholder(),
+                React.createElement(Image, { accessible: !!image.altText, accessibilityLabel: image.altText || undefined, style: {
+                        overflow: 'hidden',
+                        width: dimensions ? dimensions.width : undefined,
+                        height: dimensions ? dimensions.height : undefined,
+                        alignSelf: this.getImageAlignment(image.horizontalAlignment, image.size),
+                        borderRadius: borderRadius
+                    }, source: { uri: image.url }, onLoad: this.onLoad, onError: this.onError, resizeMode: 'cover', resizeMethod: 'auto' }))));
+    }
+    renderPlaceholder() {
+        return (React.createElement(View, { style: [
+                StyleSheet.absoluteFill,
+                {
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                }
+            ] },
+            React.createElement(Text, { style: {
+                    fontSize: 32,
+                    color: 'rgba(0, 0, 0, 0.5)',
+                    textAlign: 'center'
+                } }, '\uE601')));
+    }
+    getImageAlignment(alignment, imageSize) {
+        let imageAlignment;
+        if (imageSize === ImageSize.Stretch) {
+            imageAlignment = FlexImageAlignment.Stretch;
+        }
+        else {
+            switch (alignment) {
+                case HorizontalAlignment.Left:
+                    imageAlignment = FlexImageAlignment.FlexStart;
+                    break;
+                case HorizontalAlignment.Right:
+                    imageAlignment = FlexImageAlignment.FlexEnd;
+                    break;
+                case HorizontalAlignment.Center:
+                default:
+                    imageAlignment = FlexImageAlignment.Center;
+                    break;
+            }
+        }
+        return imageAlignment;
+    }
+}

AdaptiveCardsExample/AdaptiveCards/src/View/Elements/TextBlockView.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { View, } from 'react-native';
+import { AdaptiveCardText } from '../Shared/AdaptiveCardText';
+import { CardElementWrapper } from '../Shared/CardElementWrapper';
+import { styleManager } from '../Styles/StyleManager';
+export class TextBlockView extends React.PureComponent {
+    render() {
+        const { textBlock, index } = this.props;
+        if (!textBlock || !textBlock.isValid()) {
+            return null;
+        }
+        return (React.createElement(CardElementWrapper, { cardElement: textBlock, index: index, style: {
+                flex: 1,
+            } },
+            React.createElement(View, { style: {
+                    flex: 1,
+                } },
+                React.createElement(AdaptiveCardText, { style: {
+                        backgroundColor: 'transparent',
+                        fontSize: styleManager.getFontSize(textBlock.size),
+                        fontWeight: styleManager.getFontWeight(textBlock.weight),
+                        color: textBlock.isSubtle ?
+                            styleManager.getSubtleColor(textBlock.color) :
+                            styleManager.getColor(textBlock.color),
+                        textAlign: textBlock.horizontalAlignment,
+                        flexWrap: styleManager.getWrapStyle(textBlock.wrap),
+                    }, numberOfLines: textBlock.maxLines || undefined }, textBlock.text))));
+    }
+}

AdaptiveCardsExample/AdaptiveCards/src/View/Inputs/DateInputView.js

@@ -7,8 +7,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import React from 'react';
-import { TouchableOpacity, DatePickerAndroid, Text, View } from 'react-native';
-export default class InputTexDateView extends React.PureComponent {
+import { DatePickerAndroid, Text, TouchableOpacity, View } from 'react-native';
+export class DateInputView extends React.PureComponent {
     constructor(props) {
         super(props);
         this.showDatePicker = () => __awaiter(this, void 0, void 0, function* () {
@@ -43,7 +43,15 @@ export default class InputTexDateView extends React.PureComponent {
             return null;
         }
         return (React.createElement(TouchableOpacity, { onPress: this.showDatePicker },
-            React.createElement(View, { style: { height: 40, borderColor: 'gray', borderWidth: 1 } },
+            React.createElement(View, { style: {
+                    borderColor: 'gray',
+                    borderWidth: 1,
+                    borderRadius: 4,
+                    paddingHorizontal: 10,
+                    paddingVertical: 6,
+                    marginVertical: 6,
+                    height: 38
+                } },
                 React.createElement(Text, null, this.state.date))));
     }
 }

AdaptiveCardsExample/AdaptiveCards/src/View/Inputs/TextInputView.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { TextInput, } from 'react-native';
+export class TextInputView extends React.PureComponent {
+    render() {
+        const { inputText } = this.props;
+        if (!inputText || !inputText.isValid()) {
+            return null;
+        }
+        return (React.createElement(TextInput, { style: {
+                borderColor: 'gray',
+                borderWidth: 1,
+                borderRadius: 4,
+                paddingHorizontal: 10,
+                paddingVertical: 6,
+                marginVertical: 6,
+                height: inputText.isMultiline ? 116 : 38
+            }, multiline: inputText.isMultiline, blurOnSubmit: true, placeholder: inputText.placeholder, value: inputText.value, returnKeyType: 'done', underlineColorAndroid: 'transparent', importantForAccessibility: 'no-hide-descendants' }));
+    }
+}

AdaptiveCardsExample/AdaptiveCards/src/View/Inputs/TimeInputView.js

@@ -7,8 +7,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import React from 'react';
-import { TouchableOpacity, TimePickerAndroid, Text, View } from 'react-native';
-export default class InputTexTimeView extends React.PureComponent {
+import { Text, TimePickerAndroid, TouchableOpacity, View } from 'react-native';
+export class TimeInputView extends React.PureComponent {
     constructor(props) {
         super(props);
         this.showDatePicker = () => __awaiter(this, void 0, void 0, function* () {
@@ -44,7 +44,15 @@ export default class InputTexTimeView extends React.PureComponent {
             return null;
         }
         return (React.createElement(TouchableOpacity, { onPress: this.showDatePicker },
-            React.createElement(View, { style: { height: 40, borderColor: 'gray', borderWidth: 1 } },
+            React.createElement(View, { style: {
+                    borderColor: 'gray',
+                    borderWidth: 1,
+                    borderRadius: 4,
+                    paddingHorizontal: 10,
+                    paddingVertical: 6,
+                    marginVertical: 6,
+                    height: 38
+                } },
                 React.createElement(Text, null, this.state.time))));
     }
 }

AdaptiveCardsExample/AdaptiveCards/src/View/Shared/AdaptiveCardText.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Text, } from 'react-native';
+import { styleManager } from '../Styles/StyleManager';
+export class AdaptiveCardText extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        this.fontFamily = styleManager.getFontFamily();
+    }
+    render() {
+        const { style, children } = this.props;
+        return (React.createElement(Text, Object.assign({}, this.props, { style: [
+                {
+                    fontFamily: this.fontFamily || undefined,
+                },
+                style
+            ] }), children));
+    }
+}

AdaptiveCardsExample/AdaptiveCards/src/View/Shared/CardElementWrapper.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { TouchableOpacity, View, } from 'react-native';
+import { ActionContext } from '../../Context/ActionContext';
+import { styleManager } from '../Styles/StyleManager';
+import { SeparateLine } from './SeparateLine';
+export class CardElementWrapper extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        this.styleConfig = styleManager.getStyle();
+        this.onClick = this.onClick.bind(this);
+    }
+    render() {
+        if (!this.props.cardElement || !this.props.cardElement.isValid()) {
+            return null;
+        }
+        if (this.props.cardElement.supportAction() && this.props.cardElement.getAction() !== undefined) {
+            return this.renderActionView();
+        }
+        return this.renderNonActionView();
+    }
+    renderActionView() {
+        const isHorizontalLayout = styleManager.isHorizontalCardElement(this.props.cardElement.type);
+        if (this.props.cardElement.separator) {
+            return (React.createElement(TouchableOpacity, { style: this.props.style, onPress: this.onClick },
+                this.renderSeparator(this.props.cardElement.spacing, isHorizontalLayout),
+                this.renderWrapper(this.props.cardElement.spacing, 0, isHorizontalLayout, { flex: 1 })));
+        }
+        else {
+            return this.renderTouchableWrapper(this.props.cardElement.spacing, this.props.index, isHorizontalLayout, this.props.style);
+        }
+    }
+    renderNonActionView() {
+        const isHorizontalLayout = styleManager.isHorizontalCardElement(this.props.cardElement.type);
+        if (this.props.cardElement.separator) {
+            return (React.createElement(View, { style: this.props.style },
+                this.renderSeparator(this.props.cardElement.spacing, isHorizontalLayout),
+                this.renderWrapper(this.props.cardElement.spacing, 0, isHorizontalLayout, { flex: 1 })));
+        }
+        else {
+            return this.renderWrapper(this.props.cardElement.spacing, this.props.index, isHorizontalLayout, this.props.style);
+        }
+    }
+    renderTouchableWrapper(spacing, index, isHorizontalLayout, wrapperStyle) {
+        return (React.createElement(TouchableOpacity, { style: [
+                wrapperStyle,
+                styleManager.getCardElementSpacingStyle(spacing, index, isHorizontalLayout)
+            ], onPress: this.onClick }, this.props.children));
+    }
+    renderWrapper(spacing, index, isHorizontalLayout, wrapperStyle) {
+        return (React.createElement(View, { style: [
+                wrapperStyle,
+                styleManager.getCardElementSpacingStyle(spacing, index, isHorizontalLayout)
+            ] }, this.props.children));
+    }
+    renderSeparator(spacing, isHorizontalLayout) {
+        return (React.createElement(SeparateLine, { isHorizontal: isHorizontalLayout, margin: styleManager.getCardElementMargin(spacing), color: this.styleConfig.element.separateLineColor }));
+    }
+    onClick() {
+        let actionContext = ActionContext.getInstance();
+        let callback = actionContext.getActionHandler();
+        if (callback) {
+            const element = this.props.cardElement;
+            if (element.supportAction()) {
+                let action = element.getAction();
+                if (action) {
+                    callback(action);
+                }
+            }
+        }
+    }
+}
+CardElementWrapper.defaultProps = {
+    index: 0,
+};

AdaptiveCardsExample/AdaptiveCards/src/View/Shared/ImageBackground.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Image, StyleSheet, View, } from 'react-native';
+export class ImageBackground extends React.PureComponent {
+    render() {
+        const { children, containerStyle, imageStyle, source } = this.props;
+        return (React.createElement(View, { style: [
+                containerStyle,
+                {
+                    position: 'relative',
+                }
+            ] },
+            React.createElement(Image, { source: source, style: [
+                    StyleSheet.absoluteFill,
+                    imageStyle,
+                ] }),
+            children));
+    }
+}

AdaptiveCardsExample/AdaptiveCards/src/View/Shared/SeparateLine.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { PixelRatio, Platform, View, } from 'react-native';
+export class SeparateLine extends React.PureComponent {
+    render() {
+        const { color, isHorizontal, margin } = this.props;
+        const thickness = (Platform.OS === 'ios') ?
+            parseFloat((1 / PixelRatio.get()).toFixed(2)) :
+            1;
+        const style = isHorizontal ?
+            {
+                width: thickness,
+                marginLeft: margin,
+                marginRight: margin,
+                marginTop: 0,
+                marginBottom: 0,
+            } :
+            {
+                height: thickness,
+                marginLeft: 0,
+                marginRight: 0,
+                marginTop: margin,
+                marginBottom: margin,
+            };
+        return (React.createElement(View, Object.assign({}, this.props, { style: [
+                {
+                    flex: 1,
+                    backgroundColor: color,
+                },
+                style
+            ] })));
+    }
+}
+SeparateLine.defaultProps = {
+    isHorizontal: false,
+    margin: 0,
+    color: 'lightgray',
+};

AdaptiveCardsExample/AdaptiveCards/src/View/Styles/StyleManager.js

@@ -1,9 +1,9 @@
 import merge from 'lodash/merge';
 import { Platform, } from 'react-native';
-import { FontSize, FontWeight, TextColor, FlexWrap, FlexDirection, Spacing, } from '../../Schema/enums';
-import CardElementType from '../../Schema/Elements/CardElementType';
-import { isValidValue } from '../../utils';
-const defaultStyle = require('./defaultStyle.json');
+import { CardElementType } from '../../Schema/Elements/CardElementType';
+import { FlexDirection, FlexWrap, FontSize, FontWeight, Spacing, TextColor, } from '../../Schema/enums';
+import { Utils } from '../../utils';
+const defaultStyle = require('./DefaultStyle.json');
 class StyleManager {
     constructor(style = {}) {
         this.style = style;
@@ -75,7 +75,7 @@ class StyleManager {
     getCardElementMargin(spacing) {
         let margin = 0;
         if (spacing.toLowerCase() !== Spacing.Padding.toLowerCase()) {
-            margin = isValidValue(this.style.element.spacing[spacing]) ?
+            margin = Utils.isValidValue(this.style.element.spacing[spacing]) ?
                 this.style.element.spacing[spacing] :
                 this.style.element.spacing[Spacing.Default];
         }
@@ -120,4 +120,4 @@ class StyleManager {
         return;
     }
 }
-export default new StyleManager(defaultStyle);
+export const styleManager = new StyleManager(defaultStyle);

AdaptiveCardsExample/AdaptiveCards/src/index.js

@@ -0,0 +1,2 @@
+import { AdaptiveCardView } from './View/AdaptiveCardView';
+export default AdaptiveCardView;

AdaptiveCardsExample/AdaptiveCards/src/utils.js

@@ -0,0 +1,40 @@
+export class Utils {
+    static getEnumValueOrDefault(targetEnum, name, defaultValue) {
+        if (!name) {
+            return defaultValue;
+        }
+        for (const key in targetEnum) {
+            if (targetEnum.hasOwnProperty(key)) {
+                let isValueProperty = parseInt(key, 10) >= 0;
+                if (isValueProperty) {
+                    let value = targetEnum[key];
+                    if (value && typeof value === 'string') {
+                        if (value.toLowerCase() === name.toLowerCase()) {
+                            return parseInt(key, 10);
+                        }
+                    }
+                }
+            }
+        }
+        return defaultValue;
+    }
+    static getStringEnumValueOrDefault(targetEnum, name, defaultValue) {
+        if (!name) {
+            return defaultValue;
+        }
+        for (const key in targetEnum) {
+            if (targetEnum.hasOwnProperty(key)) {
+                let value = targetEnum[key];
+                if (value.toLowerCase() === name.toLowerCase()) {
+                    return value;
+                }
+            }
+        }
+        return defaultValue;
+    }
+    static isValidValue(value) {
+        return !(value === undefined ||
+            value === null ||
+            (typeof value === 'string' && !value));
+    }
+}

dist/Context/ActionContext.js

@@ -0,0 +1,38 @@
+import { ActionType } from '../Schema/Actions/ActionType';
+export class ActionContext {
+    constructor() { }
+    static getInstance() {
+        if (ActionContext.sharedInstance === undefined) {
+            ActionContext.sharedInstance = new ActionContext();
+        }
+        return ActionContext.sharedInstance;
+    }
+    registerOpenUrlHandler(handler) {
+        this.onOpenUrl = handler;
+    }
+    registerShowCardHandler(handler) {
+        this.onShowCard = handler;
+    }
+    registerSubmitHandler(handler) {
+        this.onSubmit = handler;
+    }
+    getActionHandler() {
+        return (action) => {
+            let callback;
+            switch (action.type) {
+                case ActionType.OpenUrl:
+                    callback = this.onOpenUrl;
+                    break;
+                case ActionType.ShowCard:
+                    callback = this.onShowCard;
+                    break;
+                case ActionType.Submit:
+                    callback = this.onSubmit;
+                    break;
+            }
+            if (callback && typeof callback === 'function') {
+                callback(action);
+            }
+        };
+    }
+}

dist/Schema/Actions/Action.js

@@ -1,9 +1,12 @@
-import TypedElement from '../TypedElement';
-export default class Action extends TypedElement {
+import { TypedElement } from '../TypedElement';
+export class ActionElement extends TypedElement {
     constructor(json) {
         super(json);
         if (this.isValidJSON) {
             this.title = json.title;
         }
     }
+    supportAction() {
+        return true;
+    }
 }

dist/Schema/Actions/ActionFactory.js

@@ -0,0 +1,39 @@
+import { ActionType } from './ActionType';
+import { OpenUrlActionElement } from './OpenUrlAction';
+import { ShowCardActionElement } from './ShowCardAction';
+import { SubmitActionElement } from './SubmitAction';
+export class ActionFactory {
+    static create(json) {
+        if (!json) {
+            return undefined;
+        }
+        let action;
+        switch (json.type) {
+            case ActionType.OpenUrl:
+                action = new OpenUrlActionElement(json);
+                break;
+            case ActionType.Submit:
+                action = new SubmitActionElement(json);
+                break;
+            case ActionType.ShowCard:
+                action = new ShowCardActionElement(json);
+                break;
+            default:
+                action = undefined;
+                break;
+        }
+        return action;
+    }
+    static createSet(json) {
+        let actionSet = [];
+        if (json && json.length > 0) {
+            json.forEach((item) => {
+                let action = ActionFactory.create(item);
+                if (action && action.isValidJSON) {
+                    actionSet.push(action);
+                }
+            });
+        }
+        return actionSet;
+    }
+}

dist/Schema/Actions/ActionShowCard.js

@@ -1,17 +0,0 @@
-import AdaptiveCard from '../AdaptiveCard';
-import Action from './Action';
-import ActionType from './ActionType';
-export default class ActionShowCard extends Action {
-    constructor(json) {
-        super(json);
-        if (this.isValidJSON) {
-            this.card = new AdaptiveCard(json.card);
-        }
-    }
-    getTypeName() {
-        return ActionType.ShowCard;
-    }
-    getRequiredProperties() {
-        return ['card'];
-    }
-}

dist/Schema/Actions/ActionSubmit.js

@@ -1,16 +0,0 @@
-import Action from './Action';
-import ActionType from './ActionType';
-export default class ActionSubmit extends Action {
-    constructor(json) {
-        super(json);
-        if (this.isValidJSON) {
-            this.data = json.data;
-        }
-    }
-    getTypeName() {
-        return ActionType.Submit;
-    }
-    getRequiredProperties() {
-        return [];
-    }
-}

dist/Schema/Actions/ActionType.js

@@ -1,7 +1,6 @@
-var ActionType;
+export var ActionType;
 (function (ActionType) {
     ActionType["OpenUrl"] = "Action.OpenUrl";
     ActionType["Submit"] = "Action.Submit";
     ActionType["ShowCard"] = "Action.ShowCard";
 })(ActionType || (ActionType = {}));
-export default ActionType;

dist/Schema/Actions/Creator.js

@@ -1,37 +0,0 @@
-import ActionType from './ActionType';
-import ActionOpenUrl from './ActionOpenUrl';
-import ActionShowCard from './ActionShowCard';
-import ActionSubmit from './ActionSubmit';
-export function createAction(json) {
-    if (!json) {
-        return null;
-    }
-    let action;
-    switch (json.type) {
-        case ActionType.OpenUrl:
-            action = new ActionOpenUrl(json);
-            break;
-        case ActionType.Submit:
-            action = new ActionSubmit(json);
-            break;
-        case ActionType.ShowCard:
-            action = new ActionShowCard(json);
-            break;
-        default:
-            action = null;
-            break;
-    }
-    return action;
-}
-export function createActionSet(json) {
-    let actionSet = [];
-    if (json && json.length > 0) {
-        json.forEach((item) => {
-            let action = createAction(item);
-            if (action && action.isValidJSON) {
-                actionSet.push(action);
-            }
-        });
-    }
-    return actionSet;
-}

dist/Schema/Actions/OpenUrlAction.js

@@ -1,6 +1,6 @@
-import Action from './Action';
-import ActionType from './ActionType';
-export default class ActionOpenUrl extends Action {
+import { ActionElement } from './Action';
+import { ActionType } from './ActionType';
+export class OpenUrlActionElement extends ActionElement {
     constructor(json) {
         super(json);
         if (this.isValidJSON) {
@@ -13,4 +13,10 @@ export default class ActionOpenUrl extends Action {
     getRequiredProperties() {
         return ['url'];
     }
+    getAction() {
+        return this;
+    }
+    getActions() {
+        return [this.getAction()];
+    }
 }

dist/Schema/Actions/ShowCardAction.js

@@ -0,0 +1,23 @@
+import { AdaptiveCardElement } from '../AdaptiveCard';
+import { ActionElement } from './Action';
+import { ActionType } from './ActionType';
+export class ShowCardActionElement extends ActionElement {
+    constructor(json) {
+        super(json);
+        if (this.isValidJSON) {
+            this.card = new AdaptiveCardElement(json.card);
+        }
+    }
+    getTypeName() {
+        return ActionType.ShowCard;
+    }
+    getRequiredProperties() {
+        return ['card'];
+    }
+    getAction() {
+        return this;
+    }
+    getActions() {
+        return [this.getAction()];
+    }
+}

dist/Schema/Actions/SubmitAction.js

@@ -0,0 +1,22 @@
+import { ActionElement } from './Action';
+import { ActionType } from './ActionType';
+export class SubmitActionElement extends ActionElement {
+    constructor(json) {
+        super(json);
+        if (this.isValidJSON) {
+            this.data = json.data;
+        }
+    }
+    getTypeName() {
+        return ActionType.Submit;
+    }
+    getRequiredProperties() {
+        return [];
+    }
+    getAction() {
+        return this;
+    }
+    getActions() {
+        return [this.getAction()];
+    }
+}

dist/Schema/AdaptiveCard.js

@@ -1,7 +1,7 @@
-import TypedElement from './TypedElement';
-import { createActionSet } from './Actions/Creator';
-import { createCardElementSet } from './Elements/Creator';
-export default class AdaptiveCard extends TypedElement {
+import { ActionFactory } from './Actions/ActionFactory';
+import { CardElementFactory } from './Elements/CardElementFactory';
+import { TypedElement } from './TypedElement';
+export class AdaptiveCardElement extends TypedElement {
     constructor(json) {
         super(json);
         this.actions = [];
@@ -12,8 +12,8 @@ export default class AdaptiveCard extends TypedElement {
             this.fallbackText = json.fallbackText;
             this.backgroundImage = json.backgroundImage;
             this.speak = json.speak;
-            this.actions = createActionSet(json.actions);
-            this.body = createCardElementSet(json.body);
+            this.actions = ActionFactory.createSet(json.actions);
+            this.body = CardElementFactory.createSet(json.body);
         }
     }
     getTypeName() {

dist/Schema/Containers/Column.js

@@ -1,15 +1,15 @@
-import { ColumnWidth, } from '../enums';
-import { getStringEnumValueOrDefault } from '../../utils';
-import { createAction } from '../Actions/Creator';
-import CardElement from '../Elements/CardElement';
-import CardElementType from '../Elements/CardElementType';
-import { createCardElementSet } from '../Elements/Creator';
-export default class Column extends CardElement {
+import { Utils } from '../../utils';
+import { ActionFactory } from '../Actions/ActionFactory';
+import { CardElement } from '../Elements/CardElement';
+import { CardElementFactory } from '../Elements/CardElementFactory';
+import { CardElementType } from '../Elements/CardElementType';
+import { ColumnWidth } from '../enums';
+export class ColumnElement extends CardElement {
     constructor(json) {
         super(json);
         if (this.isValidJSON) {
-            this.items = createCardElementSet(json.items);
-            this.selectAction = createAction(json.selectAction);
+            this.items = CardElementFactory.createSet(json.items);
+            this.selectAction = ActionFactory.create(json.selectAction);
             if (json.width && !isNaN(json.width)) {
                 let columnWidth = parseInt(json.width, 10);
                 if (columnWidth > 100) {
@@ -23,7 +23,7 @@ export default class Column extends CardElement {
                 }
             }
             else {
-                this.width = getStringEnumValueOrDefault(ColumnWidth, json.width, ColumnWidth.Auto);
+                this.width = Utils.getStringEnumValueOrDefault(ColumnWidth, json.width, ColumnWidth.Auto);
             }
         }
     }
@@ -33,6 +33,15 @@ export default class Column extends CardElement {
     getRequiredProperties() {
         return ['items'];
     }
+    supportAction() {
+        return true;
+    }
+    getAction() {
+        return this.selectAction;
+    }
+    getActions() {
+        return [this.getAction()];
+    }
     hasItems() {
         return this.items && this.items.length > 0;
     }

dist/Schema/Containers/ColumnSet.js

@@ -1,13 +1,13 @@
-import { createAction } from '../Actions/Creator';
-import CardElement from '../Elements/CardElement';
-import CardElementType from '../Elements/CardElementType';
-import Column from './Column';
-export default class ColumnSet extends CardElement {
+import { ActionFactory } from '../Actions/ActionFactory';
+import { CardElement } from '../Elements/CardElement';
+import { CardElementType } from '../Elements/CardElementType';
+import { ColumnElement } from './Column';
+export class ColumnSetElement extends CardElement {
     constructor(json) {
         super(json);
         if (this.isValidJSON) {
             this.columns = this.createColumnSet(json.columns);
-            this.selectAction = createAction(json.selectAction);
+            this.selectAction = ActionFactory.create(json.selectAction);
         }
     }
     getTypeName() {
@@ -16,11 +16,20 @@ export default class ColumnSet extends CardElement {
     getRequiredProperties() {
         return [];
     }
+    supportAction() {
+        return true;
+    }
+    getAction() {
+        return this.selectAction;
+    }
+    getActions() {
+        return [this.getAction()];
+    }
     createColumnSet(json) {
         let columnSet = [];
         if (json && json.length > 0) {
             json.forEach((item) => {
-                let column = new Column(item);
+                let column = new ColumnElement(item);
                 if (column && column.isValidJSON) {
                     columnSet.push(column);
                 }

dist/Schema/Containers/Container.js

@@ -1,17 +1,17 @@
-import { ContainerStyle, } from '../enums';
-import { getStringEnumValueOrDefault } from '../../utils';
-import { createAction } from '../Actions/Creator';
-import CardElement from '../Elements/CardElement';
-import CardElementType from '../Elements/CardElementType';
-import { createCardElementSet } from '../Elements/Creator';
-export default class Container extends CardElement {
+import { Utils } from '../../utils';
+import { ActionFactory } from '../Actions/ActionFactory';
+import { CardElement } from '../Elements/CardElement';
+import { CardElementFactory } from '../Elements/CardElementFactory';
+import { CardElementType } from '../Elements/CardElementType';
+import { ContainerStyle } from '../enums';
+export class ContainerElement extends CardElement {
     constructor(json) {
         super(json);
         this.items = [];
         if (this.isValidJSON) {
-            this.items = createCardElementSet(json.items);
-            this.selectAction = createAction(json.selectAction);
-            this.style = getStringEnumValueOrDefault(ContainerStyle, json.style, ContainerStyle.Default);
+            this.items = CardElementFactory.createSet(json.items);
+            this.selectAction = ActionFactory.create(json.selectAction);
+            this.style = Utils.getStringEnumValueOrDefault(ContainerStyle, json.style, ContainerStyle.Default);
         }
     }
     getTypeName() {
@@ -20,6 +20,15 @@ export default class Container extends CardElement {
     getRequiredProperties() {
         return ['items'];
     }
+    supportAction() {
+        return true;
+    }
+    getAction() {
+        return this.selectAction;
+    }
+    getActions() {
+        return [this.getAction()];
+    }
     hasItems() {
         return this.items && this.items.length > 0;
     }

dist/Schema/Containers/Fact.js

@@ -1,5 +1,5 @@
-import TypedElement from '../TypedElement';
-export default class Fact extends TypedElement {
+import { TypedElement } from '../TypedElement';
+export class FactElement extends TypedElement {
     constructor(json) {
         super(json);
         if (this.isValidJSON) {

dist/Schema/Containers/FactSet.js

@@ -1,7 +1,7 @@
-import CardElement from '../Elements/CardElement';
-import CardElementType from '../Elements/CardElementType';
-import Fact from './Fact';
-export default class FactSet extends CardElement {
+import { CardElement } from '../Elements/CardElement';
+import { CardElementType } from '../Elements/CardElementType';
+import { FactElement } from './Fact';
+export class FactSetElement extends CardElement {
     constructor(json) {
         super(json);
         this.facts = [];
@@ -19,7 +19,7 @@ export default class FactSet extends CardElement {
         let factSet = [];
         if (json && json.length > 0) {
             json.forEach((item) => {
-                let fact = new Fact(item);
+                let fact = new FactElement(item);
                 if (fact && fact.isValidJSON) {
                     factSet.push(fact);
                 }

dist/Schema/Containers/ImageSet.js

@@ -1,16 +1,16 @@
-import { ImageSize, } from '../enums';
-import { getStringEnumValueOrDefault } from '../../utils';
-import CardElement from '../Elements/CardElement';
-import CardElementType from '../Elements/CardElementType';
-import Image from '../Elements/Image';
-export default class ImageSet extends CardElement {
+import { Utils } from '../../utils';
+import { CardElement } from '../Elements/CardElement';
+import { CardElementType } from '../Elements/CardElementType';
+import { ImageElement } from '../Elements/Image';
+import { ImageSize } from '../enums';
+export class ImageSetElement extends CardElement {
     constructor(json) {
         super(json);
         this.images = [];
         this.imageSize = ImageSize.Auto;
         if (this.isValidJSON) {
             this.images = this.createImageSet(json.images);
-            this.imageSize = getStringEnumValueOrDefault(ImageSize, json.imageSize, ImageSize.Auto);
+            this.imageSize = Utils.getStringEnumValueOrDefault(ImageSize, json.imageSize, ImageSize.Auto);
         }
     }
     getTypeName() {
@@ -19,11 +19,14 @@ export default class ImageSet extends CardElement {
     getRequiredProperties() {
         return ['images'];
     }
+    supportAction() {
+        return false;
+    }
     createImageSet(json) {
         let imageSet = [];
         if (json && json.length > 0) {
             json.forEach((item) => {
-                let image = new Image(item);
+                let image = new ImageElement(item);
                 if (image && image.isValidJSON) {
                     imageSet.push(image);
                 }

dist/Schema/Elements/CardElement.js

@@ -1,13 +1,13 @@
-import { Spacing, } from '../enums';
-import { getStringEnumValueOrDefault } from '../../utils';
-import TypedElement from '../TypedElement';
-export default class CardElement extends TypedElement {
+import { Utils } from '../../utils';
+import { Spacing } from '../enums';
+import { TypedElement } from '../TypedElement';
+export class CardElement extends TypedElement {
     constructor(json) {
         super(json);
         this.separator = false;
         if (this.isValidJSON) {
             this.id = json.id;
-            this.spacing = getStringEnumValueOrDefault(Spacing, json.spacing, Spacing.Default);
+            this.spacing = Utils.getStringEnumValueOrDefault(Spacing, json.spacing, Spacing.Default);
             this.separator = json.separator || false;
         }
     }

dist/Schema/Elements/CardElementFactory.js

@@ -0,0 +1,67 @@
+import { ColumnElement } from '../Containers/Column';
+import { ColumnSetElement } from '../Containers/ColumnSet';
+import { ContainerElement } from '../Containers/Container';
+import { FactSetElement } from '../Containers/FactSet';
+import { ImageSetElement } from '../Containers/ImageSet';
+import { DateInputElement } from '../Inputs/DateInput';
+import { TextInputElement } from '../Inputs/TextInput';
+import { TimeInputElement } from '../Inputs/TimeInput';
+import { CardElementType } from './CardElementType';
+import { ImageElement } from './Image';
+import { TextBlockElement } from './TextBlock';
+export class CardElementFactory {
+    static create(json) {
+        if (!json) {
+            return null;
+        }
+        let cardElement;
+        switch (json.type) {
+            case CardElementType.Image:
+                cardElement = new ImageElement(json);
+                break;
+            case CardElementType.TextBlock:
+                cardElement = new TextBlockElement(json);
+                break;
+            case CardElementType.Column:
+                cardElement = new ColumnElement(json);
+                break;
+            case CardElementType.ColumnSet:
+                cardElement = new ColumnSetElement(json);
+                break;
+            case CardElementType.Container:
+                cardElement = new ContainerElement(json);
+                break;
+            case CardElementType.FactSet:
+                cardElement = new FactSetElement(json);
+                break;
+            case CardElementType.ImageSet:
+                cardElement = new ImageSetElement(json);
+                break;
+            case CardElementType.InputText:
+                cardElement = new TextInputElement(json);
+                break;
+            case CardElementType.DateInput:
+                cardElement = new DateInputElement(json);
+                break;
+            case CardElementType.TimeInput:
+                cardElement = new TimeInputElement(json);
+                break;
+            default:
+                cardElement = null;
+                break;
+        }
+        return cardElement;
+    }
+    static createSet(json) {
+        let cardElementSet = [];
+        if (json && json.length > 0) {
+            json.forEach((item) => {
+                let cardElement = CardElementFactory.create(item);
+                if (cardElement && cardElement.isValidJSON) {
+                    cardElementSet.push(cardElement);
+                }
+            });
+        }
+        return cardElementSet;
+    }
+}

dist/Schema/Elements/CardElementType.js

@@ -1,4 +1,4 @@
-var CardElementType;
+export var CardElementType;
 (function (CardElementType) {
     CardElementType["Column"] = "Column";
     CardElementType["ColumnSet"] = "ColumnSet";
@@ -9,9 +9,8 @@ var CardElementType;
     CardElementType["TextBlock"] = "TextBlock";
     CardElementType["InputText"] = "Input.Text";
     CardElementType["InputNumber"] = "Input.Number";
-    CardElementType["InputDate"] = "Input.Date";
-    CardElementType["InputTime"] = "Input.Time";
+    CardElementType["DateInput"] = "Input.Date";
+    CardElementType["TimeInput"] = "Input.Time";
     CardElementType["InputToggle"] = "Input.Toggle";
     CardElementType["InputChoiceSet"] = "Input.ChoiceSet";
 })(CardElementType || (CardElementType = {}));
-export default CardElementType;

dist/Schema/Elements/Creator.js

@@ -1,65 +0,0 @@
-import CardElementType from './CardElementType';
-import Image from './Image';
-import TextBlock from './TextBlock';
-import Column from '../Containers/Column';
-import ColumnSet from '../Containers/ColumnSet';
-import Container from '../Containers/Container';
-import FactSet from '../Containers/FactSet';
-import ImageSet from '../Containers/ImageSet';
-import InputText from '../Inputs/InputText';
-import InputDate from '../Inputs/InputDate';
-import InputTime from '../Inputs/InputTime';
-export function createCardElement(json) {
-    if (!json) {
-        return null;
-    }
-    let cardElement;
-    switch (json.type) {
-        case CardElementType.Image:
-            cardElement = new Image(json);
-            break;
-        case CardElementType.TextBlock:
-            cardElement = new TextBlock(json);
-            break;
-        case CardElementType.Column:
-            cardElement = new Column(json);
-            break;
-        case CardElementType.ColumnSet:
-            cardElement = new ColumnSet(json);
-            break;
-        case CardElementType.Container:
-            cardElement = new Container(json);
-            break;
-        case CardElementType.FactSet:
-            cardElement = new FactSet(json);
-            break;
-        case CardElementType.ImageSet:
-            cardElement = new ImageSet(json);
-            break;
-        case CardElementType.InputText:
-            cardElement = new InputText(json);
-            break;
-        case CardElementType.InputDate:
-            cardElement = new InputDate(json);
-            break;
-        case CardElementType.InputTime:
-            cardElement = new InputTime(json);
-            break;
-        default:
-            cardElement = null;
-            break;
-    }
-    return cardElement;
-}
-export function createCardElementSet(json) {
-    let cardElementSet = [];
-    if (json && json.length > 0) {
-        json.forEach((item) => {
-            let cardElement = createCardElement(item);
-            if (cardElement && cardElement.isValidJSON) {
-                cardElementSet.push(cardElement);
-            }
-        });
-    }
-    return cardElementSet;
-}

dist/Schema/Elements/Image.js

@@ -1,9 +1,9 @@
+import { Utils } from '../../utils';
+import { ActionFactory } from '../Actions/ActionFactory';
 import { HorizontalAlignment, ImageSize, ImageStyle, } from '../enums';
-import { getStringEnumValueOrDefault } from '../../utils';
-import { createAction } from '../Actions/Creator';
-import CardElement from './CardElement';
-import CardElementType from './CardElementType';
-export default class Image extends CardElement {
+import { CardElement } from './CardElement';
+import { CardElementType } from './CardElementType';
+export class ImageElement extends CardElement {
     constructor(json) {
         super(json);
         this.size = ImageSize.Auto;
@@ -11,10 +11,10 @@ export default class Image extends CardElement {
             this.url = json.url;
             this.altText = json.altText;
             this.horizontalAlignment =
-                getStringEnumValueOrDefault(HorizontalAlignment, json.horizontalAlignment, HorizontalAlignment.Left);
-            this.selectAction = createAction(json.selectAction);
-            this.size = getStringEnumValueOrDefault(ImageSize, json.size, ImageSize.Auto);
-            this.style = getStringEnumValueOrDefault(ImageStyle, json.style, ImageStyle.Default);
+                Utils.getStringEnumValueOrDefault(HorizontalAlignment, json.horizontalAlignment, HorizontalAlignment.Left);
+            this.selectAction = ActionFactory.create(json.selectAction);
+            this.size = Utils.getStringEnumValueOrDefault(ImageSize, json.size, ImageSize.Auto);
+            this.style = Utils.getStringEnumValueOrDefault(ImageStyle, json.style, ImageStyle.Default);
         }
     }
     getTypeName() {
@@ -23,8 +23,17 @@ export default class Image extends CardElement {
     getRequiredProperties() {
         return ['url'];
     }
+    supportAction() {
+        return true;
+    }
+    getAction() {
+        return this.selectAction;
+    }
+    getActions() {
+        return [this.getAction()];
+    }
     setSize(size) {
-        this.size = getStringEnumValueOrDefault(ImageSize, size, ImageSize.Auto);
+        this.size = Utils.getStringEnumValueOrDefault(ImageSize, size, ImageSize.Auto);
     }
     isFixedSize() {
         return this.size !== ImageSize.Auto && this.size !== ImageSize.Stretch;

dist/Schema/Elements/TextBlock.js

@@ -1,19 +1,19 @@
-import { HorizontalAlignment, TextColor, FontSize, FontWeight } from '../enums';
-import { getStringEnumValueOrDefault } from '../../utils';
-import CardElement from './CardElement';
-import CardElementType from './CardElementType';
-export default class TextBlock extends CardElement {
+import { Utils } from '../../utils';
+import { FontSize, FontWeight, HorizontalAlignment, TextColor } from '../enums';
+import { CardElement } from './CardElement';
+import { CardElementType } from './CardElementType';
+export class TextBlockElement extends CardElement {
     constructor(json) {
         super(json);
         if (this.isValidJSON) {
             this.text = json.text;
-            this.color = getStringEnumValueOrDefault(TextColor, json.color, TextColor.Default);
+            this.color = Utils.getStringEnumValueOrDefault(TextColor, json.color, TextColor.Default);
             this.horizontalAlignment =
-                getStringEnumValueOrDefault(HorizontalAlignment, json.horizontalAlignment, HorizontalAlignment.Left);
+                Utils.getStringEnumValueOrDefault(HorizontalAlignment, json.horizontalAlignment, HorizontalAlignment.Left);
             this.isSubtle = json.isSubtle || false;
             this.maxLines = json.maxLines;
-            this.size = getStringEnumValueOrDefault(FontSize, json.size, FontSize.Default);
-            this.weight = getStringEnumValueOrDefault(FontWeight, json.weight, FontWeight.Default);
+            this.size = Utils.getStringEnumValueOrDefault(FontSize, json.size, FontSize.Default);
+            this.weight = Utils.getStringEnumValueOrDefault(FontWeight, json.weight, FontWeight.Default);
             this.wrap = json.wrap || false;
         }
     }

dist/Schema/Inputs/ChoiceInput.js

@@ -1,5 +1,5 @@
-import TypedElement from '../TypedElement';
-export default class InputChoice extends TypedElement {
+import { TypedElement } from '../TypedElement';
+export class ChoiceInputElement extends TypedElement {
     constructor(json) {
         super(json);
         if (this.isValidJSON) {

dist/Schema/Inputs/ChoiceInputSet.js

@@ -1,15 +1,15 @@
-import { ChoiceSetStyle, } from '../enums';
-import { getEnumValueOrDefault } from '../../utils';
-import CardElementType from '../Elements/CardElementType';
-import Input from './Input';
-import InputChoice from './InputChoice';
-export default class InputChoiceSet extends Input {
+import { Utils } from '../../utils';
+import { CardElementType } from '../Elements/CardElementType';
+import { ChoiceSetStyle } from '../enums';
+import { ChoiceInputElement } from './ChoiceInput';
+import { InputElement } from './Input';
+export class ChoiceInputSetElement extends InputElement {
     constructor(json) {
         super(json);
         this.choices = [];
         if (this.isValidJSON) {
             this.isMultiSelect = json.isMultiSelect || false;
-            this.style = getEnumValueOrDefault(ChoiceSetStyle, json.style, ChoiceSetStyle.Compact);
+            this.style = Utils.getEnumValueOrDefault(ChoiceSetStyle, json.style, ChoiceSetStyle.Compact);
             this.choices = this.createChoiceSet(json.choices);
         }
     }
@@ -23,7 +23,7 @@ export default class InputChoiceSet extends Input {
         let inputChoiceSet = [];
         if (json && json.length > 0) {
             json.forEach((item) => {
-                let inputChoice = new InputChoice(item);
+                let inputChoice = new ChoiceInputElement(item);
                 if (inputChoice && inputChoice.isValidJSON) {
                     inputChoiceSet.push(inputChoice);
                 }

dist/Schema/Inputs/DateInput.js

@@ -1,6 +1,6 @@
-import CardElementType from '../Elements/CardElementType';
-import Input from './Input';
-export default class InputTime extends Input {
+import { CardElementType } from '../Elements/CardElementType';
+import { InputElement } from './Input';
+export class DateInputElement extends InputElement {
     constructor(json) {
         super(json);
         if (this.isValidJSON) {
@@ -10,7 +10,7 @@ export default class InputTime extends Input {
         }
     }
     getTypeName() {
-        return CardElementType.InputTime;
+        return CardElementType.DateInput;
     }
     getRequiredProperties() {
         return ['id'];

dist/Schema/Inputs/Input.js

@@ -1,5 +1,5 @@
-import CardElement from '../Elements/CardElement';
-export default class Input extends CardElement {
+import { CardElement } from '../Elements/CardElement';
+export class InputElement extends CardElement {
     constructor(json) {
         super(json);
         if (this.isValidJSON) {

dist/Schema/Inputs/NumberInput.js

@@ -1,6 +1,6 @@
-import CardElementType from '../Elements/CardElementType';
-import Input from './Input';
-export default class InputNumber extends Input {
+import { CardElementType } from '../Elements/CardElementType';
+import { InputElement } from './Input';
+export class NumberInputElement extends InputElement {
     constructor(json) {
         super(json);
         if (this.isValidJSON) {

dist/Schema/Inputs/TextInput.js

@@ -1,15 +1,15 @@
-import { InputTextStyle, } from '../enums';
-import { getEnumValueOrDefault } from '../../utils';
-import CardElementType from '../Elements/CardElementType';
-import Input from './Input';
-export default class InputText extends Input {
+import { Utils } from '../../utils';
+import { CardElementType } from '../Elements/CardElementType';
+import { InputTextStyle } from '../enums';
+import { InputElement } from './Input';
+export class TextInputElement extends InputElement {
     constructor(json) {
         super(json);
         if (this.isValidJSON) {
             this.isMultiline = json.isMultiline || false;
             this.maxLength = json.maxLength;
             this.placeholder = json.placeholder;
-            this.style = getEnumValueOrDefault(InputTextStyle, json.style, InputTextStyle.Text);
+            this.style = Utils.getEnumValueOrDefault(InputTextStyle, json.style, InputTextStyle.Text);
         }
     }
     getTypeName() {

dist/Schema/Inputs/TimeInput.js

@@ -0,0 +1,18 @@
+import { CardElementType } from '../Elements/CardElementType';
+import { InputElement } from './Input';
+export class TimeInputElement extends InputElement {
+    constructor(json) {
+        super(json);
+        if (this.isValidJSON) {
+            this.max = json.max;
+            this.min = json.min;
+            this.placeholder = json.placeholder;
+        }
+    }
+    getTypeName() {
+        return CardElementType.TimeInput;
+    }
+    getRequiredProperties() {
+        return ['id'];
+    }
+}

dist/Schema/Inputs/ToggleInput.js

@@ -1,6 +1,6 @@
-import CardElementType from '../Elements/CardElementType';
-import Input from './Input';
-export default class InputToggle extends Input {
+import { CardElementType } from '../Elements/CardElementType';
+import { InputElement } from './Input';
+export class ToggleInputElement extends InputElement {
     constructor(json) {
         super(json);
         if (this.isValidJSON) {

dist/Schema/TypedElement.js

@@ -1,5 +1,5 @@
-import { isValidValue } from '../utils';
-export default class TypedElement {
+import { Utils } from '../utils';
+export class TypedElement {
     constructor(json) {
         this.isValidJSON = true;
         this.type = this.getTypeName();
@@ -8,6 +8,15 @@ export default class TypedElement {
         }
         this.validateJSON(json, this.getRequiredProperties());
     }
+    supportAction() {
+        return false;
+    }
+    getAction() {
+        return undefined;
+    }
+    getActions() {
+        return [];
+    }
     noTypeName() {
         this.isValidJSON = false;
         console.error('Please return a valid type name in \'getTypeName()\' method.');
@@ -27,7 +36,7 @@ export default class TypedElement {
         if (requiredProperties) {
             for (let i = 0; i < requiredProperties.length; i++) {
                 let property = requiredProperties[i];
-                if (!isValidValue(json[property])) {
+                if (!Utils.isValidValue(json[property])) {
                     this.invalidRequiredProperty(property);
                     return;
                 }

dist/View/Actions/ActionView.js

@@ -1,25 +1,16 @@
 import React from 'react';
-import { TouchableOpacity, Linking, } from 'react-native';
-import styleManager from '../Style/styleManager';
-import AdaptiveCardText from '../Shared/AdaptiveCardText';
-import ActionType from '../../Schema/Actions/ActionType';
-export default class ActionView extends React.Component {
+import { TouchableOpacity, } from 'react-native';
+import { ActionContext } from '../../Context/ActionContext';
+import { AdaptiveCardText } from '../Shared/AdaptiveCardText';
+import { styleManager } from '../Styles/StyleManager';
+export class ActionView extends React.Component {
     constructor(props) {
         super(props);
         this.onPress = () => {
-            const { action } = this.props;
-            switch (action.type) {
-                case ActionType.OpenUrl:
-                    this.onOpenUrlAction(action);
-                    break;
-                case ActionType.ShowCard:
-                    this.onShowCardAction(action);
-                    break;
-                case ActionType.Submit:
-                    this.onSubmitAction(action);
-                    break;
-                default:
-                    break;
+            let actionContext = ActionContext.getInstance();
+            let callback = actionContext.getActionHandler();
+            if (callback) {
+                callback(this.props.action);
             }
         };
         this.styleConfig = styleManager.getStyle();
@@ -29,7 +20,7 @@ export default class ActionView extends React.Component {
         if (!action || !action.isValid()) {
             return;
         }
-        return React.createElement(TouchableOpacity, { style: [{
+        return (React.createElement(TouchableOpacity, { style: [{
                     flex: 1,
                     flexDirection: 'row',
                     justifyContent: 'center',
@@ -44,23 +35,7 @@ export default class ActionView extends React.Component {
             React.createElement(AdaptiveCardText, { style: {
                     fontSize: this.styleConfig.action.button.fontSize,
                     color: this.styleConfig.action.button.textColor,
-                }, numberOfLines: 1 }, action.title));
-    }
-    onOpenUrlAction(action) {
-        Linking.canOpenURL(action.url).then((supported) => {
-            if (supported) {
-                Linking.openURL(action.url);
-            }
-        });
-    }
-    onShowCardAction(action) {
-        const { onShowCard } = this.props;
-        if (typeof onShowCard === 'function') {
-            onShowCard(action.card);
-        }
-    }
-    onSubmitAction(action) {
-        return;
+                }, numberOfLines: 1 }, action.title)));
     }
 }
 ActionView.defaultProps = {

dist/View/AdaptiveCardSingleView.js

@@ -1,20 +1,20 @@
 import React from 'react';
 import { View, } from 'react-native';
-import ImageBackground from './Shared/ImageBackground';
-import styleManager from './Style/styleManager';
-import AdaptiveCard from '../Schema/AdaptiveCard';
-import ActionView from './Actions/ActionView';
-import CardElementView from './Elements/CardElementView';
-export default class AdaptiveCardView extends React.PureComponent {
+import { AdaptiveCardElement } from '../Schema/AdaptiveCard';
+import { ActionView } from './Actions/ActionView';
+import { CardElementView } from './Elements/CardElementView';
+import { ImageBackground } from './Shared/ImageBackground';
+import { styleManager } from './Styles/StyleManager';
+export class AdaptiveCardSingleView extends React.PureComponent {
     constructor(props) {
         super(props);
         this.styleConfig = styleManager.getStyle();
-        this.adaptiveCard = new AdaptiveCard(props.adaptiveCard);
+        this.adaptiveCard = new AdaptiveCardElement(props.adaptiveCard);
         console.log('AdaptiveCard', this.adaptiveCard);
     }
     componentWillReceiveProps(nextProps) {
         if (nextProps.adaptiveCard) {
-            this.adaptiveCard = new AdaptiveCard(nextProps.adaptiveCard);
+            this.adaptiveCard = new AdaptiveCardElement(nextProps.adaptiveCard);
         }
     }
     render() {
@@ -29,36 +29,36 @@ export default class AdaptiveCardView extends React.PureComponent {
             borderRadius: this.styleConfig.card.borderRadius,
         }, this.props.style);
         if (this.adaptiveCard.backgroundImage) {
-            return React.createElement(ImageBackground, { containerStyle: cardStyle, imageStyle: {
+            return (React.createElement(ImageBackground, { containerStyle: cardStyle, imageStyle: {
                     borderRadius: this.styleConfig.card.borderRadius,
                 }, source: { uri: this.adaptiveCard.backgroundImage } },
                 React.createElement(View, { style: { flex: 1, padding: this.styleConfig.card.padding } },
                     this.renderBody(),
-                    this.renderActions()));
+                    this.renderActions())));
         }
         else {
-            return React.createElement(View, { style: [cardStyle, {
+            return (React.createElement(View, { style: [cardStyle, {
                         padding: this.styleConfig.card.padding,
                     }] },
                 this.renderBody(),
-                this.renderActions());
+                this.renderActions()));
         }
     }
     renderBody() {
         if (!this.adaptiveCard.hasBody()) {
             return null;
         }
-        return React.createElement(View, { style: { flex: 1 } }, this.adaptiveCard.body.map((cardElement, index) => React.createElement(CardElementView, { key: 'body' + index, index: index, cardElement: cardElement })));
+        return (React.createElement(View, { style: { flex: 1 } }, this.adaptiveCard.body.map((cardElement, index) => React.createElement(CardElementView, { key: 'body' + index, index: index, cardElement: cardElement }))));
     }
     renderActions() {
         if (!this.adaptiveCard.hasActions()) {
             return null;
         }
-        return React.createElement(View, { style: {
+        return (React.createElement(View, { style: {
                 flex: 1,
                 flexDirection: styleManager.getActionSetFlexDirectionValue(),
                 alignItems: 'stretch',
                 marginTop: this.styleConfig.action.actionSet.spacing,
-            } }, this.adaptiveCard.actions.map((action, index) => React.createElement(ActionView, { key: 'action' + index, index: index, action: action, onShowCard: this.props.onShowCard })));
+            } }, this.adaptiveCard.actions.map((action, index) => React.createElement(ActionView, { key: index, action: action, index: index }))));
     }
 }

dist/View/AdaptiveCardView.js

@@ -1,21 +1,38 @@
 import React from 'react';
-import { View, } from 'react-native';
-import styleManager from './Style/styleManager';
-import AdaptiveCardSingleView from './AdaptiveCardSingleView';
-export default class AdaptiveCardView extends React.PureComponent {
+import { Linking, View, } from 'react-native';
+import { ActionContext } from '../Context/ActionContext';
+import { AdaptiveCardSingleView } from './AdaptiveCardSingleView';
+import { styleManager } from './Styles/StyleManager';
+export class AdaptiveCardView extends React.PureComponent {
     constructor(props) {
         super(props);
-        this.onShowCard = (actionCard) => {
+        this.onOpenUrl = (action) => {
+            Linking.canOpenURL(action.url).then((supported) => {
+                if (supported) {
+                    Linking.openURL(action.url);
+                }
+            });
+        };
+        this.onShowCard = (action) => {
             if (!this.isComponentUnmounted) {
                 this.setState({
-                    actionCard,
+                    actionCard: action.card,
                 });
             }
         };
+        this.onSubmit = (action) => {
+            if (this.props.onSubmit) {
+                this.props.onSubmit(action.data);
+            }
+        };
         this.styleConfig = styleManager.addStyle(props.overrideStyle);
         this.state = {
             actionCard: null,
         };
+        let actionContext = ActionContext.getInstance();
+        actionContext.registerOpenUrlHandler(this.onOpenUrl);
+        actionContext.registerShowCardHandler(this.onShowCard);
+        actionContext.registerSubmitHandler(this.onSubmit);
     }
     componentWillReceiveProps(nextProps) {
         this.styleConfig = styleManager.addStyle(nextProps.overrideStyle);
@@ -28,13 +45,13 @@ export default class AdaptiveCardView extends React.PureComponent {
         if (!adaptiveCard) {
             return null;
         }
-        return React.createElement(View, { style: { flex: 1 } },
-            React.createElement(AdaptiveCardSingleView, { adaptiveCard: adaptiveCard, onShowCard: this.onShowCard }),
+        return (React.createElement(View, { style: { flex: 1 } },
+            React.createElement(AdaptiveCardSingleView, { formId: 'root', adaptiveCard: adaptiveCard }),
             this.state.actionCard ?
-                React.createElement(AdaptiveCardSingleView, { adaptiveCard: this.state.actionCard, style: {
+                React.createElement(AdaptiveCardSingleView, { formId: 'first', adaptiveCard: this.state.actionCard, style: {
                         marginTop: this.styleConfig.card.spacing,
                     } })
                 :
-                    null);
+                    null));
     }
 }

dist/View/Containers/ColumnSetView.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import { View, } from 'react-native';
-import CardElementWrapper from '../Shared/CardElementWrapper';
-import CardElementView from '../Elements/CardElementView';
-export default class ColumnSetView extends React.PureComponent {
+import { CardElementView } from '../Elements/CardElementView';
+import { CardElementWrapper } from '../Shared/CardElementWrapper';
+export class ColumnSetView extends React.PureComponent {
     constructor(props) {
         super(props);
         this.renderColumn = (column, index) => {
-            return React.createElement(CardElementView, { key: 'column' + index, index: index, containerWidth: this.state.viewWidth, cardElement: column });
+            return (React.createElement(CardElementView, { key: 'column' + index, index: index, containerWidth: this.state.viewWidth, cardElement: column }));
         };
         this.onLayout = (event) => {
             if (!this.isComponentUnmounted && !this.state.viewWidth && this.hasFixedWidthColumns) {
@@ -30,14 +30,14 @@ export default class ColumnSetView extends React.PureComponent {
         if (!columnSet || !columnSet.isValid() || !columnSet.hasColumns()) {
             return null;
         }
-        return React.createElement(CardElementWrapper, { cardElement: columnSet, index: index, style: {
+        return (React.createElement(CardElementWrapper, { cardElement: columnSet, index: index, style: {
                 flex: 1,
             } },
             React.createElement(View, { style: {
                     flex: 1,
                     flexDirection: 'row',
                     justifyContent: this.isEqualDistribution ? 'space-between' : 'flex-start',
-                }, onLayout: this.onLayout }, columnSet.columns.map(this.renderColumn)));
+                }, onLayout: this.onLayout }, columnSet.columns.map(this.renderColumn))));
     }
 }
 ColumnSetView.defaultProps = {

dist/View/Containers/ColumnView.js

@@ -1,16 +1,16 @@
 import React from 'react';
 import { View, } from 'react-native';
 import { ColumnWidth, } from '../../Schema/enums';
-import CardElementWrapper from '../Shared/CardElementWrapper';
-import CardElementView from '../Elements/CardElementView';
-export default class ColumnView extends React.PureComponent {
+import { CardElementView } from '../Elements/CardElementView';
+import { CardElementWrapper } from '../Shared/CardElementWrapper';
+export class ColumnView extends React.PureComponent {
     render() {
         const { column, index } = this.props;
         if (!column || !column.isValid() || !column.hasItems()) {
             return null;
         }
-        return React.createElement(CardElementWrapper, { cardElement: column, index: index, style: this.getViewStyle() },
-            React.createElement(View, { style: { flex: 1 } }, column.items.map((cardElement, index) => React.createElement(CardElementView, { key: 'containerItems' + index, index: index, cardElement: cardElement }))));
+        return (React.createElement(CardElementWrapper, { cardElement: column, index: index, style: this.getViewStyle() },
+            React.createElement(View, { style: { flex: 1 } }, column.items.map((cardElement, index) => React.createElement(CardElementView, { key: 'containerItems' + index, index: index, cardElement: cardElement })))));
     }
     getViewStyle() {
         const { column, containerWidth } = this.props;

dist/View/Containers/ContainerView.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { View, } from 'react-native';
-import { ContainerStyle, } from '../../Schema/enums';
-import styleManager from '../Style/styleManager';
-import CardElementWrapper from '../Shared/CardElementWrapper';
-import CardElementView from '../Elements/CardElementView';
-export default class ContainerView extends React.PureComponent {
+import { ContainerStyle } from '../../Schema/enums';
+import { CardElementView } from '../Elements/CardElementView';
+import { CardElementWrapper } from '../Shared/CardElementWrapper';
+import { styleManager } from '../Styles/StyleManager';
+export class ContainerView extends React.PureComponent {
     constructor(props) {
         super(props);
         this.styleConfig = styleManager.getStyle();
@@ -14,14 +14,14 @@ export default class ContainerView extends React.PureComponent {
         if (!container || !container.isValid() || !container.hasItems()) {
             return null;
         }
-        return React.createElement(CardElementWrapper, { cardElement: container, index: index, style: {
+        return (React.createElement(CardElementWrapper, { cardElement: container, index: index, style: {
                 flex: 1,
             } },
             React.createElement(View, { style: [{
                         flex: 1,
                     },
                     this.getContainerStyle(container.style)
-                ] }, container.items.map((cardElement, index) => React.createElement(CardElementView, { key: 'containerItems' + index, index: index, cardElement: cardElement }))));
+                ] }, container.items.map((cardElement, index) => React.createElement(CardElementView, { key: 'containerItems' + index, index: index, cardElement: cardElement })))));
     }
     getContainerStyle(style) {
         let containerStyle;

dist/View/Containers/FactSetView.js

@@ -1,18 +1,18 @@
 import React from 'react';
-import { View, } from 'react-native';
-import CardElementWrapper from '../Shared/CardElementWrapper';
-import FactView from './FactView';
-export default class FactSetView extends React.PureComponent {
+import { View } from 'react-native';
+import { CardElementWrapper } from '../Shared/CardElementWrapper';
+import { FactView } from './FactView';
+export class FactSetView extends React.PureComponent {
     render() {
         const { factSet, index } = this.props;
         if (!factSet || !factSet.isValid() || !factSet.hasFacts()) {
             return null;
         }
-        return React.createElement(CardElementWrapper, { cardElement: factSet, index: index, style: {
+        return (React.createElement(CardElementWrapper, { cardElement: factSet, index: index, style: {
                 flex: 1,
             } },
             React.createElement(View, { style: {
                     flex: 1,
-                } }, factSet.facts.map((fact, index) => React.createElement(FactView, { key: 'fact' + index, fact: fact }))));
+                } }, factSet.facts.map((fact, index) => React.createElement(FactView, { key: 'fact' + index, fact: fact })))));
     }
 }

dist/View/Containers/FactView.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { View, } from 'react-native';
-import styleManager from '../Style/styleManager';
-import AdaptiveCardText from '../Shared/AdaptiveCardText';
-export default class FactView extends React.PureComponent {
+import { View } from 'react-native';
+import { AdaptiveCardText } from '../Shared/AdaptiveCardText';
+import { styleManager } from '../Styles/StyleManager';
+export class FactView extends React.PureComponent {
     constructor(props) {
         super(props);
         this.styleConfig = styleManager.getStyle();
@@ -12,7 +12,7 @@ export default class FactView extends React.PureComponent {
         if (!fact || !fact.isValid()) {
             return null;
         }
-        return React.createElement(View, { style: {
+        return (React.createElement(View, { style: {
                 flex: 1,
                 flexDirection: 'row',
                 justifyContent: 'flex-start'
@@ -24,6 +24,6 @@ export default class FactView extends React.PureComponent {
             React.createElement(AdaptiveCardText, { style: {
                     color: this.styleConfig.fact.valueColor,
                     marginLeft: this.styleConfig.fact.spacing,
-                } }, fact.value));
+                } }, fact.value)));
     }
 }

dist/View/Containers/ImageSetView.js

@@ -1,15 +1,15 @@
 import React from 'react';
 import { FlatList, View, } from 'react-native';
-import styleManager from '../Style/styleManager';
-import CardElementWrapper from '../Shared/CardElementWrapper';
-import CardElementView from '../Elements/CardElementView';
-export default class ImageSetView extends React.PureComponent {
+import { CardElementView } from '../Elements/CardElementView';
+import { CardElementWrapper } from '../Shared/CardElementWrapper';
+import { styleManager } from '../Styles/StyleManager';
+export class ImageSetView extends React.PureComponent {
     constructor() {
         super(...arguments);
         this.renderImage = (image, index) => {
             const { imageSet } = this.props;
             image.setSize(imageSet.imageSize);
-            return React.createElement(CardElementView, { key: 'image' + index, index: index, cardElement: image });
+            return (React.createElement(CardElementView, { key: 'image' + index, index: index, cardElement: image }));
         };
     }
     render() {
@@ -17,7 +17,7 @@ export default class ImageSetView extends React.PureComponent {
         if (!imageSet || !imageSet.isValid() || !imageSet.hasImages()) {
             return null;
         }
-        return React.createElement(CardElementWrapper, { cardElement: imageSet, index: index, style: {
+        return (React.createElement(CardElementWrapper, { cardElement: imageSet, index: index, style: {
                 flex: 1,
             } }, styleManager.isHorizontalImageSet() ?
             React.createElement(FlatList, { style: { flex: 1 }, horizontal: true, data: imageSet.images, renderItem: ({ item, index }) => this.renderImage(item, index), keyExtractor: (item, index) => 'image' + index, showsHorizontalScrollIndicator: false })
@@ -25,6 +25,6 @@ export default class ImageSetView extends React.PureComponent {
                 React.createElement(View, { style: {
                         flex: 1,
                         flexWrap: 'wrap',
-                    } }, imageSet.images.map(this.renderImage)));
+                    } }, imageSet.images.map(this.renderImage))));
     }
 }

dist/View/Elements/CardElementView.js

@@ -1,16 +1,16 @@
 import React from 'react';
-import CardElementType from '../../Schema/Elements/CardElementType';
-import TextBlockView from './TextBlockView';
-import ImageView from './ImageView';
-import ImageSetView from '../Containers/ImageSetView';
-import FactSetView from '../Containers/FactSetView';
-import ColumnView from '../Containers/ColumnView';
-import ColumnSetView from '../Containers/ColumnSetView';
-import ContainerView from '../Containers/ContainerView';
-import InputTextView from '../Inputs/InputTextView';
-import InputDateView from '../Inputs/InputDateView';
-import InputTimeView from '../Inputs/InputTimeView';
-export default class CardElementView extends React.PureComponent {
+import { CardElementType } from '../../Schema/Elements/CardElementType';
+import { ColumnSetView } from '../Containers/ColumnSetView';
+import { ColumnView } from '../Containers/ColumnView';
+import { ContainerView } from '../Containers/ContainerView';
+import { FactSetView } from '../Containers/FactSetView';
+import { ImageSetView } from '../Containers/ImageSetView';
+import { DateInputView } from '../Inputs/DateInputView';
+import { TextInputView } from '../Inputs/TextInputView';
+import { TimeInputView } from '../Inputs/TimeInputView';
+import { ImageView } from './ImageView';
+import { TextBlockView } from './TextBlockView';
+export class CardElementView extends React.PureComponent {
     render() {
         const { cardElement, index, containerWidth } = this.props;
         if (!cardElement || !cardElement.isValid()) {
@@ -18,25 +18,25 @@ export default class CardElementView extends React.PureComponent {
         }
         switch (cardElement.type) {
             case CardElementType.TextBlock:
-                return React.createElement(TextBlockView, { textBlock: cardElement, index: index });
+                return (React.createElement(TextBlockView, { textBlock: cardElement, index: index }));
             case CardElementType.Image:
-                return React.createElement(ImageView, { image: cardElement, index: index });
+                return (React.createElement(ImageView, { image: cardElement, index: index }));
             case CardElementType.ImageSet:
-                return React.createElement(ImageSetView, { imageSet: cardElement, index: index });
+                return (React.createElement(ImageSetView, { imageSet: cardElement, index: index }));
             case CardElementType.Container:
-                return React.createElement(ContainerView, { container: cardElement, index: index });
+                return (React.createElement(ContainerView, { container: cardElement, index: index }));
             case CardElementType.Column:
-                return React.createElement(ColumnView, { column: cardElement, containerWidth: containerWidth, index: index });
+                return (React.createElement(ColumnView, { column: cardElement, containerWidth: containerWidth, index: index }));
             case CardElementType.ColumnSet:
-                return React.createElement(ColumnSetView, { columnSet: cardElement, index: index });
+                return (React.createElement(ColumnSetView, { columnSet: cardElement, index: index }));
             case CardElementType.FactSet:
-                return React.createElement(FactSetView, { factSet: cardElement, index: index });
+                return (React.createElement(FactSetView, { factSet: cardElement, index: index }));
             case CardElementType.InputText:
-                return React.createElement(InputTextView, { inputText: cardElement, index: index });
-            case CardElementType.InputDate:
-                return React.createElement(InputDateView, { inputDate: cardElement, index: index });
-            case CardElementType.InputTime:
-                return React.createElement(InputTimeView, { inputTime: cardElement, index: index });
+                return (React.createElement(TextInputView, { inputFieldId: cardElement.id, containerId: this.props.containerId, inputText: cardElement, index: index }));
+            case CardElementType.DateInput:
+                return (React.createElement(DateInputView, { inputFieldId: cardElement.id, containerId: this.props.containerId, inputDate: cardElement, index: index }));
+            case CardElementType.TimeInput:
+                return (React.createElement(TimeInputView, { inputFieldId: cardElement.id, containerId: this.props.containerId, inputTime: cardElement, index: index }));
             default:
                 return null;
         }

dist/View/Elements/ImageView.js

@@ -1,15 +1,15 @@
 import React from 'react';
-import { View, Text, Image, StyleSheet, } from 'react-native';
-import { HorizontalAlignment, ImageSize, ImageStyle, FlexImageAlignment, } from '../../Schema/enums';
-import styleManager from '../Style/styleManager';
-import CardElementWrapper from '../Shared/CardElementWrapper';
+import { Image, StyleSheet, Text, View, } from 'react-native';
+import { FlexImageAlignment, HorizontalAlignment, ImageSize, ImageStyle, } from '../../Schema/enums';
+import { CardElementWrapper } from '../Shared/CardElementWrapper';
+import { styleManager } from '../Styles/StyleManager';
 const IMAGEMINSIZE = 18;
 var ImageFit;
 (function (ImageFit) {
     ImageFit[ImageFit["FlexibleWidth"] = 0] = "FlexibleWidth";
     ImageFit[ImageFit["FlexibleHeight"] = 1] = "FlexibleHeight";
 })(ImageFit || (ImageFit = {}));
-export default class ImageView extends React.PureComponent {
+export class ImageView extends React.PureComponent {
     constructor(props) {
         super(props);
         this.onLayout = (event) => {
@@ -105,7 +105,7 @@ export default class ImageView extends React.PureComponent {
         const borderRadius = image.style === ImageStyle.Person && dimensions ?
             dimensions.width / 2 :
             undefined;
-        return React.createElement(CardElementWrapper, { cardElement: image, index: index, style: styleManager.isHorizontalImageSet() ? undefined : { flex: 1 } },
+        return (React.createElement(CardElementWrapper, { cardElement: image, index: index, style: styleManager.isHorizontalImageSet() ? undefined : { flex: 1 } },
             React.createElement(View, { style: { flex: 1 }, onLayout: this.onLayout },
                 this.state.imageLoadSuccess ?
                     undefined :
@@ -116,10 +116,10 @@ export default class ImageView extends React.PureComponent {
                         height: dimensions ? dimensions.height : undefined,
                         alignSelf: this.getImageAlignment(image.horizontalAlignment, image.size),
                         borderRadius: borderRadius
-                    }, source: { uri: image.url }, onLoad: this.onLoad, onError: this.onError, resizeMode: 'cover', resizeMethod: 'auto' })));
+                    }, source: { uri: image.url }, onLoad: this.onLoad, onError: this.onError, resizeMode: 'cover', resizeMethod: 'auto' }))));
     }
     renderPlaceholder() {
-        return React.createElement(View, { style: [
+        return (React.createElement(View, { style: [
                 StyleSheet.absoluteFill,
                 {
                     alignItems: 'center',
@@ -130,7 +130,7 @@ export default class ImageView extends React.PureComponent {
                     fontSize: 32,
                     color: 'rgba(0, 0, 0, 0.5)',
                     textAlign: 'center'
-                } }, '\uE601'));
+                } }, '\uE601')));
     }
     getImageAlignment(alignment, imageSize) {
         let imageAlignment;

dist/View/Elements/TextBlockView.js

@@ -1,15 +1,15 @@
 import React from 'react';
 import { View, } from 'react-native';
-import styleManager from '../Style/styleManager';
-import AdaptiveCardText from '../Shared/AdaptiveCardText';
-import CardElementWrapper from '../Shared/CardElementWrapper';
-export default class TextBlockView extends React.PureComponent {
+import { AdaptiveCardText } from '../Shared/AdaptiveCardText';
+import { CardElementWrapper } from '../Shared/CardElementWrapper';
+import { styleManager } from '../Styles/StyleManager';
+export class TextBlockView extends React.PureComponent {
     render() {
         const { textBlock, index } = this.props;
         if (!textBlock || !textBlock.isValid()) {
             return null;
         }
-        return React.createElement(CardElementWrapper, { cardElement: textBlock, index: index, style: {
+        return (React.createElement(CardElementWrapper, { cardElement: textBlock, index: index, style: {
                 flex: 1,
             } },
             React.createElement(View, { style: {
@@ -19,9 +19,11 @@ export default class TextBlockView extends React.PureComponent {
                         backgroundColor: 'transparent',
                         fontSize: styleManager.getFontSize(textBlock.size),
                         fontWeight: styleManager.getFontWeight(textBlock.weight),
-                        color: textBlock.isSubtle ? styleManager.getSubtleColor(textBlock.color) : styleManager.getColor(textBlock.color),
+                        color: textBlock.isSubtle ?
+                            styleManager.getSubtleColor(textBlock.color) :
+                            styleManager.getColor(textBlock.color),
                         textAlign: textBlock.horizontalAlignment,
                         flexWrap: styleManager.getWrapStyle(textBlock.wrap),
-                    }, numberOfLines: textBlock.maxLines || undefined }, textBlock.text)));
+                    }, numberOfLines: textBlock.maxLines || undefined }, textBlock.text))));
     }
 }

dist/View/Inputs/DateInputView.js

@@ -7,8 +7,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import React from 'react';
-import { TouchableOpacity, DatePickerAndroid, Text, View } from 'react-native';
-export default class InputTexDateView extends React.PureComponent {
+import { DatePickerAndroid, Text, TouchableOpacity, View } from 'react-native';
+export class DateInputView extends React.PureComponent {
     constructor(props) {
         super(props);
         this.showDatePicker = () => __awaiter(this, void 0, void 0, function* () {
@@ -42,28 +42,16 @@ export default class InputTexDateView extends React.PureComponent {
         if (!inputDate || !inputDate.isValid()) {
             return null;
         }
-        return (
-            React.createElement(
-                TouchableOpacity,
-                {
-                    onPress: this.showDatePicker
-                },
-                React.createElement(
-                    View,
-                    {
-                        style: {
-                            borderColor: 'gray',
-                            borderWidth: 1,
-                            borderRadius: 4,
-                            paddingHorizontal: 10,
-                            paddingVertical: 6,
-                            marginVertical: 6,
-                            height: 38
-                        }
-                    },
-                    React.createElement(Text, null, this.state.date)
-                )
-            )
-        );
+        return (React.createElement(TouchableOpacity, { onPress: this.showDatePicker },
+            React.createElement(View, { style: {
+                    borderColor: 'gray',
+                    borderWidth: 1,
+                    borderRadius: 4,
+                    paddingHorizontal: 10,
+                    paddingVertical: 6,
+                    marginVertical: 6,
+                    height: 38
+                } },
+                React.createElement(Text, null, this.state.date))));
     }
 }