ACSimpleUsage.tsx

import React, { Component } from 'react';
// import AdaptiveCardView, { CustomButtonStyles, CustomTextStyles, CustomViewStyles, Types as ACT } from 'reactxp-adaptivecards';
import AdaptiveCardView from 'reactxp-adaptivecards';

import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    const card = {
      "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
      "version": "1.0",
      "type": "AdaptiveCard",
      "speak": "Your flight is confirmed for you and 3 other passengers from San Francisco to Amsterdam on Friday, October 10 8:30 AM",
      "body": [
        {
          "type": "TextBlock",
          "text": "Passengers",
          "weight": "bolder",
          "isSubtle": false
        },
        {
          "type": "TextBlock",
          "text": "Sarah Hum",
          "separator": true
        },
        {
          "type": "TextBlock",
          "text": "Jeremy Goldberg",
          "spacing": "none"
        }
      ]
    };

    const hostConfig = {
      "choiceSetInputValueSeparator": ",",
      "supportsInteractivity": true,
      "fontFamily": "Segoe UI",
      "spacing": {
        "small": 3,
        "default": 8,
        "medium": 20,
        "large": 30,
        "extraLarge": 40,
        "padding": 10
      },
      "separator": {
        "lineThickness": 1,
        "lineColor": "#EEEEEE"
      },
      "fontSizes": {
        "small": 12,
        "default": 14,
        "medium": 17,
        "large": 21,
        "extraLarge": 26
      },
      "fontWeights": {
        "lighter": 200,
        "default": 400,
        "bolder": 600
      },
      "imageSizes": {
        "small": 40,
        "medium": 80,
        "large": 160
      },
      "containerStyles": {
        "default": {
          "foregroundColors": {
            "default": {
              "default": "#333333",
              "subtle": "#EE333333"
            },
            "dark": {
              "default": "#000000",
              "subtle": "#66000000"
            },
            "light": {
              "default": "#FFFFFF",
              "subtle": "#33000000"
            },
            "accent": {
              "default": "#2E89FC",
              "subtle": "#882E89FC"
            },
            "good": {
              "default": "#54a254",
              "subtle": "#DD54a254"
            },
            "warning": {
              "default": "#c3ab23",
              "subtle": "#DDc3ab23"
            },
            "attention": {
              "default": "#FF0000",
              "subtle": "#DDFF0000"
            }
          },
          "backgroundColor": "#FFFFFF"
        },
        "emphasis": {
          "foregroundColors": {
            "default": {
              "default": "#333333",
              "subtle": "#EE333333"
            },
            "dark": {
              "default": "#000000",
              "subtle": "#66000000"
            },
            "light": {
              "default": "#FFFFFF",
              "subtle": "#33000000"
            },
            "accent": {
              "default": "#2E89FC",
              "subtle": "#882E89FC"
            },
            "good": {
              "default": "#54a254",
              "subtle": "#DD54a254"
            },
            "warning": {
              "default": "#c3ab23",
              "subtle": "#DDc3ab23"
            },
            "attention": {
              "default": "#FF0000",
              "subtle": "#DDFF0000"
            }
          },
          "backgroundColor": "#08000000"
        }
      },
      "actions": {
        "maxActions": 5,
        "spacing": "Default",
        "buttonSpacing": 10,
        "showCard": {
          "actionMode": "Inline",
          "inlineTopMargin": 16,
          "style": "emphasis"
        },
        "preExpandSingleShowCardAction": false,
        "actionsOrientation": "Horizontal",
        "actionAlignment": "Left"
      },
      "adaptiveCard": {
        "allowCustomStyle": false
      },
      "imageSet": {
        "imageSize": "Medium",
        "maxImageHeight": 100
      },
      "factSet": {
        "title": {
          "size": "Default",
          "color": "Default",
          "isSubtle": false,
          "weight": "Bolder",
          "warp": true
        },
        "value": {
          "size": "Default",
          "color": "Default",
          "isSubtle": false,
          "weight": "Default",
          "warp": true
        },
        "spacing": 10
      }
    };

    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to ReactXP</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <AdaptiveCardView
          adaptiveCard={card}
          skipSanitization={true} // The sanitization has already been performed in MessageContentNodes
          hostConfigs={hostConfig}
        /*width={ this.state.width }
        maxWidth={ this.props.renderOptions.cardMaxWidth }
        maxHeight={ this.props.renderOptions.cardMaxHeight }
        aspectRatio={ this.props.renderOptions.fixedAspectRatio }
        customButtonStyles={ this._customButtonStyles }
        customTextStyles={ this._customTextStyles }
        customViewStyles={ this._customViewStyles }
        eventEmitter={ this._eventEmitter }
        onExecuteAction={ this._onExecuteAction }*/
        />
      </div>
    );
  }
}

export default App;